面向初学者的 JavaScript 详解：它是什么，为何重要

什么是 JavaScript？

JavaScript 是一种编程语言，主要用于让网站和网络应用变得动态且具有交互性。

在网站上，它和 HTML（提供页面结构）与 CSS（控制页面设计）一起使用。

JavaScript 驱动着下拉菜单、页内表单和实时变化等功能。

JavaScript 如何运作？

JavaScript 在浏览器内通过内置的 JavaScript 引擎（例如 Chrome 中的 V8 或 Firefox 中的 SpiderMonkey）运作，由引擎读取并执行代码。

基本上，代码可以在页面加载时自动运行。它也可以在有人执行某个操作时运行，比如点击按钮、在表单中输入内容，或向下滚动页面。

你可以把 JavaScript 代码直接添加到页面 HTML 代码的 <head> 部分中。

但更常见的做法是链接到一个外部文件。因为这能让你的代码更容易在多个页面间复用。

许多网站还使用库和框架，它们是预先构建好的代码集合，能帮助开发者更快地工作。

你能用 JavaScript 做什么？

JavaScript 在网上被用于：

1. 开发网页

JavaScript 被用来构建不只是展示文字和图片的现代网站。

它可以自动更新页面内容、显示实时信息，并让页面对点击或轻触做出响应。

例如，当你在移动端网站上点击一个菜单图标、导航栏滑出时，JavaScript 就在发挥作用。

2. 构建游戏和网络应用

JavaScript 可用于创建浏览器游戏（如益智或纸牌游戏）和在线工具（如记账应用或任务管理器）。

例如，许多基于网页的游戏完全在你的浏览器中运行，无需下载。

而任务管理应用通常使用 JavaScript，让你能移动任务、更新细节并看到变化。

例如，Trello 让用户能实时拖拽卡片并更新列表。JavaScript 处理了这种交互体验中的大部分内容。

3. 运行服务端代码

JavaScript 可以在服务器上处理许多任务，比如处理表单提交、把信息保存到数据库，发送邮件。

例如，当有人填写联系表单时，服务端 JavaScript 可以收集这些信息、把它们保存到你的数据库，并触发一封发给用户的确认邮件。

4. 创建移动应用

JavaScript 也被用来构建移动应用。

如今你在许多应用中看到的滚动信息流、实时更新和平滑的屏幕切换等功能，背后都是它在支撑。

例如，Instagram 使用一个基于 JavaScript 的框架，让它的移动应用同时在 Android 和 iOS 设备上运行。

使用 JavaScript 有哪些优缺点？

在网站上使用 JavaScript 的优点是它：

• 兼容所有主流浏览器和设备
• 能实现菜单、轮播、标签页和表单等交互功能
• 足够多才多艺，从简单动画到完全动态的体验都能胜任
• 能轻松连接其他营销工具和平台（如分析、聊天或邮件组件）

在网站上使用 JavaScript 的缺点是它：

• 有时可能会向搜索引擎隐藏重要内容（如页面标题、描述或链接），如果这些元素依赖 JavaScript 才能加载。这可能损害你网站出现在搜索结果中的方式。
• 会拖慢页面速度，尤其是当脚本很大或优化不佳时
• 在某些浏览器上表现可能不同，尤其是较老的浏览器
• 如果你使用不受信任的脚本或插件，可能带来安全风险——JavaScript 会在浏览器中自动运行

JavaScript 如何影响 SEO？

JavaScript 会影响你网站的表现、用户体验和在搜索结果中的可见度。

具体而言，它可能：

• 以影响被索引和被展示内容的方式隐藏关键内容
• 拖慢加载时间
• 延迟索引

此外，像 ChatGPT 这样的 AI 工具难以运行和渲染 JavaScript。它们往往只能看到页面初始加载后可见的内容。

为了展示这是什么样的，我们在启用和禁用 JavaScript 的情况下测试了几个网页。

这是启用 JavaScript 时 Target 产品页面一部分的样子：

和禁用 JavaScript 时：

启用 JavaScript 时，所有产品详情和描述都可见。

当 JavaScript 被禁用时，那些详情就消失了——即便页面布局保持不变。这意味着一些搜索引擎和 AI 工具可能会错过关键的产品信息。

我们再看另一个例子。

这是一个启用 JavaScript 的 KW 房产挂牌页面：

和禁用时：

在这里，禁用 JavaScript 后，主要的房产描述和右侧的行动号召文案都消失了。

JavaScript 还会影响页面速度——一个关键的 SEO 排名因素。

我们用 DebugBear 测量了不同域名下 10 个 URL 的移动端性能。

