js seo是什么意思?seo js优化的教程

我们通过查看网站的页面源代码能看到很多的js调用,JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

seo js优化的

那么js seo是什么意思?

其实就是通过SEO优化的思维来优化js的调用方式,让网站更符合搜索引擎的抓取规则,那么seo js优化的教程是什么呢?

通常情况下,js代码的放置位置有两种,标签内(内联),标签外(外联)。 那么,把js代码放在这两个不同位置,到底会有什么差别呢?正常情况下我们优先使用外联样式,主要是为了可维护性以及可缓存性。

我们知道以前的说法是:”JS最好能放在html文件的底部, 标签之前,如此可以让浏览器更好的加载页面”,当然我们还需要分情况实际分析对待,比如有些JS就必须要在里加载,否则会报错而且失效,又或者是JS的引用在之前和之后有什么区别?这里实际测试过,没有任何区别,当JS写在之后的时候,浏览器会自动忽略结束标签,故此这个问题无需太过较真。

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

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

构造HTML DOM模型。

加载图片等外部文件。

页面加载完毕。

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

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

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

👋 感谢您的观看!

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享