- 较少http请求,或是有http2进行请求
- 使用雪碧图,或使用矢量图
- 减少重绘重排
- 事件委托
- 懒加载
- 降低css选择器的优先级(没有必要)
性能优化主要分为两类:
加载时优化
运行时优化
在解决问题之前,得先找出问题,否则无从下手。所以在做性能优化之前,最好先调查一下网站的加载性能和运行性能。
检查加载性能
一个网站加载性能如何主要看白屏时间和首屏时间。
白屏时间:指从输入网址,到页面开始显示内容的时间。
首屏时间:指从输入网址,到页面完全渲染的时间。
将以下脚本放在 前面就能获取白屏时间。
<script>
new Date() - performance.timing.navigationStart
// 通过 domLoading 和 navigationStart 也可以
performance.timing.domLoading - performance.timing.navigationStart
</script>
在 window.onload 事件里执行 new Date() - performance.timing.navigationStart 即可获取首屏时间。
检查运行性能
配合 chrome 的开发者工具,我们可以查看网站在运行时的性能。
打开网站,按 F12 选择 performance,点击左上角的灰色圆点,变成红色就代表开始记录了。这时可以模仿用户使用网站,在使用完毕后,点击 stop,然后你就能看到网站运行期间的性能报告。如果有红色的块,代表有掉帧的情况;如果是绿色,则代表 FPS 很好。performance 的具体使用方法请用搜索引擎搜索一下。