【综合篇】浏览器的工作原理：浏览器幕后揭秘

╰+攻爆jí腚メ 2021-08-19 17:39 484阅读 0赞

web（给达达前端加星标，提升前端技能）

![format_png][]

**了解浏览器是如何工作的，能够让你站在更高的角度去理解前端**

浏览器的发展历程的三大路线，第一是应用程序web化，第二是web应用移动化，第三是web操作系统化。是不是有点不直白。

应用程序web化就是随着现在技术的发展，现在越来越多的应用转向了浏览器与服务器，就是B/S架构；web应用移动化，就是在移动设备应用，什么是移动设备呢。

“移动设备：也被称为行动装置（英语：Mobile device）、流动装置、手持装置（handheld device）等，是一种口袋大小的计算设备，通常有一个小的显示萤幕，触控输入，或是小型的键盘。因为通过它可以随时随地访问获得各种信息，这一类设备很快变得流行。和诸如手提电脑和智能手机之类的移动计算设备一起，PDA代表了新的计算机领域。”

移动设备的优点，**方便性，灵活性，安全性，交互性，低成本。![format_png 1][]**

**什么是应用程序Web化![format_png 2][]**

应用虚拟化、桌面虚拟化、服务器虚拟化......全球领先的云计算、虚拟化系统平台、应用程序发布和程序web化IT产品提供商--GOOSUU Networks公司\[高速计算机科技\]。

Web应用程序是一种通过Web访问的应用程序，好处就是用户容易访问的应用程序，只需要有浏览器即可，不需要再安装其他软件。![format_png 3][]

**应用程序的两种模式C/S、B/S**

C/S是客户端/服务器端程序，就是说这类程序一般独立运行。

B/S是浏览器端/服务器端应用程序，这类应用程序一般借助IE等浏览器来运行。WEB应用程序一般是B/S模式。Web应用程序首先是“应用程序”，和用标准的程序语言，如C、C++等编写出来的程序没有什么本质上的不同。

Web应用程序有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。换句话说，它是典型的浏览器/服务器架构的产物。

**为什么要学习Web应用程序![format_png 2][]**

Web应用程序开发，是目前软件开发领域的三大方向之一。

**什么是web应用移动化![format_png 2][]**

前端是个很大的概念，是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面，现在的说法一般是指Web前端，也就是针对于网页端开发的工作。

Web App指的是【Web application】，也就是以浏览器作为客户端的软件。

Mobile Web App 指在手机端打开的Web App，移动设备应用，渲染流程过于复杂且性能不及原生应用，离线时用户无法使用，无法接收消息推送，移动端没有一级入口。

**什么是web操作系统化![format_png 2][]**

![format_png 4][]

web操作系统

第一是**利用web技术构建一个纯粹的操作系统**，如ChromeOS

第二是**浏览器的底层结构往操作系统架构方向发展**。

**基于 HTML5 构建 Web 操作系统![format_png 5][]**

HTML5 具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如 Web 操作系统一类的富客户端互联网应用的前端开发。

浏览器逐渐走向操作系统，浏览器中引入多种编程语言的支持，简化渲染流程，使得渲染过程更加高效，加大了对系统设备特性的支持，提供对复杂web项目开发的支持。

浏览器中的JavaScript执行机制，浏览器端的Event Loop，浏览器的渲染机制与优化。

web apis

dom(document)

ajax（xmlhttprequest）

timeout(setTimeout)

浏览器里面跑了很多进程，多进程，浏览器是multi-process，进程包含了线程，**进程是我们操作系统执行的最小的单位**，一个进程占用一个端口，一个进程里面可以包含多个线程。

一个浏览器只有一个browser process，负责管理tabs，协调其他process和render process存至memory内的bitmap绘制到页面上的。

![format_png 6][]

**浏览器端的Event Loop![format_png 7][]**

一个函数执行栈，一个事件队列，一个微任务队列。![format_png 8][]

每个事件队列中取一个事件时有微任务就把微任务执行完，才开始执行事件。

**一段代码的运行**

从一段JavaScript源码，解析，抽象语法树，执行上下文，解释器，字节码，编译器。

**执行栈ECStack**

执行栈

foo()，query()，hello()，web apis中，dom，ajax，setTimeout

任务队列

onLoad，onClick。

事件队列

