本次课概念性知识较多，老师先是简要介绍了前端三件套（HTML、CSS、Javascript）的用途、发展史及简单语法，随后重点针对HTML5进行了深层次的拓展。此笔记旨在记录上课中遇到的疑惑及认为值得牢记的知识点。

HTML&CSS&Javascript三者间的关系

语言	用途
HTML	创建网页结构
CSS	定义网页的外观和样式
Javascript	实现网页的交互和动态效果

老师上课时将这三种语言用打比方的方式介绍给我们：

HTML——骨骼

CSS——皮囊

Javascript——肌肉（让身体具有了运动能力）

var&&let&const

语言	用途
var	ES5 中声明变量的关键字。它可以在函数内部和全局范围内声明变量。`var` 声明的变量存在变量提升，即变量可以在声明之前使用，但是其值为 `undefined`。
let	ES6 中引入的关键字，用于声明块级作用域变量。与 `var` 不同的是，`let` 声明的变量不存在变量提升，不能在声明之前使用。同时，同一作用域内不能重复声明同名变量。
const	ES6 中引入的关键字，用于声明块级作用域的常量。与 `let` 不同，`const` 声明的变量必须在声明时初始化，而且不能再次赋值。

下面用代码阐述三者间的区别：

// var 
var x = 10;
if (true) { 
    var x = 20; 
} 
console.log(x); // 输出 20，因为 var 声明的变量在整个函数或全局范围内都是可见的 

// let
let y = 10; 
if (true) {
    let y = 20; 
} 
console.log(y); // 输出 10，因为 let 声明的变量只在当前块级作用域内有效 

// const
const z = 10; 
if (true) { 
    const z = 20; // 编译错误，常量不能重新赋值
} 
console.log(z); // 输出 10，因为 const 声明的变量是常量，不可修改

V8 JavaScript引擎

V8是由Google开发的高性能Javascript引擎，用于Chrome浏览器和Node.js等平台。

Parser（解析器）：用于将源代码转换为计算机可以理解的形式
AST（抽象语法树）：一种用于表示程序代码语法结构的树状结构
Ignition（字节码解释器）：将字节码转换为机器码，并负责执行Javascript代码。它采用了延迟编译的策略，还支持代码热加载
Turbofan（优化编译器）：可以根据代码的实际运行情况来进行优化，并且支持即时编译（JIT）技术，即在代码运行时即时编译和优化代码，以提高执行速度

Turbofan运行时如果发现数据类型不对，会反过来让Ignition重新优化兼容类型的代码，因此尽量不要反复改JS变量的类型

JavaScript的事件机制

首先你需要知道

JavaScript 是一门单线程语言，即在任何时刻只有一个任务（代码块）在执行。如果任务中包含了一些耗时的操作，比如网络请求或者计算密集型的任务，这可能会导致页面出现卡顿或者失去响应的情况。

因此，我们需要进行异步编程，将任务分为多个部分，并将这些部分分别添加到事件队列中，以便异步执行。这就形成了事件机制

JavaScript 中的事件机制由事件队列、事件循环和回调函数组成。事件队列用于存储待处理的事件，事件循环用于监控事件队列并将事件推入到调用栈中执行，回调函数则是在事件处理完成时被执行的函数。

可见，事件队列是事件机制的一个核心元素，它分为宏任务队列和微任务队列

宏任务：包括定时器事件（setTimeout、setInterval 等）、UI 事件、网络请求事件等。一般浏览器默认情况下执行的代码大多都是宏任务。宏任务在执行时会产生比较显著的延迟

微任务：包括 Promise、process.nextTick、MutationObserver 等。这一类任务响应时间相对较短

处理优先级：微任务>宏任务

看个例子：

console.log('Start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

输出结果为：

让我们分析一下其执行过程：

在JavaScript中，代码执行是同步的，意味着代码将按照顺序执行，从上到下逐行执行。在这个过程中，console.log('Start') 和 console.log('End') 都是同步执行的语句，因此它们将首先被执行并输出，而setTimeout和Promise语句块被加入事件队列
由于Promise的回调函数是微任务，console.log('Promise') 将首先被输出
尽管setTimeout 的延迟时间为 0，但是它仍然是一个宏任务，因此其回调函数将在微任务Promise的回调函数执行后执行

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

HTML&CSS&Javascript三者间的关系

var&&let&const

V8 JavaScript引擎

JavaScript的事件机制