前端优化

前端优化途径

页面级优化

  • 从设计实现层面简化页面
  • 合理设置HTTP缓存策略
  • 资源合并与压缩（webpack打包压缩，Google closure compile来，图片压缩）
  • CSS Sprites（合并CSS图片）
  • Inline Images（data:base64）
  • Lazy Load Images（不可见区域图片暂缓加载，显示时才加载）
  • CSS前置，重要端渲染相关js脚本前置，与渲染无关端script标签加defer、async，将js脚本置后加载
  • 异步执行 inline脚本(保证脚本在页面内容后面加载)
  • Lazy Load Javascript（外部库可在需要加载的时候才加载）
  • 减少不必要的 HTTP跳转（略链接最后带 ’/‘，减少服务器隐藏的301跳转）

js代码级优化

  • 减少作用域链查找（避免直接用全局变量进行大量计算，使用同一作用域内的变量计算，而后赋值到全局）
  • 遍历到的HTML DOM集合（HTML Collection）尽量将它转为数组后再访问，因“访问集合”遍历较慢

    原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果

  • Reflow & Repaint（这个尚未了解）
  • 慎用 with

    with 语句是运行缓慢的代码块，尤其是在已设置了属性值时。大多数情况下，如果可能，最好避免使用它。

  • 避免使用 eval和 Function(脚本引擎都需要将源代码转换成可执行代码)
  • 数据访问 多使用直接量 (字符串、正则表达式 )和局部变量替代，访问更快，尽可能的减少对对象以及数组深度查找
  • 字符串拼接（字符串拼接较多时，可将子串放入数组，最后使用join拼接，性能相对直接加+更高）

CSS

  • CSS的选择符的解析是从右往左进行的，最容易找到的放在右边
  • CSS media 加载品台对应的脚本
1
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" />

服务器级优化

  • CDN
  • gzip压缩
  • 多域名方案
  • 无cookie服务器方案
  • HTTP2（暂未在生产环境下接触过）
  • 页面静态化，前后端分离（异步请求），后端渲染

推荐阅读：【译】唯快不破：Web 应用的 13 个优化步骤