福州 网站建设,无印良品vi设计手册,北京网站建设技术托管,网页设计实训报告实训内容从输入一个url到页面解析完成的流程 1. 网络进程
1. 获取url
浏览器首先判断输入的url是否有http缓存#xff0c;如果有则直接从http缓存中读取数据并显示。如果没有#xff0c;则进行下一步。进行DNS解析#xff0c;获取域名对应的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中进行计算变换。
