页面渲染与其性能的提升

　　做web开发，我个人觉得必须要弄清楚浏览器的渲染过程，否则我们很难进行前端优化。

　　我今天就简单说一下页面加载和前端优化。

 

页面加载

 

我按照最简单的方式进行描述，实际上更复杂，不管是在浏览器端还是服务端，比如dns解析，代理服务器，负载均衡器等等。

 

1、用户访问网页，发送一个http请求到网络服务器。

2、网络服务器（应用服务器）解析请求，发送请求给数据库服务器。

3、数据服务器返回数据给网络服务器，网络服务器解析数据，并生成html文件内容放入http response中，返回给浏览器。

4、浏览器解析http response。

5、浏览器创建DOM树。

6、浏览器下载css，并应用在DOM树上，进行渲染。

7、浏览器下载js，并解析执行js。

 

缺陷

 

以上整个流程中，如果其中任何一个流程出现问题，都不能顺利的渲染页面。

 

服务端：

　　网络服务器：无法获取到资源文件（404），或者由于并发的原因暂时无法处理你的请求（最常见的500错误），你的浏览器会长时间处于空白状态，直到服务器返回状态，或者进行超时处理。

　　数据层：如果服务器停止，或忙于处理大数据等等，长时间无法返回数据给网络服务器，那么网络服务器一直处于等待状态中，如果请求量达到最大值，那么后面的请求都被堵塞，从而无法及时返回内容给浏览器。

 

客户端：

　　JavaScript：如果你的js写在body中的div里，而且这个js执行非常复杂的逻辑，那么整个页面处于等待状态中。

　　不论js代码是内联还是包含在一个不相干的外部文件中，页面下载和解析过程肯定会停下，等待脚本执行完成这些处理，然后才能继续进行。——大多数浏览器使用单进程处理JavaScript的多个任务，同一时间只能有一个任务执行。

加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。
遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载，但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

原因：JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。
办法：可以将外部引用的js文件放在</body>前。

　　CSS：可以同时下载多个CSS文件。

　　　　　　如果我们把CSS样式放在页面底部，虽然使页面内容能更快的加载（因为将加载css 文件的时间放在最后，从而使页面内容先显示出来），但这样的内容是没有样式的，在CSS文件加载进来后，浏览器再对DOM使用样式，会出现我们常说的“无样式之闪烁”。

　　　　　　更讨厌的是，上下都放置CSS样式，浏览器会首先按照上面的进行渲染，等到下面的样式上来，再按照下面的样式进行回流和重绘，用户感觉很差。

 

注意两个词“repaint"和"reflow"。

　　repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生。——如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。

　　reflow（回流）：浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程就叫回流。

总结：以上两种严重影响用户体验，会无意识的流失用户。

 

 

解决方案

 

 服务端：方式比较多，可以从架构上说（这个内容太多了，什么负载均衡了，什么缓存了，什么主从了），但是今天主要讨论语言层面。

　　　　我们可以使用逐步返回内容的方式，输送数据给浏览器，如我们可以使用php的flush，把整个head部分，半个body加一部分div返回给浏览器，进行渲染,然后把其他部分逐步输送到浏览器。

　　　　我们可以在服务端使用多线程或多进程的方式并发去进行数据处理。如php常见的

do {
　　$mrc = curl_multi_exec($mh, $active);
}while($mrc==CURLM_CALL_MULTI_PERFORM);
while ($active && $mrc == CURLM_OK){
　　if (curl_multi_select($mh) != -1){
　　　　do {
　　　　　　$mrc = curl_multi_exec($mh,$active);
　　　　}while($mrc==CURLM_CALL_MULTI_PERFORM);
　　}
}

或者

<?php
while (count($sockets)) {
    $read = $write = $sockets;
    $n = stream_select($read,$write, $e, $timeout);
    if ($n > 0) {
        foreach ($read as $r) {
            $id = array_search($r, $sockets);
            $data = fread($r, 8192);
            if (strlen($data) == 0) {
                fclose($r);
                unset ($sockets[$id]);
            }else {
                $retdata[$id] .= $data;
            }   
        }   
        $retdata[$id] = preg_replace('/^HTTP(.*?)\r\n\r\n/is',<em>, $retdata[$id]);</em>
            foreach ($write as $w) {
                if (!is_resource($w))continue;
                $id = array_search($w, $sockets);
                fwrite($w, "GET /" . $url[$id] . "HTTP/1.0\r\nHost: " . $hosts[$id] ."\r\n\r\n");
                $status[$id] = 1;
            }   
    }else {
        break;
    }   
}

 

JavaScript：

　　1、把脚本进行压缩（移除不必要的字符，注释以及空行）。

