前端语言串讲(选摘版)|青训营笔记

141 阅读6分钟

阅读文档:

JS发展史

7eaf3c23956deae2e03356ba37549f5.png

  • 1995 年:最早是由 Netscape 公司的程序员 Brendan Eich 开发的,原名Mocha。最初的目标是提供一种浏览器端脚本语言,用于操作 HTML 文档,增加互动性和动态效果。几个月后,Mocha 被重命名为 LiveScript,后又改为JavaScript。命名更多是当时为了借助 Java 语言的热度。

  • 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 应用的交互性。

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

  • 2015 年:ECMAScript 6(ES2015)发布 ECMAScript 6(也称为 ES2015)是 JavaScript 发展史上最重要的版本之一。ES6(ECMAScript 2015)引入了许多重要的新特性,改进了 JavaScript 语言的编程模式和可读性。

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

Browser(V8引擎工作流程)

940df703ad023474fe7b9811b8e4870.png

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

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

事件循环(Event Loop)

  • JS 是单线程的,为了处理异步操作事件回调,JavaScript 引入了事件循环。
  • 事件循环使用任务队列来管理要执行的任务。分为宏任务队列微任务队列

a. 宏任务队列: 宏任务队列存放宏任务(Macro-Task),它们通常是由外部事件触发的较大的任务。

  • setTimeout 和 setInterval 的回调函数
  • I/O 操作(如文件读写、网络请求等)的回调函数
  • 用户交互事件(如点击、滚动等)的回调函数
  • 其他异步 API 的回调函数

事件循环会按顺序执行宏任务队列中的任务。当一个宏任务执行完毕后,事件循环会检查执行微任务队列的所有任务,然后再执行下一个宏任务。

b. 微任务队列: 微任务队列存放微任务(Micro-Task),它们通常是 JavaScript 代码中产生的较小的、需要尽快执行的任务。

  • Promise 的 then、catch 和 finally 回调函数
  • async/await
  • MutationObserver 的回调函数
  • 其他微任务 API

在执行下一个宏任务之前,事件循环会一直执行微任务队列中的所有任务,直到微任务队列为空。这意味着在两个宏任务之间,JavaScript 会尽可能多地执行微任务。

06fe5ed593a0df12dbd418fd2fae513.png

HTML5标签

cd0387f4f3d0c83be9225adc94802e0.png

15901723ee1831bfed156583efdb2e5.png

5afac981c9548995844db30ab132404.png

01d06afbd68d181b193e8636529ee8a.png

HTML5储存

dfd4f6bab67c015f29d6572f2dba758.png

IndexedDB 是 HTML5 中新增的一种客户端存储机制,用于在浏览器中存储大量的结构化数据。它是一种键值对存储方式,类似于关系型数据库,可以通过索引快速访问数据。

主要特点:

  • 异步访问:IndexedDB 的读写操作是异步进行的,不会阻塞主线程,从而提高了页面的性能。
  • 支持事务:IndexedDB 支持事务,可以确保数据的一致性和完整性。
  • 支持索引:IndexedDB 支持多个索引,可以提高数据的查询效率。
  • 可存储大量数据:IndexedDB 可以存储大量的结构化数据,不会受到存储容量的限制。
  • 支持离线应用:IndexedDB 可以使得应用在离线状态下也能够正常工作,从而提高用户体验。

57c0fa6dcb0dd03682e2f4a34d164c0.png

HTML5 Audio

0ab43cf61c1a9c302600e6b08f022b6.png

HTML5 Video

9f7813cf3ac786b600549f847591401.png

HTML5 PWA&AMP

81c8865bb3089a8a66e7f8c1329858c.png

HTML5 二进制

3ed461ee09657f9e8d63bb464b49b48.png

HTML5 Shadow DOM

Shadow DOM 是 Web Components 技术中的一部分,用于实现 Web 页面上的组件化开发。它允许开发者将 HTML、CSS 和 JavaScript 封装到一个独立的、可重用的组件中,以便在不同的页面和应用程序中进行复用。

cd22c7ca6c769de3d58c09ea1d836a5.png

591f8ec08bfca60a8a8b808e1c166e4.png

SVG&Canvas WebGL&WebGPU

a0491ef2bed1abbcf7d6786c786f9d3.png

7ad342923e6c0b5d6e7634643b5fda5.png

MVC&MVVM&MVP

b5dfd09eef5b24a2b8fa849612864f6.png

MVC、MVVM 和 MVP 是三种常见的前端架构设计模式。

  • MVC

是 Model-View-Controller(模型-视图-控制器)的缩写。实现了应用程序逻辑和界面之间的分离。

  1. 模型表示应用程序的数据和业务逻辑
  2. 视图表示用户界面
  3. 控制器负责协调模型和视图之间的通信
  • MVVM

是 Model-View-ViewModel(模型-视图-视图模型)的缩写。它是一种基于数据绑定的设计模式,通过将应用程序分为三个组件:模型(Model)、视图(View)和视图模型(ViewModel),实现了数据的双向绑定

  1. 模型表示应用程序的数据和业务逻辑
  2. 视图表示用户界面
  3. 视图模型负责将模型数据绑定到视图上,并处理用户输入的数据
  • MVP

是 Model-View-Presenter(模型-视图-表示器)的缩写。它是一种基于事件驱动的设计模式,实现了应用程序逻辑和界面之间的分离。

  1. 模型表示应用程序的数据和业务逻辑
  2. 视图表示用户界面
  3. 表示器负责协调模型和视图之间的通信,并响应用户的事件

ad71ec32f4b156d00eb77cba9f47da5.png