WEB性能优化

Web性能优化是什么？就是让用户觉得页面加载很快甚至注意不到页面加载，说白了都是为了提高用户体验度。Web性能优化针对于前端方面来说，我们可以根据当一个页面输入URL之后这个页面所发生的每个步骤来采取相对应的优化方法。

步骤一：缓存。当访问某个页面时，浏览器会先检查本地有没有缓存。

              方法：如果有缓存，就使用本地缓存的页面；如果没有缓存，就访问服务器。

步骤二：DNS查询。浏览器访问某网站的服务器，需要进行DNS查询。也就是说，拿到地址栏中的地址，去DNS服务器查询相对应的数字IP地址，然后使用数字IP地址去访问该网站的服务器。

              方法：减少DNS查询，即尽量减少域名。举例说明，最简单的例子就是如果我们把a.css放在A网站，把b.css放到B网站，这样的话，就需要两次DNS查询；如果把两者放到同一网站上，我们就需要一次DNS查询。

步骤三：建立TCP连接。

              方法：连接复用。即在HTTP协议加上一个请求头keep-alive，服务器就会保持连接，当第二次请求时，就会复用之前的那个连接。（另外，如果是HTTP/2.0版本，连接复用率更高（多路复用））。

步骤四：发送HTTP请求。

              HTTP请求有四部分：1、请求行，不能优化。2、请求头。3、回车。4、请求内容。

              方法：1、在请求头部分严格使用cookie，不滥用cookie；减少cookie体积。

                         2、在请求头中使用Cache-Control，可以不发送请求，使用本地缓存文件。

                         3、还可以同时发送多个HTTP请求。浏览器会自己做这件事。

步骤五：接受响应。

              方法1：使用ETag。ETag可以做到当服务器发现你请求的文件是最新的，就不给你再发送文件，而是发送304，                    让你使用上次发送过的文件。

             方法2：使用Gzip。服务器将html、css、js等文件压缩，浏览器接收压缩后的文件。

步骤六：接收完成，得到HTML文件。（这一步可以不用优化）

步骤七：解析HTML。解析步骤如下：

              1、查看DOCTYPE，根据DOCTYPE选择使用html或者xml等。

              方法：DOCTYPE标签不可以写错也不能不写，否则有可能导致浏览器进入“怪异模式”。

               2、开始逐行解析。

               方法：不要写太多无用标签。

               3、看到html标签，猜猜浏览器会干啥？chrome浏览器不会立即渲染该标签，它会等所有css加载完了，再渲染                       该标签；而IE不等css加载完，会立即渲染该标签。

步骤八：css和js。

              当浏览器碰到js或css时会同时做两件事：下载css或js；继续往下看，还有没有css或js，如果有就同时下载。需                    要注意的是：下载是并行的但解析是串行的。

               方法1、把css文件和js文件放到CDN（内容分发网络），增大同时下载的数量。

               方法2、把css文件放到head标签，js文件放到body标签最后，这样可以尽早显示页面，还可以让js文件获取正                     确 的节点位置。

               方法3、还可以把多个文件合并到一个文件，以减少请求的次数（但是下载量会变大）

其他优化方法：

                1、延迟加载（懒加载）；

                2、避免空src的图片，可以写成<img src = "about:blank"/>；

                3、避免使用@import引入css文件。

其他问题：

               1、css渲染时，会阻塞HTML渲染吗？

               答：chrome会，IE不会。

                2、JS渲染时，会阻塞HTML渲染吗？

               答：chrome和IE都会一定阻塞HTML渲染。