如何衡量性能
页面加载速度
减少 HTTP 请求
请求越多,花费的时间越多。
常见的减少数据传输的手段:
- 使用 CDN
- 利用浏览器缓存
- CSS 精灵
- 使用 Gzip 压缩
- 使用字体图标
-
速度指数
通过加载时间来权衡页面性能太过局限性。通常将页面首屏加载并呈现在浏览器视口中的内容称为“滚动之上”。更快加载“滚动之上”对吸引用户有利,甚至无需考虑整张页面的加载速度。
帧数
测试
传统脚本的性能优化
懒加载初级版本
获取页面上需要懒加载的图片元素。
- 在页面滚动时反复检查图片元素是否滚动进入浏览器的可视区域内。
- 一旦发现图片元素滚动进入可视区域内,加载图片。
重绘和回流
- 当页面上的某一个元素的大小或者位置发生更改时,都会影响到与它相邻元素的情况,甚至整个的元素状态(位置、大小)都需要重新计算和更新。这种操作称为回流(reflow)或者布局(layout)。一个页面至少会有一次回流,就是在页面初始化的时候。
- 当某个元素颜色样式发生改变时(如背景颜色、文字颜色),页面需要更新,浏览器需要重新绘制元素,称为重绘(repaint)。