css和JS的位置会影响页面效率 --网页性能

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下载并解析完毕后，已经呈现的文字和图片就要需要根据新的样式重绘，这是一种不好的用户体验。

广义而言，CSS 是（渲染）性能的关键，这是由于：

1、浏览器直到渲染树构建完成后才会渲染页面；

2、渲染树由 DOM 与 CSSOM 组合而成；

3、DOM 是 html 加上（同步）阻塞的 JavaScript 操作（DOM 后的）结果；

4、CSSOM 是 CSS 规则应用于 DOM 后的结果；

5、使 JavaScript 非阻塞非常简单，添加 async 或 defer 属性即可；

6、相对而言，要让 CSS 变为异步加载是比较困难的；

7、所以记住这条经验法则：（理想情况下，）最慢样式表的下载时间决定了页面渲染的时间。

基于上述考虑，我们需要尽快构建 DOM 与 CSSOM。一般情况下，DOM 的构建是相对较快，（当请求某个页面时，）服务器响应的首个请求是 HTML 文档。但一般 CSS 是作为 HTML 的子资源而存在，因此 CSSOM 的构建通常需要更长的时间。

链接: https://fly63.com/article/detial/7519