讲解JS和CSS资源加载标签的放置位置

2024-02-10 分类：网站建设

一直以来，我很喜欢在文档头部放置 SCRIPT 标签和 LINK 标签来一起加载这些外部资源，觉得这样统一起来加载会比较方便。甚至还强迫性地把 CSS 放在 JS 之前加载，因为我觉得宁愿让用户看到空白的页面也不想让用户看到没有 CSS 的乱页面。但这个加载顺序问题可远比这复杂。浏览器自带优化记得之前有写过一篇「SCRIPT标签已经无法阻止浏览器地贪婪了」就是说这个问题的。现代浏览器虽然会规规矩矩地按顺序处理内容，但加载顺序可不会按顺序。不过这属于浏览器的优化部分，没有在规范定义的范畴，所以不能以某些浏览器具有这样的特性来说事。如果没有优化呢？假如没有这个优化，那么浏览器就必须等到这些外部资源加载并解析完之后才会继续处理文档。不仅是 JS，CSS 也是如此，不过我们确实应该让 CSS 这么做，否则用户可能看到乱的页面。但对于 JS 部分，也许放在头部确实有点浪费（这是对于传统 Web 而言，现代 Web 构架经常会有完全依赖 JS 的情况）。 defer 和 async SCRIPT 标签带有defer和async属性（一些细节问题可以看这里），使用它们可以让SCRIPT标签即使在头部也不影响文档加载。但是它们也有自己的问题，因为加载方式变成了异步，会导致同步代码无法执行，甚至 JS 的依赖关系无法生效。所以这种方式只适用于异步模块的加载。不过我自己的异步模块加载全部都已经使用 predeclare.js 了，或者其它大项目喜欢把 JS 打包并压缩在一起，实际上前端很少有直接加载异步模块的情况。说得这么凌乱，到底怎么加载才好嘛？我的建议是，CSS 始终放头部。对于一些必不可少的 JS（没有这些 JS 页面就无法正常显示）也放在头部。业务 JS（如果没有这些 JS 会导致按钮无法点击）酌情放置，主要是看业务的重要性，我不希望在页面上出现有按钮，但是无法点击的情况。其它有同步需求的 JS（比如统计、广告）放到末尾（</body> 的前面），异步模块要么打包后随便放，要么用个 AMD 库去管理依赖关系。

网页题目：讲解JS和CSS资源加载标签的放置位置
当前路径：https://www.cdcxhl.com/news16/317066.html

成都网站建设公司_创新互联，为您提供手机网站建设、、App开发、网站导航、外贸建站、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容