企业邮箱在哪里看,关键词排名优化技巧,网络营销推广方法,长尾关键词挖掘精灵从输入一个url到页面解析完成的流程 1. 网络进程 
1. 获取url 
浏览器首先判断输入的url是否有http缓存,如果有则直接从http缓存中读取数据并显示。如果没有,则进行下一步。进行DNS解析,获取域名对应的IP地址。 
2.下载html文件 
浏览器根据I…从输入一个url到页面解析完成的流程
 

 
1. 网络进程
 
1. 获取url
 
- 浏览器首先判断输入的url是否有http缓存,如果有则直接从http缓存中读取数据并显示。如果没有,则进行下一步。
 - 进行DNS解析,获取域名对应的IP地址。
 
 
2.下载html文件
 
- 浏览器根据IP地址和端口号与web服务器建立TCP连接,三次握手。
 - 浏览器向web服务器发送HTTP请求,请求获取html文件。服务器返回html文件。
 
 
2. 渲染进程
 
1.解析html文件 生成dom树
 
- 解鞋html文件,并构造DOM树。边解析边构造。
 - 在线解析开始时就会将link标签通过预解析线程来下载,dom解析到link标签时会将link标签的href属性值添加到预解析队列中。最终这些下载好的css会由主线程解析为cssom对象。
 - dom树解析遇到script标签时,默认会暂停一下解析,先执行js脚本。等js脚本执行完成后再继续解析。如果script标签中设置了defer或者async属性,则不会暂停解析。
 
 
2.解析css文件生成cssom树
 
- 浏览器会先下载css文件,并构造cssom对象。
 - cssom对象中包含选择器、属性、值等。
 - 注意,cssom根节点下会挂载所有的 css样式表(比如内联样式表,默认样式鼠标,外部样式表)
 
 
3.生成渲染树
 
- 遍历dom树,将所有可见的节点添加到渲染树中。
 - 遍历cssom树,找到与渲染树中的节点对应的样式规则。
 - 生成渲染树中的每个节点的视觉信息。
 
 
4. 布局(Layout)
 
- 浏览器根据渲染树和cssom树,计算出每个节点的视觉信息。
 - 根据视口的大小,计算出需要显示的节点。
 - 布局树中每一个元素都是一个C++对象,布局树中每一个节点都包含一个位置信息。
 
 
5.分层(Layer)
 
- 将渲染树中的节点分成不同的层。
 - 跟堆叠上下文有关的属性都会影响分层。比如z-index
 
 
6.绘制(Point)
 
- 遍历分层树,将每个节点绘制到屏幕上。
 - canvas本质上就是在这个环节进行绘制的。
 - 绘制的过程就是一条一条的绘制指令。
 - 渲染主线程的工作完毕
 
 
7. 分块(Tiling) - 合成线程
 
- 浏览器会将绘每一层分为很多小区域,然后分块进行绘制。
 - 启动多个线程同时完成工作
 
 
8. 光栅化(Raster) - GPU 进程运算
 
- 合成线程将分块后的图,进行光栅化操作生成位图
 - 优先处理视口内的图块
 - 生成的位图会交给合成线程
 
 
9. 合成显示
 
- 合成线程将多个位图合成为一张完整的图片信息,由合成线程交给GPU进程,再经GPU价交给显卡,最终显示在屏幕上。
 - 由于合成线程与渲染主线程一样在浏览器的渲染进程中,并且渲染进程是一个独立的沙盒状态,所以合成线程无法直接将信息传递到显卡,因此合成线程需要将位图信息传递给GPU进程,由GPU进程传递。
 - transform所有的效果均在这一步实现,由位图在GPU中进行计算变换。