前端语言串讲|青训营笔记

Kris
105 阅读10分钟

前端语言的基本能力

基础的前端三剑客HTML、CSS、JavaScript

  1. HTML（超文本标记语言） ： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。
  2. CSS（级联样式表） ： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。
  3. JavaScript： JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。

这里主要重点讲一下js

js历史

  • 1995 年：JavaScript 的诞生 JavaScript 最早是由 Netscape 公司的程序员 Brendan Eich 开发的，原名叫 Mocha。最初的目标是提供一种浏览器端脚本语言，用于操作 HTML 文档，增加互动性和动态效果。几个月后，Mocha 被重命名为 LiveScript，随后又改名为 JavaScript。尽管名字里包含 "Java"，但实际上 JavaScript 和 Java 并无直接关系，这个命名更多是当时为了借助 Java 语言的热度。

  • 1996 年：ECMAScript 的诞生 为了让 JavaScript 成为一个通用的脚本语言标准，Netscape 将 JavaScript 提交给了欧洲计算机制造商协会（ECMA）。ECMA 开发了一种名为 ECMAScript 的标准化脚本语言规范。自此，JavaScript 成为 ECMAScript 规范的一种实现。

  • 1997 年：ECMAScript 1.0 发布 ECMA 发布了 ECMAScript 的第一个版本（1.0），标志着 JavaScript 语言正式成为一个独立的编程语言。

  • 1999 年：ECMAScript 3.0 发布 ECMAScript 3.0 是 JavaScript 发展历程中的一个重要版本，它引入了许多核心功能，如正则表达式、错误处理、更严格的变量声明等。

  • 2005 年：Ajax 和 Web 2.0 的兴起 2005 年，Ajax（Asynchronous JavaScript and XML）技术兴起，它允许在不刷新整个页面的情况下进行局部数据更新，大大提高了 Web 应用的交互性。这一时期，Web 2.0 的概念开始流行，JavaScript 在 Web 开发中的地位得到了极大的提升。

  • 2009 年：ECMAScript 5 发布 ECMAScript 5 版本引入了许多新特性，如 JSON 支持、严格模式、访问器属性等。同时，它还优化了一些老旧的功能和语法，使得 JavaScript 更加易用和高效。

  • 2010 年：Node.js 的诞生 2010 年，程序员 Ryan Dahl 创立了 Node.js，将 JavaScript 扩展到了服务器端。Node.js 的出现使得 JavaScript 成为一种全栈开发语言。

  • 2015 年：ECMAScript 6（ES2015）发布 ECMAScript 6（也称为 ES2015）是 JavaScript 发展史上最重要的版本之一。ES6（ECMAScript 2015）引入了许多重要的新特性，改进了 JavaScript 语言的编程模式和可读性。这些新特性包括：

    类（Class）语法：提供了基于原型的面向对象编程的语法糖。 模块化（Module）：引入了模块化编程的概念，使得开发者可以将代码拆分为可重用的模块。 箭头函数（Arrow Function）：简化了函数定义的语法，同时自动绑定 this 上下文。 Promise：提供了一种更好的异步编程模式，帮助开发者更容易处理异步操作。 解构赋值（Destructuring Assignment）：一种更简洁的变量解构和赋值方式。 默认参数（Default Parameters）：允许函数参数具有默认值。 模板字符串（Template Literals）：提供了一种简单的字符串插值和多行字符串的表示方法。 增强的对象字面量：增加了对于简写属性和方法的支持。 let 和 const 关键字：引入了块级作用域，并允许更精确地声明变量和常量。

  • 2016 年至今：ECMAScript 的年度更新 自 ES6（ECMAScript 2015）发布以来，ECMAScript 规范开始了每年的更新周期。这意味着每年都会有一个新版本的 ECMAScript，其中包括一些新特性和改进。这使得 JavaScript 的发展更加稳定和可预测。

  • 现代 Web 开发框架和库的兴起 近年来，随着 JavaScript 的发展，许多现代 Web 开发框架和库应运而生。这些框架和库（如 Angular、React、Vue.js 等）极大地提高了开发者的生产力，改变了 Web 开发的方式和规模。

JavaScript的七种基本数据类型

