品牌网站设计建设,东莞网站建设-南城石佳,墙绘网站建设推广,南京网站建设 奥美通全网营销URL 输入到渲染的过程 域名解析#xff0c;找到服务地址 构建 TCP 连接#xff0c;若有 https#xff0c;则多一层 TLS 握手#xff0c; 特殊响应码处理 301 302 解析文档 构建 dom 树和 csscom 生成渲染树#xff1a;从DOM树的根节点开始遍历每个可见节点#xff0c;对于…URL 输入到渲染的过程 域名解析找到服务地址 构建 TCP 连接若有 https则多一层 TLS 握手 特殊响应码处理 301 302 解析文档 构建 dom 树和 csscom 生成渲染树从DOM树的根节点开始遍历每个可见节点对于每个可见的节点找到CSSOM树中对应的规则并应用它们根据每个可见节点以及其对应的样式组合生成渲染树 Layout回流根据生成的渲染树进行回流Layout得到节点的集合信息 Painting重绘根据渲染树及其回流得到的集合信息得到节点的绝对像素。 绘制在页面上展示这一步还涉及到绘制层级、GPU相关的知识点 加载js脚本加载完成解析js脚本 回流(重排)与重绘 回流浏览器中的页面是采用流式布局来绘制的从左到右从上到下当其中一个节点的空间属性发生了变化那么就会影响到其他节点的空间布局需要重新收集节点信息再进行绘制而这个过程及回流的过程页面节点重新调整排列因此也叫重排。 重绘我们对页面节点元素的外观做处理的过程例如修改颜色背景阴影等。 回流一定重绘但重绘不一定回流 触发回流的场景 1.添加或删除可见的DOM元素 2.元素的位置发生变化 3.元素的尺寸发生变化包括外边距、内边框、边框大小、高度和宽度等 4.内容发生变化比如文本变化或图片被另一个不同尺寸的图片所替代。 5.页面一开始渲染的时候这肯定避免不了 6.浏览器的窗口尺寸变化因为回流是根据视口的大小来计算元素的位置和大小的 获取位置信息因为需要回流计算最新的值 回流的优化 对树的局部甚至全局重新生成是非常耗性能的所以要避免频繁触发回流 现代浏览器已经帮我们做了优化采用队列存储多次的回流操作然后批量执行但获取布局信息例外因为要获取到实时的数值浏览器就必须要清空队列立即执行回流。 编码上避免连续多次修改可通过合并修改一次触发 对于大量不同的 dom 修改可以先将其脱离文档流比如使用绝对定位或者 display:none 在文档流外修改完成后再放回文档里中 通过节流和防抖控制触发频率 css3 硬件加速transform、opacity、filters开启后会新建渲染层 https://segmentfault.com/a/1190000021966814 https://juejin.cn/post/6844904073737535496
