DNS(域名系统)是互联网的一项核心服务。它主要负责将人类易于记忆的域名(如www.example.com)转换成计算机能够理解的IP地址(如192.0.2.1),而页面白屏时间就是DNS开始查询到第一次开始重绘所需要的时间。
DNS
我们要把我们的计算机域名看作一段我们的正常语言,但是计算机读不懂我们的语言,它只能读懂它们的语言,所以我们要找到能够将我们正常语言转化为计算机语言的域名服务器,然后进行解析,接着返回计算机能读懂的ip地址,最后使计算机与网站服务器进行连接
查询
- 客户端向本地域名服务器做递归查询
- 本地域名服务器向 根域名服务器做迭代查询
- 本地域名服务器向顶级域名服务器做迭代查询
- 本地域名服务器向 权限域名服务器 做迭代查询
那为什么只有客户端向本地域名服务器是做递归查询,而其它都是迭代查询呢?
因为客户端能力有限:客户端(如浏览器、操作系统)通常不具备复杂的DNS解析能力,且数量庞大。递归查询允许客户端仅发送一次请求,由本地DNS负责后续所有查询步骤,简化了客户端的逻辑。
而其它向高层是进行迭代查询的原因是避免高层服务器过载:根、顶级和权威服务器的数量有限且全局共享。若它们接受递归查询,需代理用户完成后续查询,将导致巨大的负载压力。迭代查询仅要求它们返回下一级服务器的地址(如根返回顶级,顶级返回权威),无需代理查询,极大减轻负担。
缓存并返回给客户端
- 缓存记录:本地DNS服务器将查询结果缓存一段时间(由记录的TTL值决定)。
- 返回结果给客户端:本地DNS服务器将IP地址返回给客户端。
客户端完成访问
- 客户端缓存:客户端将IP地址缓存到本地,后续相同请求可直接使用。
- 建立连接:客户端通过IP地址与目标服务器建立TCP连接,访问网站或服务。
示例
- 客户端向本地DNS请求
www.example.com。 - 本地DNS查询根服务器,得知
.com的TLD服务器地址。 - 本地DNS查询
.com的TLD服务器,得知example.com的权威服务器地址。 - 本地DNS查询
example.com的权威服务器,获取www的IP地址。 - 本地DNS缓存结果并返回IP给客户端。
- 客户端通过IP访问网站。
小结
通过分层查询和缓存机制,DNS系统高效地将域名解析为IP地址,支撑全球互联网的稳定运行。
白屏时间的获取
白屏时间是我们开发者需要好好考虑的问题,这个会直接影响用户的体验,我们能计算测出每次修改代码后的白屏时间就可以对其进行不断的优化,使用户体验变好,我们在开头说过,白屏时间就是DNS开始查询到第一次重绘时间开始所需要的时间
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries(); //所有的事件开始执行
for(let entry of entries){
if(entru.name === 'first-contentful-paint'){ //首次重绘事件
console.log('白屏时间',entru.startTime,'ms');
}
}
});
我们可以使用PerformanceObserver(),去监听浏览器性能指标,list是PerformanceObserverEntryList对象。这个对象是一个特殊的列表,用于包含所有被性能观察者(PerformanceObserve实例)捕获到的性能条目(PerformanceEntry对象),然后我们使用list.getEntries()方法将这些性能条目放入一个数组中去,然后对这个数组进行迭代,如果查到这些性能条目中有首次重绘事件'first-contentful-paint',那么我们将进行到第一次重绘的事件记录时间记录下来,这就是浏览器的白屏时间
小结
计算白屏时间就是利用performanceObserver()可以监听到浏览器性能指标,看看每一个事件发生是不是首次重绘事件,是返回时间就可以得到白屏时间了