性能衡量指标
指标:
- 白屏时间
- 首屏时间
- 用户可交互时间
- 完全加载时间
- 首字节时间
- DNS
- 解析时间
- TCP 连接时间
- HTTP 请求时间
HTTP 响应时间
维度:
- 运营商
- 网络
- URL
性能优化
- 高频事件消抖、节流。使用
_.debounce()
和_. throttle()
,控制高频事件的操作,如:scroll
、onChange
- JavaScritp很快,但是DOM很慢,减少修改DOM。
- DOM的渲染需要计算DOM+CSSOM,每次DOM和CSSOM的每次修改都会触发重绘;
- 渲染过程:JavaScript -> Style -> Layoout -> Paint -> Composite
- 避免
position: fixed
;布局,Z轴图层堆叠关系会改变,引起重绘; - 图层隔离:将那些会变动的元素提升至单独的图层,比如:动画、渐变;
- 降低图层复杂度;
- 避免线程阻塞;
- 优化CSS;
- 文件:引入方式、位置、文件合并、延迟加载;
- 硬件加速:GPU加速渲染
基于各环节优化:
- 减少http请求,合理设置 HTTP缓存
- 使用HTTP/2
- 持久连接,使用 keep-alive 或者 WebSocket
- 使用浏览器缓存
- 启用压缩
- CSS Sprites
- LazyLoad Images
- 样式文件放在顶部,脚本文件放在底部
- 减少 cookie 传输
- CDN 加速
CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据,即所谓网络访问第一跳。 - 反向代理
- 传统代理服务器位于浏览器一侧,代理浏览器将http请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器接收http请求。
- 论坛网站,把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度,当这些动态内容有变化时,通过内部通 知机制通知反向代理缓存失效,反向代理会重新加载最新的动态内容再次缓存起来。
- 此外,反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。
- 面向未来,考虑 service worker