起因
在閱讀 neuron.js 源碼時發(fā)現(xiàn)了下面一段代碼：
var DOC = document;
// never use `document.body` which might be NULL during downloading of the document.
var HEAD = DOC.getElementsByTagName('head')[0];
function load_js(src) {
var node = DOC.createElement('script');
node.src = src;
node.async = true;
js_onload(node, function() {
HEAD.removeChild(node);
});
HEAD.insertBefore(node, HEAD.firstChild);
}
var js_onload = DOC.createElement('script').readyState
// @param {DOMElement} node
// @param {!function()} callback asset.js makes sure callback is not NULL
? function(node, callback) {
node.onreadystatechange = function() {
var rs = node.readyState;
if (rs === 'loaded' || rs === 'complete') {
node.onreadystatechange = NULL;
callback.call(this);
}
};
}
: function(node, callback) {
node.addEventListener('load', callback, false);
};
上面這段代碼在 cortex@6.2.4 中，然而 cortex@6.2.3 中的 neuron.js 中的一段確稍有不同。
function load_js(src) {
var node = DOC.createElement('script');
node.src = src;
node.async = true;
js_onload(node, function() {
HEAD.removeChild(node);
});
// blabla
setTimeout(function () {
HEAD.insertBefore(node, HEAD.firstChild);
}, 0);
}
這里比最新版本多了個 setTimeout 方法。
可是卻在 IE10 及以下的版本中報錯了。報錯的原因是 removeChild 在 insertBefore 方法之前執(zhí)行了。
那么為什么會報錯呢？script 標簽是在被添加到 dom 樹后再開始加載還是設(shè)置了 src 后開始加載呢？
經(jīng)過
來測試下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link type="text/css" rel="stylesheet" href="index.css">
<title>vivaxy</title>
</head>
<body>
<script>
var HEAD = document.getElementsByTagName('head')[0];
var node = document.createElement('script');
node.onreadystatechange = function () {
if (node.readyState === 'loaded' || node.readyState === 'complete') {
console.log('loaded');
}
};
node.src = 'async.js';
HEAD.insertBefore(node, HEAD.firstChild);
</script>
</body>
</html>
async.js 中
console.log('executed');
這段代碼會異步加載 async.js ，并且在 script 標簽的加載后打印 loaded ，同時在 async.js 執(zhí)行時打印 executed 。
首先注釋掉 HEAD.insertBefore(node, HEAD.firstChild); ，在 IE10 及以下的瀏覽器中執(zhí)行的結(jié)果是會顯示 load 。在 IE11 和 chrome 中則不顯示任何內(nèi)容。
結(jié)果
說明 IE10 及以下的版本會在 script 設(shè)置了 src 后開始加載腳本。在所有瀏覽器中，script 被添加在 dom 樹中后才會執(zhí)行。
