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