添加事件，（其他事件，样式计算，布局，定时器，JavaScript，dom，click）取出事件-》单线程执行事件，单线程，一次只能处理一个事件。

**JavaScript的核心![format_png 9][]**

对象，原型链，构造函数，执行上下文堆栈，执行上下文，变量对象，活动对象，作用域链，闭包，this。

**运行时的描述**

对于每个执行上下文，三个重要的属性，**变量对象，作用域链，this。**

执行上下文，第一，函数的形参，当进入到函数执行上下文时，变量对象的一个属性，其属性名就是形参的名字，其值就是实参的值，对于没有传递的参数其值为undefined。

> 函数声明，变量对象的一个属性，其属性名和值都是函数对象创建出来的，如果变量对象已经包含了相同名字的属性，则替换它的值。

变量声明，变量对象的一个属性，其属性名即为变量名，其值为undefined，如果变量名和已经声明的函数名或者函数的参数名相同，则不会影响已经存在的属性。

**变量对象**

![format_png 10][]

全局对象是一个进入任何执行上下文前就创建出来的对象，此对象以单例形式存在，它的属性在任何地方都可以直接访问，其生命周期随着程序的结束而终止。

全局对象在创建的时候，这些属性也被初始化，math，string，date，parseInt等等，同时，其中**一些对象会指向全局对象本身**，比如dom中，全局对象上的window属性就指向了全局对象，但是，并非所有的实现都是。

> 在引用全局对象的属性时，前缀通常可以省略，因为全局对象是不能通过名字直接访问的，然而 ，通过全局对象上的this值，以及通过dom中的window对象这样递归引用的方式可以访问到全局对象。

![format_png 11][]

**函数上下文中的变量对象**

> 在函数的执行上下文中，变量对象在进入函数上下文的时候创建出来，初始化的时候会创建一个arguments属性，其值就是arguments对象。

它的属性有，callee对当前函数的引用，length实参的个数，properties-indexes的个数等于arguments.length，arguments对象的properties-indexs的值和当前形参是共享的。

**处理上下文代码的阶段![format_png 12][]**

分两个阶段，第一，进入执行上下文，第二，执行代码。

函数的形参（当进入函数执行上下文时），变量对象的一个属性，其属性名就是形参的名字，其值就是实参的值，对于没有传递的参数，其值为undefined

函数声明，变量对象的一个属性，其属性名和值都是函数对象创建出来的，如果变量对象已经包含了相同名字的属性，则替换它的值

**微任务和宏任务对页面渲染的影响![format_png 13][]**

setTimeout的不确定性

是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按针对网页进行的重绘。

设置这个api的目的是为了让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果，代码中使用这个api，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

宏任务，tasks，一些异步任务的回调会依次进入macro task queue，等待后续被调用，异步任务：

![format_png 14][]

微任务，jobs，另一些异步任务的回调会一次进入micro task queue，等待后续被调用，异步任务包含：

process.nextTick(Node都有)

promise.then()

object.observe

mutaionObserver

promise

构造函数里的代码是同步执行的。

![format_png 15][]

![format_png 16][]

**微任务可以多个同时执行，宏任务一次只能执行一个。**

![format_png 17][]

![format_png 18][]

![format_png 19][]

![format_png 20][]

Promise宏任务，Promise.then是微任务，宏任务先，console.log，再到微任务。

![format_png 21][]

浏览器内核分成两部分：**渲染引擎和js引擎**

目前使用的主流浏览器有五个：

> Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。

浏览器的主要功能是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。

资源的位置由**用户使用 URI（统一资源标示符）指定。**

![format_png 22][]

> 呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。

**主流程示例**

![format_png 23][]

图：WebKit 主流程

![format_png 24][]

图：Mozilla 的 Gecko 呈现引擎主流程

![format_png 25][]

解析的过程可以分成两个子过程：**词法分析和语法分析。**

![format_png 26][]

图：从源文档到解析树

解析通常是在翻译过程中使用的，而翻译是指将输入文档转换成另一种格式。

![format_png 27][]

图：编译流程

![format_png 28][]

学习浏览器的工作原理

第一，可以评估web开发项目的可能性，第二，从更高的纬度去审视页面，第三，在快节奏的技术迭代中把握本质。

**为啥打开一个页面，有4个进程**

Chrome打开一个页面需要启动多少进程？可以点击Chrome浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”。查看进程，任务管理器。

