我本來 以為 自己 已經在 很久以前弄清楚了 這個，但是 最近 看到一篇文章 我就又糊涂啦，于是 我又啟動了測試模式。。這篇筆記 是承接我很久以前寫的筆記，建議對比著看，如果有矛盾 已這篇筆記為正答！
//這個是node文件的內容，對 hh.js做了延時,html文件會分別對hh.js、bb.js、red.css進行引用。下面會有幾個例子，來測試引用js 的次序對文件渲染的影響。。
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標簽內，定義了圖片加載完畢的調用事件，頁面的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放在所有引用資源的最前面，具體代碼同上**
注意：在服務端已經對hh.js進行了延時10000ms
可以發(fā)現(xiàn)，瀏覽器是并行發(fā)起css、圖片、js的請求，當hh.js被延時后，并不會影響其他資源與服務器之間的響應。
頁面阻塞期間，我在source資源下搜索了bb.js,發(fā)現(xiàn)并沒有,說明js的加載會阻塞其他資源的加載。
在resource資源卡下，會發(fā)現(xiàn)bb.js還有其他資源其實已經被下載，這個現(xiàn)象就說明了瀏覽器存在優(yōu)化現(xiàn)象，在之前那篇筆記中也提到過Prefetch，雖然瀏覽器進行預加載，但是并不會執(zhí)行下載后的內容，而是把這個留給真正該加載的時候 ，也就是 延時的js執(zhí)行之后。
所以這個時候，看到的頁面為空白
dom樹的生成也被阻塞 - ** eg2:顛倒head標簽里hh.js 與red.css文件的位置**
css是在延時的js前，就已經被下載的到本地，在source資源內也可以搜索到，css文件內有對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是在頁面內的資源都加載完畢才執(zhí)行的，所以圖片資源的load事件在dom樹加載完畢之后。
總結：總聽到 有人會建議 要求 將script標簽放到body底端，的確 這樣不會影響dom樹的構建，不會影響渲染樹的生成，不會阻塞其他資源的下載，但是一定要這樣么，script元素有async屬性，可以使得script的加載為異步（向服務器端發(fā)起請求都是異步的），不會阻塞其他資源的下載，
這個打印結果對應的代碼是最初貼的那段render.html 的代碼，只不過將每個script標簽增加屬性async,發(fā)現(xiàn) dom樹瞬間被構建，接下來在source可用資源內 也可以搜索到red.css 說明 確實 沒有阻塞其他資源的下載，，
問題：如果將script標簽設為異步固然是好 這樣無論放在哪里 ，確實不會影響其他資源的下載，也不會 影響dom樹的構建，但是 會帶來一個問題，即不同script標簽 之前是異步發(fā)請求，同步下載的，最前的先下載，最后的后下載，這樣是因為 js之間是存在依賴的，這就是 之前為什么把jq放在自己的js之前的原因。。
拓展：在async的基礎上引入模塊化開發(fā)，這樣就可以很好的處理了之前擔心的依賴問題。關于模塊化開發(fā) ，我之前有寫過模塊加載的代碼,也做過總結后來發(fā)現(xiàn)還少了AMD規(guī)范里的某些功能，代彌補，但是基本的處理依賴也已經實現(xiàn)了，關于AMD與CMD的區(qū)別這里也說了不少。
