性能优化

性能优化

---

代码层面：

- 避免使用css表达式，避免使用高级选择器，通配选择器
1. 用`hash-table`来优化查找
2. 少用全局变量
3. 用`innerHTML`代替`DOM`操作，减少`DOM`操作次数，优化`javascript`性能
4. 用`setTimeout`来避免页面失去响应
5. 缓存DOM节点查找的结果
6. 避免使用CSS表达式
7. 避免全局查询
8. 多个变量声明合并
9. 尽量避免图片和iFrame等的空src，空src会重新加载当前页面，影响效率
10. 尽量避免在html标签中写style属性

缓存利用

- 缓存ajax，使用cdn，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
- 什么是Etag？
- 当浏览器发送请求时，先会进行浏览器缓存过期判断，浏览器会根据缓存过期时间判断缓存文件是否过期，若没有过期则不会发送请求，直接使用缓存中的文件
- 只有get请求才会缓存，post不会

请求数量

- 合并样式和脚本，使用css图片精灵图，初始首屏之外的图片资源按需加载，静态资源延迟加载

请求带宽

- 压缩文件，开启GZIP

总的来说

1. 减少HTTP的请求,压缩js,css,图片不宜过大
2. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
3. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来

---

移动端性能优化

- 尽量使用css3动画，开启硬件加速
- 适当使用`touch`事件代替`click`事件
- 避免使用`css3`渐变阴影效果
- 不要滥用float，float在渲染时计算量比较大，尽量减少使用
- 不滥用web字体，web字体需要下载，解析，重绘当前页面
- 合理使用requestAnimationFrame动画代替setTimeout
- css中的属性(transforms,opacity,canvas,video)会触发gpu渲染，合理使用

具体优化

---

加号操作符

- 用push方法，因为数组是连续的，可以省去很多步骤
- 涉及字符串拼接，通常先定义一个数组，再往数组中push字符串，最后通过数组join方法转为字符串
-原因如下：
1. 加号操作非常耗时和内存
2. 首先开辟一块临时空间，储存字符串
3. 然后再开辟一块空间
4. 将str中的字符串复制到刚刚开辟的空间中
5. 再把需要连接字符串复制到str后面
6. str指向这块空间
7. 回收str原来的空间和临时空间

事件委托

- 事件委托指的是不在事件发生地设立监听函数，而是在父级或者组级设立监听函数，主要是用到事件捕获，大大提高性能，因为减少了绑定事件的元素，减少内存的占用，提高效率。

避免重构 回流

概念

- 重构是指改变每个元素外观触发浏览器的行为,比如 颜色 背景样式发生改变而重新构造新外观的过程。重构不会引起浏览器重新布局页面，不一定伴随着回流。
- 回流指浏览器为了重新渲染页面而重新计算元素的大小，位置等过程。这个过程开销非常大，可以理解为整个dom树重新计算渲染,一般最好触发元素的重构,而避免元素的回流。比如，通过添加类添加css样式,而不是直接在dom上添加,比如 当操作某一块元素的时候,先让它脱离文档流,例如定位等,这样不会引起回流

浏览器渲染的过程

1. 首先是获取html标签,建立dom树
2. 其次根据css样式建立reader树,reader树不包括定位和几何信息
3. 最后构建布局树,布局树包括定位和几何信息

json与XML的区别

1. json数据体积相对XML小,传输速度快
2. json更加容易交互,解析
3. json的数据描述性比XML差