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

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

移动企业管理系统随身携带客户资料
北京网页设计如何进行创意？
SEO关键词密度优化有哪些技巧?
直播网站建设运营推广的5个要点
安装程序在正在设置reportingservice和sharepoint排除路径期间遇到错误的解决方法
确保网站建设品质的前提是成功甄选网站建设公司
网站如何细分SEO流量？
分享iframe自适应高度实现代码