首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当DOM元素在屏幕外呈现时,浏览器会执行哪些优化?

当DOM元素在屏幕外呈现时,浏览器会执行一些优化以提高性能和减少资源消耗。以下是一些主要的优化:

  1. 延迟布局(Layout Deferring):浏览器会延迟计算布局信息,直到元素进入视口。这样可以减少不必要的布局计算,提高性能。
  2. 延迟绘制(Painting Deferring):浏览器会延迟将元素绘制到屏幕上,直到它们进入视口。这样可以减少不必要的绘制操作,提高性能。
  3. 延迟图片加载(Image Loading Deferring):浏览器会延迟加载位于屏幕外的图片,直到它们进入视口。这样可以减少不必要的图片加载和解码,提高性能。
  4. 延迟加载(Lazy Loading):浏览器会延迟加载位于屏幕外的资源,如JavaScript、CSS和iframe。这样可以减少不必要的资源加载和解析,提高性能。
  5. 延迟执行(Script Execution Deferring):浏览器会延迟执行位于屏幕外的JavaScript代码,直到它们进入视口。这样可以减少不必要的JavaScript执行,提高性能。
  6. 虚拟滚动(Virtual Scrolling):浏览器会在内存中仅保留当前视口中的DOM元素,而不是所有元素。这样可以减少DOM元素的数量,提高性能。

总之,浏览器会执行一系列优化,以提高性能和减少资源消耗,当DOM元素在屏幕外呈现时。这些优化包括延迟布局、绘制、图片加载、资源加载、脚本执行和虚拟滚动。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML 渲染那些事儿

但是,笔者看来只有我们真正了解浏览器是如何将 HTML 渲染到页面上这一过程,真正落地网页优化性能时才能做到所谓的心中有数,而不是人云亦云的添加一些优化参数或者属性。...绘制 一旦渲染树创建并且布局完成,像素就可以被绘制屏幕上,既然浏览器已经明确的知道哪些节点是可见的,以及它们的样式和几何形状,我们可以将此信息传递到最后阶段,它将 RenderTree 中的每个节点转换为屏幕上的实际像素...你把内联脚本放在哪里都是阻塞页面的渲染,不过是放在底部脚本中可以拿到内存中已经构造好的 Dom 节点进行 Dom 操作而已。 链 JS 讨论完内联 JS 的事情,我们再来看看链 JS 的问题。...无论是 JS 资源的加载和执行,我们有一个明确的前提: Parse Html 的过程中如果碰到外部 JS 脚本,那么链脚本的确是会停止解析后续 Dom 的,但是停止解析后续 Dom 并不意味着一定会阻塞页面的渲染...至于 Css 是否影响 Dom 解析,当然 Cssom 的生成是 DomTree 构建之后发生。那么外部 Css 脚本的加载是否影响后续 Dom 元素的解析呢?

1.5K30

css布局优化:布局计算限制— containwill-change合成层

浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点》提过:避免大规模、复杂的布局布局,就是浏览器计算DOM元素的几何信息的过程:元素大小和在页面中的位置。...比如,你的页面顶部有一个固定位置的header,而此时屏幕底部有某个区域正在发生绘制的话,整个屏幕都将会被绘制。 注意:DPI较高的屏幕上,固定定位的元素自动地被提升到一个它自有的渲染层中。...一般情况下,浏览器会把 整个 DOM 作为 CSS 布局上下文,因此:当我们改变部分 DOM 的样式时,也影响到其他部分。...布局时,现代主流的浏览器都会做一些智能的判断,最终决定哪些需要改变,哪些不需要改变。不过,页面布局是很复杂的,浏览器不一定能判断到所有的情况。...style 存在风险,暂为将其放入规范中content:同时包含 content、paint、style的效果strict:同时包含 layout、content、paint、style的效果适用场景元素屏幕不可见时第三方插件

