首页客户案例高端网站建设SEO优化小程序APP开发抖音 X 获客网络营销关于动态联系咨询

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

一直以来,我很喜欢在文档头部放置 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 库去管理依赖关系。

日期:2015年04月15日

标签: 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码15876521776免费获取诊断报告