我们打开的页面(Web页面)在各种不同的浏览器中运行，浏览器载入、渲染页面的速度直接影响着用户体验，简单地说下页面渲染，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。
这里大致了解一下浏览器都是怎么干活的，首先贴出一段示例代码：
<span class="dec" style="color: rgb(128, 0, 0);"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><html</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">xmlns</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"http://www.w3.org/1999/xhtml"</span><span class="tag" style="color: rgb(128, 0, 0);">></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><head</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">runat</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"server"</span><span class="tag" style="color: rgb(128, 0, 0);">></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><title></span><span class="pln">标题</span><span class="tag" style="color: rgb(128, 0, 0);"></title></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><link</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">href</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"../css/css.css"</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">rel</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"Stylesheet"</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">type</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"text/css"</span><span class="pln"> </span><span class="tag" style="color: rgb(128, 0, 0);">/></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"></head></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><body></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><div></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"></div></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><img</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">src</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"images/test.jpg"</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">alt</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"示例图片"</span><span class="pln"> </span><span class="tag" style="color: rgb(128, 0, 0);">/></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><br</span><span class="pln"> </span><span class="tag" style="color: rgb(128, 0, 0);">/></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><p></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"></p></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"></body></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"><script</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">type</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"text/javascript"</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">src</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"js/js.js"</span><span class="tag" style="color: rgb(128, 0, 0);">></script></span><span class="pln">
</span><span class="tag" style="color: rgb(128, 0, 0);"></html></span>
我们现在要在浏览器中显示以上结构的HTML。
1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。
2.加载从<html>标签开始，并发现<head>标签内有个外部样式文件要加载
<span class="tag" style="color: rgb(128, 0, 0);"><link</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">href</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"../css/css.css"</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">rel</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"Stylesheet"</span><span class="pln"> </span><span class="atn" style="color: rgb(255, 0, 0);">type</span><span class="pun">=</span><span class="atv" style="color: rgb(0, 0, 255);">"text/css"</span><span class="pln"> </span><span class="tag" style="color: rgb(128, 0, 0);">/></span>
4.此时客户端浏览器继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。
5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。
6.<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。
7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码：
<span class="pun"><</span><span class="pln">script type</span><span class="pun">=</span><span class="str" style="color: rgb(0, 100, 0);">"text/javascript"</span><span class="pln"> src</span><span class="pun">=</span><span class="str" style="color: rgb(0, 100, 0);">"js/js.js"</span><span class="pun">></</span><span class="pln">script</span><span class="pun">></span>
8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。
9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。
10.最后到浏览器发现了</html>为止。
从上述简单的说了下浏览器加载HTML页面原理后，会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度，重新渲染局部的次数量也会影响到页面打开的速度，当然这只是有时候页面打开速度慢一部分原因。
对于这种来回渲染，内行叫为reflow，reflow几乎是无法避免的，我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。另外还有一次词叫repaint，叫重绘，repaint如果只是改变如背景颜色或者文字的颜色，repaint的速度要比reflow的速度明显快的多。
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
