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

然而,随着 JavaScript 在我们管理的网站上变得越来越普遍,了解它变得前所未有的重要。

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

当网站是静态的并且仅使用 HTML 和 CSS 进行编码时,SEO 专业人员可能需要很长时间。然而,引人入胜的网站通常需要交互性,而交互性通常由 JavaScript 提供支持。

HTTP 存档图显示网络上 JavaScript 字节的增加在过去三年中,桌面上的 JavaScript 字节增加了 35%,数量移动设备上的 JavaScript 字节数增加了 62.7%。

正如 Google Webmaster Trends 分析师 John Mueller 所说:JavaScript 不会“消失”。

这种编程语言无处不在,所以我们应该更好地熟悉它。让我们积极主动地学习更多关于 JavaScript 的知识,而不用担心它。

人们常常误以为 JavaScript 仅适用于开发人员。

我想说情况并非如此,因为对于希望客户和搜索引擎可以访问其网站内容的人来说,这可能会造成问题。

如果您不完全理解 JavaScript,甚至根本不知道 JavaScript 是什么或用于什么,请不要担心。

我整理了一个词汇表和您应该知道的基本概念,以帮助您开始您的发现之旅。

什么是JavaScript?

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

一旦源代码中的 HTML 和 CSS 信息被解析和构建,JavaScript 就会被执行。

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

HTML和CSS通常会构成页面结构的基础,而任何JavaScript都会做出最后的调整和改变。

文档对象模型 (DOM)

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

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

显示如何布置文档对象模型的示例图像

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

ECMAScript

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

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

代码转换

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

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

特别是JavaScript渲染方面,一般建议使用编译器将ES6转ES5,因为谷歌目前使用的是旧版Chrome渲染,尚不支持ES6。

Chrome 41

在呈现网页时,Google 使用基于 Chrome 41 的 Web Rendering Service。这意味着 Google 的呈现引擎支持与特定版本的 Chrome 相同的功能.

当你认为最新版本是 Chrome 71 时,你会发现自 2015 年 Chrome 41 上线以来,所有这些版本都有新功能。这就是为什么 Google 的渲染服务目前支持 ES5 而不是后来的 ES6 版本的语言。

单页应用程序 (SPA)

单页应用程序 (SPA) 是一种网站或 Web 应用程序,它会在用户与页面页面交互时动态重写和重新呈现分别从服务器请求新的 HTML 和内容。

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

Angular、Polymer、React 和 Vue

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

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

Angular, Polymer, React and Vue JavaScript framework logo

每个 JavaScript 框架都有自己的优点和缺点,因此开发人员会选择最适合他们和他们所在项目的框架工作。

如果您想了解更多关于不同框架如何衡量的信息,本指南提供了详细的比较。

JavaScript 呈现

JavaScript 呈现涉及获取脚本及其包含的指令、处理所有内容并运行它,以便在浏览器中显示所需的输出。

您可以通过多种不同方式控制 JavaScript 的呈现方式。

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

  • 网站速度
  • 搜索引擎抓取和索引

    • li>

    根据您使用的渲染方法,您可以降低页面加载速度并确保搜索引擎可以访问内容以进行抓取和索引。

    预呈现

    预呈现涉及在用户或搜索引擎请求之前在页面上呈现内容,以便他们收到一个包含所有内容的静态页面。

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

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

    服务器端呈现

    托管服务器完成繁重的工作并呈现页面,以便 JavaScript 已被处理并且内容已准备好移交给用户的浏览器或搜索根据要求引擎爬虫。

    服务器端渲染

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

    服务器端呈现还确保搜索引擎可以查看和索引整个内容。

    客户端呈现

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

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

    客户端渲染

    通常不建议使用客户端呈现,因为在 Google 获取页面时呈现页面之间存在延迟。

    Google 对需要呈现的页面进行排队,直到有足够的资源来处理它们。

    如果您依赖 Google 的客户端来呈现页面,这可能会在初始抓取后将索引编制延迟最多一周。

    动态呈现

    动态呈现涉及使用不同的呈现方法,具体取决于请求页面的是用户的浏览器还是搜索引擎机器人。

    如果您的网站通常呈现客户端,当检测到 Googlebot 时,将使用小型客户端呈现器(例如 Puppeteer 或 Rendertron),以便可以看到内容并将其立即编译到索引中.

    动态渲染

    混合渲染

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

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

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

    混合渲染结论

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

    现在您已经熟悉了关键术语,应该可以更好地掌握您自己的开发人员对话!

    图片来源

    特色图片:Paulo Bobita
    发布后图片 1:HTTP 存档
    After Effects 图片 2:Computer Hope
    所有照片均由作者截图