Html标签嵌套对展示性能的影响

Kill_Wolf0403 2009-04-23 11:30:12

一个简单问题：如下2种Html写法，那个加载速度快？


<div>
<div>内容代码2</div>
<div>内容代码3</div>
<div>内容代码4</div>
<div>内容代码5</div>
<div>内容代码6</div>
<div>内容代码7</div>
<div>内容代码8</div>
<div>内容代码9</div>
<div>内容代码10</div>
</div>


<div>内容代码2</div>
<div>内容代码3</div>
<div>内容代码4</div>
<div>内容代码5</div>
<div>内容代码6</div>
<div>内容代码7</div>
<div>内容代码8</div>
<div>内容代码9</div>
<div>内容代码10</div>

我的答案，写法2。当然，如果只是上面的写法，实际上这两种写法对性能的差别，可以忽略不计。

但是如果，上图的内容代码区域如果嵌入了一些不可控的因素，比如：外站的一些脚本出现在<div>内容代码7</div>中。写法1需要所有都加载完成才可以正常显示，写法2的内容2-6 不受这个影响。

更具体的来说：浏览器解析Html的规则必然是：

当服务器向浏览器输出多少，浏览器就会解释多少，浏览器不可能解析没有给它的内容。
源文件Body区域的每个Html标签，如果浏览器找不到这个标签的结束标志（一些html标签没有结束标志，但是需要浏览器去分析结束位置）。这个标签对应的内容，浏览器就难以正常显示。
源文件Body区域的多个标签嵌套，需要所有被嵌套标签都加载完成，才能正常显示，这时候加载顺序是倒着的。举例：<div>1<div>2<div>3</div><div></div>这段源代码会先显示3，然后2，最后1。因为加载div1时并没有找到它的结束标签</div>，于是它不加载继续解析源文件，在找到div2时，和上面一样也没有找到结束位置不做加载。然后是找到div3，div3有结束标签。浏览器开始加载div3，之后，找到div2的结束标签，加载div2，以次类推，所以这时理论加载顺序为： 3 2 1 。
如果浏览器的加载页面元素只是上面这样的工作原理，我们看到的很多页面的效果就是整个页面所有都加载完成才能显示出来。其实浏览器还有由一个特性，它可以去预测没有加载的内容。有些浏览器在打开一些网页的规程中，会把一些元素移位，最后才恢复正常，一部分原因就是这个事先预测在起作用。

参考资料:

<div>嵌套<div>后的显示速度问题
http://zhidao.baidu.com/question/7892633.html

关于DIV和表格的速度评论
http://x.discuz.net/viewthread-469261.html

把所有东西都放在一个大DIV里，显示速度问题。
http://zhidao.baidu.com/question/52404898.html

整个网页面用一个DIV包含起来好不好
http://zhidao.baidu.com/question/67452079.html

...全文