首页>>SEO问题

为什么都说JS的调用尽量要放在html网页底部？

首页 2019-09-11 SEO问题 2168 ℃Tags: JavaScript html加载访问速度

无论是参考书还是大牛，都会曾经告诉我们"JS最好能放在html文件的底部，</body> 标签之前，如此可以让浏览器更好的加载页面"，当然实际情况我们还需要分情况实际分析对待，比如有些JS就必须要在<head>里加载，否则会报错而且失效；又或者是JS的引用在</body>之前和</body>之后有什么区别？这里实际测试过，没有任何区别，当JS写在</body>之后的时候，浏览器会自动忽略</body>结束标签，故此这个问题无需太过较真。

通常情况下，js代码的放置位置有两种，标签内（内联），标签外（外联）。那么，把js代码放在这两个不同位置，到底会有什么差别呢？正常情况下我们优先使用外联样式，主要是为了可维护性以及可缓存性。拓展阅读：网站搜索优化操作中JS压缩的流程问题的讨论

首先我们需要了解到，HTML 文档是由浏览器从上到下依次载入的。页面的加载顺序如下：

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
构造HTML DOM模型。
加载图片等外部文件。
页面加载完毕。

外联样式调用JavaScript的好处是什么？

将 JavaScript 代码（不包括<script></script>标签）单独形成一个文档，并以 js 后缀命名，如 myscript.js ，并在 HTML 文档 <script></script> 标签中使用 src 属性来引用该文件：

<html>

<head>

</head>

在使用了外部引用 JavaScript 代码之后，其好处显而易见：

1.避免在 JavaScript 代码里使用

2.避免使用难看的 CDATA

3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护

4.HTML 文档更小，利于搜索引擎收录

5.可以压缩、加密单个 JavaScript 文件

6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次）

7.避免使用复杂的 HTML 实体，如可以直接使用 document.write(2>1) 而无需写作 document.write(2<1)

将 JavaScript 代码形成为外部文件，也会增加服务器的 HTTP 请求负担，在超高并发请求的环境下，这并不是一个好的策略。另外在引用外部 js 文件时，需注意文件的正确路径。

如果把js代码放在标签之间，可以确保在需要使用脚本之前，它已经被载入了。但是当我们有一段js代码要操作HTML元素时，就会因为html元素还未载入界面（对象不存在）而出错。也就是DOM树还未开始构造，我们就试图操作DOM对象。

当然，通常情况下，我们操作页面元素一般都是通过事件来驱动的。即当我们使用“ window.load = start(); ”时，strat()函数内的js代码只会在页面载入完成后执行。所以上面这种情况并不多见。

可是这样好像还是没有回答为什么能使浏览器更快地加载页面。

一般来说，根据http规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等到脚本加载完毕后才能下载。”

经过百度发现，这被叫作浏览器并发请求数，而这个限制已经是IE6时代的了。显然，这不应该是主要原因。

前面提到浏览器加载HTML文档是从上到下，而在渲染的过程中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。

我的理解是，浏览器更快地加载页面，意味着浏览器更快地让用户能进行基本的操作。

如果把javascript代码放得很早，但是代码加载缓慢或者加载失败（外链加载很可能出现这种情况），这时网页会在这一步卡很久很久，而用户也会在网页上看到一大段空白。显然，体验是极其不友好的。当我们把javascript代码放于底部时，至少能先让网页的内容先展示出来。

我们都知道，JS 是按顺序执行下来的。也就是你没运行 jQuery 之前，先运行了调用 jQuery 函数的代码，就会报错。你可以控制你自己写的 JS 放在页面最下面，放在 jQuery 下面，但是你无法保证页面上其他地方会不会有人图省事直接在 HTML 代码里面输出 JS。如果有，那么就会报错。

所以我建议，类库放在上面加载，其余代码尽可能放在最底下加载。一句话就是：请求HTML，然后顺带将HTML依赖的JS/CSS/iconfont等其他资源一并请求过来。那么优化网页的加载速度，最本质的方式就是：减少请求数量与请求大小。

======= 然而，前端性能优化说起来好像很复杂，实际上对于整个页面的加载来讲只是冰山一角。

最大的困难是，web前端优化一顿操作猛如虎，还不如上个 CDN 或者加个宽带或者优化一个后端算法来的效果好的多。

上一篇：关于“窃取用户隐私行为”的算法升级公告
下一篇：网站SEO：怎样减少无效链接的爬行和索引？

首页>>SEO问题

为什么都说JS的调用尽量要放在html网页底部？

猜你喜欢