页面加载顺序与JS执行时机：onload与DOMContentLoaded详解

页面加载顺序与流程

页面加载的标准流程通常遵循以下步骤：首先解析HTML结构，随后加载外部脚本和样式表文件，接着解析并执行脚本代码，然后构造HTML DOM模型，之后加载图片等外部文件，最后页面加载完毕。

具体执行路径为：html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕。

JS 的初始化装载。

onload与DOMContentLoaded执行差异

onload事件并非在 document 加载完成时调用，而是在页面所有元素（包括图片等）全部加载完成后才会触发。如果页面上有大尺寸图片，下载耗时较长，脚本初始化将被延迟，严重影响用户体验。然而，window.onload 并非毫无用处，某些B/S架构软件需要在页面完全加载后才提供用户功能，此时 window.onload 可提供“加载中”状态提示；或者当页面内容极少，无需使用 document.ready() 时，可根据实际情况合理选择使用 onload 或 ready。

使用onload加载：

window.onload=function(){
var currentRenderer = 'javascript';
FusionCharts.setCurrentRenderer(currentRenderer);
var chartObj = new FusionCharts({
swfUrl: "Pie3D.swf",
width: "290", height: "210",
id: 'sampleChart',
dataSource: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
dataFormat: FusionChartsDataFormats.XMLURL,
renderAt: 'chart1div'
}).render();
            }

DOMContentLoaded实现方案

在 W3C 规范中，存在一个名为 DOMContentLoaded 的事件，它会在 DOM（文档对象模型）加载完成时触发。

方法一：

类似于Jquery的$(function(){...}) $(document).ready(function(){...})
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();

调用时：

document.ready(function(){

alert('ok');

方法二：

/如果支持 W3C DOM2, 则使用 W3C 方法
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", te, false);
}
else if (/MSIE/i.test(navigator.userAgent)){/如果是 IE 浏览器(不支持)
/创建一个 script 标签, 该标签有 defer 属性, 当 document 加载完毕时才会被载入
document.write("
var script = document.getElementByIdx_x("__ie_onload");
/如果文档确实装载完毕, 调用初始化方法
script.onreadystatechange = function() {
if (this.readyState == 'complete') {
te();
        } 
    } 
}
else if (/WebKit/i.test(navigator.userAgent)) {/如果是 Safari 浏览器(不支持)
/创建定时器, 每 0.01 秒检验一次, 如果文档装载完毕则调用初始化方法
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
te();
    } 
}, 10);
}
else {/如果以上皆不是, 使用最坏的方法 (本例中, Opera 7 将会跑到这里来)
window.onload = function(e) {
te();
    }
}
function te(){
alert('ok');
}