Carl's Blog

Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript.


  • 首页

  • 归档

FDCon2018与会记录

发表于 2018-06-02 | | 阅读次数:

有幸参加在上海举办的FDCon2018第三届中国前端千人峰会,主题是“前端体验的融合开发之道”,以下是会议笔记的一些整理。

局限和突破–谈谈 Web 性能瓶颈和未来发展

判断用户网页性能

  1. painting timing api

    first paint:第一个和原navigator不一样的点

    first contentful paint: 首次绘制出dom内容

  2. user timing api

    performance.mark(“task”): navigationStart ⾄当前时间点;

    performance.measure(“name”, “task1”, “task2” ):两个时间戳之间的时间监测

  3. network information api

    类型: “bluetooth”, “cellular”, “ethernet”, “mixed”, “none”, “other”, “unknown”, “wifi”, “wimax”

    navigator.connection.onchange = changeHandler; (监听设备连接网络情况变化时的回调)

  4. device memory api

    值类型:0.25, 0.5, 1, 2, 4, 8。返回值规则是取离实际值最近的2的幂数,将其除以1024所得。

优化网页

  1. 节流

    document.visibilityState(visible, hidden(后台页面,最小化,锁屏),prerender,unloaded), 减少不不必要的开销,节约电源

    监测 DOM 元素的 可⻅见性 visibility 和 位置 position (IntersectionObserver)

  2. 优化资源加载

    Service Workers(PWA) — 资源缓存,持续加载,压缩实现

    link rel=”preload” href=”/url” as=”type” 预加载资源,但不执行,as 必须定义

    Web Storage 缓存重复访问资源

  3. 让浏览器更智能

    resource hints: dns-prefetch, preconnect, prefetch, prerender

    cooperative Scheduling of Background task: window.requestIdleCallback;

    使用原生api

  4. web assembly

    给予开发者操控 Web APIs 的能⼒

    WebAssembly MVP 设计和初步实现

    wpt项目:让 Web ⾔⾏⼀致 • 让浏览器器⾏动⼀致

    WPT项目官网截图

西西弗斯的转生

cicada ide 金蝉

需求变了 底层变了 -> 重复造轮子

有更高的体验要求,有更好的技术支持

事件调用栈 -> 函数调用栈: 代码热插拔 (eg:security guide)

目标

录制用例, 抗UI变化

记录每一次变化 -> 监听所有事件回调 -> 框架注入事件回调

能还原任一状态 -> 所有状态统一存储 -> 框架管理所有状态

有明确的语意标识 -> 组件命名&语义分析 -> 框架支持命名

业务数据 -> 接口规范 -> 组件数据源

one more thing

sketch 转 html页面(赤兔)

一位程序员的成长之路

危机

  1. 未摆脱学生气
  2. 技术更新快,沉淀的太少
  3. 年龄增长,选择成本变高

思考

技术要深入到什么程度, 转型管理,能做什么,想做什么

个人成长模型

个人成长模型

解决

独立生存的能力 -> 消除中年危机

支付宝小程序的开放架构

组件 + api + 支付宝特色服务(芝麻信用,生活号,卡券)

page.js 处理页面级逻辑,component.js 处理组件级逻辑

ide 基于 electron

小程序运行运化

从零开始建设服务化的web设计规范

设计规范

规范项目设计的指导原则,包括设计原则,交互指导,视觉风格(eg: material design, fluent design, iOS design)

设计规范内容

设计理念和原则,基本元素,UI组件,典型页面风格

设计规范示例

问题

  • 设计想法不一致
  • 设计稿不一致
  • 产品不一致
  • 同一个组件被反复使用不同的方式实现
  • 实现质量不一

目标

  • 渴望规范,统一设计思路和风格,
  • 设计有据可依,适当约束产品方案。
  • 规范更新流程,确保产品体验可落地。
  • 细节封装,确保产品体验统一。
  • 可复用,减少开发成本

设计原则

  • 常见 易理解的交互
  • 严肃 冷静的视觉风格
  • 响应式设计 重点考虑移动端

实践

  • 新页面直接使用落地的组件开发
  • 旧页面逐一改造

