前端性能
阅读 105
收藏 7
2018-02-22
性能衡量指标
指标:
白屏时间
首屏时间
用户可交互时间
完全加载时间
首字节时间
DNS 解析时间
TCP 连接时间
HTTP 请求时间
HTTP 响应时间
维度:
运营商
网络
URL
性能监控
如何监控
7 天打造前端性能监控系统
使用性能 API 快速分析 web 前端性能
你是如何搭建 Web 前端性能监控系统的
性能优化
优化点:
高频事件消抖节流使用_.debounce() 和_. throttle(), 控制高频事件的操作, 如: scrollonChange
_.debounce() 的多次连续的调用, 最终实际上只会调用一次;
_. throttle() 将频繁调用的函数限定在一个给定的调用频率内
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
来源: https://juejin.im/entry/5a8ebc4c5188257a5e5757b6