前端性能优化汇总

网络优化
  • 减少请求文件数，资源合并（雪碧图、SVG（Iconfont）、JS/CSS文件合并）
  • 减少资源体积，资源压缩（精简代码；压缩JS/CSS、图片WebP格式、开启Gzip）
  • 提高网络传输（缓存、PWA、CDN、HTTP2多路复用）
  • DNS优化：使用浏览器DNS缓存 、计算机DNS缓存、 服务器DNS缓存，防止DNS迭代查询；使用Keep-Alive特性来减少DNS查找频率；使用较少的域名（服务器主机）来减少DNS查找的数量；DNS预解析

图片相关
  • 懒加载、预加载、渐进式加载、精灵图、iconfont、WebP

重排与重绘 / 浏览器渲染优化
  • CSS引入放<body>前面，提前生成CSS rule
  • JS引入放<body>后面，不堵塞渲染
  • 对于复杂的动画：display: none; 或 position: absolute; 减少对Render Tree的干扰，提升painting速度


框架优化
  • 使用路由实现单页应用
  • 前端路由使用路由懒加载，减小文件体积，提高首屏渲染速度
  • 状态管理，redux/vuex
  • 服务端渲染(SSR)，提高首屏渲染速度
  • 线上环境使用引用线上专用js文件
体验优化
  • 先显示框架再异步请求加载数据
  • 加载或跳转时使用loading动画
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。