前端体系知识点总结

朱雀 2021-01-20 05:49 791阅读 0赞

### 前端——全端知识体系总结 ###

*   *  Web页面与多页应用
     *   *  DOM树渲染流程
         *  JavaScript引擎

参考书籍《了不起的JavaScript工程师》、《前端架构从入门到微前端》、《前端工程化体系设计与实践》，写此博客记录重要知识点，一来自己以后能以此作为知识点回顾，二来希望分享给其他有需要的前端同行。

注：本文章所有文字与代码均为手敲，如若发现错误，一切以实际情况为准，请自行辨别，欢迎在文章下方留言指错。

## Web页面与多页应用 ##

### DOM树渲染流程 ###

浏览器在收到服务器端发来的Html文档之后，会根据标签之间的嵌套结构，通过词法、语法分析将其解析成一棵DOM数。以下面一段代码为例：

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8" >
 		<title>Document</title>
 	</head>
 	<body>
 		hello Dom
 		<ul>
 			<li>first</li>
 			<li>second</li>
 			<li class="last">last</li>
 		</ul>
 	</body>
 </html>

浏览器在解析上面的Html代码之后会生成如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70]  
在这个过程中有两个重要因素会影响生成DOM树的时间——标签数量和嵌套层级。  
标签数量越多，相应的解析时间就越长。

**同样的标签数量标签层级越多，解析时间越长！**

接下来是CSSOM构建：

body {  font-size: 12px }
    p {  font-weight: light }
    span {  color: blue }
    p span {  display: none }

css虽然本身不像HTML文件一样呈现出明显的层级结构，但也可以按照其样式规则中的选择器嵌套关系来构造树形结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70 1]  
*需要注意的是实际在浏览器中还会包含浏览器的默认样式，而我们编写的样式只是对默认样式的替换*

接下来说说css的匹配机制

**从左到右匹配：**

1.  找到第一个div元素
2.  找到子元素中第2个p元素
3.  找到子元素中的第1个span元素，样式选择器不匹配，回溯到p元素
4.  找到子元素中的第2个span元素，样式选择器不匹配，此时p元素已无子元素，回溯到父元素div
5.  找到子元素中第2个p元素
6.  找到子元素中的第1个span元素，样式选择器不匹配，回溯到p元素
7.  找到子元素中的第2个span元素，样式选择器不匹配，此时p元素已无子元素，回溯到父元素div
8.  找到子元素中的第3个p元素
9.  找到子元素中的第1个span元素，样式选择器不匹配，回溯到p元素
10. 找到子元素中的第2个span元素，样式选择器匹配，匹配完成。

**从右到左匹配**

1.  找到div元素，标签选择器span不匹配，继续往下找
2.  知道找到最后一个span元素，标签和类选择器匹配，继续网上匹配
3.  找到父元素p，标签样式匹配，找到父元素div，标签样式匹配，匹配完成

从上面的匹配过程中我们不难看出，如果按照从左到右的匹配模式，那么会产生大量的回溯操作，所以浏览器选择了从右到左的选择器匹配方式。

了解了浏览器匹配CSS的方式之后，我们需要注意的是，在选择器的右边尽量使用具有唯一性的选择器，而不要使用标签选择器这类容易匹配的选择器！

现在总结一下渲染页面的大致流程：

1.  解析HTML标签并生成DOM树
2.  解析CSS规则并生成CSSOM树
3.  将DOM树与CSSOM树合并成一个渲染树
4.  根据渲染树进行布局
5.  对渲染树上的节点进行绘制

下面是流程图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70 2]

// TODO
    接下来我们思考一个重要的问题：如何写出高性能的代码（写代码），类似于常说的前端如何进行性能优化（碰到已经写好的代码怎么优化）？
    
    当然前端的性能优化不只涉及渲染引擎，就渲染引擎而言，我们至少可以做到一下几点。
    
     1. 避免编写复杂的DOM结构，减少DOM层级，从而可以加快DOM树的构建。
     2. 避免写出复杂的CSS样式，从而可以加快CSSOM树的构建。
     3. 避免在选择器右边使用通用选择器，加快浏览器匹配样式规则的速度。
     4. 修改样式的时候避免引起重新布局。

### JavaScript引擎 ###

*浏览器给JavaScript引擎注入了两件强大的武器：BOM（浏览器对象模型）和DOM（文档对象模型），让他不但能解释执行JavaScript代码，同时能操作浏览窗口和内容树*

整个渲染流程大致如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70 3]  
从上图可以看到，如果JS请求或执行时间过长，或由于网络原因造成下载JS文件的时间过程，那么浏览器会长时间处于白屏状态，从而造成较差的用户体验。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70]: /images/1611121742482.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70 1]: /images/1611121717993.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70 2]: /images/1611121698009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Nzc3Nzcz_size_16_color_FFFFFF_t_70 3]: /images/1611121660335.png