`
zhangyaochun
  • 浏览: 2608995 次
  • 性别: 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

 

 

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

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

相关推荐

    oa源码 大型oa asp.net 源码

    The code defines a `login2` class which inherits from `System.Web.UI.Page`. This class contains methods and properties related to user login functionality, including handling login attempts, setting ...

    VuePress Quick Start Guide

    All the site content is rendered as HTML by VuePress and is then executed as a single-page web app. This means everything works fast and loads quickly. You will start by installing and setting up ...

    HTML5 and CSS3 Transition, Transformation, and Animation

    Understand how offline web application works and learn about web storage concepts Get acquainted with the nuances of CSS3 transition Create complex web pages using advanced animations Approach This ...

    UE（官方下载）

    How to check your JavaScript source code for common mistakes without actually running the script or opening the web page Character properties at your fingertips Access the properties of a character ...

    php.ini-development

    you may only use these constants *after* the line that loads the extension. ;;;;;;;;;;;;;;;;;;; ; About this file ; ;;;;;;;;;;;;;;;;;;; ; ...

    salesforce dev 501 Notes

    Understanding how to use these components effectively is crucial for creating visually appealing and functional user interfaces. Attributes control various aspects of a component, such as its ...

    Login Control

    One nice feature of the control is it automatically sets initial focus on the LoginID textbox when the page loads. It is assumed that the control is used in the first form of the page. This is true ...

    nao机器人java语音源码

    nao机器人学习过程中java代码 ... ... ... public class ALTextToSpeechProxy ... If you want that change to take effect automatically after reboot of your robot, refer to the robot web page (setting page). /// ...

    Developing Flex Applications 910p dda_doc88_cracker.zip

    2. a web page viewer for doc88 ebt 3. a DDA downloader for doc88.com CONTENTS PART I: Presenting Flex CHAPTER 1: Introducing Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...

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