DOM的构建与优化

一、构建模块

   HTML描述了一个页面的结构。浏览器会将它转换成一种他们能够理解的格式——文档对象模型(DOM),浏览器引擎有一段特殊的代码叫做解析器,将数据从一种格式转换成另外一种格式。

   一个HTML解析器能将数据从HTML转换成DOM。

   DOM扮演着两种角色,HTML文档的对象表示,也充当着外界和页面交互的接口,比如通过Javascript。

   页面上css样式会被映射到CSSDOM(css对象模型)上,跟DOM不一样的是,不能增量的构建。

 

二、标签的历史

   浏览器构建DOM的时候,如果遇到<srcipt>标签,会立即执行,如果脚本来自外部,会首先下载脚本。为了执行脚本,HTML的解析必须暂停,只有在JavaScript引擎执行完成后他才会重新开始解析。

 

document.write()也会让DOM 的解析暂停。

三、css会阻塞页面吗?

javascript阻塞页面解析是因为它可以修改文档。css不能修改文档,所以看起来它应该不会阻塞页面。

 background-color 属性,会阻塞页面。

即使css不阻塞DOM构建,它会阻塞DOM的渲染。知道DOM与CSSDOM准备好之前,浏览器什么都不会显示。

 

四、预解析

2008年前

 

 2008年后

先并行下载,然后开始一一解析。

五、预加载

     如果你想浏览器更轻易的访问到重要的资源,你可以把他们放在HTML标签当中或者将要加载的脚本内联到文档的前面。将不重要的资源晚一点加载,可以放在文档之后。

 

六、derfer 与async

        defer 和async 属性 提供给开发者一个方式来告诉浏览器哪些脚本是需要异步加载的。

     

  • defer 和async 的执行脚本时机不同
    他们告诉浏览器在后台加载脚本的时候,继续解析HTML

         defer:解析完DOM成后才执行
         async:脚本下载后立即执行,可能打断DOM的构建

七、preload

       

       告诉浏览器你需要尽快地加载他们。

       预加载字体需要注意:

      

 

posted @ 2018-08-16 14:59  雪昀  阅读(486)  评论(0编辑  收藏  举报