当前位置:Gxlcms > html代码 > 网页head标签中的JS和CSS,哪种文件放在前面,哪种放在后面比较好?

网页head标签中的JS和CSS,哪种文件放在前面,哪种放在后面比较好?

时间:2021-07-01 10:21:17 帮助过:3人阅读

回复内容:

玉伯和克军的文章主要说了资源加载顺序的问题,我补充一下针对问题的回答。顺序一般是:

1. 个别特殊JS,比如用于调试的基础脚本(部署时未必有)、性能日志之类,必须放在尽量最前的位置。
2. 外部样式表(link[rel=stylesheet])
3. 本页样式(style)
4. 基础库,比如loader,各种shim/polyfill,jQuery之类的
注意,有些开发者从性能优化的角度倾向于加defer或者放到页面的最底部。不过不是所有的脚本都能这样做。比如html5-shim脚本必须在body之前加载。再如history api的兼容实现等都不应defer,因为你不能确保用户在页面ready之前没有back/forward动作。再如jQuery,defer是可以,但也意味着你所有依赖jQuery的功能都需要defer,考虑到这些静态文件通常都是有缓存的,所以不defer也未必不是一个可以接受的折衷。
5. 少量本页script

以上。 跟着 @欧雷 的指引,在张克军的博文中提到了另一篇深入探讨的文章:lifesinger.wordpress.com

------------------------ 由于 wordpress.com 这个网站「并不存在」,以下内容是通过 Pocket(原 ReadItLater)服务捏造而来,请看官自辨 -----------------------

JS 和 CSS 的位置对其他资源加载顺序的影响
克军做了一系列测试:js和css的顺序关系,给出了现象和结论,但未给出原因。
JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点:
  1. JS 有可能会修改 DOM. 典型的,可能会有 document.write. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
  2. JS 的执行有可能依赖最新样式。比如,可能会有 var width = $('#id').width(). 这意味着,JS 代码在执行前,浏览器必须保证在此 JS 之前的所有 css(无论外链还是内嵌)都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
  3. 现代浏览器很聪明,会进行 prefetch 优化。性能是如此重要,现代浏览器在 竞争中,在 UI update 线程之外,还会开启另一个线程,对后续 JS 和 CSS 提前下载(注意,仅提前下载,并不执行)。有了 prefetch 优化,这意味着,在不存在任何阻塞的情况下,理论上 JS 和 CSS 的下载时机都非常优先,和位置无关。

以上三点可简述为三条基本定律:
  • 定律一:资源是否下载依赖 JS 执行结果。
  • 定律二:JS 执行依赖 CSS 最新渲染。
  • 定律三:现代浏览器存在 prefetch 优化。

有了这三条定律,再来看克军的测试,就很清晰了:

a,b – head里出现外联js,无论如何放,css文件都不能和body里的请求并行

根据定律一和定律三,可以知道上面的结论不够正确。比如: