前端青训营第一课虽然是语言串讲，但是也包含一些其他之前没有了解过的知识和细节，所以在这里做了一些整理，以便于其他和我一样的小白对其他知识进行进一步扩展。
V8现有工作流程
V8是一个用于执行JavaScript的开源引擎，它是被用在Google Chrome浏览器中的。V8的工作流程可以大致分为以下几个步骤：
解析：V8首先会将输入的JavaScript代码进行解析，将其转换成抽象语法树（AST）的形式。这个过程涉及到词法分析和语法分析，将代码分解成词法单元（tokens）并构建语法树。
编译：接下来，V8会将AST转换成字节码（bytecode）。字节码是一种中间表示形式，相比原始的JavaScript代码更容易被解释和执行。
优化编译：V8会根据运行时的反馈信息对字节码进行优化编译。它会收集代码的执行统计数据，并根据这些数据进行动态优化，生成高效的机器码（machine code）。
执行：一旦生成了优化后的机器码，V8就可以执行JavaScript代码了。它使用了一种称为“即时编译”（Just-In-Time Compilation）的技术，在代码执行前对其进行动态编译。
垃圾回收：V8还负责管理JavaScript对象的内存分配和回收。它使用了一种叫做“垃圾回收器”（garbage collector）的机制来自动回收不再使用的内存，以避免内存泄漏和资源浪费。
总的来说，V8的工作流程涉及到解析、编译、优化编译、执行和垃圾回收等步骤，通过这些步骤，它可以高效地执行JavaScript代码并管理内存。
JSX
JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。简单来说，只要你把HTML代码写在JS里，那就是JSX。官方定义是：类 XML 语法的 ECMAScript 扩展。
XML
这里是为了解释上文的XML。
XML 不是 HTML 的替代。 XML 和 HTML 为不同的目的而设计： 也许这有点难以理解，但是 XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。
- XML 指可扩展标记语言（EXtensible Markup Language）。
- XML 是一种很像HTML的标记语言。
- XML 的设计宗旨是传输数据，而不是显示数据。
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准
XML 不会替代 HTML，理解这一点很重要。在大多数 Web 应用程序中，XML 用于传输数据，而 HTML 用于格式化并显示数据。
对 XML 最好的描述是：
XML 是独立于软件和硬件的信息传输工具。
CSS in JS
CSS-in-JS，简而言之，是一个外部功能层，允许你通过 JavaScript 为组件编写 CSS 属性。
CSS 模块化的解决方案有很多，但主要有两类。一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium，jsxstyle，react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力；缺点是不能利用成熟的 CSS 预处理器（或后处理器） Sass/Less/PostCSS，:hover 和:active伪类处理起来复杂。另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是 CSS Modules
React 对 CSS 的封装非常弱，导致出现了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS
ARIA
WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。
它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等
cookie和session
HTTP是无状态的，Cookie:浏览器发起http请求，服务器set-cookie,浏览器保存cookie，cookie里有名和值两个重要属性name，和value，服务器会把这两个内容填充完整。浏览器以后发送的每一个请求都会自动附上这个cookie，它就是一种存储在浏览器的数据，实际上我们打开浏览器是可以看到保存了哪些cookie。
session会话，浏览器访问服务器就是会话的开始，服务器创建sessionid和会话结束时间，服务器把这些发送给浏览器需要用到cookie，设置cookie并且把sessionid加入到cookie里面，再把会话结束时间对应设置为这个cookie的有效期，这个时候cookie、里面没有用户名和密码，最重要的就是这个id，服务器再发送cookie之前是会对这个含有sessionid的cookie进行签名，如果黑客修改了sessionid，服务器就识别不了了，所以浏览器保存cookie以后，利用cookie的核心特点，也就是每个请求都会自动发送cookie到相应服务器那里，知道cookie的有效期失效以后，浏览器一般就会自行删除这个cookie。这就是会话结束了，那么在cookie失效后，用户就得重新输入用户名和密码了。
但是由于其他的原因，出现了JWT，也就是JSON Web Token，用户第一次登录网页以后，服务器就会生成一个JWT，服务器不需要保存这个JWT，只需要保存JWT签名的密文，接着把JWT发送给浏览器，可以让浏览器以cookie或者storage的形式进行存储，假设是存储在cookie里面，那么以后每一次访问登录都不需要重新输入用户名和密码了，这里的Token只不过存储在用户那边而已，有人会质疑中国Token的安全性，JWT由三部分组成header.payload和signatrue.header，header部分声明需要用什么算法来声明签名，patload部分是一些特定的数据，比如有效期之类的，这两部分再经过编码和算法得到签名信息。这样的完整的JWT就可以发送给浏览器了
indexedBD
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。IndexedDB 是一个基于 JavaScript 的面向对象数据库。
PWA和AMP
渐进式 Web 应用（PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。 它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。简单来说就是你的网页可以通过某种方式来达到离线使用
加速移动页面（AMP）是一个由Google与Twitter合作开发的开源框架，它提供了一种直接的方式来创建轻量级的网页，以便用户即时使用，获得了极大改善的体验：内容更快，更具吸引力，更易于阅读。 从本质上讲，AMP框架允许我们通过简化HTML和简化的CSS规则来为移动设备构建轻量级体验。
Web Worker
我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。web worker是什么？
简单来说，其实就是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
Web Socket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯
Web Component
Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们 作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的 HTML（以及相关的样式和脚本）。
Web Components 旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突
Shadow DOM
Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上，你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style 属性），或者为整个 Shadow DOM 添加样式（例如在 <style> 元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 :focus-within），这为封装提供了便利。
WebGL和WebGPU
ebGL（全称Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL是最常用的跨平台图形库）结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGPU 是 WebGL 的继任者，为现代 GPU 提供更好的兼容、支持更通用的 GPU 计算、更快的操作以及能够访问到更高级的 GPU 特性，WebGPU API 使 web 开发人员能够使用底层系统的 GPU（图形处理器）进行高性能计算并绘制可在浏览器中渲染的复杂图形。
