有幸参加在上海举办的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; （监听设备连接网络情况变化时的回调）
device memory api

值类型：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）
列表同化处理

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等新特性

FDCon2018与会记录