页面0到1页面0到1 目录 功能开发 传统 在开发网页的时候，无论是使用 jQuery 还是原生的 JavaScript

目录

功能开发

传统

在开发网页的时候，无论是使用 jQuery 还是原生的 JavaScript，大体的步骤都是这样的：

• 编写 HTML 页面结构，并规划哪些元素有可能会有交互，并赋予它们 ID 属性，方便后续在 JavaScript 获取对应的实例。
• 编写 CSS 样式，对于拥有多个不同页面的网站，可能需要有多个 CSS 文件。
• 编写 JavaScript 处理交互。 而在 JavaScript 中处理交互的时候，需要这样的步骤：
• 获取 DOM 元素。
• 添加事件监听。
• 根据事件对 DOM 数据的修改，手动更新相关的 DOM 元素，例如添加新的元素，删除已有的元素等。除此之外还有其它的一些问题。
• HTML 代码是静态的，不够灵活，如果多个页面有相同的页面元素，例如导航、底部、按钮等，还需要在每个页面复制代码。
• CSS 是全局共享的，如果不小心使用了相同的 class 名字，那么后定义的样式就会把先定义的覆盖。
• JavaScript 的全局变量也是共享的，引入多个 JavaScript 文件后，相同的变量名字也会互相覆盖。
• HTML 和 JavaScript 结合紧密，需要通过 id 等属性来获取 DOM 实例，如果 HTML 有修改，那么很可能还得修改对应的 JavaScript 代码。
• 如果多个 HTML 元素使用了同步联动的数据，例如一个单位换算的应用，需要两边的数据保持同步，那就要求我们开发者手动维护数据，非常容易出错。

传统的前端开发方式：JSP、Jquery、原生Javascript 进行功能的开发，在实现复杂逻辑上开发成本较大，而且后期的维护成本高，因此逐渐出现了Vue,React等框架。

目前

前后端分离。

以PC为例，目前主流的框架React、Vue、Angular以及其衍生状态管理库加上组件库例如：AntD、Element-Plus，组合完成开发，这种方式的好处在于，开发者能够专注于功能的实现。

组件

组件是组成页面中最基本的元素，按钮，输入框，下拉选择都是组件，组件和组件组合就变成了一个更复杂的组件。

打包编译

完成功能的开发之后，需要通过webpack、Vite等打包工具去将开发完成的模块按照指定的规则，进行打包，编译成对应资源文件。

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack打包的结果

服务器部署

Nginx分发

页面访问

在完成开发部署上线之后我们可以从浏览器去访问我们发布的内容，在其中有哪些过程

• 用户在浏览器地址栏内输入对应的访问域名
  • DNS解析：获取到输入的域名，执行解析获取到对应的IP地址
  • 通过解析的IP访问到对应的服务器，执行TCP握手
  • 服务器响应对应的请求，返回的对应的资源内容

浏览器解析

浏览器在获取到服务返回的资源模块时候会执行对应解析过程 “解析”是浏览器将通过网络接收的数据转换为 DOM 和 CSSOM 的步骤，通过渲染器把 DOM 和 CSSOM 在屏幕上绘制成页面。 DOM:DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。 CSSOM:CSS 对象模型 (CSSOM) 是树形形式的所有 CSS 选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。

构建 DOM 树

1、根据HTML规范将字符流解析为标记，比如 p、span、div 2、词法分析将标记转换为对象并定义属性和规则 3、根据HTML标记关系将对象组成DOM树

处理 HTML 标记并构造 DOM 树。HTML 解析涉及到 tokenization 和树的构造。HTML 标记包括开始和结束标记，以及属性名和值。如果文档格式良好，则解析它会简单而快速。解析器将标记化的输入解析到文档中，构建文档树。 DOM 树描述了文档的内容。 元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。DOM 节点的数量越多，构建 DOM 树所需的时间就越长。

预加载扫描器

二级HTML解析器

浏览器构建 DOM 树时，这个过程占用了主线程。当这种情况发生时，预加载扫描仪将解析可用的内容并请求高优先级资源，如 CSS、JavaScript 和 web 字体。它将在后台检索资源，以便在主 HTML 解析器到达请求的资源时，它们可能已经在运行，或者已经被下载。预加载扫描仪提供的优化减少了阻塞。

<link rel="stylesheet" src="styles.css"/>
<script src="myscript.js" async></script>
<script src="anotherscript.js" async></script>

在这个例子中，当主线程在解析 HTML 和 CSS 时，预加载扫描器将找到脚本和图像，并开始下载它们。

构建 CSSOM 树

1、字符流转换为标记流 2、根据标记创建节点 3、节点创建CSSOM树

处理 CSS 并构建 CSSOM 树。CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树。它们是独立的数据结构。浏览器将 CSS 规则转换为可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和兄弟关系的节点树。 与 HTML 一样，浏览器需要将接收到的 CSS 规则转换为可以使用的内容。

其他过程

JavaScript 编译

当 CSS 被解析并创建 CSSOM 时，其他资源，包括 JavaScript 文件正在下载（借助预加载器）。JavaScript 被解释、编译、解析和执行。脚本被解析为抽象语法树。一些浏览器引擎使用抽象语法树并将其传递到解释器中，输出在主线程上执行的字节码。这就是所谓的 JavaScript 编译。

渲染

渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的 CSSOM 树和 DOM 树组合成一个 Render 树，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。

Style

将 DOM 和 CSSOM 组合成一个 Render 树，计算样式树或渲染树从 DOM 树的根开始构建，遍历每个可见节点。

像 和它的子节点以及任何具有 display: none 样式的结点，例如 script { display: none; }（在 user agent stylesheets 可以看到这个样式）这些标签将不会显示，也就是它们不会出现在 Render 树上。具有 visibility: hidden 的节点会出现在 Render 树上，因为它们会占用空间。由于我们没有给出任何指令来覆盖用户代理的默认值，因此上面代码示例中的 script 节点将不会包含在 Render 树中。

每个可见节点都应用了其 CSSOM 规则。Render 树保存所有具有内容和计算样式的可见节点——将所有相关样式匹配到 DOM 树中的每个可见节点，并根据 CSS 级联确定每个节点的计算样式。

布局

在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。

构建渲染树后，开始布局。渲染树标识显示哪些节点（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器从渲染树的根开始遍历它。

在网页上，大多数东西都是一个盒子。不同的设备和不同的桌面意味着无限数量的不同的视区大小。在此阶段，考虑到视区大小，浏览器将确定屏幕上所有不同框的尺寸。以视区的大小为基础，布局通常从 body 开始，用每个元素的框模型属性排列所有 body 的子孙元素的尺寸，为不知道其尺寸的替换元素（例如图像）提供占位符空间。

第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。

绘制

将各个节点绘制到屏幕上，第一次出现的节点称为 first meaningful paint。在绘制阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。

合成

当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。

当页面继续加载资源时，可能会发生回流，回流会触发重新绘制和重新组合。如果我们定义了图像的大小，就不需要重新绘制，只需要重新绘制需要重新绘制的层，并在必要时进行合成。但我们没有包括图像大小！从服务器获取图像后，渲染过程将返回到布局步骤并从那里重新开始。