性能优化(未完待续)

1. http请求数量

合并。举个栗子：css精灵图

2. http请求大小

压缩。
举个例子：webpack插件UglifyJsPlugin、

1 2 3 4 5 6

optimization:{ minimizer:{ new UglifyJsPlugin({...}), new } }

3. css方面

• 减少回流reflow（reflow与repaint的区别）
  方式：

  1. 减少布局方式的样式修改。举个栗子：隐藏显示
  2. 通过把样式放到class中，一次性更改样式
  

4. dom操作上

• 插入createDocumentFrament()。在dom添加新节点的时候，先存在文档片段中，再一次性添加到DOM中。
• 使用innerHTML而不是appendChild
• 缓存elementCollection，文档查询代价高
• vnode思想

5. 其他资源，如图片资源

• css精灵图
• 懒加载、预加载

6. 事件

事件代理，利用事件冒泡，为顶层元素绑定事件处理进程，就可以处理所有子元素的事件

1 2 3 4 5 6 7大专栏  性能优化(未完待续)> 8 9 10 11 12 13 14 15

ev= ev || window.event; if(ev.stopPropogation){ ev.stopPropogation(); }else{ ev.cancleBubble = true; } if(ev.preventDefalut){ ev.preventDefault(); }else{ ev.returnValue = false; }

7. js语法

• 多个if-else使用switch-case替代，按照最可能到最不可能排序；
• 优化循环
  1. 循环条件与0比较，存储长度值；
  2. 如果循环至少执行一次，可以考虑后循环测试即do-while，可以避免第一次的循环条件测试；
  3. 如果循环次数确定，可以考虑展开循环体，避免了创建循环和条件测试的开销；
  4. 如果循环次数较大，可以考虑duff装置（减少迭代次数，一次迭代运行多次当个循环体）；
  5. 条件（不在乎顺序，且循环次数确定）满足的情况下，选择减值迭代：
     展开循环（循环次数已知且较少）参考

• 多个变量声明只使用一次var关键字（语句数量会影响效率，尽量合并语句）

• 路由懒加载，使用动态import语法
  使用命名chunk可以 实现某个路由下所有组件打包到用一个异步块中。特殊的注释语法来提供chunkname
• 缓存：chunkhash和hash的区别
• 代码分割
  css分割，ExtractTextPlugin
• cdn：
  第三方插件
  图片资源

芝士点补充：

• 浏览器重绘网页的频率是60FPS（即16毫秒/帧），JavaScript做不到在16毫秒内完成DOM操作，因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。