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 的构建通常需要更长的时间.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16668.html