JS调用放到网站网页底部的原因

阅读器加载页面是按从上到下顺序加载的。加载 JS 并执行的时分,会阻塞其他资源的加载。这是由于 JS 能够会有 DOM 、样式等等操作,所以阅读器要先加载这段 JS 并执行,再加载放在它前面的 HTML、CSS。

因此,参与一段庞大的 JS 放在最下面,阅读器首先要下载并执行,这段时间外面,页面是空白的。相比于加载了局部 HTML 和 样式 但是没有 JS 交互功用,显然是后者关于阅读者体验要好。

但是,能否一切 JS 都要放在最下面呢?并不是。

举实践的例子:

html5shiv是一段 JS 脚本,用来是早期 IE 兼容 HTML5 新增标签的支持。

这个 JS 脚本,必需要放在下面 head 局部,为什么呢?由于在老 IE 阅读器下面,不支持 <section> 这样的标签,所以用 JS 来兼容。假设放在底部,等 IE 阅读器先报错了,才会执行这块 JS 没多大用。

jQuery 这类的库,也是建议放在最下面的。首先最大的疑问能够是 jQuery 这么大,放在下面岂不是阻塞的很凶猛?

不过 jQuery 通常援用的是 CDN 地址,而且经过 gzip 紧缩之后并不是很大,而且援用公共 CDN 下面的 jQuery 话,很大几率早已被用户缓存上去了。所以可以不需求思索阻塞发生的功用效果。

而我们都知道,JS 是按顺序执行上去的。也就是你没运转 jQuery 之前,先运转了调用 jQuery 函数的代码,就会报错。你可以控制你自己写的 JS 放在页面最下面,放在 jQuery 下面,但是你无法保证页面上其他中央会不会有人图省事直接在 HTML 代码外面输入 JS。假设有,那么就会报错。

所以我建议,类库放在下面加载,其他代码尽能够放在最底下加载。

提供最优质的资源集合

立即查看 了解详情