禁用 JavaScript 使最大内容绘制（LCP）显著改善，LCP 衡量的是主要内容加载的速度。所分析的每个页面在没有 JavaScript 的情况下 LCP 都至少改善了 30%。

要尽量减少 JavaScript 带来的不利影响，请把主要内容和重要详情保留在核心 HTML 中，并采取措施优先保证快速的加载时间。

如何使用 Semrush 审计 JavaScript 渲染

Semrush 的 Site Audit 工具为 Business 和 Guru 套餐提供了一个 JS 影响报告，可以帮助你检查 JavaScript 是否向搜索引擎隐藏了重要元素。

要开始，先创建一个新的 Site Audit 项目并配置你的抓取设置。

在“Crawler”标签页中，确保 JavaScript 渲染已开启，这样审计就能像 Google 那样捕获你的页面。

审计完成后，进入“JS Impact”标签页，查看哪些对 SEO 至关重要的元素——比如标题、描述或链接——在 JavaScript 加载后发生了变化或消失。

例如，你可能会看到某个页面的标题标签在渲染后被移除或更改。

如果你注意到关键信息受到了影响，请把这些发现分享给你的开发者。

目标是把重要信息放在原始 HTML 中，这样搜索引擎就永远不会错过它。

如何修复 3 个常见的 JavaScript 相关问题

你可以使用 Site Audit 工具来发现并修复常见的 JavaScript 问题。

在“Issues”标签页中，搜索“javascript”即可看到相关错误和警告的列表。

点击“# issues”找到受影响的页面，点击“Why and how to fix it”了解如何修复它们。

以下是你将会发现的三个常见的 JavaScript 相关问题：

1. 未压缩（Unminified）的脚本

有些 JavaScript 文件的格式方式使它们变得不必要地大。

要解决这个问题，请使用像 UglifyJS 或 Terser 这样的工具压缩 JavaScript 文件。

并把任何非必要的脚本移到主要内容之后再加载。最简单的方式是把这些脚本放在 HTML 的末尾，正好在结束的 </body> 标签之前。

2. 过多的 JavaScript 文件

如果单个页面依赖于几十个独立的 JavaScript 文件，所有这些请求都会拖慢一切。

和你的开发者谈谈，把相关的脚本合并起来。

3. 未缓存的 JavaScript 文件

未被缓存的 JavaScript 文件不会被浏览器存储，这意味着用户每次访问时浏览器都得重新下载它们。

大多数网站平台或托管服务都有启用文件压缩和缓存的设置。

查看你网站的性能设置，或咨询你的平台支持团队如何开启这些功能。

如何学习 JavaScript

有几个免费和付费资源可以帮助你学习 JavaScript——无需编程背景。

如果你在寻找简单、对初学者友好的指南，从这里开始：

• W3Schools 的 JavaScript 教程
• Microsoft 的 JavaScript 初学者系列
• Semrush 的 JavaScript SEO：如何为搜索引擎优化 JS
• FreeCodeCamp.org 的 学习 JavaScript

当你准备做更实操或更系统的学习时，试试：

• Codecademy 的 学习 JavaScript 课程
• Web.dev 的 学习 JavaScript 课程
• Learn-JS.org 的交互式 JavaScript 教程
• Coursera 的 学习 JavaScript 课程

如果你才刚刚起步，请专注于基础，比如 JavaScript 如何与 HTML 和 CSS 协同工作，简单的脚本如何影响用户点击或看到的东西。

即使只是一点点练习，也能帮助你发现问题、更有底气地与开发者沟通，并理解幕后发生了什么。

常见问题

什么是 JavaScript，它为什么被使用？

JavaScript 是一种让网站变得动态和交互的编程语言。它让网站能直接响应用户的操作，进而提升功能性和用户体验。

JavaScript 用来做什么？

JavaScript 用于让网站变得可交互和动态。它是菜单展开、聊天组件、计算器和即时更新内容等功能背后的技术。开发者还使用 JavaScript 构建网络应用、构建移动应用，并处理服务器上的任务——比如保存表单数据。

如何启用 JavaScript？

在现代浏览器中，JavaScript 通常是默认启用的。但如果它被关闭了，你可以通过进入浏览器设置来启用它，通常位于“隐私（Privacy）”或“网站权限（Site Permissions）”下。同样，如果你想知道如何关闭 JavaScript，你也会在相同的浏览器设置中找到该选项。

JavaScript 和 Java 有什么区别？

JavaScript 和 Java 是两种不同的编程语言。Java 主要用于构建应用。JavaScript 主要用于让网站和应用变得动态和交互。