了解JavaScript基础:备忘单

[ad_1]

了解JavaScript基础:备忘单

JavaScript是一个复杂的主题,可能很难理解。

但是,了解它从来没有像现在这样重要,因为JavaScript在我们管理的网站上正变得越来越普遍。

随着现代网络的不断发展, JavaScript使用率持续上升

当网站是静态的并且仅使用HTML和CSS进行编码时,SEO专业人员可能会花很长时间了。但是,吸引人的网站通常需要交互性,而交互性通常由JavaScript驱动。

HTTP存档图显示了Web上JavaScript字节的增加” width =“ 760” height =“ 354” size =“(最大宽度:760px)100vw,760px” srcset =“ https://cdn.searchenginejournal.com/wp -content / uploads / 2019/01 / javascript-bytes-http-archive-768x358.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-bytes-http-archive- 480x224.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-bytes-http-archive-680x317.png 680w,https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / javascript-bytes-http-archive.png 1000w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-bytes-http-archive- 768x358.png在过去三年中,台式机上的JavaScript字节数增加了35%,移动设备上的JavaScript字节数增加了62.7%。

正如Google网站站长趋势分析师约翰·穆勒(John Mueller)所说:JavaScript不会“消失”。

这种编程语言无处不在,因此我们应该更好地熟悉它。让我们保持主动,并更多地了解JavaScript,而不用担心。

经常会有一个误解,认为JavaScript仅供开发人员使用。

我会说事实并非如此,因为对于希望客户和搜索引擎能够访问其网站内容的人来说,这可能会引起问题。

如果您不完全了解JavaScript,或者甚至完全不知道JavaScript的含义或用途,请不要担心。

我整理了一些词汇表和基本概念,您应该了解这些词汇表和基本概念,以帮助您开始探索之旅。

什么是JavaScript?

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

一旦解析并构造了源代码中来自HTML和CSS的信息,便会执行JavaScript。

然后,JavaScript将触发其中指定的任何事件或变量,文档对象模型(DOM)将被更新,最后,JavaScript将在浏览器中呈现。

HTML和CSS通常会构成页面结构的基础,而任何JavaScript都会进行最终的调整和改动。

文档对象模型(DOM)

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

以这种方式映射页面,以便其他程序可以根据页面的结构,内容和样式来修改和操作页面。

显示如何布置文档对象模型的示例图“ width =” 480“ height =” 341“ Size =”(最大宽度:480px)100vw,480px“ srcset =” https://cdn.searchenginejournal.com/ wp-content / uploads / 2019/01 / dom-example-480x341.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dom-example.png 490w“ src =” https ://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dom-example-480x341.png

通过使用JavaScript之类的语言,可以更改页面DOM的元素。

ECMAScript

ECMAScript(ES)是一种脚本语言,旨在标准化JavaScript代码的使用。

随着语言的更新和调整,会发布不同版本的ECMAScript,例如ES5和ES6(也称为ES2015)。

转码

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

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

特别是在JavaScript渲染方面,通常建议使用编译器将ES6转换为ES5,因为Google当前使用的是旧版Chrome渲染,尚不支持ES6。

镀铬41

呈现网页时,Google使用 网页渲染服务 该产品基于Chrome41。这意味着Google的呈现引擎支持与该特定版本的Chrome相同的功能。

当您认为最新版本是Chrome 71时,您会发现自从 Chrome 41于2015年上线,并且所有这些版本都具有新功能。这就是Google的渲染服务当前支持ES5而不是该语言的更高ES6版本的原因。

单页应用程序(SPA)

单页应用程序(SPA)是一个网站或Web应用程序,当用户与页面交互时会动态地重写和重新呈现页面,而不是向服务器单独请求新的HTML和内容。

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

Angular,Polymer,React和Vue

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

  • 角度的 和Polymer由Google开发。
  • React是由Facebook开发的。
  • Vue由 埃文·尤,曾在Google的Angular团队工作。

Angular,Polymer,React和Vue JavaScript框架徽标“ width =” 760“ height =” 293“ Size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / javascript-frameworks-768x296.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks-480x185.png 480w,https:// cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks-680x262.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks.png 1000w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/javascript-frameworks-768x296.png