1.4K30
  • 提高JavaScript动画的性能

    然而,并不是建议你在他们自己的层面上推广太多的元素,或者你是夸大其词。事实上,浏览器创建的每个层都需要内存和管理,这可能很昂贵。...requestAnimationFrame()最适合浏览器的时间执行动画代码,通常在框架的开始。...对于不需要访问DOM的复杂JavaScript操作,可以考虑使用Web worker。工作线程执行任务时不会影响用户界面。...7、使用屏幕的画布进行复杂的绘图操作 这个技巧与优化HTML5 Canvas的代码有关。...如果您的框架涉及复杂的绘图操作,那么一个好主意是创建一个屏幕的画布,您在其中执行所有的绘图操作一次或仅发生更改时,然后每个框架上绘制屏幕的画布。

    2K20

    【面试系列一】如何回答如何理解重排和重绘

    DOM 构造是增量的,CSSOM 却不是。CSS 是渲染阻塞的:浏览器阻塞页面渲染直到它接收和执行了所有的 CSS。...为了构造渲染树,浏览器检查每个节点,从 DOM 树的根节点开始,并且决定哪些 CSS 规则被添加。 渲染树只包含了可见内容(body 里的部分)。...Paint 最后一步是将像素绘制屏幕上,栅格化所有元素,将元素转换为实际像素。 一旦渲染树创建并且布局完成,像素就可以被绘制屏幕上。加载时,整个屏幕被绘制出来。...一个元素位置发生变化时,其父元素及其后边的元素位置都可能发生变化,代价极高。 “回答什么是重排的时候,关键不是位置发生变动,这只是原因(Why),而不是 What。...其中重排就是元素的位置发生变动的时候,浏览器重新执行布局这个步骤,来重新确定页面上内容的大小和位置,确定完之后就会进行重新绘制到屏幕上,所以重排一定会导致重绘。

    1.4K71

    前端不止:Web性能优化 - 关键渲染路径以及优化策略

    前面谈到CSS阻塞浏览器的渲染过程,因为渲染树的构建同时需要DOM和CSSOM,所以浏览器请求的style.css返回之后,浏览器开始解析样式表,并重新计算样式(Recalculate Style...布局工作完成之后,浏览器开始绘制,将渲染树转换成屏幕上的像素,这样,我们就能在浏览器中看到页面的内容。...DOM或者CSSOM发生变化的时候,浏览器就需要再次执行一次上面的步骤。...于是, DOM、CSSOM 和 JavaScript 执行之间有大量的依赖关系时,就很可能导致浏览器处理及渲染网页时出现延迟。...其实,浏览器渲染树构建完成之后,会指示需要哪些字体在网页上渲染指定文本,然后分派字体请求,浏览器执行布局并将内容绘制到屏幕上,如果字体尚不可用,浏览器可能不会渲染任何文本像素,待字体可用之后,再绘制文本像素

    1.1K30

    「一道面试题」输入URL到渲染全面梳理中-页面渲染篇

    布局(Layout) 渲染树 同时包含了屏幕上的所有可见内容及其样式信息,有了渲染树,再接着就要进入布局 ( layout ) 阶段了,到目前为止,我们计算了哪些节点应该是可见的以及它们的计算样式,但我们还没有计算它们设备...,等到数量足够时做一次批处理回流, 但除了 render树 的直接变化,获取一些属性时,浏览器为了获得正确的值也触发回流,这样使得浏览器优化无效 offset ( Top/Left/Width/Height...CSS,产生 CSSOM树 DOM和CSSOM树解析过程中,遇到 JS,立即阻塞DOM树的构建,JS解析完成,接着走上面两步 再接着,浏览器通过DOM和CSSOM树构建渲染树 ( Render树...),浏览器会将各层信息发送给GPU,GPU将各层合成,显示屏幕上 关于合成这一步骤,准备细聊一下子,让大家对其有个基本概念,因为刚开始忽略了它 首先,我们需要简单了解一些基本概念 浏览器渲染方式 浏览器渲染图形的时候...,作用是提前告诉浏览器要变化,这样浏览器开始做一些优化工作 (最好用完后就释放) 等元素 还有以前的 flash 插件等等 通俗一点,假如我们给一个元素加了 transform

    78020

    【前端性能优化】深入解析重绘和回流,构建高性能Web界面

    具体来说,一个元素的几何属性改变,比如宽度、高度或者隐藏/显示状态变动,浏览器执行以下步骤: 计算新布局:浏览器首先基于最新的样式信息重新计算受影响元素的大小和位置,这个过程包括其所有子元素,乃至可能影响到的其他部分页面布局...分层与合成准备:对于复杂的布局变化,可能还需要对页面进行分层处理,确定哪些部分可以独立重绘,哪些需要一起重排。 绘制与合成:最后,浏览器根据更新后的渲染树和分层信息,重新绘制屏幕上的内容。...回流(Reflow)触发条件 添加或删除DOM元素文档中添加新的可见元素或删除已存在的元素时,可能导致周围元素或整体布局的变化,从而触发回流。...离线布局与智能调度 requestAnimationFrame:它确保在下一次浏览器重绘之前执行回调函数,适合于执行视觉更新,帮助同步动画与屏幕刷新率。...使用will-change属性:提前告知浏览器哪些属性可能变化,帮助浏览器优化渲染流程。 为什么说回流一定会引起重绘,而重绘不一定引起回流?

    12810

    浏览器之性能指标-INP

    页面加载过程中,可能延长输入延迟的一件事就是脚本执行。...正如上面的图片所示, 任务过长且浏览器无法快速响应交互 将较长任务分解为较小任务时,交互会被很早的执行 ---- 注意交互重叠 优化INP的一个特别具有挑战性的方面是处理「交互重叠」。...布局抖动是性能瓶颈,因为JavaScript中更新样式,然后立即请求这些样式的值,浏览器被迫执行同步布局工作,而它本来可以事件回调完成后异步地等待稍后执行。...减小DOM大小 页面的DOM较小时,渲染工作通常会迅速完成。然而,DOM变得非常大时,渲染工作往往随着DOM的增大而增加。...作为对用户交互的响应,大型DOM可能导致渲染更新非常昂贵,从而增加浏览器呈现下一个帧所需的时间。 使用content-visibility来延迟渲染屏幕元素

    1.1K21

    第 004 期 提高页面渲染速度的 3 个 CSS 技巧

    延时渲染屏幕的内容 - content-visibility: auto 很长的页面会有大量的内容屏幕。如果只渲染屏幕内的内容,屏幕的内容在出现时才渲染,能大大的节约渲染时间。...这个属性能推迟选择的HTML元素有大量离屏内容时,需要延时渲染屏幕的内容,只需元素上使用 content-visibility: auto。...屏幕被延迟渲染的元素浏览器中,高度变成 0。发生滚动时,元素出现,被渲染后高度也相应更新,此时滚动条行为以非预期方式进行。...元素的样式上设置 will-change 后,开启 GPU 加速。will-change 的值发生变化后,GPU 优化元素的渲染。...写法: .transition { will-change: opacity; } 局限性: 应作为“最后的手段”,避免过早优化。 应在父元素上使用 will-change,元素上使用动画。

    63001

    前端面试题-HTML+CSS

    HTML5 中只有一种 SGML: 标准通用标记语言,是现时常用的超文本格式的最高层次标准 2....">浏览器解析到这句代码时,页面的加载和解析都会暂停直到浏览器拿到并执行完这个 js 文件 10....像素px是相对于显示器屏幕分辨率而言的 em的值并不是固定的,继承父级元素的字体大小,代表倍数 rem的值并不是固定的,始终是基于根元素 的,也代表倍数 5. position...:none visibility:hidden 的 是否占据空间 不占据任何空间,文档渲染时,该元素如同不存在(但依然存在文档对象模型树中) 该元素空间依旧存在 是否渲染 触发 reflow(回流)...由于@import 是 CSS2.1 提出的所以老的浏览器不支持,而 link 标签无此问题 使用 javascript 控制 dom 去改变样式的时候,只能使用 link 标签,因为@import

    99930

    前端优化--关键渲染路径

    特刨根问底一下,目前(截止19年7月)Chrome 浏览器底层针对 web 都做了哪些工作?通过了解这些,我们可以更好的优化我们的网站。...这类工作大多数是开发者看不到的:我们编写标签元素屏幕上就会显示出漂亮的页面。 但浏览器到底是如何使用我们的 HTML、CSS 和 JavaScript 屏幕上渲染的呢?...将各个节点绘制到屏幕上。 ? 如果 DOM 或 CSSOM 被修改,只能再执行一遍以上所有步骤,以确定哪些像素需要在屏幕上进行重新渲染。...优化关键渲染路径就是指最大限度缩短执行上述第 1 步至第 5 步耗费的总时间。 这样一来,就能尽快将内容渲染到屏幕上,此外还能缩短首次渲染后屏幕刷新的时间,即为交互式内容实现更高的刷新率。...“Layout”事件时间线中捕获渲染树构建以及位置和尺寸计算。 布局完成后,浏览器立即发出“Paint Setup”和“Paint”事件,将渲染树转换成屏幕上的像素。

    1.3K41

    深入了解 React 中的虚拟 DOM

    由于其基于对象的特性,JavaScript 和其他脚本语言理解 DOM,并可以交互和操作文档内容。例如,使用 DOM,开发人员可以添加或删除元素,修改它们的外观,并在 web 元素执行用户操作。...DOM 操作之后浏览器中的重新渲染过程导致性能不足。 3. React 中的重渲染:为什么使用虚拟 DOM 正如我们所知,React 是一个基于组件的库。...React 不允许浏览器每次重新渲染或 DOM 更新后重新绘制所有页面元素,而是使用虚拟 DOM 的概念,不涉及实际 DOM 的情况下找出究竟发生了什么变化,然后确保实际 DOM 只重新绘制必要的数据...与实际的 DOM 不同,虚拟 DOM 的创建成本很低,因为它不写入屏幕。它只能作为一种策略,以防止重新渲染时重绘不必要的页面元素。...蓝图被修改和最终确定后,我们就可以只包含对实际结构的更新。 7. 小结 虚拟 DOM 只是 React 用来优化应用程序性能的一种策略。

    1.6K20

    从 8 道面试题看浏览器渲染过程与性能优化

    我们前面提到 CSS 加载阻塞 Dom 的渲染和后面 js 的执行,js 阻塞 Dom 解析,所以我们可以得到结论: 文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded...如何优化 ? 关键渲染路径是浏览器将 HTML CSS JavaScript 转换为屏幕上呈现的像素内容所经历的一系列步骤。也就是我们上面说的浏览器渲染流程。...优化 JavaScript 浏览器遇到 script 标记时,阻止解析器继续操作,直到 CSSOM 构建完毕,JavaScript 才会运行并继续完成 DOM 构建过程。... 没有 defer 或 async,浏览器立即加载并执行指定的脚本,“立即”指的是渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素...每个层上完成绘制过程之后,浏览器会将绘制的位图发送给 GPU 绘制到屏幕上,将所有层按照合理的顺序合并成一个图层,然后屏幕上呈现。

    1.2K40

    JavaScript是如何工作的:渲染引擎和优化其性能的技巧

    浏览器构建页面的 DOM 时,它在 head 标签下如遇到了一个 link 标记且引用了外部 theme.css CSS 样式表。 浏览器预计可能需要该资源来呈现页面,它会立即发送请求。...处理脚本和样式表的顺序 解析器到达 标记时,将立即解析并执行脚本。文档的解析将暂停,直到执行脚本为止。这意味着这个过程是同步的。...布局 — 一旦浏览器知道哪些规则适用于某个元素,它就可以开始计算后者占用多少空间以及它在浏览器屏幕上的位置。Web 的布局模型定义了一个元素可以影响其他元素。...优化你的 CSS 通过添加和删除元素,更改属性等来修改 DOM 将使浏览器重新计算元素样式,并且许多情况下,重新计算整个页面的布局或至少部分布局。...但是,如果你访问 box 之前更改了它的样式(例如,通过动态地向元素添加一些 CSS 类),浏览器必须先应用样式更改并执行布局过程,这是非常耗时和耗费资源的,所以尽可能避免。

    1.6K30

    前端HTML+CSS面试题汇总一

    css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?...有哪项方式可以对一个DOM设置它的CSS样式? CSS都有哪些选择器? CSS中可以通过哪些属性定义,使得一个DOM元素不显示浏览器可视范围内? 超链接访问过后hover样式就不出现的问题是什么?... 浏览器解析到该元素时,暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内... CSS 中,选择器是一种模式,用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。 注意: 一般而言,选择器越特殊,它的优先级越高。...19.CSS中可以通过哪些属性定义,使得一个DOM元素不显示浏览器可视范围内?

    62920

    【实践】Chrome浏览器客户端调试从入门到奔溃

    1.箭头按钮:用于页面选择一个元素来审查和查看它的相关信息,当我们Elements这个按钮页面下点击某个Dom元素时,箭头按钮变成选择状态 2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和...toggleTab的方法下打了两个断点,开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息...image 4.调试的功能区域 每一个功能区,都有它相关的左右,先来看一张图,它都有哪些功能 image Call Stack调用栈:断点执行到某一程序块处停下来后,右侧调试区的 Call Stack...image 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时浏览器里面得到反馈。...以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。 双击其中的截屏可以放大显示,放大的图下方可以点击跳转到上一帧或者下一帧。

    3.8K30

    进阶|你的css经不住这层考验,就是失败...

    知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其屏幕的位置。...其次你要知道,没有不变的事情,今天性能很差的样式,可能明天就被优化,并且浏览器之间也存在差异。 开启 GPU 硬件加速 归根结底,上述四种属性的动画消耗较低的原因是开启了 GPU 硬件加速。...will-change 为 web 开发者提供了一种告知浏览器元素会有哪些变化的方法,这样浏览器可以元素属性真正发生变化之前提前做好对应的优化准备工作。...3.有节制地使用:通常,元素恢复到初始状态时,浏览器丢弃掉之前做的优化工作。...5.给它足够的工作时间:这个属性是用来让页面开发者告知浏览器哪些属性可能变化的。然后浏览器可以选择变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。

    67030

    盒子端 CSS 动画性能提升研究

    从中知道规则之后,将应用规则并计算每个元素的最终样式。 布局。知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其屏幕的位置。...其次你要知道,没有不变的事情,今天性能很差的样式,可能明天就被优化,并且浏览器之间也存在差异。 开启 GPU 硬件加速 归根结底,上述四种属性的动画消耗较低的原因是开启了 GPU 硬件加速。...will-change 为 web 开发者提供了一种告知浏览器元素会有哪些变化的方法,这样浏览器可以元素属性真正发生变化之前提前做好对应的优化准备工作。...有节制地使用:通常,元素恢复到初始状态时,浏览器丢弃掉之前做的优化工作。...给它足够的工作时间:这个属性是用来让页面开发者告知浏览器哪些属性可能变化的。然后浏览器可以选择变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。

    74960

    盒子端 CSS 动画性能提升研究

    从中知道规则之后,将应用规则并计算每个元素的最终样式。 布局。知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其屏幕的位置。...其次你要知道,没有不变的事情,今天性能很差的样式,可能明天就被优化,并且浏览器之间也存在差异。 开启 GPU 硬件加速 归根结底,上述四种属性的动画消耗较低的原因是开启了 GPU 硬件加速。...will-change 为 web 开发者提供了一种告知浏览器元素会有哪些变化的方法,这样浏览器可以元素属性真正发生变化之前提前做好对应的优化准备工作。...有节制地使用:通常,元素恢复到初始状态时,浏览器丢弃掉之前做的优化工作。...给它足够的工作时间:这个属性是用来让页面开发者告知浏览器哪些属性可能变化的。然后浏览器可以选择变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。

    85760

    盒子端 CSS 动画性能提升研究

    原理是,正常而言 requestAnimationFrame 这个方法一秒内执行 60 次,也就是不掉帧的情况下。假设动画在时间 A 开始执行时间 B 结束,耗时 x ms。...知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其屏幕的位置。...will-change 为 web 开发者提供了一种告知浏览器元素会有哪些变化的方法,这样浏览器可以元素属性真正发生变化之前提前做好对应的优化准备工作。...有节制地使用:通常,元素恢复到初始状态时,浏览器丢弃掉之前做的优化工作。...给它足够的工作时间:这个属性是用来让页面开发者告知浏览器哪些属性可能变化的。然后浏览器可以选择变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。

    2.3K130
    领券