浏览器输入一个url-> dns解析完整过程 ->浏览器渲染原理->css属性单独成层->gpu参与 dns cdn

检测url text 网址

redirectStart unloadEventStart  unloadEventEnd redirectEnd  fetchStart

Dns 解析步骤

查看浏览器缓存
本地dns解析器 查询本地 host文件 （dns缓存）
本地dns解析器会查询本地dns服务器
本地dns服务器会查询根域名服务器
本地服务器会查顶级域名服务器（根域名服务器返回顶级域名服务器）
顶级域名服务器查询权威域名服务器（特殊的顶级域名服务器）得到ip地址
（拿到cname距离用户最近ip地址）如果回源的话就慢了 所以一般cdn有预热刷新功能  reponse-header:x-cache （tcp miss）未命中  （memory hit）cdn缓存
本地dns服务器把解析结果存储到本地缓存
本地dns解析器把本地dns服务器的解析结果返回本地

domainLookupStart  domainLookupEnd

tcp连接 本次 ack = seq + length 本次seq = 上次ack

connectStart  https  connectEnd https 对称 非对称 非对称传输对称加密的密匙  ca证书 参与对称加密  ca机构有digicert  geotrust

requestStart正式开始responsStart  responseEnd

html解释器 token 解释器根据token 构建dom树 css  js 并行解析的 但是js  会阻塞dom 的解析  js有三种解析方式 传统默认同步 异步:async defer  async加载边解析，defer加载完之后，等dom加载完了才进行解析，css会阻塞js的加载，js引擎和gui渲染引擎是互斥的，所以css也能阻塞dom的渲染

构建dom树 ，css挂载到dom 形成renderObject树，webkit根据网页层次形成renderLayer树 ，这个时候浏览器的合成线程参与进来，浏览器的合成线程将每个图层切成一个个块tiles，并发送给栅格化线程，栅格化线程用来生成位图，并保存在gpu内存中，等到所有的图块都被栅格化后，合成线程会生成一个drawquad指令，合成线程通过图块信息生成合成器帧，通过ipc交给浏览器进程的viz组件，接着浏览器进程把合成器帧发送给gpu, 最后形成绘制渲染树，最后由浏览器的显示后端配合gpu 内存数据进行渲染

单独成层：

根元素 position canvas video opacity(半透明) filter(css滤镜) overflow 

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

gpu参与进来

css3d( transform translate3d()  rotate3d() scale3d() 不会单独成层)  动画@keyframes animation css过渡transition  video webgl css滤镜