这两天学习了一些网页如何在浏览器中显示的知识，感觉在我向前端走的路上非常有用，所以就在这里总结一下，大家可以看看，我也算是巩固一下知识。因为自己学识太浅，内容可能有一些错误之处，希望看到的朋友可以指出来啦。
在Edge浏览器也加入Chromium的情况下，我在这里就以现代浏览器来说下浏览器渲染出网页的过程。
下面开始正文：
如果只是想看浏览器加载页面过程的朋友可以直接向下滑到”浏览器渲染页面“的位置，前两部分涉及更多的是计算机网络的知识，感兴趣的可以了解一下。
比如我们在百度或者Google的时候，会在搜索框中输入想要搜索的内容，然后点击搜索，页面就会跳转，并且列出我们可能需要的信息，我们再进行挑选查看。
首先看一下我们网络中使用的TCP/IP模型
TCP/IP模型共有4层，每层都有各自的功能，而且每层都不关心其他各个层的工作，只是做自己本职的工作，同一结点（可以理解为每一个网络站点、服务器、电脑主机等）相邻层之间通过接口通信，不同结点的的相同层之间通过协议通信（如TCP、UDP、HTTP等）。更详细的可以去看看这里，或者可以看看谢希仁的《计算机网络》，非常经典的一本书。
还有一个叫OSI模型，由于这里面不同模型之间关系不是特别适合实际应用（共有7层模型，而且有些不同层又有相同的功能），只是在进行网络设计的时候会参考一下，而且是第一个公认的网络模型。
在TCP/IP协议中，浏览器属于最上层的应用层。当我们鼠标点击搜索或者回车后，就会产生一个事件，这个事件会根据网页代码转化为一个API请求， 其实也会转化成一个文本数据，请求会传递到服务器去查找数据库，从而得到我们想要的东西，而在这其中还要经过TCP/IP的其他所有层才能通过网线传输请求到达服务器。
在应用层使用HTTP协议，HTTP协议根据规则，会打包数据，这时候也会使用HTTPS，来加密数据，防止中途有人篡改我们的数据，保证数据可以准确传输到服务器。打包数据后，应用层会将数据发送到80端口（默认是80端口，也有可能是别的端口），到达传输层。
到达传输层，这里会给数据加一个头部，其中含有源端口号和目的端口号、序号（报文段序号）、校验等等信息。在这一层用到的协议就是TCP协议。
TCP协议是面向连接的，在实际运行中类似与A与B两个人使用微信聊天，A对吧说：”在吗“，B回答说：”在“，两个人就开始聊天了。还有一种协议叫UDP，是面向无连接的，就好比A对B说：”你刚好在楼下，帮我带瓶水上来“，然后B有可能会看到消息，也可能看不到消息。也就是说A与B的通信并没有建立链接。
当传输层完成多有任务后，会将数据传送给下一层的网络层。
网络层 （也叫网际层、互联层）会有一个重要的设备，就是路由器，路由器可以对数据进行存储转发。在这里，我们使用的协议是IP协议 ，IP协议 也会给数据添加一个头部，里面含有源IP地址，和目的IP地址（如192.168.1.1），还有很多其他东西就不说了，最后再加一个尾部，用于定界和帧校验 （如CRC校验） 。这时候就可以把数据传递给最下面的链路层了。
链路层 （也叫物理层，网络层-如果上一层叫互联层的话） 是面向比特流的也就是 011001100001 这种数据，以便通过网线进行长距离传输。在这里基本都是网卡完成的，每张网卡都有一个专属的地址，叫物理地址，也就是我们常说的MAC地址，用这个便可以找到全球任何一台网络设备（嗯？MAC地址克隆，不了，好像法律不允许）。在链路层，也会添加一个头部，其中包含源MAC地址，目的MAC地址等，最后会将整个数据帧转化成二进制比特流传输出去。
经过多个路由器、交换机等，我们的数据就会千里迢迢到达远方的服务器，服务器也会有跟我们电脑类似的网络层级结构，会一层一层将头部、尾部去掉（可能像剥洋葱），得到我们的API请求。
得到请求，服务器会在数据库中检索信息，通过算法对我们的信息加以修饰（度娘的广告？），准备发送到我们的计算机。
回来的路跟我们的数据去的路是类似的，也需要经过传输层、网络层、链路层，最后通过二进制比特流将信息传递给我们的计算机。
计算机会逆序，通过链路层、网络层、传输层的顺序将数据拆开、最后得到的就是我们网页需要显示的HTML文档。
上面都是浏览器向服务器请求数据的网络部分，下面是浏览器得到数据后渲染页面的部分，作为搞前端的，几乎可以不用管上面的部分，那些都是计算机会自己进行的。
整体过程是这样的：
