成都网站制作： 关于JS和CSS资源加载标签的放置位置
发布人：桔子科技 发布时间：2015-05-06 09:36:48 分享到：
一直以来，我很喜欢在文档头部放置 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 库去管理依赖关系。
本文来源于成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司！
成都网站建设,成都网站设计,成都网站制作,成都网页设计，成都网站建设公司 ,成都网站设计公司, 成都网站制作公司，成都手机网站建设，手机网站建设，成都APP开发，APP开发，成都建网站，成都做网站，成都微信网站建设，成都微商城网站建设，成都商城网站建设，成都网络公司。
下一篇：介绍JS和CSS资源加载标签的放置位置上一篇：介绍JS和CSS资源加载标签的放置位置
电话:4006-028-024 028-86633922
邮箱:Service@orangeapp.cn
成都市成华区崔家店路789号上城国际1-24-9号
