有幸参加在上海举办的FDCon2018第三届中国前端千人峰会,主题是“前端体验的融合开发之道”,以下是会议笔记的一些整理。
局限和突破–谈谈 Web 性能瓶颈和未来发展
判断用户网页性能
painting timing api
first paint:第一个和原navigator不一样的点
first contentful paint: 首次绘制出dom内容
user timing api
performance.mark(“task”): navigationStart ⾄当前时间点;
performance.measure(“name”, “task1”, “task2” ):两个时间戳之间的时间监测
network information api
类型: “bluetooth”, “cellular”, “ethernet”, “mixed”, “none”, “other”, “unknown”, “wifi”, “wimax”
navigator.connection.onchange = changeHandler; (监听设备连接网络情况变化时的回调)
-
值类型:0.25, 0.5, 1, 2, 4, 8。返回值规则是取离实际值最近的2的幂数,将其除以1024所得。
优化网页
节流
document.visibilityState(visible, hidden(后台页面,最小化,锁屏),prerender,unloaded), 减少不不必要的开销,节约电源
监测 DOM 元素的 可⻅见性 visibility 和 位置 position (IntersectionObserver)
优化资源加载
Service Workers(PWA) — 资源缓存,持续加载,压缩实现
link rel=”preload” href=”/url” as=”type” 预加载资源,但不执行,as 必须定义
Web Storage 缓存重复访问资源
让浏览器更智能
resource hints: dns-prefetch, preconnect, prefetch, prerender
cooperative Scheduling of Background task: window.requestIdleCallback;
使用原生api
web assembly
给予开发者操控 Web APIs 的能⼒
WebAssembly MVP 设计和初步实现
wpt项目:让 Web ⾔⾏⼀致 • 让浏览器器⾏动⼀致
西西弗斯的转生
cicada ide 金蝉
需求变了 底层变了 -> 重复造轮子
有更高的体验要求,有更好的技术支持
事件调用栈 -> 函数调用栈: 代码热插拔 (eg:security guide)
目标
录制用例, 抗UI变化
记录每一次变化 -> 监听所有事件回调 -> 框架注入事件回调
能还原任一状态 -> 所有状态统一存储 -> 框架管理所有状态
有明确的语意标识 -> 组件命名&语义分析 -> 框架支持命名
业务数据 -> 接口规范 -> 组件数据源
one more thing
sketch 转 html页面(赤兔)
一位程序员的成长之路
危机
- 未摆脱学生气
- 技术更新快,沉淀的太少
- 年龄增长,选择成本变高
思考
技术要深入到什么程度, 转型管理,能做什么,想做什么
个人成长模型
解决
独立生存的能力 -> 消除中年危机
支付宝小程序的开放架构
组件 + api + 支付宝特色服务(芝麻信用,生活号,卡券)
page.js 处理页面级逻辑,component.js 处理组件级逻辑
ide 基于 electron
从零开始建设服务化的web设计规范
设计规范
规范项目设计的指导原则,包括设计原则,交互指导,视觉风格(eg: material design, fluent design, iOS design)
设计规范内容
设计理念和原则,基本元素,UI组件,典型页面风格
问题
- 设计想法不一致
- 设计稿不一致
- 产品不一致
- 同一个组件被反复使用不同的方式实现
- 实现质量不一
目标
- 渴望规范,统一设计思路和风格,
- 设计有据可依,适当约束产品方案。
- 规范更新流程,确保产品体验可落地。
- 细节封装,确保产品体验统一。
- 可复用,减少开发成本
设计原则
- 常见 易理解的交互
- 严肃 冷静的视觉风格
- 响应式设计 重点考虑移动端
实践
- 新页面直接使用落地的组件开发
- 旧页面逐一改造
一种自动化生成骨架屏的方案
避免spiner,使用骨架屏
好处
- 获取页面焦点
- 减少白屏时间
工具
puppeteer -> page-skeleton-webpack-plugin(page.addScriptTag)
实现
- 文本块(计算行数,做渐变背景色)
- 图片块 (1*1像素的gif图片,src == ,再设置宽高)
- svg块(不规则-> 规则图形)
对骨架屏优化
- 删除在骨架屏中没有展现的元素
- 删除首屏以外的元素
- 样式复用
- 删除无用样式(document.querySelector)
- 列表同化处理
更多思考
- 多路由支持
- 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
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等新特性