前端优化之渲染层面分析

前端性能优化这一块一直在项目中多多少少的在使用，但是知识点都太碎了，加上面试的出现率炒鸡高，所以来一波整理。
前端优化的话主要分为页面渲染，css优化，js优化，图片，网络请求几类。 这篇就对除了网络请求之外的优化分析一波。

页面渲染

1. 把CSS资源引用放在HTML文件顶部

这样浏览器可以优先加载css，但是里面又可以细节的分化一下，包括之前的mvc开发经常会吧所有的css放到一个模板里面直接加载，或者前端的书写习惯也喜欢link这边直接复制粘贴一把梭。都会导致一些无用资源优先加载而导致页面的渲染时间增长。可以通过以下代码的应用实现css的异步加载，或者通过js的动态添加link元素也是可以的。

//两种都可以实现


//考虑兼容

2. 把JavaScript文件引用放在HTML文件底部

因为javascript默认是同步加载，会导致阻塞页面渲染。也可以使用动态添加或者使用HTML5新增的属性， defer和anysc

//会在加载完毕之后就随之执行。

//加载完毕之后不会执行，是在onload之前执行

3. 避免各种情况导致的重排（reflow）重绘（redraw）

页面的重排重绘很消耗性能，所以一定尽可能减少页面的重排重绘。

重绘

当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

触发重绘的条件：改变元素外观属性。如：color，background-color等。

重排

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如：
　　1、页面渲染初始化；(无法避免)
　　2、添加或删除可见的DOM元素；
　　3、元素位置的改变，或者使用动画；
　　4、元素尺寸的改变——大小，外边距，边框；
　　5、浏览器窗口尺寸的变化（resize事件发生时；
　　6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
　　7、读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE))
重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
所以，重排必定会引发重绘，但重绘不一定会引发重排。
优化点
1.浏览器自己的优化：浏览器会自己维护一个队列，把所有引起重排，重绘的操作放在这个队列，等队列中的操作到了一定数量或者一定时间，就会进行一个批处理。把多次的重绘重排变成一次重绘重排。
2.操作的优化：
（1）直接修改元素的className
（2）先设置元素为display：none，然后对布局进行操作。设置完之后再将元素设置为display：block。
（3）将需要多次重排的元素，position设置为absolute，元素脱离了文档流，变化不会影响到其他元素。
（4）多个DOM节点创建，简化成一次创建。原生的话就是DocumentFragment，jq就是字符串多次拼接之后直接append()或者html()。

4.减少DOM元素的数量和深度

HTML中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中花的时间就越长

5.尽量避免使用table、iframe等慢元素

table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间
iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML DOM的解析

6. 压缩html

将HTML代码压缩，将注释、空格和新行从生产文件中删除。
将link和script中的type属性删除掉，因为html5把text/css、text/javascript作为默认值。

CSS优化

1.压缩和合并

使用gulp，或者webpack进行压缩，从生产文件中删除注释，空格和空行。合并之后可以减少http请求。

2.className的长度 和 深度

尽量去减少className的长度和深度 可以提高加载速度。

JS优化

1.压缩

2.尽量的使用ID选择器

选择页面DOM元素时尽量使用id选择器，因为id选择器速度最快

3.合理的缓存dom对象

对于要重复使用的dom对象，要优先设置缓存变量，避免每次使用时都要从整个dom树重新查找。

4.页面元素尽量使用事件代理，避免事件直接绑定

使用事件代理可以避免对每个元素都进行绑定，并且可以避免出现内存泄漏以及需要动态添加元素的事件绑定问题

图片优化

1.压缩

在压缩后的图片符合产品要求下将图像进行优化。

2.base64 和 雪碧图

3.懒加载