前端优化总结

• js优化：

  • 减少重绘和回流
    a) 避免不必要的Dom操作
    b) 尽量改变Class而不是Style，使用classList代替className
    c) 避免使用document.write
    d) 减少drawImage
    《页面重绘和回流以及优化》
  • 缓存Dom选择与计算
    每次Dom选择都要计算，缓存他
  • 缓存列表.length
    每次.length都要计算，用一个变量保存这个值
  • 尽量使用事件代理，避免批量绑定事件
  • 尽量使用ID选择器
  • TOUCH事件优化
    使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作
  • 减少阻塞
    • 《JS的阻塞特性》
  • 把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）
  • 不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）
  • 优化书写方法
    • 《编写可维护的代码》
    • 单变量模式
    • Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）
    • 不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）
    • 不要用隐含的类型转换
    • 不要用 eval()
    • 用 parseInt() 进行数字转换
    • （规范）左大括号的位置
    • 构造器首字母大写
    • 写注释
    • 不要用 void
    • 不要用 with 语句
    • 不要用 continue 语句
    • 尽量不要用位运算
  • 《js 压缩》
  • 《JavaScript 秘密花园-数组》

• jQuery优化

  • 多用ID选择器 , 总是从#id选择器来继承
  • 少直接使用Class选择器。
  • 多用父子关系，少用嵌套关系。
  • 缓存jQuery对象.
  • 《如何打造高效的选择器？》
  • 《编写高效的jQuery代码》

• CSS优化

  • 《Autoprefixer》

  • 避免使用CSS表达式
  • 避免在HTML标签中写style，这样会影响CSS的渲染。
  • 移除空的CSS规则，空的CSS规则增加了CSS文件的大小，且影响CSS树的执行
  • 正确使用Display的属性
    Display属性会影响页面的渲染，因此请合理使用
    a) display:inline后不应该再使用width、height、margin、padding以及float
    b) display:inline-block后不应该再使用float
    c) display:block后不应该再使用vertical-align
    d) display:table-*后不应该再使用margin或者float、
  • Float在渲染时计算量比较大，尽量减少使用
  • Web字体需要下载，解析，重绘当前页面，尽量减少使用
  • 过多的Font-size引发CSS树的效率
  • 为了浏览器的兼容性和性能，值为0时不要带单位
  • 标准化各种浏览器前缀
    a) 无前缀应放在最后
    b) CSS动画只用 （-webkit- 无前缀）两种即可
    c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）
  • 高级选择器执行耗时长且不易读懂，避免使用。
  • 外链 CSS 中避免 @import 引入。
  • 《为什么每个前端开发者都要理解页面的渲染》
  • 《优化浏览器渲染》

• SEO优化

• WEB性能优化

  • 1.图片优化：

    • 优先使用CSS效果、CSS动画来替代图片,避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度。
    • 移动端可以使用网络字体来替代图片。
    • 使用base64来优化背景图片(最好的小的背景图片或者图标，<img>标签最好不要使用) 
    • 《小tip: base64:URL背景图片与web页面性能优化》
    • 合并小图片使用雪碧图。
    • 避免图片和iFrame等的空Src
      • 空Src会重新加载当前页面，影响速度和效率.在使用图片异步加载时，可以选将src设置为一个一像素的小图。base64形式的。
    • 尽量避免重设图片大小
      • 重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。
        
    • 颜色丰富的照片，JPG是通用的选择:
      • 人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节
      • JPG在压缩率不高时保留的细节还是不错的
      • WebP能够比JPG减少30%的体积，但目前兼容性较差(Chrome,Opera,Android Chrome,Android Browser).
    • 如果需要较通用的动画，GIF是唯一可用的选择:(APNG只有在Firefox，Safari，iOS Safari上有效，且是无损压缩)
      • GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明
      • GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题
    • 如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式(IE8+)
      • SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩
      • SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等
    • 如果需要清晰的显示颜色丰富的图片，PNG比较好
      • PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景（如微信动画大表情）可以考虑PNG-8
      • PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用（如屏幕截图、界面设计图）
      • PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大
    • 《响应式图片》
      • 　Srcset和sizes
    • 图片优化工具
      • Kraken (Web)
      • 智图 (Web)
      • SVGO (git)
      • 自动优化：Grunt/Gulp（《grunt-image》）
      • 服务端自动优化：Google PageSpeed
    • 实践
      • 《web前端优化之图片模糊到清晰》

  • 2.工程化前端部署：

    • 《大公司里怎样开发和部署前端代码？》

  • 3.性能测试工具

    • 《PageSpeed Insights》

  • 4.浏览器缓存

    • 《使用浏览器缓存》

    • 《站点静态资源优化合并解决方案》
    • 使用长Cache（使用时间戳更新Cache）
    • 使用外联式引用CSS、JavaScript

  • 5.压缩HTML,CSS,JS

    • 减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip

  • 6.加载优化

    • 按需加载（注意页面重绘影响性能）
    • 滚屏加载
    • 预加载（提前加载下一页）
    • 减少请求（重要)初始请求不多于4个。

  • 7.渲染优化

    •  HTML使用Viewport
      Viewport可以加速页面的渲染，请使用以下代码
      <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    • 减少Dom节点
      Dom节点太多影响页面的渲染，应尽量减少Dom节点
    • 动画优化
      a) 尽量使用CSS3动画
      b) 合理使用requestAnimationFrame动画代替setTimeout
      c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
    •  高频事件优化
      Touchmove、Scroll 事件可导致多次渲染
      a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
      b) 增加响应变化的时间间隔，减少重绘次数
    •  GPU加速
      CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用
      PS：过渡使用会引发手机过耗电增加　　　　　　

  • 8.其它

    • 减少cookie:Cookie会影响加载速度，所以静态资源域名不使用Cookie
    • 避免重定向:重定向会影响加载速度，所以在服务器正确设置避免重定向
    • 异步加载第三方资源:第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源
    • 服务端开启keep-alive  《HTTP协议头部与Keep-Alive模式详解》

参考资料：

《Web性能优化：图片优化》

《移动H5前端性能优化指南》