在浏览器地址栏输入URL到显示页面,中间经历了什么?
分类:javascript
-
打开浏览器
-
在浏览器的地址栏输入
URL
-
浏览器查看
缓存
- 资源没有缓存 -> 向服务器发起资源请求
- 资源有缓存
- 资源足够新鲜 -> 提供给客户端,渲染资源 ----
- 资源新鲜度待定 -> 与服务器验证缓存资源的新鲜度
- 如何检查资源是否新鲜
- 判断条件 -> http 头的
Expires
和Cache-Control
- HTTP1.0提供
Expires
,值为一个绝对时间
, 表示缓存新鲜日期 - HTTP1.1增加了
Cache-Control: max-age=
, 值为以秒
为单位的最大新鲜时间
- 判断条件 -> http 头的
-
浏览器解析
URL
,获取协议
,主机
,端口
,path
-
浏览器内部组装一个HTTP(GET)请求报文
- 此处省略 -> 开启网络请求线程、dns查询、TCP/IP请求、五层因特网协议栈等
-
服务器收到请求,并且在后台接收请求,解析浏览器发送的数据,将响应给浏览器的数据返回
- 此处省略 -> 前后端
HTTP
交互(HTTP头部
,响应码
,报文结构
,cookie
,编码解码
,gzip压缩
等)
- 此处省略 -> 前后端
-
浏览器收到数据包,开始解析流程,各自的引擎开始工作
- 解析流程
- 解析 html -> 生成
dom
树 - 解析 css -> 生成
css
规则树 - 将以上两个合并成
render
树 - 渲染
- 处理外链资源
- ...
- 解析 html -> 生成
- 浏览器引擎
- 渲染引擎
layout engineer
||Rendering Engine
(又称为排版引擎
)- 负责取得网页的内容,以及计算网页的显示方式,然后输出至输出设备(显示器或打印机)。
- 浏览器的内核不同,对于语法解析会有所不同,渲染的效果也不相同。
- 所有需要编辑,显示网络内容的应用程序,都需要内核
- JS引擎
- 解析和执行
javascript
来实现网页的动态效果
- 解析和执行
- 渲染引擎
- 常见的浏览器内核
-
Trident
内核 (又称MSHTML):IE, MaxThon, TT, The World, 360, 搜狗浏览器等。 -
Gecko
内核: Netscape6及以上版本,FF, MozillaSuite/SeaMonkey等。 -
Blink
内核(原来为 Presto): Opera7及以上。 -
Webkit
内核: Safari,Chrome等。
-
- 解析流程