页面加载过程
- URL解析
- DNS查询
- 资源请求
- 浏览器解析
URL结构
1 | http://www.baidu.com:80/getdata.do?userId=1#title |
DNS查询
- DNS全称:Domain Name System
- 浏览器 -> DNS缓存 -> DNS服务器
- dns-prefetch
资源请求流程
- 浏览器 -> 后端服务器
- Request-header + 参数(url body)
- status + Response-header + body
浏览器解析(理想环境)
- DOM + JS执行(如出现JS,暂停DOM构建,先执行JS)
- 构建渲染树
- 布局(确定元素大小和位置)
- 绘制