参考:Web 前端面试指南与高频考题解析 浏览器相关
优化原则和方向
性能优化的原则是以更好的用户体验为标准,具体就是两个目标:
- 多使用内存、缓存或者其他方法;
- 减少CPU和GPU计算,更快展现。
优化的两个方向:
- 减少页面体积、提升网络加载
- 静态资源的压缩合并(JS代码合并、CSS代码压缩合并、雪碧图)
- 静态资源缓存
- 使用CDN让资源加载更快
- 优化页面渲染
- CSS放前面,JS放后面
- 懒加载(图片懒加载、下拉加载更多)
- 减少DOM查询,对DOM查询做缓存
- 减少DOM操作,多个操作尽量合并到一起执行(DocumentFragment)
- 事件节流
- 尽早执行操作(DOMContenLoaded)
- 使用SSR后端渲染,数据直接输出到HTML中,减少浏览器使用JS模板渲染页面HTML的时间
上面提到的都是性能优化的单个点,性能优化项目具体实施起来,应该按下面步骤推进:
1.建立性能数据收集平台,摸底当前性能数据,通过性能打点,将上述整个页面打开过程消耗时间记录下来。
2.分析耗时较长时间段原因,寻找优化点,确定优化目标
3.开始优化
4.通过数据收集平台记录优化效果
5.不断调整优化点和预期目标,循环2-4步骤