我本来 以为 自己 已经在 很久以前弄清楚了 这个，但是 最近 看到一篇文章 我就又糊涂啦，于是 我又启动了测试模式。。这篇笔记 是承接我很久以前写的笔记，建议对比着看，如果有矛盾 已这篇笔记为正答！
//这个是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" href="http://127.0.0.1:8080/red.css">
</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
可以发现，浏览器是并行发起css、图片、js的请求，当hh.js被延时后，并不会影响其他资源与服务器之间的响应。
页面阻塞期间，我在source资源下搜索了bb.js,发现并没有,说明js的加载会阻塞其他资源的加载。
在resource资源卡下，会发现bb.js还有其他资源其实已经被下载，这个现象就说明了浏览器存在优化现象，在之前那篇笔记中也提到过Prefetch，虽然浏览器进行预加载，但是并不会执行下载后的内容，而是把这个留给真正该加载的时候 ，也就是 延时的js执行之后。
所以这个时候，看到的页面为空白
dom树的生成也被阻塞 - ** eg2:颠倒head标签里hh.js 与red.css文件的位置**
css是在延时的js前，就已经被下载的到本地，在source资源内也可以搜索到，css文件内有对html背景色的设置，但是并没有被渲染。
dom树，也没有完全被渲染出来。
-
** eg3:颠倒最初代码中bb.js 与hh.js 在文件中的位置。**
在这个例子中，可以发现hh.js截断了dom树的生成，但是这次不会妨碍页面渲染。
eg2与eg3：应该一起来说明一个问题：页面的渲染 需要首先生成dom树，再由css生成CSSOM，最后两个一起生成render tree。由前面两个例子 可以证明dom树有最小的生成要求，及只要body标签被生成，dom树就可以和CSSOM一起进行渲染啦。
- eg4:document的DOMContentLoaded事件与window的load事件
说明前者是在dom树加载完毕，load是在页面内的资源都加载完毕才执行的，所以图片资源的load事件在dom树加载完毕之后。
总结：总听到 有人会建议 要求 将script标签放到body底端，的确 这样不会影响dom树的构建，不会影响渲染树的生成，不会阻塞其他资源的下载，但是一定要这样么，script元素有async属性，可以使得script的加载为异步（向服务器端发起请求都是异步的），不会阻塞其他资源的下载，
这个打印结果对应的代码是最初贴的那段render.html 的代码，只不过将每个script标签增加属性async,发现 dom树瞬间被构建，接下来在source可用资源内 也可以搜索到red.css 说明 确实 没有阻塞其他资源的下载，，
问题：如果将script标签设为异步固然是好 这样无论放在哪里 ，确实不会影响其他资源的下载，也不会 影响dom树的构建，但是 会带来一个问题，即不同script标签 之前是异步发请求，同步下载的，最前的先下载，最后的后下载，这样是因为 js之间是存在依赖的，这就是 之前为什么把jq放在自己的js之前的原因。。
拓展：在async的基础上引入模块化开发，这样就可以很好的处理了之前担心的依赖问题。关于模块化开发 ，我之前有写过模块加载的代码,也做过总结后来发现还少了AMD规范里的某些功能，代弥补，但是基本的处理依赖也已经实现了，关于AMD与CMD的区别这里也说了不少。
