本文大部分来源于:
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