一种自动化生成骨架屏的方案

避免spiner,使用骨架屏

好处

  1. 获取页面焦点
  2. 减少白屏时间

工具

puppeteer -> page-skeleton-webpack-plugin(page.addScriptTag)

实现

  • 文本块(计算行数,做渐变背景色)
  • 图片块 (1*1像素的gif图片,src == ,再设置宽高)
  • svg块(不规则-> 规则图形)

对骨架屏优化

  1. 删除在骨架屏中没有展现的元素
  2. 删除首屏以外的元素
  3. 样式复用
  4. 删除无用样式(document.querySelector)
  5. 列表同化处理

更多思考

  • 多路由支持
  • client-side hydration
  • 非首屏骨架屏的应用
  • 性能监控的需求

make front end mvc great again

mvc 可以component-based

  • react/vue as v
  • redux/vuex as m

任何UI相关的模型都可以解耦成mvc
中间讲了视觉/哲学相关内容。。。
node + broswer 同构mvc
同构mvc优点
react-imvc工程化设施

跨框架的组件学习和复用

react vue 形不似神似

分析可行性

  • Props属性
  • 组件私有状态(react是setState,vue是直接赋值)
  • 生命周期 基本对应
  • 其他特性
    • Keys 性能提升
    • jsx
    • refs react建议callback获取 vue直接引用
  • 生态圈 组件 -> 路由 -> 状态 -> 构建 -> SSR

启发

类似es6->es5 babel

生成ast语法树babylon -> 分析语法,提取相应的变量,生命周期等babel-traverse -> 生成vue组件babel-generator/babel-eslint/prettore-eslint

react-to-vue

写跨框架组件原则

  • do’s

    • 使用props, state
    • 使用相似的生命周期
    • 使用keys来提高效率
    • 使用ref来标记dom元素
  • don’ts

    • 拒绝使用context
    • 尽量不要使用hoc
    • 避免fragments等新特性

text-indent属性的一次踩坑记录

发表于 2017-11-17 | | 阅读次数:

今天在看text-indent的相关细节时,了解到子元素继承的缩进值不是设定值,而是计算值。假设父元素div宽度400px,text-indent为5%,那么缩进值应该是400*5%=20px。由于text-indent只对块状元素生效,所以其所有block-level的子元素都有20px的缩进值。确保了无论段落宽度是多少,缩进距离都是一致的。

目前一切正常,但是当我拿在chrome上摆弄样式时,发现一个不符合我预期的现象。

第一个span元素产生了“缩进”?我又在safari和firefox下测试了一下,发现safari和chrome的表现一致,而firefox下产生的“缩进”又和其他浏览器下大小不一致。我感觉自己应该是踩到坑了。。。

几次调试样式后,发现这个缩进距离和浏览器窗口大小有关,并且只有在同时满足以下条件的时候,firefox下的表现会与其他浏览器不一致。

  • 父容器设定固定宽度
  • text-indent属性为百分值
  • 第一个子元素非块状元素

查看text-indent在W3规范里的行为说明,一切终于水落石出。
This property specifies the indentation applied to lines of inline content in a block

以下面两段代码为例来解释一下:
1.

因为div有text-indent属性,并且第一个子元素为span(行内),所以text-indent属性作用于div内,span内不会发生缩进

2.

父元素div有text-indent属性,但是其第一个子元素非行内元素(div),所以它的text-indent不会生效,但是子元素div会继承text-indent, 其中的文本内容可以看做被span标签包裹,所以text-indent属性生效,并且是作用于子div内。

接下来还有一个firefox下渲染行为不一致的问题。查看w3文档规范,里面已经给出了明确说明:
percentage: gives the amount of the indent as a percentage of the containing block’s logical width.

而firefox这里是在特殊场景下,使用viewport width的百分值来计算text-indent的原因了。在实际项目开发中应当避免这种场景,以免各浏览器展示效果不一致。

Carl Hong

Carl Hong

2 日志
© 2018 Carl Hong
由 Hexo 强力驱动
|
主题 — NexT.Gemini v5.1.3