> 多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。一个进程就是一个程序的运行实例。线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。

进程中的任意一线程执行出错，都会导致整个进程的崩溃。线程之间共享进程中的数据。当一个进程关闭之后，操作系统会回收进程所占用的内存。进程之间的内容相互隔离。

## **单进程浏览器时代** ##

单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里，单进程浏览器不稳定、不流畅和不安全。

**多进程浏览器时代**

最新的Chrome浏览器包括：

> 1个浏览器（Browser）主进程、1个 GPU 进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程。

**仅打开了1个页面，为什么有4个进程**

> 因为打开1个页面至少需要1个网络进程、1个浏览器进程、1个GPU进程以及1个渲染进程，共4个。

多进程模型提升了浏览器的稳定性、流畅性和安全性，但是资源占用大，体系架构复杂。

什么叫FP，指的是首次渲染，影响FP指标的是网络加载速度。

如何保证页面文件能被完整地送达浏览器呢？

从“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”这三个方面。

**互联网中的数据是通过数据包来传输的**

![format_png 29][]

> TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。

一个完整的TCP连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。

![format_png 30][]

互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。

**IP负责把数据包送达目的主机。**

**UDP负责把数据包送达具体应用。**

TCP保证了数据完整地传输，它的连接可分为三个阶段：**建立连接、传输数据和断开连接。**

**丢包一般是什么原因 **

网络问题，线路故障，路由错误等底层的问题都有可能导致丢包

**你怎么理解 HTTP 和 TCP 的关系？**

HTTP是建立在TCP协议之上的，属于应用层，TCP提供给HTTP可靠的连接，HTTP给应用提供更方便的使用接口。

> http协议是超文本协议，浏览器发出http请求，TCP会把请求向底层传递知道web服务器，然后web服务器返回http请求的response，浏览器渲染数据，下层为上层提供服务。

HTTP协议和TCP协议都是TCP/IP协议簇的子集。HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。

请求方要发送的数据包，在应用层加上HTTP头以后会交给传输层的TCP协议处理，应答方接收到的数据包，在传输层拆掉TCP头以后交给应用层的HTTP协议处理。

建立 TCP 连接后会顺序收发数据，请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。

**为啥打开第二次网站，速度比较快，第一次比较慢呢？**

![format_png 31][]

HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础，HTTP是浏览器使用最广的协议。

![format_png 32][]

![format_png 33][]

**为啥打开第二次快呢？**

因为第一次加载时，缓存了一些耗时的资源，浏览器缓存的有DNS缓存和页面资源缓存。

**浏览器的一个请求从发送到返回是一个怎样的过程？**

[【综合篇】Web前端性能优化原理问题][Web]

![format_png 34][]

**首先，**用户从浏览器进程里输入请求信息，然后，网络进程发起url请求，服务器响应url请求后，浏览器进程就又要开始准备渲染进程了，渲染进程准备好后，向渲染进程提交页面数据，渲染进程接收后，开始解析页面和加载。

用户发出URL请求到页面开始解析的这个过程，**就叫做导航。**

![format_png 35][]

**渲染是怎么变成页面的呢？**

HTML的内容是由标记和文本组成。CSS又称为层叠样式表，是由选择器和属性组成。JavaScript（简称为JS），使用它可以使网页的内容“动”起来。

**构建DOM树**

浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器能够理解的结构——DOM树。

![format_png 36][]

![format_png 37][]

> 重排和重绘都是渲染进程的主线程中进行的，减少这类操作可以减少主线程的资源占用，提高主线程绘制效率。

在编写js时尽量减少dom操作或合并dom操作，dom操作需要重新生成dom树，如果影响布局就需要重新生成布局树，再重新生成分层树，再进行绘制。

![format_png 38][]

# **变量提升** #

![format_png 39][]

什么是JavaScript中的声明和赋值

![format_png 40][]

![format_png 41][]

JavaScript引擎把变量的声明和函数的声明提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是undefined。

![format_png 42][]

函数和变量在执行之前都提升到了代码开头。

**代码中出现相同的变量或者函数怎么办？****会覆盖。**

为什么JavaScript代码会溢出呢？

调用栈就是用来管理函数调用关系的一种数据结构。什么是函数调用，函数调用就是运行一个函数。

**什么是JavaScript的调用栈**

