一站式百度SEO排名优化!-找老刘SEO低投入,高转化,旨在提供更好的SEO服务!

首页>>SEO问题解答

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

首页 2019-09-11 SEO问题解答 15 ℃ 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>

<script type="text/javascript" src="myscript.js"></script>

</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)

image.png

将 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等其他资源一并请求过来。 那么优化网页的加载速度,最本质的方式就是:减少请求数量与请求大小

2018020312184021111.jpg

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


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


当前位置:首页>>SEO问题解答>>为什么都说JS的调用尽量要放在html网页底部?

搜索
分类
热门标签
 
联系老刘手机
1043025812
联系老刘微信
扫描微信二维码