前端知识点剖析：JS 篇

2023-11-21 15:54:03

在前端开发的领域里，JavaScript 作为一门不可或缺的编程语言，发挥着举足轻重的作用。它不仅可以操作 HTML 和 CSS，赋予网页交互性和动态性，而且还可以构建复杂的前端应用程序。为了帮助读者更好地理解和掌握 JavaScript 的精髓，本文将从以下几个方面展开深入的探讨：变量对象、活动对象、defer 和 async、Vue 生命周期。

一、变量对象与活动对象

1.1 变量对象

在 JavaScript 中，变量对象是一种数据结构，用于存储和操作数据。变量对象由一系列键值对组成，每个键值对包含一个唯一的键和一个与该键关联的值。变量对象可以通过使用大括号（{}）来创建，键值对之间使用逗号（,）分隔。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

1.2 活动对象

活动对象（又称 Window 对象）是 JavaScript 中一个特殊的对象，它表示当前浏览器窗口或选项卡。活动对象包含了有关当前窗口或选项卡的大量信息，例如：标题、URL、尺寸、滚动位置等。活动对象可以通过使用 window 来访问。例如：

console.log(window.location.href); // 输出当前窗口的 URL

二、defer 与 async

2.1 defer

<script> 标签的 defer 属性是一个布尔属性，当它被设置为 true 时，它会告诉浏览器在解析 HTML 文档时不要立即执行该 <script> 标签中的 JavaScript 代码，而是等到整个 HTML 文档解析完成之后再执行。这样可以防止 JavaScript 代码与其他资源（如 CSS 文件或图像文件）的加载顺序冲突，从而提高网页的加载速度。例如：

<script defer src="script.js"></script>

2.2 async

<script> 标签的 async 属性也是一个布尔属性，当它被设置为 true 时，它会告诉浏览器在解析 HTML 文档时立即执行该 <script> 标签中的 JavaScript 代码，而不管其他资源是否加载完成。这样可以加快 JavaScript 代码的执行速度，但可能会导致 JavaScript 代码与其他资源的加载顺序冲突，从而降低网页的加载速度。例如：