如何提高网页加载速度？（二）

如何使页面加载速度变快，缩短用户的等待时间，我将会在5个方面介绍下。

一、回流

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为重绘。
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为回流。
回流会让页面加载速度变慢，那么什么情况下会触发浏览器的回流？

1. DOM元素的添加、修改（内容）、删除；
2. Resize浏览器窗口、滚动页面；
3. 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。

那如何避免回流呢？

1. 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行；
2. 尽可能少的修改元素style上的属性，尽量通过修改className来修改样式，通过cssText属性来设置样式值；
3. 缓存Layout属性值，对于Layout（布局）属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。；
4. 设置元素的position为absolute或fixed；
5. 不要用tables布局，原因就是tables中某个元素一旦触发回流就会导致table里所有的其它元素回流；
6. 不要在css里面写expression。

二、JS阻塞

默认情况下JS是同步加载的，JS的加载时是阻塞的，后面的元素要等待JS加载完毕后才能进行再加载，那对于需要写在头部交互性优先的JS该怎么办呢？那就要用到异步加载，接下来介绍2种异步加载的方法：
1. defer属性，所有浏览器只支持IE9以下 Defer属性规定是否对脚本执行进行延迟，直到页面加载为止。具体示例如下 ：

<script type="text/javascript" defer="defer"></script>

2.async，HTML5属性，所有支持HTML5属性的浏览器都试用，比如火狐、谷歌、safari、360、IE10+、智能手机浏览器，都支持async属性；async的属性规定一旦脚本可用，则会异步执行。该属性仅适用于外部脚本。具体示例如下:

<script type="text/javascript" src="demo.js" async="async"></script>

若async=”async”:脚本相对于页面的其余部分异步地执行
若不使用async且defer=”defer”:脚本将在页面完成解析时执行
若不使用 async和defer:在浏览器继续解析页面之前，立即读取并执行脚本，中断页面解析。

三、图片

图片格式主流有三种，分别是gif、jpg、png,下面我将具体介绍这三种格式。

Gif:

缺点：色彩效果最低，不适合用gif保存鲜艳的图片。
优点：体积小，有着极好的压缩效果，支持动画，并且支持透明效果，没有PNG的那样渐变透明的强大。
如果你的图片只有很单调的色彩，没有渐变色，选GIF。例如百度的首页LOGO，只有2KB

JPG:

优点：色彩还原好，可以在照片不明显失真的情况下，大幅降低体积。
缺点：不支持透明

PNG:

可谓是最适合网络的图片。优点：清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点
缺点：不如JPG的颜色丰富，同样的图片体积也比JPG略大。

四、HTTP请求

在css和js影响加载的过程中中，影响最严重的一点就是增加的了http的请求，http的请求又和服务器以及家庭使用的网络有关，因此减少http的请求是减少加载时间很重要的一点，减少http请求的方法如下：
减少外链（包括图片，CSS，JS）

1. 利用雪碧图减少对图片的请求，如下图所示：
   

2. 增加对图片的重用性
   对于一张重复出现的图片，可以写在CSSd的背景属性内，这样就只要请求一次就可以了，而不是请求很多次。

3. 为了在第一次访问的时候减少http的请求，我们在这里推荐你们试用css和js的合并。 具体方法是在文件中分别使用注释，给css样式使用< !–注释掉，给js用// 注释掉，并且在文件中的header部分使用一个标<?Header(‘content-type:*/*’);?>，浏览器就能在同一个文件内读到js和css。

五、CSS

提升css选择器性能

1. 合并多个CSS文件
2. 浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取

3. css选择器效率顺序：

   • id选择器（#myid）

   • 类选择器（.myclassname）

   • 标签选择器（div,h1,p）

   • 相邻选择器（h1+p）

   • 子选择器（ul > li）

   • 后代选择器（li a）

   • 通配符选择器（*）

   • 属性选择器（a[rel=”external”]）

   • 伪类选择器（a:hover,li:nth-child）

   上面九种选择器的效率是从高到低排下来的，根据以上选择器匹配与选择器执行效率原则，我们可能通过避免不恰当的使用，提升CSS选择器性能。

     几种书写高效率的CSS选择器：

   • 避免使用通用选择器

   • 避免使用标签或class选择器限制id选择器

   • 避免使用标签限制class选择器

   • 避免使用多层标签选择器，使用class选择器替换，减少css查找

   • 避免使用子选择器

   • 使用继承