本文共 2588 字,大约阅读时间需要 8 分钟。
http/https
请求,从服务器
上拿过来对于一个请求来说
,无论是地址栏输入的 url
,还是代码中加载的 url
,都要对 url 进行解析
,提取信息
解析的域名
,去 DNS 服务器上查找该域名对应的 IP
带着所有的请求信息去这个 IP 地址上请求资源
,然后在服务器上把返回的资源下载下来
根据不同的资源类型做不同方式的解析
请求协议
域名+端口
查找服务器位置
IP 地址
端口
就是这个房子的门默认的端口号
如果访问的是默认端口的话,这个端口号是可以省略的
路径
服务器接到请求以后,拿着这个路径在服务器上定位资源位置的
参数
用来传递请求资源的特点
哈希
前端页面的锚点
标记页面位置
DNS 域名系统(Domain Name System)
DNS 服务器
DNS 缓存
当一个 URL 地址被解析以后,拿到一个域名,但是在互联网上,资源都是用 IP 地址来访问的,没域名什么事
需要把域名转化成 IP 地址
浏览器(发起请求)
DNS 服务器(处理查询请求)
DNS 缓存
,用来减少 DNS 服务器上的查询量
在做 DNS 查询时,浏览器会传递一个要解析的域名
传给 DNS 系统
经过 DNS 查询,这个域名会对应一个 IP 地址
服务器地址
场景
相当于 DNS 查询
)直接
告诉小红地址(相当于 DNS 缓存
)这一个月相当于 DNS 缓存时间,过期就忘了
)浏览器
上有服务器
上有DNS 缓存
上有根据不同的网络层级,DNS 缓存时间也不一样
越靠近用户的节点,缓存时间越短
浏览器
,一般缓存时间是1分钟或者30秒
DNS 根服务器上的缓存时间一般能达到10分钟
dns-prefetch 原理
在页面一开始加载时,就会立即把这几个 href 里指定的域名做 DNS 查询并缓存起来
等到真正请求这些域名并下载资源的时候,就可以省去 DNS 查询时间
可以提高页面的加载速度
HTML、CSS、JS、或者接口等资源文件
可以通过 http 请求得来的任何内容
浏览器
后端服务器
在发起请求时,浏览器会带着一堆信息,去后端服务器上寻找资源
Request-header 请求头
请求带的参数
当这些信息到达服务器后,服务器会根据这些到达的信息,找到匹配的资源,返回给浏览器
状态码
,表示请求结果是否成功Response-header 响应头
,包含响应信息(文本长度、缓存时间、压缩方式等)响应内容
浏览器拿到这些响应信息后,就拿到了自己想要的东西
在加载 HTML 文件时,就已经开始构建 DOM 树
加入在加载一个 HTML 文件的时候遇到了一个 JS 文件
先让 JS 文件加载和执行
JS 文件有这么高的优先级,是因为 JS 文件能操作 DOM 树,可能造成之前的 DOM 树白干,所以在遇到 JS 文件的时候,先让 JS 文件执行,等 JS 文件执行完,在接着走
构建 DOM 树的过程中,如果遇到的是 style 标签,不会造成阻塞
DOM 树的构建和样式的加载会并行执行
渲染树,是 DOM 树和样式表结合的产物
这个渲染树在各个浏览器里构造的机制也不一样
根据每个元素的大小和布局方式计算出每个元素的实际位置,这就是布局的过程
绘制过程就是调用浏览器负责显示的部分,将元素和样式绘制在对应的屏幕上
这样整个浏览器的解析过程就完成了转载地址:http://pcqwi.baihongyu.com/