H5页面加载过程，主要包括2个部分：H5页面容器加载和资源文件加载。
1、H5页面容器加载过程明细如图：
对照浏览器window下的Performance的数据指标。
H5页面容器各关键点的时耗计算方式如下：
- 准备耗时 = domainLookupStart - navigationStart;
- 重定向耗时 = redirectEnd - redirectStart;
- DNS解析耗时 = domainLookupEnd - domainLookupStart;
- IP连接耗时 = connectEnd - connectStart;
- 首包耗时 = responseStart - requestStart;
- 完整包加载耗时 = 有两种计算方式，如果从网络加载，取值:responseEnd - requestStart;如果加载缓存：responseEnd - fetchStart;（从缓存加载，performance只有responseEnd，fetchStart有值，其他参数值都为0）
- dom处理 = domComplete - domLoading;
- 页面白屏时间 = domLoading - navigationStart;
- 首屏时间 = 取值:loadEventStart- navigationStart; 前端开发也可根据业务侧理解的首屏手动打点tag,取值为：tagTime - navigationStart;
- 可交互 = domContentLoadedEventEnd - navigationStart;
- 页面完全加载耗时 = loadEventEnd - navigationStart;
First contentful paint(FCP): 页面开始加载到页面任何一部分内容渲染到屏幕上的实际 Largest contentful paint(LCP): 测量页面从开始加载到最大文本块或图像元素渲染到屏幕上的时间。
白屏 《 首屏《 可交互《 完全加载
2、UIWebView资源文件加载过程如下：
关键点的时耗计算方式如下：
- 准备耗时 = domainLookup - fetchStart ；
- DNS解析耗时 = domainLookupEnd - domainLookupStart;
- IP连接耗时 = connectEnd - connectStart;
- 首包耗时 = responseStart - requestStart;
- 完整包加载耗时 = 有两种计算方式，如果从网络加载，取值:responseEnd - requestStart;如果加载缓存：responseEnd - fetchStart;（从缓存加载，performance只有responseEnd，fetchStart有值，其他参数值都为0）。
Performance 数据指标
n["DNS解析时间"] = e.domainLookupEnd - e.domainLookupStart,
n["TCP完成握手时间"] = e.connectEnd - e.connectStart,
n["重定向时间"] = e.redirectEnd - e.redirectStart,
n["html的ttfb耗时"] = e.responseStart - e.requestStart,
n["HTTP请求响应完成时间"] = e.responseEnd - e.requestStart,
n["DOM开始加载前所花费时间"] = e.responseEnd - e.navigationStart,
n["DOM加载完成时间"] = e.domComplete - e.domLoading,
n["DOM结构解析完成时间"] = e.domInteractive - e.domLoading,
n["脚本加载时间"] = e.domContentLoadedEventEnd - e.domContentLoadedEventStart,
n["onload事件时间"] = e.loadEventEnd - e.loadEventStart,
n["页面完全加载时间"] = n["重定向时间"] + n["DNS解析时间"] + n["TCP完成握手时间"] + n["HTTP请求响应完成时间"] + n["DOM结构解析完成时间"] + n["DOM加载完成时间"]
DNS解析流程
- 0、浏览器DNS缓存，每种浏览器都有一个固定的DNS缓存时间
- 1、操作系统缓存 ①、本地hosts文件 二、DNS缓存服务
DNSClient - 3、本地DNS服务器会递归查找域名记录。如何还没，就本地DNS服务器向根域进行迭代查询
- 4、本地DNS服务器迭代查询
- 访问根域获得顶级域名.com的服务（Name server）和ip(address)
- 访问顶级域名，获取二级域名.xx.com 的Name Server 和address
- 询问二级域名，获取三级域名 .xx.xxx.com 的Name Server 和address
- 如果还有四级、五级，则继续递归查找，直到获取真正的ip地址，并且缓存
图中也可以看出递归查询阶段和迭代查询阶段。
主机和本地域名服务器之间的查询方式是递归查询 === 目标服务器要给到答案
DNS服务器之间是采用迭代查询的，避免本身服务器压力过大。 === 只会给本地域名服务器指路
递归查询
迭代查询
dns预解析优化、稳定可靠的DNS服务器
< link rel="dns-prefetch" href="//www.xxx.net">
< link rel="dns-prefetch" href="//api.xxx.xxx.net">
tcp网络链路优化，，花钱处理
