摘要

文章梳理了浏览器【页面导航】 和 【页面渲染】的过程，理解该过程的实现原理，有助于性能优化和更快地定位问题。

页面导航

在地址栏输入URL后，页面导航过程如下：

判断地址栏输入

通常我们在地址栏输入的信息可以分为两种情况处理：

• 一种是一个合法的URL，浏览器就会访问该URL。
• 其它的非URL输入，会被当做关键字，交给搜索引擎处理。

开始导航

当浏览器确认地址栏输入的是一个URL时，就会开始请求数据。在发出HTTP请求数据之前，浏览器会先检查本地缓存数据。

浏览器缓存

浏览器缓存有强缓存 和协商缓存 两种方式。

强缓存

当响应报文中包含Expire报文头时，浏览器会缓存到本地。下次请求时，先检查本地缓存数据，如果Expire未失效，则返回缓存数据，不需要再请求服务器。

协商缓存

当响应报文中包含的Cache-Control报文头信息符合缓存条件时，浏览器会缓存到本地。下次请求时，浏览器会向服务器请求确认缓存数据是否更新，服务器判断资源更新时间（if-Modified-Since）或资源最新摘要信息（if-None-Match），如果资源已更新，则返回最新数据；否则返回304，浏览器可以继续使用本地缓存数据。

网络请求

如果没有命中本地缓存数据，浏览器将会发起HTTP请求数据。用户输入的URL域名需要经过DNS解析，得到IP后再向目标主机发起HTTP请求。

DNS查询

HTTP请求

一次完整的HTTP通信，涉及到TCP/IP协议的应用层、传输层、网络层 和链路层。

处理不同MIME类型数据