HTML5

基本语法

标签分类

head标签

body功能性标签

语义化标签

存储

WebSocket

SVG & Canvas

CSS

伪类&伪元素选择器

• : 指的是伪类
• :: 用于伪元素

推荐阅读：

CSS 中的 : 和 :: 的区别

juejin.cn/post/722246…

www.php.cn/css-tutoria…

三种插入HTML方式

JavaScript

基本数据类型

• 7种 基本数据类型：不可变
  1. Undefined：只有一个值：undefined；当一个变量声明了，但尚未赋值时，其默认值为 undefined；表示变量的值尚未确定
  2. Null：只有一个值：null；空值或不存在的引用；变量没有被赋值，或表示一个空对象
  3. String：JavaScript 中，字符串是不可变的
  4. Number：整数和浮点数；在 JavaScript 中，所有数字都是双精度浮点数（64位）
  5. BigInt
  6. Boolean：true（真）和 false（假）
  7. Symbol：Symbol 类型的值是唯一且不可变的，主要用于创建对象的唯一属性名，以防止属性名冲突
• Object 引用数据类型：可变
  • Object 类型用于表示复杂的数据结构，如对象、数组和函数。对象是键值对的集合，键是字符串，值可以是任何数据类型。数组是值的有序集合，而函数是可调用的代码块。
  • Object
  • Array
  • Date
  • Function

推荐阅读：

关于 JavaScript 数据类型，有哪些你不知道的细节?

juejin.cn/post/700833…

DOM树和任务处理

• JavaScript 是单线程的
• 引入了事件循环（Event Loop），使用任务队列（Task Queues）来管理要执行的任务
• 任务队列：
  • 宏任务队列（Macro-Task Queue）
    • 如：setTimeout 和 setInterval ；I/O 操作（如文件读写、网络请求等）；用户交互事件（如点击、滚动等）
  • 微任务队列（Micro-Task Queue）
    • 紧急的、短小的任务
    • 如：Promise 的 then、catch 和 finally ；async/await
• 优先执行微任务： 事件循环会按顺序执行宏任务队列中的任务。当一个宏任务执行完毕后，事件循环会检查微任务队列，执行其中的所有任务，然后再执行下一个宏任务。

浏览器如何加载页面

• 浏览器包含：

  • 渲染引擎：加载页面 -> 根据html生成DOM树结构 -> 获取CSS资源，构建CSSOM (CSS Object Model)树 -> 构建渲染树（Render Tree），计算最终页面排版 -> 将渲染树中的各个节点分层，创建渲染层（Render Layers） -> 根据渲染层绘制页面

  • JavaScirpt引擎

• DOM 树是一个以节点形式表示的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、属性或文本。
• CSSOM 树是一个以节点形式表示的 CSS 规则结构。

推荐阅读(详细步骤)：

juejin.cn/post/722415…

V8引擎工作流程

推荐阅读（详细步骤）：

juejin.cn/post/722415…

其它

MVC & MVVM & MVP

• MVC:
  • View: 界面相关的交互
  • Model：数据层
  • Control：业务逻辑
• MVP:
  • 所有操作内聚到presenter，同时处理事务层和数据层的相互操作
• MVVM:
  • 双向绑定，减弱view model层的负担，view model无需和view层耦合，增加可复用性

推荐阅读

前端语言串讲(万字笔记) | 青训营笔记

juejin.cn/post/722415…