浏览器解析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>