我们上个网，浏览器到底干了啥？

写在前面：
如何使用浏览器大家都不需要教，但是问到具体到底是怎么工作的呢？那就很懵了。
如果要完整地讲，这还得从最开始我们输入URL开始讲，这里涉及到电容、电路、CPU内部处理等等等，头秃。所以本文就简单理一下浏览器是怎么工作的，本胖也是一知半解，全当做个了解，后面学习过程中慢慢完善就好。

---

使用浏览器上网，通常有以下几个步骤：

一、输入URL

1. 使用键盘、触屏等方式输入URL，这里就需要硬件与CPU的连接；
2. 既然与CPU连接了，第二步就是CPU内部处理信号；
3. CPU处理完，将信号传送到操作系统；
4. 操作系统GUI将输入事件传递到浏览器。

这一步输入URL涉及到了计算机体系结构、计算机组成等专业知识，本胖已经没几根头发了就不在这里秃头了。

二、浏览器发送数据到网卡

这里需要注意，浏览器和浏览器内核是不一样的。
浏览器指Firefox、Chrome等，浏览器内核指的是Trident、Gecko、Presto等。
浏览器负责GUI以及跨平台工作（例如网络连接等），而浏览器内核负责解释网页语法并渲染/显示网页。

1. 输入URL并按下回车键并且浏览器检查URL完成后，调用浏览器内核中相应方法；
2. 浏览器内核首先擦看缓存，然后设置HTTP信息，再调用不同平台下网络请求的方法；
3. 发送HTTP请求。首先DNS查询IP，得到IP地址之后，通过Socket发送数据。

这里涉及到计算机网络的知识，具体底层网络协议的例子，等之后写到流量分析题的时候再提一下吧。

三、本机网卡发送数据到服务器

1. 浏览器内核现在是完事儿了，这请求得出去才行吧，那就轮到了网络适配器工作了呗；
2. 通俗点，网络适配器就是网卡。你有了网卡没网咋行，那是不是还得有路由的活儿，那就给安排上；
3. 家里路由工作完了，数据这就到了运营商网络里去了，传啊传就传到了服务器所在的IDC机房，进入IDC内网，反正得进到服务器网卡里面，具体咋整我也不清楚。网络工程真的不学拉网线啊QAQ
4. 到了网卡里，那就得去服务器端的CPU转转才行吖，这样这一段也差不多完成了。

神奇的数据旅程，涉及到计算机网络、无线通信等内容，我也搞不太清，先大概知道个过程吧。

四、服务器处理接收到的数据

1. 负载均衡。将请求分配到多个应用服务器中，可以防攻击；
2. 反向代理。这货能理解HTTP协议，能做应用层的分流策略，能监控后端服务是否异常等等，就差能上天了hhh；
3. 进入服务器中的Web Server，处理HTTP请求。常见的Web Server有Apache、Tomcat等。

还有一些步骤，写不动了...【真的很头秃啊，摔】

五、浏览器渲染页面
这个是本文重点要讲的内容，在后面详细写。

六、浏览器展现页面
浏览器把页面渲染完之后，就要通过硬件把它展现在屏幕上，这里我是真的一点都搞不拎清了，就不写了。

前面就是一个大概的从我们输入URL到得到想要的信息的过程，下面我们从浏览器内部来看看，到底它干了啥。

先导

CPU，中央处理器。解释计算机指令及处理计算机软件中的数据；
GPU，图形处理器。可同时跨多个核心，处理简单任务；
线程，操作系统能够运算调度的最小单位；
进程，程序的基本执行实体，是系统进行资源分配和调度的基本单位。

进程和线程的包含关系

浏览器结构

浏览器基本架构如下

不同的架构是实现细节上的不同，如何构建Web浏览器并没有标准的规范。
本文以Chrome为例，展开介绍。

Chrome多进程架构

架构图

浏览器进程（Browser Process）：包括用户界面，并且处理用户不可见的操作，例如网络请求、文件访问等；
渲染进程（Renderer Process）：显示渲染引擎解析出来的请求内容；
插件进程（Plugin Process）：控制显示网站所使用的所有插件，例如Flash等；
GPU进程：独立于其他进程处理GPU任务，处理来自多个应用程序的请求，并绘制在同一页面中；
其他进程（Utility Process）：各司其职吧。

指向浏览器UI不同部分的不同进程

导航

这一部分指的是用户请求网站以及浏览器准备呈现页面的部分，在参考文章里面，作者称之为导航，我们也可以理解为进行一次网页访问的过程。
看完参考文章，我觉得写得非常的通俗易懂，我再转述过来差不多就是翻译一下了，看官们可以自行戳文末参考的第二个链接去看哦~
这里列一个大致流程：

1. UI线程询问地址栏部分输入的是URL还是搜索查询。（这个操作看不明白，可以自己打开Chrome试一下，在地址栏输入URL和直接搜索是不一样的）
2. 按下回车之后，UI线程启动网络调用获取相应站点内容，网络线程使用相应协议干自己该干的事儿；
3. 网络线程查看数据类型，将数据传递给相应进程；
4. 返回数据就绪后，UI线程查找渲染器进程渲染网页；
5. 浏览器发现渲染器进程已开始，导航就完成，接下来就开始文档加载。

浏览器渲染页面

Chrome的渲染引擎使用的是Blink，是WebKit的一个分支。
渲染器进程主要是讲HTML、CSS、和JavaScript转换为用户可以与之交互的网页。

渲染和解析

WebKit渲染主流程

先来认识一下单词：
Parser：解析器
Attachment：附件
Layout：布局

1. HTML文件加载后，经HTML解析器解析之后，开始构建DOM Tree；
2. 样式表文档被加载后，经CSS解析器解析后，开始构建样式规则，也是CSS Rule Tree；
3. JS脚本文件加载之后，再一起构建Render Tree；
4. 最后绘制网页画面，显示网页。

后面还没写完，今天有点开心激动过头了，明天继续补hhh

参考：
https://developers.google.com/web/updates/2018/09/inside-browser-part1
https://developers.google.com/web/updates/2018/09/inside-browser-part2
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure