视知觉
帧率，丢帧与流畅度概念基础
RAIL用户中心性能模型
显示器前后缓存同步技术：V sync, G sync, Free sync
视觉实验
不同刷新率环境下文字滚动残影对比
不同刷新率环境下3D旋转动画流畅度对比
流畅感知原理
视觉暂留：100ms
似动现象：20ms-1s
临界闪烁融合阈值：50Hz-100Hz
渐进式渲染指标
Speed Index
FP / FCP / FMP / TTI / TTCI
浏览器渲染原理
样式重新计算（recalculate style）
css默认继承属性
css权值
!important：最高
内联：1000
ID：100
Class：10
Tag：1
布局与回流（layout/reflow）
渲染树构建原理
块状布局流体特性
层叠上下文与层叠顺序
清除浮动
绘制（paint/repaint）
绘制单元层的创建
3D或透视变换（perspective transform）CSS属性
使用加速视频解码的<video>节点
混合插件（如Flash）
对自己的opacity做CSS动画或使用一个动画webkit变换的元素
拥有加速CSS过滤器的元素
元素有一个包含复合层的后代节点
元素有一个z-index较低且包含一个复合层的兄弟元素
合成（Composite）
合成层的创建
Document
提升图层声明
translateZ(0)
translate3d(0,0,0)
will-change: transform
浏览器工作线程
iframe使用独立渲染进程
输入/滚动事件监听会与主线程通信
css属性在不同浏览器内核中触发的渲染管线层级
首屏加载优化
静态资源
JS/CSS minify & package
tinyPNG图片压缩工具
fontmin静态字体压缩工具
图像元数据清除工具
woff2字体格式压缩工具
创建自己的iconFont
imagemin：压缩并导出渐进式JPEG/webP
Webpack 4: Tree shaking (注意库函数副作用)
使用代码拆分和预加载优化输出流
图标神器IcoMoon
网络传输
CDN优化：Brotli/Gzip传输压缩
Http cache-control头
图片请求
Http / 2 逐个加载
Http / 1.x 合并加载
使用Http / 2
使用meta renderer标签强制双内核浏览器选择高速内核
CRP优化
link标签顶置，script标签底置
dom树扁平化
减少CSS阻塞
非首屏绘制关键脚本采用异步加载
使用Lighthouse审查关键渲染路径
使用preload/prefetch微调资源优先级
懒加载
使用IntersectionObserver API监听元素是否在视窗内
监听滚动/resize事件并用SetTimeout触发视窗检查
用视频代替GIF并设置<video>的preload属性为none
使用占位符避免布局问题
尽量在首屏后进行预加载以提升滚动体验
使用<noscript>以兼容js不可用环境或隐藏相关元素
应用离线化
使用Web storage为离线状态作准备
设计离线Serivice Worker
静态资源离线化代理
Web view加载优化
在Web view初始化同时用native请求部分网络资源
Http transfer-encoding:chunked 使页面分块输出提升首字节速度
雅虎14条
实时渲染优化
多线程
使用Web worker和rAF分离计算线程和渲染线程
减少样式重新计算成本
降低选择器复杂度
css嵌套层级 < 3
避免同一嵌套层级上使用复合选择器
减少样式更新影响的元素数量（注意继承）
BEM编码规范
无ID，无Tag，无嵌套纯class命名规范
避免布局抖动
使用flex布局
高压力点避免任何布局相关操作
避免强制布局同步
优先缓存前一帧布局属性
禁止频繁读写布局属性
使用FastDom优化dom布局属性读写
使用Chrome Performance检查FSL
优化重绘效率
避免使用阴影等代价高昂的css3属性
使用chrome render tool检查重绘区域是否符合预期
优化合成效率
使用仅触发Composite的css属性绘制动画
transform
opacity
提升图层
布局易变动 / 易受布局变动而重绘
重绘代价高 / 绘制频率高
可接受额外内存开销
具备可被GPU加速的特性
Canvas2D
布局合成计算
Css3 translate
Video
WebGL
绘制引擎优化
Canvas
离屏渲染：重用元素绘制缓存+drawImage
分层画布：z-index实现多层canvas叠绘
渲染差异帧：使用精准的clearRect范围
避免使用浮点数与图像缩放：使用css transform将运算负载转至Gpu
关闭透明度：getContext('2d', { alpha: false })
减少模糊和阴影的使用
Svg
线上优化工具SVGOMG
Illustrator中使用Svg滤镜（应避免使用滤镜或渐变）
不可交互元素设置pointer-event为none
使用Defs标签缓存复杂Path渲染
Fill + Fill > Fill + Stroke !
Svg服务端渲染
WebGL
Three.js使用建议
WeblGL & Canvas开发优化策略
WebGL使用注意事项及浏览器支持
转化工具
SVG2Canvas
HTML2Canvas
所有元素默认继承：visibility 和 cursor<br>内联元素默认继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction<br>块状元素默认继承：text-indent和text-align<br>列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image<br>表格元素默认继承：border-collapse
