做外贸推广的平台湖南seo网站多少钱

做外贸推广的平台,湖南seo网站多少钱,企业建网站的步骤,河南做网站公司排名浏览器帧渲染流程是指浏览器将网页内容显示到屏幕上的完整过程#xff0c;原本是想对 requestAnimiationFrame#xff08;RAF#xff09;的执行机制做了解#xff0c;后面就拓展成了帧渲染流程的理解 概念理解 VSync#xff08;垂直同步信号#xff09; VSync #x…浏览器帧渲染流程是指浏览器将网页内容显示到屏幕上的完整过程原本是想对 requestAnimiationFrameRAF的执行机制做了解后面就拓展成了帧渲染流程的理解概念理解VSync垂直同步信号VSync Vertical Synchronization垂直同步是显示器硬件发出的周期性同步信号协调 GPU 渲染和显示器刷新的时序。浏览器会主动捕获 Vsync信号执行渲染流程我们常说的 60hz 屏幕刷新率RAF 执行周期为 16.6ms 其实就是指 Vsync 的周期时间。画面撕裂问题Vsync 保证 GPU 在显示器完成当前帧刷新显示后才开始计算渲染下一帧。浏览器的渲染流程是通过帧计算然后将数据存入缓冲器然后浏览器从缓冲区中取出帧数据把画面渲染到界面上由于 GPU 的帧计算速度过快而屏幕刷新率过低如果没有 VSync 存在浏览器可能在取上一帧的缓冲区时下一帧的数据就会进到缓冲区内导致一个画面出现两帧的内容就会出现画面撕裂的问题所以 VSync 采用了双缓冲机制和同步信号机制来避免画面撕裂问题。同步信号浏览器会捕获 Vsync信号只有在 VSync 信号到达时才会去刷新画面然后再开始计算下一帧的画面如果 GPU 渲染速度过快会被强制等待直到下一个 VSync 信号同时利用双缓冲机制来避免画面撕裂现象双缓冲机制使用前缓冲区Front Buffer和后缓冲区Back Buffer显示器从前缓冲区读取数据并显示GPU 在后缓冲区渲染新帧VSync 1 → GPU 渲染帧1到后缓冲区 → VSync 2 → 交换缓冲区 → 显示器显示帧1 → GPU 渲染帧2到后缓冲区 → VSync 3 → 交换缓冲区 → 显示器显示帧2合成器线程Compositor Thread浏览器中独立于主线程的专用线程主要负责图层的合成和渲染优化工作可以并行处理多个图层的合成。主要完成以下工作接收主线程提交的 DisplayList 绘图指令构建和管理图层树Layer Tree将图层分配给光栅线程或 GPU 线程进行光栅化执行图层的合成操作生成最终的合成帧合成帧是合成器线程生成的最终渲染结果包含了所有图层的绘制信息合成帧会被提交给浏览器进程或 GPU 进程最终写入帧缓冲区等待显示。处理合成器滚动Compositor Scroll避免主线程阻塞的问题。对于只涉及transform和opacity的动画可以在合成器线程中直接处理无需参与布局和重绘阶段。合成帧是合成器线程生成的最终渲染结果包含了所有图层的绘制信息合成帧会被提交合成器滚动Compositor Scroll通常滚动事件是在主线程中处理如果是合成器滚动且滚动内容不会引起 回流/重绘的话就会在合成器线程Compositor Thread中处理滚动事件提高滚动性能。图层树Layer Tree即由页面图层构成的一棵树形结构在 Chrome DevTool 中可以通过 3D 动画看到对应的图层结构通常使用 transform 3D、绝对定位、will-change、特殊元素video、canvas等就会生成一个图层由此构成的图层结构即为图层树显示列表DisplayList浏览器渲染引擎中的数据结构用于存储如何绘制页面元素的绘图指令序列可以理解成 canvas 中的绘图指令类似drawText()、drawImage()光栅化Raster在浏览器渲染流程光栅化是将 DisplayList 中的绘图指令转换为 GPU TextureGPU 纹理 - 可以理解为像素数据的关键步骤。GPU Raster一种光栅化模式绘制指令在 GPU 执行将图层内容直接光栅化为 GPU 纹理。帧渲染流程理解输入事件阶段Input Events处理阻塞输入事件Blocking input events例如 touch、wheel 事件这些会影响滚动阻塞后续任务执行优先处理处理非阻塞输入事件Non-blocking events例如 click、keypress不会阻塞滚动和合成器线程Compositor Thread调度宏任务队列阶段Macrotask 例如 setTimeout、setInterval 执行。微任务队列阶段MicrotasksPromise.then / await、MutationObserver、queueMicrotask() 微任务队列会被清空。– 渲染管线阶段/渲染阶段Render Pipeline –→等待 VSync信号用于垂直同步的 屏幕刷新信号通常时间为60HZ 16.6ms到来判断是否有内容更新DOM/CSS变化/存在 RAF 未执行然后进行下一帧的计算操作从帧缓冲区中取出计算好的完整帧进行展示。每帧事件阶段per frame event)内部执行顺序取决于浏览器引擎本身的状态检测策略。scroll 滚动事件如果不是 合成器滚动Compositor Scroll 的话就会在主线程中处理滚动事件。resize 事件resize 通常会导致窗口变化引起重新布局回流。CSS 媒体查询阶段 Media Query根据 media query 设定更新 CSS 规则。RAF 阶段requestAnimationFrame执行所有 RAF 回调是最后一次修改 DOM 的机会。执行 CSS Animation/Transition 的关键字步进。布局阶段Style Layout计算样式Recalculate Style:根据 DOM 、CSSOM、样式规则计算样式属性。布局阶段 Update Layout 即所指的 Reflow 回流改变元素的位置和大小更新渲染树将结果更新会渲染树观测执行不属于该阶段在此之后执行IntersectionObserver 和 ResizeObserver 在元素布局后才能知道计算元素之间的关系是否相交保证结果和 UI 展示一致重绘阶段Paint该过程只是构建指令不会执行绘图也是主线程任务的终点标记重绘区域Paint Invalidation浏览器会检查哪些布局对象Layout Object发生变化计算出需要重绘的区域将屏幕划分出需要更新的矩形区域标记为 脏区域Dirty Rects/Invalid Rects这个矩形区域就是无效的Invalid这样后续渲染时未变更区域就可以复用上一帧缓存做到增量更新生成绘图指令Paint浏览器遍历布局树Layout Tree使用绘图指令构建行为将行为存储 DisplayList 数据结构中不涉及 GPU 和 像素计算流程。录制/提交Record把 DisplayList 中的指令封装并提交给 合成器线程Compositor Thread光栅化Raster图层划分Layerization合成器线程Compositor Thread根据上一步的 DisplayList和transform等合成器属性判断哪些需要独立图层构建或更新合成层树/图层树Layer Tree在这里重绘阶段生成 DisplayList 会被分组和切分每个图层在后续光栅化只使用自己层的绘图指令集合。光栅化Raster合成器线程Compositor Thread将图层的绘制指令拆分为栅格化任务交给光栅线程调度光栅线程生成并提交绘制命令在启用 GPU Raster 时由 GPU 硬件执行光栅化直接生成纹理回退情况下则由 CPU 执行软件光栅化。合成Composition生成绘制矩形的列表Draw Quads:描述每个图层的最终位置、大小和来源的GPU纹理将多个图层 Layer 组合成最终帧确定每个图层的堆叠顺序应用 transform / opacity 等合成属性属于性能优化步骤在 GPU 上执行无需参与主线程中的样式计算、布局和重绘流程提交显示将 Draw Quads 列表打包成 合成帧Compositor Frame提交给浏览器进程 / GPU 进程进行展示屏幕渲染GPU Display数据提交浏览器进程 / GPU 进程接收到合成帧Compositor Frame会把相关数据提交给 GPU 图形驱动展示GPU 驱动会把结果写入帧缓冲区 Frame Buffer 屏幕在下一次接收到 VSync垂直同步信号 会从帧缓冲区中取出数据并展示到屏幕上— 空闲阶段—11. 空闲时间Idle Period在这个时间端就会执行 requestIdleCallback 中的任务如果时间不足可能会被推迟到下一帧空闲时间执行总结浏览器以事件循环为驱动每帧中先处理任务与微任务如果到达 VSync 时机则根据是否需要更新内容执行 RAF 和 渲染管线样式、布局、绘制、光栅化、合成在下一次垂直同步时由 GPU 将结果显示到屏幕后续根据是否有剩余时间进入空闲回调阶段。Vsync 的周期决定了 RAF 的执行周期重绘阶段其实不会执行绘制操作只是对构建了绘图指令的数据结构并提交给合成器线程真正绘制是在 Vsync 信号发出后的合成阶段第9步。从渲染流程阶段可以看出requestAnimation 对比 requestIdleTask优先级更高且 rquestIdleTask 不能保证每次事件循环都会执行。思考RAF 后台暂停是因为忽略了 VSync 信号吗不是的RAF 被暂停实际是因为渲染管线被暂停且因为内容不可见无需计算几何和像素会跳过样式计算/重绘/回流这些步骤。浏览器还会继续捕获 VSync 信号CSS 合成动画transform、opacity由 GPU 完成消耗极低还是会继续执行。参考内容Intersection Observer - W3CCritical Rendering Path - Google DevelopersrequestAnimationFrame - MDNUpdating the Rendering - HTML Living StandardCompositor Overview - Chromium