从输入URL到页面加载的全过程
- 输入URL,并按下回车
- 浏览器检查浏览器缓存、系统缓存、路由器缓存,如果缓存中有,则直接显示页面,如果没有进行下一步
- 根据URL通过DNS进行域名解析,获取IP地址
- DNS解析过程:是一个迭代查询和递归查询的过程
- 首先会在浏览器的缓存中查找对应的IP地址,如果查找到直接返回,若找不到继续下一步
- 将请求发送给本地DNS服务器,在本地域名服务器缓存中查询,如果查找到,就直接将查找结果返回,若找不到继续下一步
- 本地DNS服务器向根域名服务器发送请求,根域名服务器会返回一个所查询域的顶级域名服务器地址
- 本地DNS服务器向顶级域名服务器发送请求,接受请求的服务器查询自己的缓存,如果有记录,就返回查询结果,如果没有就返回相关的下一级的权威域名服务器的地址
- 本地DNS服务器向权威域名服务器发送请求,域名服务器返回对应的结果
- 本地DNS服务器将返回结果保存在缓存中,便于下次使用
- 本地DNS服务器将返回结果返回给浏览器
- DNS解析过程:是一个迭代查询和递归查询的过程
- 浏览器向服务器发送TCP连接请求,进行三次握手
- 三次握手成功,浏览器向服务器发送http请求
- 服务器接收到请求,返回请求数据
- 浏览器接收数据并进行页面渲染(读取页面内容,浏览器进行渲染)
- 首先解析
HTML
文档,形成 DOM 树 - 接着解析
CSS
,产生 CSSOM树 - 在DOM和CSSOM树解析过程中,遇到 JS,会立即阻塞DOM树的构建,JS解析完成,接着解析HTML、CSS
- 再接着,浏览器通过DOM和CSSOM树构建渲染树 ( Render树 )
- 这个过程中,DOM中不可见标签元素不会放到渲染树中,就像
<head></head> 或 display:none
- CSSOM树规则会附加给渲染树的每个元素上
- 这个过程中,DOM中不可见标签元素不会放到渲染树中,就像
- 渲染树构建完成,浏览器会对这些元素进行定位和布局,这一步也叫 重排/回流 (
Reflow
) 或 布局(Layout
) - 接下来绘制这些元素的样式,颜色,背景,大小及边框等,这一步也叫做 重绘 (
Repaint
) - 再接下来是我们这最后一步合成(
composite
),浏览器会将各层信息发送给GPU,GPU将各层合成,显示在屏幕上
- 首先解析
- 断开TCP连接(四次握手)