DNS与获取页面白屏时间

谈DNS域名解析前我们要知道我们输入 url 到页面展示的过程为浏览器获取资源和浏览器解析资源渲染页面（回流重绘），比如当你输入 www.baidu.com 到显示百度首页过程中浏览器所做的事情。

DNS

DNS（Domain Name System，域名系统），为了请求网络资源，计算机会依赖于一种定长且具有层次结构的标识符------ip地址。例如，192.168.1.1 。我们通常输入的是网址（如www.baidu.com），然后通过DNS将其转换成对应的IP地址（因为计算器只能通过ip做请求），浏览器才能根据这个 ip 地址去请求相应的网络资源。所以DNS就是http://www.baidu.com ==> 202.xx.xx.，查询该域名对应的ip地址的过程。

DNS解析过程如下图；

当在浏览器中输入www.baidu.com 进行首次请求时，也就是该域名对应的IP地址尚未被缓存，查询该域名对应的ip地址过程如下

客户端向本地域名服务器做递归查询。
本地域名服务器向根域名服务器（根 DNS 服务器）做迭代查询
本地域名服务器向顶级域名服务器（.com，.cn，.org...）做迭代查询:顶级域名服务器管理在该顶服务器域名下的二级域名（www.baidu.com，一级：.com;二级：baidu）记录了该域名的ip地址在哪里。
本地域名服务器向权限域名服务器（baidu.com，拥有确切ip地址）做迭代查询
本地域名服务器将 ip 地址缓存起来（DNS 缓存）
本地域名服务器将 ip 地址返回给客户端

最开始用的都是递归查询，太开销性能，后面除了客户端向本地域名服务器做递归查询，其它用的都是迭代查询。

然后浏览器就知道了要访问的服务器的 ip 地址了。接着依次通过 TCP 三次握手（建立连接），HTTP请求，HTTP响应，TCP 四次握手（关闭连接）。然后才获取到了资源进行回流重绘。

白屏时间的获取

白屏时间：输入 url 到页面有内容的时间。

影响白屏时间：

dns 解析耗时
TCP 建立连接耗时
请求耗时（CDN 网络分发，提升服务器质量，提升数据库查找效率）
TCP 断开连接耗时
html 结构解析耗时（减少嵌套，语义化标签的使用（ header标签）等）
js 执行耗时（代码顺序，script标签放后面）
css 加载耗时（CSS选择器）
图片加载耗时（懒加载）

获取白屏方法：PerformanceObserver方法

js 复制代码

// 监听首次重绘事件
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();   // 获取浏览器执行的所有的事件
  for (let entry of entries) {
    if (entry.name === 'first-contentful-paint') {    // 首次重绘
      console.log('白屏时间: ', entry.startTime, 'ms');  // 输出白屏时间
    }
  }
})

// 监听首次重绘事件
observer.observe({ type: 'paint', buffered: true });