[系统运维]互联网是如何工作的

????????

浏览器的工作原理：

浏览器的组成：

用户界面

||

浏览器引擎

||

渲染引擎（浏览器的内核）

| |

网络 js解析器

浏览器是运行在操作系统上的一个应用程序

每个应用程序至少启动一个进程执行其功能

每个程序需要运行很多任务，所以进程就创建很多线程去执行这些小任务。

进程和线程的区别

进程：

进程是操作系统进程资源分配和调度的基本单元，可以申请和拥有计算机资源，进程是程序的基本执行实体。

线程：

线程是操作系统能够进行运算调度的最小单位，一个进程可以并发多个线程，每个线程执行不同的任务

由于每个进程分配的内存空间是独立的，如果两个进程间需要传递某些数据，则需要通过通信管道IPC传递，很多应用程序都是多进程的结构，这样是为了避免某一个进程卡死，由于进程间相互独立，这样应用程序就不会卡死，同一个进程下的线程是可以通信共享数据的

现在的浏览器也是 一个多进程结构

以前的浏览器的是当进程的结构：

造成的影响：

1. 不安全: 每个线程可以共享一个浏览器进程的多个页面的数据

2. 不稳定：容易造成浏览器被卡死奔溃，其中一个标签页线程奔溃了可能导致浏览器奔溃

3. 不流畅：一个进程做太多的事情，会导致运行效率的问题

在浏览器地址栏输入内容时，浏览器发生了什么事情：

浏览器的UI线程会捕捉你的输入内容：

如果范访问的是网址，则UI线程会启动一个网络线程来请求DNS进行域名解析，接着开始连接服务器获取数据

如果请求的不是网址，而是关键词，浏览器就知道你要搜索，于是会使用默认配置的搜索引擎进行查询，

网络线程获取到数据后

会通过safeBrowsing检查是否是恶意站点，如果是则会展示一个警告页面，safeBrowsing是谷歌内部的一套站点安全系统，通过检测该站点的数据来判断是否安全，比如查看该站点的ip是否在谷歌的黑名单之内。

当返回数据准备完毕并安全校验通过时，网络线层会通过UI线程，然后UI线程会创建一个渲染器进程来渲染页面，浏览器进程通过IPC管道将数据传递给渲染器进程，正式进入渲染流程，渲染器进程的主线程将html进行解析，构造DOM数据结构，在DOM树构造过程中会创建document对象，然后以document为根节点的DOM树,不断进行修改，向其中添加各种元素，html需要css，img等资源的时候，加载这些资源不会停止html 的解析流程， 但html解析过程中遇到script标签时，将停止html的解析流程转而去解析并且执行js，当html解析完成以后，我们就能获得一个dom树

但我们还不知dom树上的每一个节点什么样子，主线程需要解析css并确定每个DOM节点的计算样式，如果没有提供css的样式，浏览器会有自己的默认样式表

接下来我们还知道节的坐标以及节点占多大区域，这个阶段被称为layout布局，主线程通过遍历dom和计算好的样式来生成Layout 树，layout树上的每一个节点都记录了x,y坐标和变宽尺寸，DOM树和layout树并不是一一对应的，当设置了display：none节点不会出现在layout树上， 而在：：before上添加了伪类元素，content里的内容会出现layout上不会出现在DOM树里

接下来我们还需要知道已什么样的顺序来绘制这些节点， 举例来说，z-index这个属性会影响节点绘制的层级关系，如果我们按照dom的层级结构绘制页面，则会导致错误的渲染，所以为了保证屏幕上展示正确的层级，主线程遍历layout树创建一个绘制记录表，该报记录了绘制的顺序，这个阶段称为绘制

让我们来看一下主线程做了什么：

主线程：

DOM->style->layout->paint->layer

当我们改变了元素的样式大小时，就会发生重排，当我们改变元素的颜色时，页面就会发生重绘，但是，无论发生重排还是重绘，浏览器主线程都要被占用，还有一个也会在主线程执行，对，就是js，它们都在主线程执行，于是就会发生抢占时间的问题，如果你写了一个不断导致重排重绘的动画,浏览器需要在每一帧都计算布局和绘制的操作，如果在每秒60帧的频率进行展示，用户不会感觉到卡顿，但是当我们运行完一帧时，还有剩余的时间，于是将主线程给js执行，而js没有在一秒内执行完成并归还主线程，这样我们看到的动画时，就会看到明显的卡顿。

优化

1，requestAnimationFrame():

这个方法会在每一帧被调用，通过api，可以把js运行任务分成一些更小的任务块，在每一帧时间用完前暂停js执行，归还主线程，这样在下一帧开始前就可以按时执行布局和绘制

2，css的Transform

通过该属性实现动画不会进过布局和绘制，所以不会受到主线程中js执行的影响，更重要的是通过transform实现的动画不需要经过布局绘制，样式计算等操作，所以节省了很多运算时间。