我本來 以為 自己 已經(jīng)在 很久以前弄清楚了 這個吕朵，但是 最近 看到一篇文章 我就又糊涂啦茫经，于是 我又啟動了測試模式薇组。肿仑。這篇筆記 是承接我很久以前寫的筆記序目，建議對比著看，如果有矛盾 已這篇筆記為正答楞卡！
//這個是node文件的內(nèi)容霜运，對 hh.js做了延時,html文件會分別對hh.js、bb.js蒋腮、red.css進行引用淘捡。下面會有幾個例子，來測試引用js 的次序?qū)ξ募秩镜挠绊懗卮荨焦除！?const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 8080;
http.createServer((req, res) => {
if(req.url=='/hh.js'){
fs.readFile('hh.js','utf-8',function(err,data){
res.writeHead(200, { 'Content-Type': 'text/plain' });
setTimeout( function(){res.write(data);
res.end()},10000)
})
}else if(req.url=='/bb.js'){
fs.readFile('bb.js','utf-8',function(err,data){
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.write(data);
res.end()
})
}else if( req.url == '/red.css' ){
fs.readFile('red.css','utf-8',function(err,data){
res.writeHead(200, { 'Content-Type': 'text/css' });
res.write(data);
res.end()
})
}else if(req.url == '/render.html'){
fs.readFile('render.html','utf-8',function(err,data){
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(data);
res.end()
})
}
}).listen(port, hostname, () => {
console.log('Server running at ' + hostname);
});
/*這個是render.html文件，在body底部 的script標簽內(nèi)作彤，定義了圖片加載完畢的調(diào)用事件膘魄，頁面的load事件，以及dom的加載完畢事件*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>測試瀏覽器渲染</title>
<script src='http://127.0.0.1:8080/hh.js' ></script>
<link rel="stylesheet" >
</head>
<body>
<p id= 'hh'>lalalal</p>
<script src='http://127.0.0.1:8080/bb.js' ></script>
<p>bababab</p>
<p>xxsxsxsxs</p>
<script>
var img = document.getElementById('img')
img && (img.onload = function() {
console.log('imgload')
})
window.onload=function(){console.log('window.onload加載完畢')}
function tttt(){console.log('domcontentload加載ok')}
document.addEventListener('DOMContentLoaded',tttt,false);
</script>
</body>
</html>
-
** eg1:將hh.js放在所有引用資源的最前面竭讳，具體代碼同上**
注意：在服務端已經(jīng)對hh.js進行了延時10000ms
可以發(fā)現(xiàn)创葡，瀏覽器是并行發(fā)起css、圖片绢慢、js的請求灿渴，當hh.js被延時后，并不會影響其他資源與服務器之間的響應胰舆。
頁面阻塞期間骚露，我在source資源下搜索了bb.js,發(fā)現(xiàn)并沒有,說明js的加載會阻塞其他資源的加載。
在resource資源卡下缚窿，會發(fā)現(xiàn)bb.js還有其他資源其實已經(jīng)被下載棘幸，這個現(xiàn)象就說明了瀏覽器存在優(yōu)化現(xiàn)象，在之前那篇筆記中也提到過Prefetch倦零，雖然瀏覽器進行預加載误续，但是并不會執(zhí)行下載后的內(nèi)容，而是把這個留給真正該加載的時候 扫茅，也就是 延時的js執(zhí)行之后女嘲。
所以這個時候，看到的頁面為空白
dom樹的生成也被阻塞 - ** eg2:顛倒head標簽里hh.js 與red.css文件的位置**
css是在延時的js前诞帐，就已經(jīng)被下載的到本地欣尼，在source資源內(nèi)也可以搜索到，css文件內(nèi)有對html背景色的設置停蕉，但是并沒有被渲染愕鼓。
dom樹，也沒有完全被渲染出來慧起。
-
** eg3:顛倒最初代碼中bb.js 與hh.js 在文件中的位置菇晃。**
在這個例子中，可以發(fā)現(xiàn)hh.js截斷了dom樹的生成蚓挤，但是這次不會妨礙頁面渲染磺送。
eg2與eg3：應該一起來說明一個問題：頁面的渲染 需要首先生成dom樹驻子，再由css生成CSSOM，最后兩個一起生成render tree估灿。由前面兩個例子 可以證明dom樹有最小的生成要求崇呵，及只要body標簽被生成，dom樹就可以和CSSOM一起進行渲染啦馅袁。
- eg4:document的DOMContentLoaded事件與window的load事件
說明前者是在dom樹加載完畢域慷，load是在頁面內(nèi)的資源都加載完畢才執(zhí)行的，所以圖片資源的load事件在dom樹加載完畢之后汗销。
總結：總聽到 有人會建議 要求 將script標簽放到body底端犹褒，的確 這樣不會影響dom樹的構建，不會影響渲染樹的生成弛针，不會阻塞其他資源的下載叠骑，但是一定要這樣么，script元素有async屬性削茁，可以使得script的加載為異步（向服務器端發(fā)起請求都是異步的）座云，不會阻塞其他資源的下載，
這個打印結果對應的代碼是最初貼的那段render.html 的代碼付材，只不過將每個script標簽增加屬性async,發(fā)現(xiàn) dom樹瞬間被構建朦拖，接下來在source可用資源內(nèi) 也可以搜索到red.css 說明 確實 沒有阻塞其他資源的下載，厌衔，
問題：如果將script標簽設為異步固然是好 這樣無論放在哪里 璧帝，確實不會影響其他資源的下載，也不會 影響dom樹的構建富寿，但是 會帶來一個問題睬隶，即不同script標簽 之前是異步發(fā)請求，同步下載的页徐，最前的先下載苏潜，最后的后下載，這樣是因為 js之間是存在依賴的变勇，這就是 之前為什么把jq放在自己的js之前的原因恤左。。
拓展：在async的基礎上引入模塊化開發(fā)搀绣，這樣就可以很好的處理了之前擔心的依賴問題飞袋。關于模塊化開發(fā) ，我之前有寫過模塊加載的代碼,也做過總結后來發(fā)現(xiàn)還少了AMD規(guī)范里的某些功能链患，代彌補巧鸭，但是基本的處理依賴也已經(jīng)實現(xiàn)了，關于AMD與CMD的區(qū)別這里也說了不少麻捻。
