`
zhangyaochun
  • 浏览: 2566413 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

翻译学习《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

 

 

分享到：
| 位操作符
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics