首页 > 其他分享 >浏览器的回流(重排)和重绘,以及如何优化

浏览器的回流(重排)和重绘,以及如何优化

时间:2024-01-22 19:57:55浏览次数:27  
标签:浏览器 DOM 队列 重排 回流 重绘

浏览器的回流(重排)和重绘 

1、浏览器解析HTML生成DOM树,解析CSS生成CSSDOM树

2、如何DOM树和CSSDOM树合并构建渲染树

3、然后经过回流(回流主要是计算元素的形状、位置大小)

4、然后再经过重绘(重绘就是转化为屏幕上的实际像素,来达到页面展现的目的)

 

 

引起回流的动作有:

 

浏览器对回流和重绘做了一定的优化

浏览器维护着一个回流和重绘的队列,将需要回流和重绘的操作放在这个队列中,当回流和重绘的操作达到一定数量会触发阈值,然后浏览器就会清空队列,批处理这些操作

当访问以下属性和方法时,浏览器会立刻清空队列,执行回流和重绘返回正确的值,所以要尽量避免使用以下的属性和方法

 

 如何避免回流?

 

标签:浏览器,DOM,队列,重排,回流,重绘
From: https://www.cnblogs.com/huangcaixia666/p/17975494

相关文章

  • chrome内核浏览器:测试环境:url(ip+端口)设置cookie、session失败
    chrome内核浏览器:测试环境:url(ip+端口)设置cookie、session失败有个单点登录系统,登录成功,通过:ip+端口/xxx.js方式设置,目标网址的cookie、session.,通过跳转访问目标网站。在测试的时候,发下cookie、session怎么设置都不成功。登录成功:设置cookie、session t跳转过去,发现原来......
  • postgres-wasm Supabase & Snaplet 开发的可以在浏览器中运行pg的工具
    postgres-wasmSupabase&Snaplet开发的可以在浏览器中运行pg的工具,比较有意思使用到的一些包runtime v86的一个模拟器buildroot 脚本,方便构建一个在v86中运行的cpu以及内存快照websockproxy 网络工具说明官方也提供了一个演示很强大,当然部分技术使用了webassembly可以方便......
  • 区块链浏览器&常见的区块链钱包
    区块链浏览器&常见的区块链钱包实验概述  区块链技术的重要特点之一是具有数据不可篡改性。而在其所构筑的公链应用(如数字货币、智能合约)中,良好的数据透明性使得经过区块链接收确认的所有数据变得公开可验证,这也是区块链技术无需信任的决定性因素。区块链浏览器,作为区块链项目......
  • Python实战:selenium模拟浏览器运行,获取软科网站2023中国大学排名
    Python实战:selenium模拟浏览器运行,获取软科网站2023中国大学排名在爬取一些加密的网页时,可以使用selenium模拟浏览器运行,再从网页中提取想要的数据。使用的库本文使用到的Python库有:selenium、bs4、pandas使用selenium解决网页的反爬使用bs4对html网页进行解析和提取数据......
  • pythonUI自动化之selenium获取浏览器接口信息
    #导入Selenium库中的Chrome驱动和DesiredCapabilities类fromselenium.webdriverimportChrome,DesiredCapabilities#导入Chrome驱动的特定选项类fromselenium.webdriver.chrome.optionsimportOptions#这是主程序的入口点,只有当该文件被直接运行时,以下的......
  • 【浏览器扩展】编写Firefox和Chrome的扩展程序
    官方文档Firefox(1)文档https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions(2)文档示例代码https://github.com/mdn/webextensions-examplesChrome(1)文档https://developer.chrome.com/docs/extensions(2)文档示例代码https://github.com/Google......
  • python使用selenium操作浏览器的教程
    重复的操作令手工测试苦不堪言,于是自动化测试出现了!作为web应用里最出名的自动化测试工具,selenium让web应用的测试轻松了很多。今天我们就来简单的介绍一下一些简单的selenium浏览器操作。接下来我们就来看看python怎么操作浏览器的吧!1、打开指定的网页地址我们使用selenium进行自......
  • chrome浏览器闪屏问题解决
    描述:我在浏览B站时,在打字时突然出现了闪屏,反应很强烈!一输入就出现!我还一直以为是电脑显卡出了问题!后来查询资料发现这是谷歌很久以前的一个bug,至今都没有修复!至少在我发帖之前一直是没有解决的!开启硬件加速若想使用硬件加速,可以在网址栏输入:chrome://flags/选择ChooseANGL......
  • [前端] 重排和重绘
    网页的生成过程解析HTML,生成DOM树。解析CSS,生成CSSOM树。结合DOM树和CSSOM树,为每一个节点计算CSS属性,生成渲染树,RenderTree。生成布局(Flow),计算渲染树上所有节点的位置。将布局绘制(Paint)到屏幕上。布局生成和绘制的过程就是渲染。网页生成的时候至少渲染一次。用户交互......
  • 在VS Code中启动Edge浏览器调试Vue项目
    最近维护一个Vue2.x的老项目,网上的资料介绍在VS中调试前端代码都是使用Chrome浏览器,但我没有装Chrome浏览器,想在VSCode中直接调试Vue代码,百度了很多资料,尝试了好几种方案,终于找到简单可行的方法。根据微软官方的资料,如果想在VSCode中使用Edge浏览器进行调试,可以安装Microsoft......