本文摘自PHP中文网，作者青灯夜游，侵删。
CSS和JS文件的位置会影响页面效率。js脚本应放在底部，如果放在首部，当下载执行js时，会影响渲染行程绘制页面；而CSS应放在顶部，如果放在底部，页面可以逐步呈现，但在CSS下载并解析完毕后，已经呈现的文字和图片就要需要根据新的样式重绘。
js脚本文件的位置
js脚本应该放在底部，原因在于js线程与GUI渲染线程是互斥的关系，如果js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。
CSS文件的位置
CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间，因而我们需要尽快地将 CSS 传输到用户的设备，否则，（在页面渲染之前，）用户只能看到一个空白的屏幕。
CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级，更关键的是浏览器的渲染机制。
css在加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout，所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。
将CSS放在底部，页面可以逐步呈现，但在CSS下载并解析完毕后，已经呈现的文字和图片就要需要根据新的样式重绘，这是一种不好的用户体验。
js、css等脚本位置对性能的影响
用一句话概括就是： JS 全阻塞，CSS 半阻塞。(词是我发明的，方便记忆而已)
JS 会阻塞后续 DOM 解析以及其它资源(如 CSS，JS 或图片资源)的加载。
CSS 不会阻塞后续 DOM 结构的解析，不会阻塞其它资源(如图片)的加载，但是会阻塞 JS 文件的加载。
现代浏览器很聪明，会进行 prefetch 优化，浏览器在获得 html 文档之后会对页面上引用的资源进行提前下载。(注意仅仅只是提前下载)
下面开始我就一边测试，一边解释上述测试的结果：
测试的浏览器是 Chrome，版本号为 55.0.2883.95 (64-bit)
先用 Nodejs 搭建一个简单 http 服务器：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | if(req.url === "/") {
fs.readFile("index.html", "utf-8", function(err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(data);
res.end();
})
}else if(req.url === "/yellow.js") {
res.writeHead(200, { 'Content-Type': 'text/plain' });
setTimeout(function () {
res.write(data);
res.end();
}, 5000);
})
}else if(req.url === "/blue.js") {
res.writeHead(200, { 'Content-Type': 'text/plain' });
setTimeout(function () {
res.write(data);
res.end();
}, 10000);
})
}else if(req.url === "/red.css") {
res.writeHead(200, { 'Content-Type': 'text/css' });
setTimeout(function () {
res.write(data);
res.end();
}, 15000);
})
}else if(req.url === "/green.css") {
res.writeHead(200, { 'Content-Type': 'text/css' });
setTimeout(function () {
res.write(data);
res.end();
}, 20000);
})
}}).listen(port, hostname, () => {
console.log('Server running at ' + hostname);});
|
首页的代码结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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>
</head>
<body>
<p>First Line</p>
<script src="/yellow.js"></script>
<p>Second Line</p>
<link rel="stylesheet" href="/red.css">
<p>Third Line</p>
<script src="/blue.js"></script>
<p>Fourth Line</p>
<link rel="stylesheet" href="/green.css">
<img src="http://www.liuhaihua.cn/wp-content/uploads/2016/02/uuUFNjm.png">
<p>Fifth Line</p>
</body>
</html>
|
以及其它 CSS 和 JS 文件：
1 2 3 4 5 | document.body.style.cssText = "background: yellow !important";
document.body.style.cssText = "background: blue !important";
|
1 2 3 4 5 6 7 8 9 | body {
background:red !important;
}
body {
background: green !important;
}
|
说明下：yellow.js 和 blue.js 下载时间分别为 5s 和 10s，red.css 和 green.css 下载时间分别为 15s 和 20s。
阅读剩余部分
相关阅读 >>
如何实现ajax请求？
css word-break属性怎么用
css div如何居中显示
利用css绘制三角形的6种技巧（分享）
clear属性怎么用
css怎么去掉select箭头
css中有哪些字体属性
css怎么去掉颜色
深入了解css中的计数函数
jsp调用javascript方法是什么
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » js和css文件位置对页面性能有什么影响？
