Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

关于JS和CSS资源加载标签的放置位置

  一直以来,我很喜欢在文档头部放置 SCRIPT 标签和 LINK 标签来一起加载这些外部资源,觉得这样统一起来加载会比较方便。甚至还强迫性地把 CSS 放在 JS 之前加载,因为我觉得宁愿让用户看到空白的页面也不想让用户看到没有 CSS 的乱页面。但这个加载顺序问题可远比这复杂。

浏览器自带优化

  记得之前有写过一篇「SCRIPT标签已经无法阻止浏览器地贪婪了」就是说这个问题的。现代浏览器虽然会规规矩矩地按顺序处理内容,但加载顺序可不会按顺序。不过这属于浏览器的优化部分,没有在规范定义的范畴,所以不能以某些浏览器具有这样的特性来说事。

如果没有优化呢?

  假如没有这个优化,那么浏览器就必须等到这些外部资源加载并解析完之后才会继续处理文档。不仅是 JS,CSS 也是如此,不过我们确实应该让 CSS 这么做,否则用户可能看到乱的页面。但对于 JS 部分,也许放在头部确实有点浪费(这是对于传统 Web 而言,现代 Web 构架经常会有完全依赖 JS 的情况)。

defer 和 async

  SCRIPT 标签带有deferasync属性(一些细节问题可以看这里),使用它们可以让SCRIPT标签即使在头部也不影响文档加载。但是它们也有自己的问题,因为加载方式变成了异步,会导致同步代码无法执行,甚至 JS 的依赖关系无法生效。所以这种方式只适用于异步模块的加载。
  不过我自己的异步模块加载全部都已经使用 predeclare.js 了,或者其它大项目喜欢把 JS 打包并压缩在一起,实际上前端很少有直接加载异步模块的情况。

说得这么凌乱,到底怎么加载才好嘛?

  我的建议是,CSS 始终放头部。对于一些必不可少的 JS(没有这些 JS 页面就无法正常显示)也放在头部。业务 JS(如果没有这些 JS 会导致按钮无法点击)酌情放置,主要是看业务的重要性,我不希望在页面上出现有按钮,但是无法点击的情况。其它有同步需求的 JS(比如统计、广告)放到末尾(</body> 的前面),异步模块要么打包后随便放,要么用个 AMD 库去管理依赖关系。

网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^