今天小编跟大家讲解下有关js和css文件位置对页面性能有什么影响 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关js和css文件位置对页面性能有什么影响 的相关资料，希望小伙伴们看了有所帮助。
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 的构建通常需要更长的时间。
来源：爱蒂网