前端性能优化

优化目的

  • 用户角度而言,优化能够让页面,加载快、操作响应及时,体验更好
  • 服务商角度而言,优化能够减少页面请求数、减小请求所占带宽,节省资源

优化方面

速度方面

  • 资源缓存,可以减少DNS查询,减少请求次数
  • 按需加载资源,可以延迟加载/预加载
  • 减少文件大小,可以通过压缩、合并CSS,JS,IMG
  • 减少DOM数,DOM操作
  • 引入外部的CSS,JS,将JS脚本置地
  • 使用常量,抽取重复值,优化循环
  • 减少作用域链的查找,尽量少使用全局变量,避免使用eval,with
  • 减少重绘重排,可以通过设置类class统一更新样式

兼容性方面

  • 响应式布局

  • 使用百分比,而不是绝对长度

  • 使用相对字体大小em

  • 前端性能优化_第1张图片

参考文章推荐:
前端优化不完全指南
前端性能优化(JavaScript篇)
JavaScript 性能优化小记

你可能感兴趣的:(前端性能优化)