前端性能优化之路
2019-06-18 11:04:14 0 举报AI智能生成
前端性能优化的相关知识总结，包含首屏及实时渲染优化（网页端/移动端），渲染引擎（Canvas/Svg/WebGL）的相关API的使用及优化，浏览器渲染原理及视觉原理，相关Chrome dev tools调试工具的使用。
作者其他创作
大纲/内容
视知觉
帧率，丢帧与流畅度概念基础
RAIL用户中心性能模型
显示器前后缓存同步技术：V sync, G sync, Free sync
视觉实验
不同刷新率环境下文字滚动残影对比
不同刷新率环境下3D旋转动画流畅度对比
流畅感知原理
视觉暂留：100ms
似动现象：20ms-1s
临界闪烁融合阈值：50Hz-100Hz
渐进式渲染指标
Speed Index
FP / FCP / FMP / TTI / TTCI
Chrome调试工具
首屏性能
LightHouse(Audits)
检查网页搜索引擎优化（SEO）
检查网页潜在阅读障碍（Accessibility）
避免使用过时或不推荐的API (Best Practise)
Snyk: 检查所使用的Js库版本是否存在已知的安全问题
检查未更新至Https的请求资源
审查首屏Metrics指标 (Performance）
排查未使用的css声明
检查静态资源压缩是否最优化
检查关键渲染路径CRP
检查移动端网页是否符合渐进式App规范（PWA）
包含Manifest文件
使用Sevice Worker线程
离线化状态下可运行
渲染性能
使用Performance/Performance Monitor考察性能开销
侦测Js瓶颈段
检查强制布局同步问题
监视内存开销
查看主线程/交互线程/光栅线程活动
分析渲染管线耗时比例
使用Rendering查看渲染开销
重绘区域标记
显示层边缘
滚动响应问题区域检查
使用Layers查看合成层开销
使用Animations调试进行中的Css3动画
环境模拟
Performance Setting
Network throttling
CPU throttling
Network Condition
Disable Cache
User agent Selection
浏览器渲染原理
样式重新计算（recalculate style）
css默认继承属性
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微调资源优先级
骨架屏
eleme骨架屏工具实现原理
懒加载
使用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
在Performance中检查问题（红色三角）
层叠顺序
首屏绘制渐进式指标
所有元素默认继承：visibility 和 cursor
内联元素默认继承：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
块状元素默认继承：text-indent和text-align
列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
表格元素默认继承：border-collapse
内联元素默认继承：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
块状元素默认继承：text-indent和text-align
列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
表格元素默认继承：border-collapse
0 条评论
下一页
