写在前面：
如何使用浏览器大家都不需要教，但是问到具体到底是怎么工作的呢？那就很懵了。
如果要完整地讲，这还得从最开始我们输入URL开始讲，这里涉及到电容、电路、CPU内部处理等等等，头秃。所以本文就简单理一下浏览器是怎么工作的，本胖也是一知半解，全当做个了解，后面学习过程中慢慢完善就好。
使用浏览器上网，通常有以下几个步骤：
一、输入URL
- 使用键盘、触屏等方式输入URL，这里就需要硬件与CPU的连接；
- 既然与CPU连接了，第二步就是CPU内部处理信号；
- CPU处理完，将信号传送到操作系统；
- 操作系统GUI将输入事件传递到浏览器。
这一步输入URL涉及到了计算机体系结构、计算机组成等专业知识，本胖已经没几根头发了就不在这里秃头了。
二、浏览器发送数据到网卡
这里需要注意，
浏览器和浏览器内核是不一样的。
浏览器指Firefox、Chrome等，浏览器内核指的是Trident、Gecko、Presto等。
浏览器负责GUI以及跨平台工作（例如网络连接等），而浏览器内核负责解释网页语法并渲染/显示网页。
- 输入URL并按下回车键并且浏览器检查URL完成后，调用浏览器内核中相应方法；
- 浏览器内核首先擦看缓存，然后设置HTTP信息，再调用不同平台下网络请求的方法；
- 发送HTTP请求。首先DNS查询IP，得到IP地址之后，通过Socket发送数据。
这里涉及到计算机网络的知识，具体底层网络协议的例子，等之后写到流量分析题的时候再提一下吧。
三、本机网卡发送数据到服务器
- 浏览器内核现在是完事儿了，这请求得出去才行吧，那就轮到了网络适配器工作了呗；
- 通俗点，网络适配器就是网卡。你有了网卡没网咋行，那是不是还得有路由的活儿，那就给安排上；
- 家里路由工作完了，数据这就到了运营商网络里去了，传啊传就传到了服务器所在的IDC机房，进入IDC内网，反正得进到服务器网卡里面，具体咋整我也不清楚。
网络工程真的不学拉网线啊QAQ - 到了网卡里，那就得去服务器端的CPU转转才行吖，这样这一段也差不多完成了。
神奇的数据旅程，涉及到计算机网络、无线通信等内容，我也搞不太清，先大概知道个过程吧。
四、服务器处理接收到的数据
- 负载均衡。将请求分配到多个应用服务器中，可以防攻击；
- 反向代理。这货能理解HTTP协议，能做应用层的分流策略，能监控后端服务是否异常等等，就差能上天了hhh；
- 进入服务器中的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线程询问地址栏部分输入的是URL还是搜索查询。（这个操作看不明白，可以自己打开Chrome试一下，在地址栏输入URL和直接搜索是不一样的）
- 按下回车之后，UI线程启动网络调用获取相应站点内容，网络线程使用相应协议干自己该干的事儿；
- 网络线程查看数据类型，将数据传递给相应进程；
- 返回数据就绪后，UI线程查找渲染器进程渲染网页；
- 浏览器发现渲染器进程已开始，导航就完成，接下来就开始文档加载。
浏览器渲染页面
Chrome的渲染引擎使用的是Blink，是WebKit的一个分支。
渲染器进程主要是讲HTML、CSS、和JavaScript转换为用户可以与之交互的网页。
渲染和解析
先来认识一下单词：
Parser：解析器
Attachment：附件
Layout：布局
- HTML文件加载后，经HTML解析器解析之后，开始构建DOM Tree；
- 样式表文档被加载后，经CSS解析器解析后，开始构建样式规则，也是CSS Rule Tree；
- JS脚本文件加载之后，再一起构建Render Tree；
- 最后绘制网页画面，显示网页。
后面还没写完，今天有点开心激动过头了，明天继续补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
