浏览器请求到页面的展示过程

看了计算机网络、javascript权威指南,了解了些浏览器知识,总结一下地址的输入到页面的呈现过程。

一、DNS解析过程

1询问
2询问
3询问
找到14.215.177.38
找到14.215.177.38
1询问
找到14.215.177.38
2询问
找到14.215.177.38
3询问
转发模式
非转发模式
找到14.215.177.38
...
找到14.215.177.38
非转发模式
查询
找到14.215.177.38
查询
找到14.215.177.38
查询
找到14.215.177.38
浏览器地址http://www.baidu.com
DNS解析器
hosts文件
浏览器缓存/系统缓存/路由器缓存
本地DNS服务器
DNS资源
DNS缓存
模式
上级DNS服务器
根DNS服务器
上上级DNS服务器
.com服务器
baidu.com服务器
www.baidu.com服务器

二、tcp/ip通信

应用层封装
传输层封装
网络层封装
数据链路层封装
物理层封装
14.215.177.38请求
上层数据
TCP头+上层数据:数据段
IP头+TCP头+上层数据:数据包
MAC头+IP头+TCP头+上层数据:数据帧
0100101010010000010:Bit

14.215.177.38服务器接到请求后,照着封装解封得到上层数据。

三、服务器响应

服务器响应将html返回给请求客户端。

四、客户端解析返回html

loading
loading
非阻塞线程下载
interactive--dom树构建完成
complete
GUI解析页面
sciprt标签阻塞
async的sciprt标签阻塞
下载完立即执行,执行完解析继续
执行defer属性的sciprt标签
DOMContentLoaded
异步资源加载
window.onload

1、GUI渲染线程创建Document对象(dom树),开始解析web页面,解析html元素或文本后添加element对象或text对象节点到dom树,然后在渲染树绘制盒,这个阶段document.readystate属性值是“loading”。

2、GUI渲染线程遇到没有async和defer属性的

你可能感兴趣的:(javascript,html,网络)