现在的位置: 首页 > 综合 > 正文

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

2013年10月11日 ⁄ 综合 ⁄ 共 1776字 ⁄ 字号 评论关闭

一个简单问题:如下2种Html写法,那个加载速度快?


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


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

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

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

 

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

  • 当服务器向浏览器输出多少,浏览器就会解释多少,浏览器不可能解析没有给它的内容。
  • 源文件Body区域的每个Html标签,如果浏览器找不到这个标签的结束标志(一些html标签没有结束标志,但是需要浏览器去分析结束位置)。这个标签对应的内容,浏览器就难以正常显示。
  • 源文件Body区域的多个标签嵌套,需要所有被嵌套标签都加载完成,才能正常显示,这时候加载顺序是倒着的。举例:
    1
    2
    3

    这段源代码会先显示3,然后2, 最后1。因为加载div1时并没有找到它的结束标签

    ,于是它不加载继续解析源文件,在找到div2时,和上面一样也没有找到结束位置不做加载。然后是找到div3,div3有结束标签。 浏览器开始加载div3,之后,找到div2的结束标签,加载div2,以次类推,所以这时理论加载顺序为: 3 2 1 。

  • 如果浏览器的加载页面元素只是上面这样的工作原理,我们看到的很多页面的效果就是整个页面所有都加载完成才能显示出来。其实浏览器还有由一个特性,它可以去预测没有加载的内容。有些浏览器在打开一些网页的规程中,会把一些元素移位,最后才恢复正常,一部分原因就是这个事先预测在起作用。
  •  

    再回到最初的问题:

    一般美工在作页面时,会喜欢写法1的嵌套Html。如果一个夏姆,对用户体验要求高,同时预测到可能会在一些地方嵌入广告脚本会影响到页面显示,我会要求美工用方法2的方式来书写源文件,以保证用户体验。页面的设计,减少嵌套的层次,对页面的加载会好处多多的。

    最后,我家儿子刚过一周岁,文章的最后祝福一下我家小宝贝。

     

    参考资料:

    嵌套
    后的显示速度问题

    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

    查看评论
    * 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

【上篇】
【下篇】

作者:

抱歉!评论已关闭.