前端性能优化

参考:Web 前端面试指南与高频考题解析 浏览器相关

优化原则和方向

性能优化的原则是以更好的用户体验为标准,具体就是两个目标:

  • 多使用内存、缓存或者其他方法;
  • 减少CPU和GPU计算,更快展现。

优化的两个方向:

  • 减少页面体积、提升网络加载
    • 静态资源的压缩合并(JS代码合并、CSS代码压缩合并、雪碧图)
    • 静态资源缓存
    • 使用CDN让资源加载更快
  • 优化页面渲染
    • CSS放前面,JS放后面
    • 懒加载(图片懒加载、下拉加载更多)
    • 减少DOM查询,对DOM查询做缓存
    • 减少DOM操作,多个操作尽量合并到一起执行(DocumentFragment)
    • 事件节流
    • 尽早执行操作(DOMContenLoaded)
    • 使用SSR后端渲染,数据直接输出到HTML中,减少浏览器使用JS模板渲染页面HTML的时间

上面提到的都是性能优化的单个点,性能优化项目具体实施起来,应该按下面步骤推进:
1.建立性能数据收集平台,摸底当前性能数据,通过性能打点,将上述整个页面打开过程消耗时间记录下来。
2.分析耗时较长时间段原因,寻找优化点,确定优化目标
3.开始优化
4.通过数据收集平台记录优化效果
5.不断调整优化点和预期目标,循环2-4步骤

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。