管理执行上下文的栈称为执行上下文栈，又称调用栈。

![format_png 43][]

> 栈溢出，是一种用来管理执行上下文的数据结构，符合后进先出的规则，调用栈是有大小的。

[一篇文章带你了解JavaScript中的函数表达式，递归，闭包，变量，this对象，模块作用域][JavaScript_this]

![format_png 44][]

![format_png 45][]

![format_png 46][]

![format_png 47][]

**回流，重绘。**

引起回流的因素，第一是dom节点增加或者是删除，第二是元素的尺寸，边距，填充，边框，宽高，第三dom节点位置变化，第四dom节点display显示与否，第五，页面渲染初始化，浏览器窗口尺寸变化，向浏览器请求某些样式信息。

**浏览器性能优化**

回流比重绘的代价更高，回流的花销更render tree有多少节点需要重新构建有关系，使用队列处理来优化，尽可能减少重绘和回流

原理，浏览器会维护一个队列，把所有会引起的回流，重绘的操作放入在这个队列，等队列中的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。

> 时间线定义：在浏览器加载页面开始的那一刻到页面加载完全结束的这个过程中，按照顺序发生的每一件事情的总流程，就是时间线。

时间线产生过程，页面加载就产生一个document对象，js就起作用了，涉及到dom功能体就生效了。

**查看文档解析的三个状态变化**

// 只要 readyState 状态发生变化就触发，浏览器JS引擎实时监听
    console.log(document.readyState); // loading
    document.onreadystatechange = function() {
        console.log(document.readyState); // interactive -> complete
    }

**监听 DOMContentLoaded**

// 监听 DOMContentLoaded：在'interactive' ：文档解析完成之后触发
    document.addEventListener('DOMContentLoaded', function(){
        console.log('DOMContentLoaded');
    }, false);

**window.onload 与 DOMContentLoaded 区别**

window.onload：在文档加载完成之后触发

DOMContentLoaded：在文档解析完成之后触发

![format_png 48][]

![format_png 49][]

![format_png 50][]

![format_png 51][]

![format_png 52][]

渲染流程：HTML、CSS、JavaScript是如何变成页面？

**从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示**

**DOM树:**

渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。

**样式计算：**

渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。

**布局树：**

> 创建布局树，并计算元素的布局信息。

**分层：**

> 对布局树进行分层，并生成分层树。

**绘制：**

为每个图层生成绘制列表，并将其提交到合成线程。

**光栅化：**

合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

**合成：**

合成线程发送绘制图块命令DrawQuad给浏览器进程。

**显示：**

浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

**服务器端处理浏览器端发送过来的HTTP请求**

1、返回请求

（成功状态码200，没找到页面404，响应行、响应头、响应体）

2、断开连接

（服务器向客户端返回请求数据，关闭TCP连接）

3、重定向

**页面二次打开会很快？**

1、DNS缓存

2、页面资源缓存

> 为了解决UDP数据包传输过程容易丢失，引入TCP。

**TCP：**

把数据完整地送达应用程序，是一种面向连接的、可靠的、基于字节流的传输层通信协议。

**TCP两个特点：**

1、对于数据包丢失的情况，TCP提供重传机制；

2、TCP引入数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。

> “FP”指从页面加载到首次开始绘制的时长。影响FP指标：网络加载速度。
> 
> HTTPWebSocket都是基于TCP/IP的，TCP/IP是优化Web页面的加载速度的根基。

IP通过IP地址信息把数据包发送到指定的电脑，而UDP通过端口把数据包分发给正确程序。

![format_png 53][]

**JavaScript中的变量**

分为基本类型和引用类型

![format_png 54][]

原始值，存在栈内存stack，并且不可改变值，引用值，值指针存在栈内存，值存在堆内存。

访问堆内存中的数据，从栈内存中获取该对象的地址引用，再从堆内存中获取我们想要的数据。

![format_png 55][]

![format_png 56][]

学习一下

[【面试需要】掌握JavaScript中的this，call，apply的原理][JavaScript_this_call_apply]

什么是作用域链，什么是闭包呢？**变量是通过作用域链来查找，什么是词法作用域，其作用域链是由词法作用域决定的。**

![format_png 57][]

> 整个词法作用域链的顺序是：**foo函数作用域—>bar函数作用域—>main函数作用域—>全局作用域。**