　　2、对部分js文件进行合并，以减少http的请求个数，以减少服务器端的压力——但是要量力而行，因为如果你的js文件很大，下载很慢的话，很多功能都不能正常进行，我们可以按照业务进行合并。

　　3、使用外部js文件。因为现在很多浏览器都有缓存，明显会减少http请求数。

　　4、将脚本放在页面底部。先让用户看到内容，然后再加载js，这样用户会感觉页面加载速度很快。

CSS:

　　1、合并多个css文件，以减少http的请求个数，以减少服务器端的压力。

　　2、使用外部css文件。主要原因是浏览器缓存，以减少http请求。

　　3、放在页面顶部（head标签处），防止出现“无样式内容的闪烁”。

 

怎样尽可能的缩短浏览器上页面渲染的时间，可以从以下几个方面入手：
1.写出高效的css代码 
2.避免使用css表达式 
3.把css文件放在页面顶部 
4.指定页面图片的尺寸 
5.页面头部标明文档编码 
一，写出高效的css代码
首先弄清浏览器解析html代码的过程：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中。每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。css引擎查找样式表，对每条规则都按从右到左的顺序去匹配。
了解过程后，我们可以看出可以从两方面优化我们的css代码：1，定义的css样式规则条数越少越好，所以赶紧删除css文件中不必要的样式定义；2，优化每条规则的选择符书写方式，尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上，让引擎少走不必要的弯路。
如以下几种效率不高的css书写方式：
a, 用通配符作为关键选择符（关键选择符指的是每条规则最右侧的选择符）
复制代码代码如下:
body * {...} 
.hide-scrollbars * {...} 
b, 用标签做关键选择符
复制代码代码如下:
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
c, 画蛇添足的写法
复制代码代码如下:
ul#top_blue_nav {...}
form#UserLogin {...} 
d, 给非连接标签添加 :hover 伪类，这会对用了strict doctype的页面在IE7和IE8下变的很慢。
复制代码代码如下:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
优化建议：
a, 避免使用通配符；
b, 让css引擎快速辨别该规则是否适用于当前元素：多用id或class选择符，少用标签选择符；
c, 不要画蛇添足把id和class或标签和class等连着写；
d, 尽量避免使用后代选择符，去除不必要的祖先元素，可以考虑使用class选择符来替换后代选择符；
复制代码代码如下:
/*给无序和有序的li定义不同颜色，你可能会这样写：*/
ul li {color: blue;}
ol li {color: red;}
/*给li添加class，这样定义效率会更高：*/
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
e, 避免给非连接标签添加 :hover 伪类。
二，避免使用css表达式
css表达式仅在ie浏览器下才起作用，微软已在ie8后不推荐使用，因为它会严重影响页面性能：任何时候，不管任何一个事件被触发，例如窗口的 resize 事件，鼠标的移动等等，css表达式都会重新计算一遍。
三，把css文件放在页面顶部
把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载页面其他内容。另外，内联样式表（放在<style>内的样式）有可能会引起页面重新渲染或显示隐藏页面中的某些元素，建议不要使用内联样式表。
四，指定页面图片的尺寸
指定页面图片尺寸，要符合图片的真实尺寸（不要通过指定尺寸来缩放图片），可以避免尺寸改变导致的页面结构效果的变化，所以对加快页面渲染速度有益。
五，页面头部标明文档编码
HTML文档是以包含文档编码信息的数据流方式在网络间传输。页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明。客户端浏览器只有在确定了页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的javascript代码前，大部分的浏览器（ie6、ie7、ie8除外）都会缓冲一定字节的数据来从中查找编码信息，不同的浏览器当中预缓冲的字节数是不一样的。如果浏览器在接收到了设定的预缓冲数据量后还没有找到页面的编码信息，便会根据各自指定的默认编码开始渲染页面，如果这时再获取到页面编码信息，而又跟现在所用编码不一致，那整个页面就得重新渲染，某些情况下甚至需要重新获取数据。所以，对于大小超过1KB的页面（根据在各浏览器的测试情况，预缓冲数据量最多的也就1KB）应当尽早标明编码信息。
优化建议：
a, 尽量在HTTP头部信息中标明页面编码（这个需要在服务器端设置）。像Firefox浏览器，如果在HTTP头部信息就获取到了编码信息，便会预缓冲更少的数据从而减少不必要的数据缓冲时间；
b, 在HTML的 <head> 部分标明编码信息；
c, 要习惯给文档指定编码；
d, 给页面指定的编码要符合页面实际编码；如果你在HTTP头部信息和HTML标记中同时指定了编码，需确保编码信息一致。