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

检测url text 网址

redirectStart unloadEventStart  unloadEventEnd redirectEnd  fetchStart

Dns 解析步骤

?

1 2 3 4 5 6 7 8

查看浏览器缓存 本地dns解析器 查询本地 host文件 （dns缓存） 本地dns解析器会查询本地dns服务器 本地dns服务器会查询根域名服务器 本地服务器会查顶级域名服务器（根域名服务器返回顶级域名服务器） 顶级域名服务器查询权威域名服务器（特殊的顶级域名服务器）得到ip地址<br>（拿到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解释器包含 dom构建器和token 解释器，token解释器词法分析语法分析token 构建dom树 进行样式计算dom树上每一个节点都有样式了，进行布局生成每个节点的集合几何信息，形成布局树 css  js 并行加载的 但是js  会阻塞dom 的解析  js有三种解析方式 传统默认同步 异步:async defer  async加载边解析，defer加载完之后，等dom加载完了才进行解析，css会阻塞js的加载，js引擎和gui渲染引擎是互斥的，所以css也能阻塞dom的渲染

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

重排：会影响布局树的计算，引发layout计算 分层  引发浏览器主线程的后续一系列操作

transform效率高的原因在于她只影响绘制 与之前（光栅化）无关  一直在合成线程中

单独成层：

根元素 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滤镜