性能优化(未完待续)

发表于 | 更新于

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. 条件（不在乎顺序，且循环次数确定）满足的情况下，选择减值迭代：
      展开循环（循环次数已知且较少）参考

      DUff装置（循环次数不能确定，数据量大）核心：将“零头”与“整数”分成两个单独的do-while循环

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

单页应用首屏优化

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

芝士点补充：

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