前端性能优化手册 | ed-mobile

性能优化的意义

性能关乎用户的去留性能关乎转化率性能关乎用户体验性能关乎用户

如何衡量性能

加载时长
点击、点按响应
动画滑动效果
耗电【移动端】
RAIL法则衡量性能

RAIL步骤

关键指标

用户操作

Response 响应

输入延迟时间（从点按到绘制）小于 100 毫秒

用户点按按钮（例如打开导航）

Animation 动画

每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒

用户滚动页面，拖动手指或看到动画。拖动时，应用的响应与手指位置有关。

Idle 空闲

主线程 JS 工作分成不大于 50 毫秒的块

用户没有与页面交互，但主线程应足够用于处理下一个用户输入

Load 加载

页面可以在 1000 毫秒内就绪

用户加载页面并看到关键路径内容

如何做性能优化

加载过程

网络、TCP/IP、DNS、HTTP、文件（代码、资源）

加载性能TIP

资源的必要性：检查UI框架是否必要、Javascript库是否必要、不是都要单页面（新闻类）
如何发送资源：使用webpack拆分代码
避免不必要的下载，移除未使用的代码
优化图片：避免设计大型图片，使用svg等代替图片、无损图像压缩、选择正确的格式
使用压缩、gizp技术
仅发送用户所需代码（延迟加载非关键代码）
将多个文件打包一起控制图片、视频懒加载
减少 DNS 请求数量
客户端缓存
迁移至HTTP/2
webpack codespliting webpack bundle analyzer
使用chrome Network面板

浏览器渲染

浏览器构成

浏览器渲染

渲染性能

60fps与设备更新频率

渲染顺序

https://csstriggers.com

加载性能TIP

尽可能避免布局操作：对“几何属性”（如宽度、高度、左侧或顶部）的更改都需要布局计算
简化并优化CSS选择器，尽量将嵌套层减少到最小，即缩小样式计算的范围并降低其复杂性
使用 transform 和 opacity 属性更改来实现动画
避免布局抖动避免强制同步布局
使用flexbox替代老的布局模型
动画使用requestAnimationframe （requestAnimationFrame是一个监听帧的API，即每绘制完一帧后就执行一下requestAnimationFrame函数）代替setTimeout/setInterval
避免耗时长的代码 web worker

优化js逻辑

避免使用setTimeout/setInterval 进行视图更新，使用requestAnimationFrame
将长运行时JS从主线程移至web workers

性能分析工具Performance Analysis

性能检测

Lighthouse：如果你只有5分钟时间，请使用他对你的网站进行性能检测，他会输出报告，告诉你优化项

参考

【使用 RAIL 模型评估性能】https://developers.google.com/web/fundamentals/performance/rail
【网站性能优化】https://classroom.udacity.com/courses/ud884
【How browsers work】http://taligarsiel.com/Projects/howbrowserswork1.htm
【How does a browser work?】https://www.quora.com/How-does-a-browser-work
【浏览器渲染优化】https://classroom.udacity.com/courses/ud860
【性能分析工具】 https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference
【样式触发】https://csstriggers.com/
【实例分析，设计与算法】https://mp.weixin.qq.com/s/XZw5yI_PBcD7VXO0NxnyNw
【极客时间】重学前端(winter)
【How the Web works】https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
【Front-End Performance Checklist】https://github.com/thedaviddias/Front-End-Performance-Checklist