全局执行上下文、函数执行上下文和eval执行上下文，通过函数的call方法来设置函数执行上下文的this指向。

![format_png 58][]

# **数据是如何存储的？我们把这种在使用之前就需要确认其变量数据类型的称为静态语言。我们把在运行过程中需要检查数据类型的语言称为动态语言。** #

![format_png 59][]

JavaScript是一种弱类型，动态的语言。

[来吧！一文彻底搞懂引用类型！][Link 1]

在JavaScript的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。

常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。堆空间很大，能存放很多大的数据。

原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址。

# **垃圾数据是如何自动回收的？** #

使用后的数据不需要了，就称为垃圾数据，不删除，就会越来越多，就需要进行回收，垃圾数据回收分为手动回收和自动回收。

> 产生的垃圾数据是由垃圾回收器来释放的，并不需要手动通过代码来释放。

调用栈中的数据是如何回收的

[【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await][Vue_vue_-es7_async_await]

[一篇文章带你了解JavaScript中的面向 “对象”][JavaScript_]

**浏览器工作原理**

浏览器的组成

> 交互部分（UI）
> 
> 网络请求部分（Socket）
> 
> JavaScript引擎部分（解析执行JavaScript）
> 
> 渲染引擎部分（渲染HTML、CSS等）
> 
> 数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）

![format_png 60][]

**HTTP请求报文和响应报文格式**

![format_png 61][]

**DNS 解析过程**

![format_png 62][]

解析过程

![format_png 63][]

![format_png 64][]

[你每天都在使用的HTTP协议，到底是什么鬼？][HTTP]

[TCP的 “三次握手” 和“四次挥手”，到底是什么鬼？][TCP_ _]

![format_png 65][]

![format_png 66][]

> 线程VS进程：1、线程是不能单独存在的，它是由进程来启动和管理的2、启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

**使用Promise，告别回调函数**

![format_png 67][]

封装异步代码，让处理流程变得线性

输入数据和输出结果

![format_png 68][]

分析了产生回调地狱的原因：多层嵌套的问题；**每种任务的处理结果存在两种可能性（成功或失败），需要在每种任务执行结束后分别处理这两种可能性。**

**浏览器的三大进化路线：**

![format_png 69][]

PWA，全称是Progressive Web App

渐进式网页应用，渐进式+Web应用，它是一套理念，渐进式增强Web的优势，并通过技术手段渐进式缩短和本地应用或者小程序的距离。

**web应用缺点**

Web应用缺少离线使用能力，Web应用还缺少了消息推送的能力，Web应用缺少一级入口。

## **什么是Service Worker** ##

![format_png 70][]

拦截请求和缓存资源

![format_png 71][]

浏览器涉及很多概念，不仅繁多而且琐碎，包括网络、渲染、安全，以及大前端相关的大量概念。

参考链接

http://taligarsiel.com/Projects/howbrowserswork1.htm\#The\_browsers\_we\_will\_talk\_about

推荐阅读  点击标题可跳转

[【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await][Vue_vue_-es7_async_await]

[【面试需要-Vue全家桶】一文带你看透Vue前端路由][-Vue_Vue]

[【面试需要】掌握JavaScript中的this，call，apply的原理][JavaScript_this_call_apply]

[2019年的每一天日更只为等待她的出现，好好过余生，庆余年 | 掘金年度征文][2019_ _]

[进来就是一家人【达达前端技术社群⑥】][Link 2]

觉得本文对你有帮助？请分享给更多人

关注「达达前端」加星标，提升前端技能

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「**达达**」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， **求点赞，求关注，求分享，对暖男我来说真的**

**非常有用！！！**

感谢阅读，原创不易，喜欢就点个\[**在看**\] or \[**转发朋友圈**\]，这是我写作最大的动力。

**意见反馈**

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

**这是一个有质量，有态度的公众号**

点关注，有好运

![format_png 72][]

好文章，我在看❤️