这些类型分为两大类：原始类型（Primitive）和对象类型（Object）。

  1. Number（数字）： Number 类型用于表示整数和浮点数。在 JavaScript 中，所有数字都是双精度浮点数（64位），遵循 IEEE 754 标准。这意味着 JavaScript 中并没有真正的整数类型。另外，Number 类型还包括特殊值如：Infinity（正无穷大）、-Infinity（负无穷大）和 NaN（非数值）。
  2. String（字符串）： String 类型表示一串字符。在 JavaScript 中，字符串是不可变的，这意味着一旦创建了一个字符串，就不能对其内容进行修改。字符串可以用单引号、双引号或反引号（模板字符串）括起来。
  3. Boolean（布尔值）： Boolean 类型只有两个值：true（真）和 false（假）。布尔值通常用于表示条件、逻辑操作或比较的结果。
  4. Null（空值）： Null 类型只有一个值：null。它表示一个空值或不存在的引用。通常用于表示变量没有被赋值，或表示一个空对象。
  5. Undefined（未定义）： Undefined 类型只有一个值：undefined。当一个变量声明了，但尚未赋值时，其默认值为 undefined。它表示变量的值尚未确定。
  6. Symbol（符号）： Symbol 类型是 ECMAScript 6（ES2015）引入的新类型。Symbol 类型的值是唯一且不可变的，主要用于创建对象的唯一属性名，以防止属性名冲突。
  7. Object（对象）： Object 类型用于表示复杂的数据结构，如对象、数组和函数。对象是键值对的集合，键是字符串，值可以是任何数据类型。数组是值的有序集合，而函数是可调用的代码块。

在 JavaScript 中，原始类型（Number、String、Boolean、Null、Undefined 和 Symbol）是不可变的基本数据类型，而对象类型（Object）是可变的引用数据类型

三者在浏览器中的运行

  1. HTTP 请求：浏览器向服务器发送请求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。
  2. 构建 DOM 树：浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。DOM 树是一个以节点形式表示的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、属性或文本。
  3. 计算 CSS 树：浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。CSSOM 树是一个以节点形式表示的 CSS 规则结构。
  4. 排版（Layout）：浏览器将 DOM 树和 CSSOM 树结合，生成一个渲染树（Render Tree）。渲染树包含了 DOM 中的可见元素及其对应的 CSS 规则。接着，浏览器会计算渲染树中每个节点的位置和大小，这个过程称为排版或布局（Layout）。
  5. 渲染合成：浏览器将渲染树中的各个节点分层，创建渲染层（Render Layers）。每个层包含一个或多个节点，具有独立的绘制和合成上下文。
  6. 绘制（Painting）：浏览器根据渲染层绘制每个节点的视觉效果（如文本、颜色、图像、边框、阴影等），生成位图（Bitmaps）。绘制过程可能会在 GPU（图形处理器）上完成，以提高性能。
  7. 合成（Compositing）：浏览器将渲染层的位图合成为一个完整的屏幕图像，然后显示在屏幕上。合成过程通常由 GPU 完成，以实现高效的图像合成。

在这个过程中，JavaScript 代码的解析与执行可能穿插在各个阶段，因为 JavaScript 可以操作 DOM、CSSOM 和浏览器 API，从而改变页面的内容、样式和交互行为。这些变化可能需要浏览器重新执行排版、绘制和合成等任务。因此，在编写 JavaScript 代码时，应尽量减少对 DOM 和 CSSOM 的操作，以提高页面性能。

image.png

Browser(V8引擎工作流程)

JavaScript本质上也是一段文本，需要通过解释器才能够运行

  1. Source code：JavaScript 源代码作为 V8 引擎的输入。
  2. Parser：V8 引擎将 JavaScript 源代码解析成一个抽象语法树（Abstract Syntax Tree，简称 AST）。AST 是源代码的一种树状表示，其中每个节点表示一个源代码中的语法结构（如变量声明、函数调用等）。
  3. AST：生成的抽象语法树将用于接下来的编译和优化过程。
  4. Ignition：V8 引擎中的 Ignition 是一个解释器（Interpreter），它负责将 AST 转换为字节码（Bytecode）。字节码是一种中间表示，比源代码更接近机器代码，但仍具有平台无关性。
  5. Bytecode Execute：Ignition 解释器执行字节码，实现 JavaScript 源代码的功能。在执行字节码的过程中，V8 会收集代码的运行时信息（如类型信息等），用于后续的优化过程。
  6. Feedback：V8 引擎收集的运行时信息（如变量类型、函数调用频率等）称为反馈（Feedback）。这些信息将用于指导后续的即时编译（JIT）过程，生成更高效的机器代码。
  7. TurboFan：V8 引擎中的 TurboFan 是一个即时编译器（Just-In-Time Compiler，简称 JIT），它负责将字节码优化为机器代码。TurboFan 会根据收集到的反馈信息对代码进行特定的优化（如内联函数、消除数组边界检查等），生成性能更好的机器代码。
  8. Machine code (Intel, ARM, MIPS)：TurboFan 生成的机器代码是针对特定处理器架构（如 Intel x86/x64、ARM、MIPS 等）的低级代码。这些机器代码可以直接在目标处理器上执行，实现更高的性能。

V8 引擎通过这个工作流程实现了 JavaScript 源代码的高效执行。在实际使用过程中，V8 会根据代码的运行情况动态调整优化策略，确保在不同场景下都能实现最佳性能。

image.png

avatar
文章
阅读
粉丝