翻译学习《how-web-page-loads》

本文大部分来源于:

 

http://www.douban.com/note/153864670/   kejun的子资源原理笔记

 

个人做学习用,了解页面中script和css文件的合理顺序!

 

 

当html代码块(chunk)一旦有效,html parser开始处理它,将标签解析成token形式

 

 

 

<b>hello</b>

 

解析成7个token

 

  • start-tag  {name:b}
  • character {data:h}
  • character {data:e}
  • character {data:l}
  • character {data:l}
  • character {data:o}
  • end-tag   {name:b}
所有的token是 串行生成的,然后依次送至tree builder,tree builder根据它动态修改DOM tree.

<html>
     <head>
     <body>
        <b>
            "hello"
 

 

 

subresources(子资源)

 

tree builder频繁做的事情就是创建html元素,然后插入到文档中。有一些元素会触发加载子资源:

 

    例举常见的:

 

  • <body background>
  • <img src>
  • <script src>
  • <link href>
  • <iframe src>
解析算法会尽可能高效地将html源码转成DOM tree。但遇到end-tag {name:script}的token时候,处理会不同。如果script没有defer或者async属性,就会执行。

执行前还要满足两个条件
  • 如果是外联的js,必须完全下载完成再执行
  • 为了执行js,页面中所有的样式必须完全下载完成
因为脚本有可能改变DOM,会影响后面的解析
css会影响节点的样式,js可能会访问节点的样式属性


parser完成后,所有脚本执行完,触发DOMContentLoaded事件。接下来,parser会继续等async属性的脚本下载并完成执行,当所有子资源下载完,触发load事件。



扩展阅读:

http://gent.ilcore.com/2011/05/how-web-page-loads.html

 

 

你可能感兴趣的:(翻译学习《how-web-page-loads》)