阅读文档:
- CSS Syntax (w3schools.com)
- W3C 的官方网站是 [www.w3.org/]
- W3Cschools 的官方网站是 [www.w3schools.com/]
- Some Amazing Demo:davidwalsh.name/webgl-demo
JS发展史
-
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引擎工作流程)
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 会尽可能多地执行微任务。
HTML5标签
HTML5储存
IndexedDB 是 HTML5 中新增的一种客户端存储机制,用于在浏览器中存储
大量的结构化数据。它是一种键值对存储方式,类似于关系型数据库,可以通过索引快速访问数据。
主要特点:
- 异步访问:IndexedDB 的读写操作是异步进行的,不会阻塞主线程,从而提高了页面的性能。
- 支持事务:IndexedDB 支持事务,可以确保数据的一致性和完整性。
- 支持索引:IndexedDB 支持多个索引,可以提高数据的查询效率。
- 可存储大量数据:IndexedDB 可以存储大量的结构化数据,不会受到存储容量的限制。
- 支持离线应用:IndexedDB 可以使得应用在离线状态下也能够正常工作,从而提高用户体验。
HTML5 Audio
HTML5 Video
HTML5 PWA&
HTML5 二进制
HTML5 Shadow DOM
Shadow DOM 是 Web Components 技术中的一部分,用于实现 Web 页面上的
组件化开发。它允许开发者将 HTML、CSS 和 JavaScript 封装到一个独立的、可重用的组件中,以便在不同的页面和应用程序中进行复用。
SVG&Canvas WebGL&WebGPU
MVC&MVVM&MVP
MVC、MVVM 和 MVP 是三种常见的
前端架构设计模式。
- MVC
是 Model-View-Controller(模型-视图-控制器)的缩写。实现了应用程序逻辑和界面之间的分离。
- 模型表示应用程序的数据和业务逻辑
- 视图表示用户界面
- 控制器负责协调模型和视图之间的通信
- MVVM
是 Model-View-ViewModel(模型-视图-视图模型)的缩写。它是一种基于数据绑定的设计模式,通过将应用程序分为三个组件:模型(Model)、视图(View)和视图模型(ViewModel),实现了数据的双向绑定。
- 模型表示应用程序的数据和业务逻辑
- 视图表示用户界面
- 视图模型负责将模型数据绑定到视图上,并处理用户输入的数据
- MVP
是 Model-View-Presenter(模型-视图-表示器)的缩写。它是一种基于事件驱动的设计模式,实现了应用程序逻辑和界面之间的分离。
- 模型表示应用程序的数据和业务逻辑
- 视图表示用户界面
- 表示器负责协调模型和视图之间的通信,并响应用户的事件