[format_png]: /images/20210724/8f51b8a5ac3f44fab17cfc08f757d004.png
[format_png 1]: /images/20210724/7334e76159c2489da0acff1ae77300fa.png
[format_png 2]: /images/20210724/d697f614f26b426ea6e2865a5200e521.png
[format_png 3]: /images/20210724/1d3a3be086d841f68a7fa8abe53eb0dc.png
[format_png 4]: /images/20210724/3065ec4654cf4dfabbc9f033cf388045.png
[format_png 5]: /images/20210724/7db04bff9e4c4774841ec57f3d63f486.png
[format_png 6]: /images/20210724/6944fc55c0ea42ecb4bf13c2c23bf501.png
[format_png 7]: /images/20210724/c99ba921d6b14b0992c1a9dd59d0dd3e.png
[format_png 8]: /images/20210724/10b4c79656cd4c5184d5424243cbf688.png
[format_png 9]: /images/20210724/b65012c4b95c40c2b5421fd100bdb9ff.png
[format_png 10]: /images/20210724/88d9482256f94a8db6e0629a7fefdc93.png
[format_png 11]: /images/20210724/0d598ec350de48f787c94d1ed4299390.png
[format_png 12]: /images/20210724/3c3c82edd6344db9a3fb7d3c4d9868c0.png
[format_png 13]: /images/20210724/4fed1b870b3f46f8a3d4db3b5ee684bb.png
[format_png 14]: /images/20210724/c17d82269206466486a2123851cb4a51.png
[format_png 15]: /images/20210724/86dd9779da4547728cb3ab61880b4fc9.png
[format_png 16]: /images/20210724/08e043e9cb8d466c91899179093a2d26.png
[format_png 17]: /images/20210724/ef4805b274e84462b83f756d5922b835.png
[format_png 18]: /images/20210724/52bbb2c7e5d04a7fbc480b26640666fe.png
[format_png 19]: /images/20210724/24a7e71e060647a48ffd8dcd6213c099.png
[format_png 20]: /images/20210724/ded013075c304f069712ff2d11ac1860.png
[format_png 21]: /images/20210724/976c3b837054423ca1a070ed69709ec7.png
[format_png 22]: /images/20210724/45034fe10cde44a8ac098ba55e5b5664.png
[format_png 23]: /images/20210724/5ce2866c89bd4fcf9d0f6b29cf1dae20.png
[format_png 24]: /images/20210724/9a4dbbb18bd946fbbfaad48abafedac4.png
[format_png 25]: /images/20210724/e82a59efabba4d39babdbbcf31a7fdd1.png
[format_png 26]: /images/20210724/cd774a46bc664c4bbd66aeab92f949d6.png
[format_png 27]: /images/20210724/2be2cdae95b548f4b142d95dfb48036d.png
[format_png 28]: /images/20210724/972de04df5a042628aea4d21607bb398.png
[format_png 29]: /images/20210724/f0b1433802a44eb395c5cb19a27f975e.png
[format_png 30]: /images/20210724/85a1661d2c0940a7bc0553aaa0339a35.png
[format_png 31]: /images/20210724/33451d721e6b41adb39fb534b9b1a17b.png
[format_png 32]: /images/20210724/5dbbe2c926dd442e8ba763ecf77e9217.png
[format_png 33]: /images/20210724/44bfd25cb838410e9d82779ae0cfb5fb.png
[Web]: https://blog.csdn.net/qq_36232611/article/details/104057870
[format_png 34]: /images/20210724/508f473e4b11412691d1b4f339842e5c.png
[format_png 35]: /images/20210724/d51c846fb50945fab54237f3382fbeab.png
[format_png 36]: /images/20210724/12fa336807dc48eb8644532323c8b2d8.png
[format_png 37]: /images/20210724/619299d768184b4a8ee87b1eec3e287d.png
[format_png 38]: /images/20210724/8ab9fda5afcc40b4917a93de009096bc.png
[format_png 39]: /images/20210724/9d4b0941f5c64ed4b0599b24456d6cd5.png
[format_png 40]: /images/20210724/d19fc33d924d4372bca7ec33875ef1b8.png
[format_png 41]: /images/20210724/eb97d650ef4949de8a0ed178db3b6861.png
[format_png 42]: /images/20210724/b860b2bd1e8c477f8c8e7a36ec947b73.png
[format_png 43]: /images/20210724/6783734877b0437f8e8ea7e1f3cc827d.png
[JavaScript_this]: https://blog.csdn.net/qq_36232611/article/details/103760457
[format_png 44]: /images/20210724/584e3608d5e4458d9cfdfea10f9e0afa.png
[format_png 45]: /images/20210724/0e10dbce22df4d9ca43c6180c7e2fe58.png
[format_png 46]: /images/20210724/b3d9452432f34757aa4bf0773a93a8b5.png
[format_png 47]: /images/20210724/c83d703ef7674b07aa878250641aeb89.png
[format_png 48]: /images/20210724/5cc49bed74704cfeb10a50b58e7aea91.png
[format_png 49]: /images/20210724/b1435e31bfec4a9eba6b2c82bf9780f5.png
[format_png 50]: /images/20210724/82de87c2af134d169367903f831e1e51.png
[format_png 51]: /images/20210724/5826a2de06bb49eaac39c8a81c9b4c3c.png
[format_png 52]: /images/20210724/3d0e5cb1ca734bdb811473e1c1ba0444.png
[format_png 53]: /images/20210724/a6d683279afd4e638607a4990128a4a0.png
[format_png 54]: /images/20210724/608e109ed1e442fbaa12111d68b85d04.png
[format_png 55]: /images/20210724/180849caa08b4c83b896218c15143e3e.png
[format_png 56]: /images/20210724/7d225cd7782d4d57afadbeeff7ce1a32.png
[JavaScript_this_call_apply]: https://blog.csdn.net/qq_36232611/article/details/103929527
[format_png 57]: /images/20210724/a54b045f690b4983b2d8189245142925.png
[format_png 58]: /images/20210724/6a45fbe7ac63424fa7963ce4c54a4d01.png
[format_png 59]: /images/20210724/927e579f8bf84d53b35a5f4f0fbf77be.png
[Link 1]: https://blog.csdn.net/qq_36232611/article/details/103929487
[Vue_vue_-es7_async_await]: https://blog.csdn.net/qq_36232611/article/details/103951684
[JavaScript_]: https://blog.csdn.net/qq_36232611/article/details/103760429
[format_png 60]: /images/20210724/208d4e3f9a93446a926ec98bacc4e400.png
[format_png 61]: /images/20210724/722e7d0d1de64e7f994270551353fab6.png
[format_png 62]: /images/20210724/c9de0cde3c39423a81392fe5bdad5383.png
[format_png 63]: /images/20210724/a8a1394057c1443abe58aa7eba983d2f.png
[format_png 64]: /images/20210724/02743e6fd7bb45dc8cff67b32b7885d9.png
[HTTP]: http://mp.weixin.qq.com/s?__biz=MzI1NTcxOTQ1Nw%3D%3D&chksm=ea30efe5dd4766f3dadfd7019404713a9e1ea693325703019e3eb768c0aa2ce94c6d144dea2b&idx=1&mid=2247487147&scene=21&sn=c8286a7cc7d3ff1fe934f0ce4daa64c1#wechat_redirect
[TCP_ _]: http://mp.weixin.qq.com/s?__biz=MzI1NTcxOTQ1Nw%3D%3D&chksm=ea30ef56dd47664087f099bd289221c006143518887038ebf2a31d5805636fea41596af004f0&idx=2&mid=2247487000&scene=21&sn=414b6ed48f4d7c667257d7bda45f7498#wechat_redirect
[format_png 65]: /images/20210724/95e63152f91e4adbaf5fb4223343e5e3.png
[format_png 66]: /images/20210724/ba32082dc75f4bcc9e237fe347f96a2e.png
[format_png 67]: /images/20210724/dd7428c931e0434393f680ac09774b2e.png
[format_png 68]: /images/20210724/a28fb8fb3e9c4dbab17e6a878e04a94c.png
[format_png 69]: /images/20210724/cea76d7a12ce42eeaf958a7d2098c204.png
[format_png 70]: /images/20210724/da712989989342dc89f66a49ec564dd6.png
[format_png 71]: /images/20210724/3f7da82b7c944316bfdf0cd0789cb44e.png
[-Vue_Vue]: https://blog.csdn.net/qq_36232611/article/details/103942481
[2019_ _]: https://blog.csdn.net/qq_36232611/article/details/103929511
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI1NTcxOTQ1Nw%3D%3D&chksm=ea30f158dd47784e5b86cf496c3317f0f6a67b8ea1c4d90f80108e6ee96969e66f697545b4bb&idx=4&mid=2247487510&scene=21&sn=bb1a9b513613521272c4c5a7d8e7063f#wechat_redirect
[format_png 72]: /images/20210724/4af5ec04fe9449d099ad881214601147.png