js必须掌握的知识点(JS基本概念与关键术语)(1)

您了解什么是JavaScript吗?不知道它是什么或有什么用?

不用担心 这篇文章将带您理解基本概念关键术语

js必须掌握的知识点(JS基本概念与关键术语)(2)

JavaScript涵盖了众多内容,难以入手。但是,了解它从来没有像现在这样重要,因为JavaScript在我们网站上正变得越来越常见。

随着现代网络的不断发展,JavaScript的使用也在不断增加。当网站是静态的并且仅使用HTML和CSS进行编码时,SEO专业人员需要耗费些精力了。

因为吸引人的网站通常离不开与访问者的交流互动,而这种交互性通常由JavaScript实现。

正如谷歌Google的分析师约翰·穆勒(John Mueller)所说:“JavaScript不会过时”

这种编程语言无处不在,因此我们应该更好地了解它。让我们积极主动地学习更多关于JavaScript的知识吧!

js必须掌握的知识点(JS基本概念与关键术语)(3)

经常会有一个误解,认为JavaScript仅供开发人员使用。事实并非如此,特别是对于那些希望客户和搜索引擎能够访问网站内容的人来说。

如果您不了解JavaScript,甚至完全不知道它是什么,不用担心,往下看。

我汇总了一些JS关键术语和基本概念,这些术语和基本概念可帮助您打开JS的大门。

.

什么是JavaScript?

JavaScript是一种编程语言,使您可以在网站上实现复杂的效果,例如动态元素以及交互功能。

一旦解析并构造了源代码中来自HTML和CSS的信息,便会执行JavaScript。JavaScript会触发某些事件或变量,使得文档对象模型(DOM)更新,最终在浏览器中呈现。

HTML和CSS通常将构成页面结构的基础,而JavaScript将进行最后的调整和更改。

.

什么是文档对象模型(DOM)?

文档对象模型(DOM)是在加载页面时创建的,它由节点和对象组成,这些节点和对象映射页面上的所有元素和属性。

基本页面形成之后,其他程序可以相应地修改页面的结构,内容和样式。JavaScript可以更改页面DOM的元素。

js必须掌握的知识点(JS基本概念与关键术语)(4)

.

什么是ECMAScript?

ECMAScript(ES)是一种脚本语言,旨在规范JavaScript代码的使用。随着语言的更新和调整,会有不同版本的ECMAScript,例如ES5和ES6(也称为ES2015)。

.

什么是编译?

编译器是将源代码转换为其他编程语言的工具。这个概念有点像代码的谷歌翻译Google Translate。

您可以将特定的源语言转换为其他目标语言,例如,JavaScript转换为C Python转换为Ruby

至于JavaScript渲染,过去在旧版本Chrome浏览器进行渲染的时候,曾建议使用编译器将ES6转换为ES5,因为该版本不支持ECMAScript ES6。

.

什么是Chromium浏览器?

谷歌Google推出页面呈现服务(WRS)来加载JavaScript。为此,谷歌Google开发了Chromium浏览器,这是一个开源项目,其代码构成了Chrome浏览器的基础。

随着Chrome浏览器的更新,它的功能不断增多。

2019年5月之前,谷歌爬虫Googlebot一直使用2015年发布的Chrome 41的WRS。从那时起,谷歌Google 宣布将Googlebot实时更新,这意味着每当新版本的Chrome发布时,其WRS都会跟着更新。

.

什么是单页Web应用(SPA)?

单页Web应用(SPA)是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

JavaScript框架可用于支持SPA的动态元素。

.

什么是Angular,Polymer,React和Vue?

这些都是不同类型的JavaScript框架。

js必须掌握的知识点(JS基本概念与关键术语)(5)

Angular和Polymer由Google开发。React是由Facebook开发的。Vue由曾经在Google Angular团队工作的Evan You开发。

每个JavaScript框架都有各自的优缺点,因此开发人员会选择最适合他们项目的其中一个框架。

.

什么是JavaScript渲染?

JavaScript渲染包括获取脚本及其包含的指令,对其进行处理,然后运行与输出在浏览器上。您可以使用多种方法来控制JavaScript的呈现方式。

在页面上使用JavaScript会对两个关键领域产生影响:⊹ 网站速度⊹ 搜索引擎爬网和索引

.

什么是预渲染?

预渲染是指在用户或搜索引擎请求内容之前就已经在页面上呈现了内容,以便他们接收一个静态页面,其中所有内容都准备就绪。

预渲染通常用于搜索引擎机器人,而不是访问者。因为它是静态的,缺乏动态内容与交互性。

.

01服务器端渲染。

服务器会进行繁重的工作并处理好JavaScript,以便在请求时将内容移交给用户的浏览器或搜索引擎。

js必须掌握的知识点(JS基本概念与关键术语)(6)

此方法有助于减少用户设备处理JavaScript的压力,并且可以提高页面加载速度。服务器端渲染还确保搜索引擎可以看到全部内容并为其建立索引。

.

02客户端渲染。

JavaScript由用户的浏览器或请求页面的搜索引擎处理。服务器将处理初始请求,但是呈现页面的工作将落在用户的设备或搜索引擎上。

通常建议不要使用客户端渲染,因为在谷歌Google抓取页面与进行渲染之间存在延迟。

谷歌Google将需要渲染的页面排成一列,等到有足够的资源才会处理它们。

如果您依靠谷歌Google渲染网页,可能会在被抓取后最多延迟一周才索引。

.

03动态渲染。

动态渲染是指使用不同的方法渲染页面,这取决于是用户的浏览器还是搜索引擎机器人正在请求页面。

如果您的网站通常是在客户端渲染,则在检测到谷歌爬虫Googlebot时,将使用小型客户端渲染器(例如Puppeteer或Rendertron)对页面进行预渲染,由此可以立即查看内容并将其编入索引。

js必须掌握的知识点(JS基本概念与关键术语)(7)

.

04混合渲染。

混合渲染是指服务器端渲染和客户端渲染的结合。无论是用户的浏览器还是搜索引擎在请求内容,核心内容是在服务器端预渲染的。

初步加载页面后,在客户端渲染用于任何交互的JavaScript。

希望本指南可以帮助您更好地了解JavaScript的基础知识及其对网站的影响。

js必须掌握的知识点(JS基本概念与关键术语)(8)

js必须掌握的知识点(JS基本概念与关键术语)(9)

,