理解HTML解析过程
浏览器解析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解析过程的更多相关文章
- (转自360安全客)深入理解浏览器解析机制和XSS向量编码
(译者注:由于某些词汇翻译成中文后很生硬,因此把相应的英文标注在其后以便理解.这篇文章讲的内容很基础,同时也很重要,希望对大家有所帮助.) 这篇文章将要深入理解HTML.URL和JavaScript的 ...
- dig理解DNS的解析过程 - 阿权的书房
关于DNS的常识,可以阅读附录的一些参考资料.本文旨在尝试举例用dig命令理解这个过程,并非权威知识,仅供参考.测试域名为阿权的书房的域名 www.aslibra.com 和 www.163.com. ...
- DNS解析过程
参考: http://www.maixj.net/ict/dns-chaxun-9208 http://blog.it985.com/8389.html DNS(Domain Name System) ...
- XML解析之SAX解析过程代码详解
上一篇谢了解析原理和过程,这里应用代码直观认识这个原理: 新建Demo1类: import java.io.File; import javax.xml.parsers.SAXParser; impo ...
- MyBatis 源码分析 - 映射文件解析过程
1.简介 在上一篇文章中,我详细分析了 MyBatis 配置文件的解析过程.由于上一篇文章的篇幅比较大,加之映射文件解析过程也比较复杂的原因.所以我将映射文件解析过程的分析内容从上一篇文章中抽取出来, ...
- MyBatis 源码分析 - 配置文件解析过程
* 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...
- MySQL解析过程、执行过程
转载:https://student-lp.iteye.com/blog/2152601 https://www.cnblogs.com/cdf-opensource-007/p/6502556.ht ...
- javascript的解析过程
引言: javascript是一种解释型的脚本语言,它不同于java或者c#这种编译语言,不需要编译成游览器可识别的语言,而是由游览器动态解析和执行的.(本身就是游览器可以直接识别,javascrip ...
- DNS原理及其解析过程【精彩剖析】
DNS原理及其解析过程[精彩剖析] 2012-03-21 17:23:10 标签:dig wireshark bind nslookup dns 原创作品,允许转载,转载时请务必以超链接形式标明文章 ...
随机推荐
- Java Scanner类中next()和nextLine()方法的区别
今天在练习中遇到了调用Scanner类中的nextLine()输入字符串自动跳过的问题,在博客上看了两篇解答,原来是nextLine()误认了前面next()输入时的Enter,但还是想了一会儿才弄清 ...
- OpenLayers3 动画
参考文章 openlayers3中三种动画实现
- 【bootstrap】使用支持bootstrap的时间插件daterangepicker
其中的架包和代码,具体可以去GitHub下查看: https://github.com/AngelSXD/myagenorderdiscount 1.引入js和css <link href=&q ...
- OracleCPU使用情况查询
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...
- 数据结构与算法——AVL树类的C++实现
关于AVL树的简单介绍能够參考:数据结构与算法--AVL树简单介绍 关于二叉搜索树(也称为二叉查找树)能够參考:数据结构与算法--二叉查找树类的C++实现 AVL-tree是一个"加上了额外 ...
- C语言-回溯例2
组合问题 组合:从n个不同元素中取r个不重复的元素组成一个子集,而不考虑其元素的顺序,称为从n个中取r个的无重组合,例如OR = {1,2,3,4}, n = 4, r = 3则无重组合为: {1,2 ...
- selenium之 文件上传方法
文件上传是所有UI自动化测试都要面对的一个头疼问题 首先,我们要区分出上传按钮的种类,大体上可以分为两种,一种是input框,另外一种就比较复杂,通过js.flash等实现,标签非input 我们分别 ...
- liunx安装redis和gcc
首先去上下载redis,我现在用的版本是:redis-3.0.4.tar.gz 然后放到虚拟机里面解压,下面是三种解压命令: tar -zxvf file.tar.gz tar -jcvf file ...
- matlab2016b -ubuntu 1604 -install- and -trouble -shooting--finally-all is ok!!
Linux系统下安装matlab2016b 标签: ubuntumatlablinux 2016-09-24 22:11 16203人阅读 评论(22) 收藏 举报 分类: linux 版权声明:本文 ...
- caffe学习--caffe入门classification00学习--ipython
首先,数据文件和模型文件都已经下载并处理好,不提. cd "caffe-root-dir " ----------------------------------分割线---- ...