超详细讲解页面加载过程

说一说从输入URL到页面呈现发生了什么？（知识点）

这个题可以说是面试最常见也是一道可以无限难的题了，一般面试官出这道题就是为了考察你的前端知识的深度与广度。

1.浏览器接受URL开启网络请求线程（涉及到：浏览器机制，线程与进程等）

2.开启网络线程到发出一个完整的http请求（涉及到：DNS解析，TCP/IP请求，5层网络协议等）

3.从服务器接收到请求到对应后台接受到请求（涉及到：负载均衡，安全拦截，后台内部处理等）

4.后台与前台的http交互（涉及到：http头，响应码，报文结构，cookie等）

5.缓存问题（涉及到：http强缓存与协商缓存等）（请看上一篇文章这些浏览器面试题，看看你能回答几个？）

6.浏览器接受到http数据包后的解析流程（涉及到html词法分析，解析成DOM树，解析CSS生成CSSOM树，合并生成render渲染树。然后layout布局，painting渲染，复合图层合成，GPU绘制，等）

在浏览器地址栏输入URL

当我们在浏览器地址栏输入URL地址后，浏览器会开一个线程来对我们输入的URL进行解析处理。

浏览器中的各个进程及作用：（多进程）

• 浏览器进程：负责管理标签页的创建销毁以及页面的显示，资源下载等。
• 第三方插件进程：负责管理第三方插件。
• GPU进程：负责3D绘制与硬件加速（最多一个）。
• 渲染进程：负责页面文档解析（HTML，CSS，JS），执行与渲染。（可以有多个）

DNS域名解析

为什么需要DNS域名解析？

因为我们在浏览器中输入的URL通常是一个域名，并不会直接去输入IP地址（纯粹因为域名比IP好记），但我们的计算机并不认识域名，它只知道IP，所以就需要这一步操作将域名解析成IP。

URL组成部分

• protocol：协议头，比如http，https，ftp等；
• host：主机域名或者IP地址；
• port：端口号；
• path：目录路径；
• query：查询的参数；
• hash：#后边的hash值，用来定位某一个位置。

解析过程

• 首先会查看浏览器DNS缓存，有的话直接使用浏览器缓存

• 没有的话就查询计算机本地DNS缓存（localhost）