从输入URL到页面展示发生了什么

前言

刚毕业那会出去面试前端的工作，有一场面试，面试官上来就问了一个问题，浏览器地址栏中输入了URL到页面展示，中间发生了什么。当时我是一脸懵逼，因为我不是计算机专业的，一些基础知识比较欠缺，只是自己学了编程语言的语法，所以结果也可想而知😭。后来随着平时的学习，知识的累加发现这个问题确实很能考查面试者的基础知识，从网络协议到浏览器等一系列知识，不愧是面试常考题，所以今天就打算把之前学的知识整理一下，串起来。一方面是自己学习的一个记录，另一方面也希望可以帮助到阅读的人，如果有什么不对的地方，欢迎指正。

1、用户输入URL

我们常用的谷歌浏览器打开一个网页一般会启动浏览器进程，网络进程，渲染进程，GPU进程，如果用到插件的话还会用到插件进程。当用户在地址栏中输入了URL，浏览器进程会通过进程间的通信把URL请求发送给网络进程。（当在地址栏中输入了关键字后，地址栏会对你输入的关键字进行判断，如果是搜索内容地址栏会用浏览器默认的搜索引擎，合成带有搜索关键字的URL，如果输入的关键字被判断是URL则会进行接下来的请求）

2、发起请求

在网络进程拿到URL之后，发起请求之前，会在本地查找是否有缓存，缓存分为强缓存和协商缓存，如果命中缓存的话，则会直接把缓存的资源返回给浏览器进程，如果没有缓存的话就会进入网络请求环节。这边简单讲一下在本地查找缓存的过程，当浏览器第一次加载资源，服务器返回200后，浏览器会将资源文件从服务器上缓存下来，并把响应头及该请求的返回时间一并缓存。在响应头中有Cache-Control：max-age=600，这里定义了缓存的时间单位是秒，600的话就是如果你在上次请求完的10分钟内在发起请求则会命中强缓存，如果没有命中强缓存，则会发起请求判断，当浏览器第一次加载资源时，服务器返回的响应头中还会有Etag属性，当你请求的资源发生改变时Etag的值也会发生改变，在请求头中会带上Etag，如果Etag的值和服务器中请求资源的Etag值相同，则说明资源没有变化，则命中协商缓存，返回304，从缓存中拿取请求的数据。

3、请求过程

请求的资源没有命中缓存，那就开始进行网络请求，在进行网络请求前还要进行DNS域名解析，因为单靠URL，浏览器无法知道向哪个服务器发起请求，URL经过DNS域名解析会得到IP和端口，然后通过IP地址和服务器建立TCP连接，建立TCP连接需要浏览器和服务器进行三次握手。连接建立后发起http请求，服务器收到请求后处理请求，接着会返回请求的内容，最后经过四次挥手断开连接。

4、渲染过程

当网络进程接收到资源后，浏览器进程（有一个功能就是负责进程间的通信）会通知渲染进程，渲染进程接收的消息后会和网络进程建立一个传输数据的管道，将请求的资源传递给渲染进程。这个时候渲染进程就开始渲染页面，渲染流程可以分为下面几个阶段：
1、生成DOM树，因为浏览器无法直接理解和使用HTML，所以需要将HTML转换成浏览器可以理解的结构。
2、计算样式，浏览器无法理解纯文本的css样式，所以要把css转化成浏览器可以理解的styleSheets。
3、创建布局树，根据1，2步得到的DOM树和样式，生成布局树。
4、对布局树进行分层，生成分层树，有些样式，例如：opacity：0.5，
position：absoluted等等，渲染进程会给他们生成单独的图层。
5、为图层生成绘制列表，并将绘制列表提交到合成线程。
6、合成线程将图层分为图块，并在光栅化线程池中把图块转化成位图。
7、当所有的图块都被光栅化，合成线程发送绘制图块的命令给浏览器进程。
8、浏览器收到渲染进程发来的消息后生成页面显示在显示器上。

这就是从输入URL到页面展示发生了什么的一个大概流程，如果有什么不对的欢迎指正😁。