浏览器解析html的过程是：接受网络数据-》将二进制码变成字符-》将字符变为unicode code points.-》tokenizer -》tree constructor -》DOM ready -》Window ready. 前端编程，主要理解的是tree constructor -> dom ready -> window ready的流程。因为在tree constructor的过程中，可能会有动态输出，比如 document.createElement('script'). 动态输出的部分是怎么被解析的呢？动态的script ready和DOM ready和window ready有什么关系,通过以下代码，可以清楚看出浏览器对HTML的加载过程与事件的触发时间。
​1. [代码][HTML]代码    
<!-- 
此文件用来测试browser解析HTML的时间顺序
1, script to load jQuery.js. -- <script> in <head>
2, script to load dojo.js. -- loadDojo function.
3, DOMContentLoaded event.
4, window load event.
5, dojo.js script load event.
在代码中嵌入了大量的log来探索dojo和jquery是否被定义。
 
使用方法: 有6中组合方式
<script> for jQuery.js 可以使用async属性或者不使用async.
    乘以
loadDojo方法可以放在Place 1, Place 2或者Place 3处。默认情况放在了Place 3处。
一个地方使用时，另外两个地方必须屏蔽。
-->
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
  </head>
<body>
  before
  <script>
    // This function load dojo resource by creating <script> tag. You can put this function in 3 places to test how browser load JS. 
    function loadDojo() {
        var s = document.createElement('script');
        s.src = 'http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js';
        s.type='text/javascript';http://www.huiyi8.com/hunsha/​
        s.async = true;婚纱摄影
        s.addEventListener('load',  
            function(){
               console.log('=========script ready========='); 
               console.log('dojo:' + !!window.dojo);
               console.log('jQuery:'+!!window.jQuery);
            }, 
            false);
        document.head.appendChild(s);
    };
    
   document.addEventListener('DOMContentLoaded', 
        function(){
           console.log('==========dom ready============'); 
           console.log('dojo:' + !!window.dojo);
           console.log('jQuery:'+!!window.jQuery);
            
           // Place 1.
           // You can put function here:
           //loadDojo();
        }, 
        false);
         
   window.addEventListener('load',  
        function(){
           console.log('==============window ready=============='); 
           console.log('dojo:' + !!window.dojo);
           console.log('jQuery:'+!!window.jQuery);
            
           // Place 2.
           // You can put function here:
           // loadDojo();
        }, 
        false);
     
    // Place 3. 
    // You can put function here:
    loadDojo();
    
   console.log('=========after creation ============');
   console.log('dojo:' + !!window.dojo);
   console.log('jQuery:'+!!window.jQuery);
  </script>
  after
<body>
</html>
​

理解HTML解析过程的更多相关文章

  1. （转自360安全客）深入理解浏览器解析机制和XSS向量编码

    (译者注:由于某些词汇翻译成中文后很生硬,因此把相应的英文标注在其后以便理解.这篇文章讲的内容很基础,同时也很重要,希望对大家有所帮助.) 这篇文章将要深入理解HTML.URL和JavaScript的 ...

  2. dig理解DNS的解析过程 - 阿权的书房

    关于DNS的常识,可以阅读附录的一些参考资料.本文旨在尝试举例用dig命令理解这个过程,并非权威知识,仅供参考.测试域名为阿权的书房的域名 www.aslibra.com 和 www.163.com. ...

  3. DNS解析过程

    参考: http://www.maixj.net/ict/dns-chaxun-9208 http://blog.it985.com/8389.html DNS(Domain Name System) ...

  4. XML解析之SAX解析过程代码详解

    上一篇谢了解析原理和过程,这里应用代码直观认识这个原理: 新建Demo1类: import java.io.File; import javax.xml.parsers.SAXParser; impo ...

  5. MyBatis 源码分析 - 映射文件解析过程

    1.简介 在上一篇文章中,我详细分析了 MyBatis 配置文件的解析过程.由于上一篇文章的篇幅比较大,加之映射文件解析过程也比较复杂的原因.所以我将映射文件解析过程的分析内容从上一篇文章中抽取出来, ...

  6. MyBatis 源码分析 - 配置文件解析过程

    * 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...

  7. MySQL解析过程、执行过程

    转载:https://student-lp.iteye.com/blog/2152601 https://www.cnblogs.com/cdf-opensource-007/p/6502556.ht ...

  8. javascript的解析过程

    引言: javascript是一种解释型的脚本语言,它不同于java或者c#这种编译语言,不需要编译成游览器可识别的语言,而是由游览器动态解析和执行的.(本身就是游览器可以直接识别,javascrip ...

  9. DNS原理及其解析过程【精彩剖析】

    DNS原理及其解析过程[精彩剖析] 2012-03-21 17:23:10 标签:dig wireshark bind nslookup dns 原创作品,允许转载,转载时请务必以超链接形式标明文章 ...

随机推荐

  1. 迅雷在P2P网络中的另类上传速度

    如上图,我们一般在下载BT时,一般P2P是边下载边上传. 但是迅雷在自己的软件中可以设置上传速度,反而在展示时却把P2P协议的速度不在上传那么显示,而是使用协议速度来进行展示:并且这个速度无法设置. ...

  2. 在C#的数据类型中，什么属于值类型，什么属于引用类型

    转自原文 在C#的数据类型中,什么属于值类型,什么属于引用类型 类型:整数,浮点数,高精度浮点数,布尔,字符,结构,枚举引用类型:对象(Object),字符串,类,接口,委托,数组除了值类型和引用类型 ...

  3. fastscript增加公共函数

    fastscript增加公共函数 unit fs_BsCommFuncs; interface{$i fs.inc}uses SysUtils, Classes, fs_iclassesrtti, f ...

  4. iOS应用崩溃日志揭秘

    这篇文章还可以在这里找到 英语 Learn how to make sense of crash logs! 本文作者是 Soheil Moayedi Azarpour, 他是一名独立iOS开发者. ...

  5. Android(java方法）上实现mp4的分割和拼接 （一）

       最近正在处理android上的mp4切割问题.学习了很多mp4的知识,mp4文件按照编码类型,分为mpeg-4,avc这两种:这两种类型的mp4在后面的处理中会有不同的地方. 在Android系 ...

  6. 如果当前地图文档中有独立的Table，通过Engine如何获取该Table？

    将IMap转为ITableCollection,通过ITableCollection.get_Table(int index);来获取该Table

  7. iOS -- SKEmitterNode类

      SKEmitterNode类 继承自 SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject(NSObje ...

  8. tomcat7设置usernamepassword

    因为tomcat是绿色版.今天想在网页上管理项目,却发现没实username和password.打开tomcat-users.xml文件全都是凝视.如图: 将例如以下代码拷贝到tomcat-users ...

  9. BZOJ 3727 PA2014 Final Zadanie 树形DP

    题目大意:给定一棵树,令一个点到全部点的距离与点权的乘积之和为b[i].求每一个点的权值a[i] 首先假设给定a[i]我们能够非常轻松的求出b[i] 可是反过来怎么搞?高斯消元?30W? 考虑已知a[ ...

  10. python（31）- 模块练习

    1. 小程序:根据用户输入选择可以完成以下功能:     创意文件,如果路径不存在,创建文件夹后再创建文件     能够查看当前路径     在当前目录及其所有子目录下查找文件名包含指定字符串的文件 ...