每个JavaScript框架都有自己的优缺点,因此开发人员将选择最适合他们的框架以及正在从事的项目。

如果您想详细了解不同框架的衡量标准, 本指南 进行了详细的比较。

JavaScript渲染

JavaScript渲染包括获取脚本及其包含的指令,对其进行全部处理,然后运行它,以便在浏览器中显示所需的输出。

您可以使用许多不同的方法来控制JavaScript的呈现方式。

要求在页面上呈现JavaScript会对两个关键领域产生负面影响:

  • 网站速度
  • 搜索引擎爬网和索引

根据您使用的呈现方法,您可以降低页面加载速度,并确保搜索引擎可以访问内容以进行爬网和建立索引。

预渲染

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

通过以这种方式预加载页面,这意味着您的内容将可以访问,而不是搜索引擎或用户的浏览器必须自己呈现页面。

预渲染通常用于搜索引擎机器人,而不是人类。这是因为静态的,预渲染的页面将缺乏用户的吸引力,因为它缺少任何动态内容或交互性。

服务器端渲染

托管服务器会进行繁重的工作并呈现页面,以便已经处理了JavaScript,并且可以根据要求将内容准备好移交给用户的浏览器或搜索引擎搜寻器。

服务器端渲染“ width =” 760“ height =” 225“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/ 01 / server-side-rendering-768x227.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering-480x142.png 480w,https:// cdn。 searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering-680x201.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering .png 1000w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/server-side-rendering-768x227.png

此方法有助于减少可能由于处理JavaScript而对用户设备造成的压力,并且可以提高页面加载速度。

服务器端渲染还可以确保搜索引擎可以看到全部内容并为其建立索引。

客户端渲染

在客户端渲染期间,JavaScript由用户的浏览器或请求页面的搜索引擎处理。

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

客户端渲染“ width =” 760“ height =” 227“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/ 01 / client-side-rendering-768x229.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering-480x143.png 480w,https:// cdn。 searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering-680x203.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering .png 1000w“ src =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/client-side-rendering-768x229.png

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

Google将需要呈现的页面放入队列,直到有足够的资源来处理它们为止。

如果您依靠Google呈现网页的客户端,这可能会使索引在最初被抓取后最多延迟一周。

动态渲染

动态呈现涉及根据用户的浏览器还是搜索引擎机器人正在请求页面而使用不同的呈现方法。

如果您的网站通常呈现客户端,则在检测到Googlebot时,将使用小型客户端呈现器(例如, 木偶戏 要么 Rendertron),这样就可以立即看到内容并将其编入索引。

动态渲染“ width =” 760“ height =” 381“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/ dynamic-rendering-768x385.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dynamic-rendering-480x240.png 480w,https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / dynamic-rendering-680x341.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/dynamic-rendering.png 1000w“ src =” https:/ /cdn.searchenginejournal.com/wp-content/uploads/2019/01/dynamic-rendering-768x385.png

混合渲染

混合渲染涉及服务器端渲染和客户端渲染的组合。

核心内容是在服务器端预呈现的,并发送到客户端,无论是用户的浏览器还是请求内容的搜索引擎搜寻器。

最初加载页面后,随后将在客户端呈现用于任何交互的其他JavaScript。

混合渲染“ width =” 760“ height =” 451“ size =”(最大宽度:760px)100vw,760px“ srcset =” https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/ hybrid-rendering-768x456.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/hybrid-rendering-480x285.png 480w,https://cdn.searchenginejournal.com/wp- content / uploads / 2019/01 / hybrid-rendering-680x404.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/01/hybrid-rendering.png 1000w“ src =” https:/ /cdn.searchenginejournal.com/wp-content/uploads/2019/01/hybrid-rendering-768x456.png结论

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

既然您已经熟悉了关键术语,那么您应该可以更好地掌握自己与开发者的对话了!

图片积分

特色图片:Paulo Bobita
发布后图片1:HTTP存档
后期图片2:计算机希望
作者拍摄的所有屏幕截图

相关文章