文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【Web技术】847- Virtual DOM 认知误区

通常有两个原因来支撑这个观点： DOM 操作会先改变 Virtual DOM ，所以一些无效该变（比如把文本 A 修改为 B ，然后再修改为 A）就不会调用 DOM API ，也就不会导致浏览做无效的回流和重绘...无效回流与重绘 第一个观点看着很有道理，但有个问题很难解释：浏览器的 UI 线程在什么时候去执行回流和重绘？...事实上也确实如此，无论你在一次事件循环中调用多少次的 DOM API ，浏览器也只会触发一次回流与重绘（如果需要），并且如果多次调用并没有修改 DOM 状态，那么回流与重绘一次都不会发生。...我的想法，可能是这两个原因： Virtual DOM 的优势，可以在不接触真实 DOM 的情况下操作 DOM，并且性能更好 在 Virutal DOM 上的改动，最终还是会调用平台 API 去操作真实的...使用 Virtual DOM 可以避免频繁操作 DOM ，能有效减少回流和重绘次数 ❌ 无论你在一次事件循环中调用多少次的 DOM API ，浏览器也只会触发一次回流与重绘（如果需要），并且如果多次调用并没有修改

92610

Invalidate介绍

窗口的客户区无效意味着需要重绘，例如，如果一个被其它窗口遮住的窗口变成了前台窗口，那么原来被遮住的部分就是无效的，需要重绘。这时Windows会在应用程序的消息队列中放置WM_PAINT消息。...MFC为窗口类提供了WM_PAINT的消息处理函数OnPaint，OnPaint负责重绘窗口。...视图类有一些例外，在视图类的OnPaint函数中调用了OnDraw函数，实际的重绘工作由OnDraw来完成。参数bErase为TRUE时，重绘区域内的背景将被擦除，否则，背景将保持不变。...2、与UpdateWindow( )的区别　　UpdateWindow( )的作用是使窗口立即重绘。...调用Invalidate等函数后窗口不会立即重绘，这是由于WM_PAINT消息的优先级很低，它需要等消息队列中的其它消息发送完后才能被处理。

61810
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【第3版emWin教程】第44章 emWin6.x窗口管理器官方实例简单讲解

    其实不光在桌面窗口上面移动窗口要重绘，其它创建的窗口上面移动是一样的，也需要设置重绘。...如果用户新窗口的窗口回调函数里面没有写重绘消息WM_PAINT，窗口管理器就会按照系统默认的颜色的进行重绘，如果用户写了WM_PAINT消息就会按照用户设置的进行重绘。...，注意这个函数是对窗口的显示大小进行加大和减小，并不是进行放缩，显示效果如下： 44.4 官方WM_LateClipping.c实例讲解 这个DEMO在模拟器中的位置： 主要功能介绍： 这个例子依然主要演示回调函数的重绘机制...这个按钮按下后将窗口_hWin1和窗口_hWin2无效，从而会执行这两个窗口的背景重绘功能。 4、同上，只不过这里实现的功能是将两个计数值清零，并使桌面窗口无效，从而执行桌面窗口的重绘消息。...6、此函数是框架窗口hFrame1的回调函数，回调函数中主要实现了重绘消息，重绘消息中记录了重绘的次数，并根据重绘次数修改背景颜色。

    1.3K30

    【第3版emWin教程】第41章 emWin6.x窗口管理器基础知识（重要）

    窗口管理器提供一批API函数，利用这些函数可以很容易地对窗口进行创建、移动、调整大小等操作。emWin提供的窗口管理器API函数相对还是比较全面的。...这种情况下，在有透明区域的窗口之前重绘背后窗口非常重要。窗口管理器自动按正确的顺序进行重绘。 有效化/无效化： 有效窗口是不需要重绘的完全更新窗口。 无效窗口不会反映所有更新，因此需要完全或部分重绘。...41.4.1 不使用回调函数 回调函数不是必须使用的，但是如果这样做，窗口管理器会失去管理窗口重绘（更新）的能力。也可以混合使用，例如让有些窗口使用回调，有些不使用。...透明窗口不必重绘整个无效区域： 透明窗口不必重绘整个无效区域，它可让窗口部分区域不受影响，此不受影响的区域会变成透明。...STemWin的无效化函数不会重绘窗口的无效部分，只是管理窗口的无效区域。实际重绘工作是由WM_Exec，GUI_Exec()或GUI_Delay()来完成。

    2.1K20

    Android高频面试专题 - 提升篇（二）View绘制流程

    再进行下一步，而不是一个View执行完所有步骤再遍历下一个View。...，即前后二次测量规格不一致，会先根据目前测量规格生成的key索引缓存数据，索引到就无需进行重新测量;如果targetSDK小于API 20则二级测量优化无效，依旧会重新测量，不会采用缓存测量值。...VISIBLE的时候，View的onDraw()方法将会被调用，invalidate()方法在 UI 线程中调用，重绘当前 UI。...postInvalidate() 方法在非 UI 线程中调用，通过Handler通知 UI 线程重绘。...因此要在ViewGroup上绘制东西的时候往往重写的是dispatchDraw()方法而不是onDraw()方法，或者自定制一个Drawable，重写它的draw(Canvas c)和 getIntrinsicWidth

    10.4K31

    VUE-Learning-01

    虚拟dom：virtual dom （也被称为vdom） 所谓虚拟dom，即为伪dom，假的dom，他不是一个真实的dom，而是由JS 来模拟出来的具有真实dom结构的一个树形结构。...jq版本的数据替换，基本上改变了大部分的dom结构，而vDom版本的则只改变了需要改动的dom元素，大大减少了dom的操作。...在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。 DOM是个与语言无关的API，它在浏览器中的接口却是用JavaScript来实现的。...浏览器会将各层的信息发送给GPU，GPU将各层合成（重绘） 重排和重绘 重排：当DOM的变化影响了元素的几何属性（宽和高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响...cpu的计算能力 重绘占用的是gpu的绘制图形能力，因为家用显卡都不利于绘制图形，所以，重绘会很浪费性能 GPU的分类： 家用GPU（不利于会图形） 专业GPU（利于绘图形） 什么是MVVM M:

    62910

    RecyclerView 刷新列表数据的 notifyDataSetChanged() 为什么是昂贵的?

    ViewRootImpl 收到重绘请求后调用scheduleTraversals()来触发一次从根视图开始的重绘。重绘任务被包装成一个 Runnable 交由Choreographer暂存。...待下一个信号到来，它就会向主线程消息队列中发送一条消息，当主线程处理到这条消息时，从根视图开始的自顶向下重绘就启动了。...，在重绘时会触发布局，即onLayout()会被调用： ?...RecyclerView.requestLayout()是驱动列表刷新的源头。调用该方法后，会从根视图自顶向下地进行重绘。RecyclerView 的重绘表现为重新布局所有表项。...因为这些表项的 ViewHolder 实例在重绘之前都被“无效化”了，所以即使数据没变也逃不掉重新执行绑定数据的操作。 可见notifyDataSetChanged()有多昂贵！

    3.9K20

    【第3版emWin教程】第47章 emWin6.x控件基础知识

    47.1 初学者重要提示 47.2 当前支持的控件 47.3 控件的重绘机制 47.4 如何使用控件 47.5 控件配置选项 47.6 通用控件API 47.7 控件中常用的公共函数 47.8 总结 47.1...47.3 控件的重绘机制 从源码实现的角度来看，由于控件的本质就是窗口，所以窗口的重绘同样适用于控件。...因此，同窗口的重绘一样，控件的重绘也是通过函数WM_Exec()、GUI_Exec()或GUI_Delay()实现。...如果控件的某个属性被更改后，该控件的窗口（或部分窗口）会被标记为无效，但不会立即重绘，通过调用函数WM_Exec()、GUI_Exec()或GUI_Delay()才会使窗口管理器给控件回调函数发送WM_PAINT...消息来执行重绘，当然，也可以调用函数WM_Paint()强制执行重绘。

    1.1K20

    Flutter技术与实战(2)

    可以看到，由于一些其他原因（比如，视图手动合并）导致 2 的子节点 5 与它的兄弟节点 6 处于了同一层，这样会导致当节点 2 需要重绘的时候，与其无关的节点 6 也会被重绘，带来性能损耗。...在重绘边界内，Flutter 会强制切换新的图层，这样就可以避免边界内外的互相影响，避免无关内容置于同一图层引起不必要的重绘。 重绘边界的一个典型场景是 Scrollview。...ScrollView 滚动的时候需要刷新视图内容，从而触发内容重绘。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，这时候重绘边界就派上用场了。...由 State 创建 Widget，以数据驱动视图更新，而不是直接操作 UI 更新视觉属性，代码表达可以更精炼，逻辑也可以更清晰。...为此，Flutter 对这个机制做了优化，其框架内部会通过一个中间层去收敛上层 UI 配置对底层真实渲染的改动，从而最大程度降低对真实渲染视图的修改，提高渲染效率，而不是上层 UI 配置变了就需要销毁整个渲染视图树重建

    1.8K10

    我优化了进度条，页面性能竟提高了70%

    缺陷：这两种方案都会引发频繁的重排和重绘 可以借助chrome devtools performance来验证一下页面的情况 小小的一个进度条触发了那么那么多次重排和重绘，那么它到底有什么影响呢？...重绘：不是所有的DOM变化都影响元素的几何属性，如果改变元素的背景色并不影响它的宽度和高度，这种情况，只会发生一次重绘，而不会发生重排，因为元素的布局没改变 所以知道了重排和重绘造成的严重问题后，我们马上对其进行分析优化...极致的优化 先来看看一个非常常见的图 页面的渲染，大体上走的就是这5个流程。...边框、高度等）、内容改变（如：文本改变或图片被另外一个不同尺寸的图片替代）、浏览器窗口尺寸的改变、通过display: none隐藏⼀个DOM节点等 触发重绘的因素：重排必定触发重绘（重要）、通过visibility...2 = -50% 这么做了以后，我们再次用performance检验一下 可以很明显地看到页面重排重绘的次数减少了很多很多，剩余的基本都是页面最基本的重排和重绘了。

    1.2K20

    我优化了进度条，页面性能竟提高了70%

    缺陷：这两种方案都会引发频繁的重排和重绘 可以借助chrome devtools performance来验证一下页面的情况 ? 小小的一个进度条触发了那么那么多次重排和重绘，那么它到底有什么影响呢？...重绘：不是所有的DOM变化都影响元素的几何属性，如果改变元素的背景色并不影响它的宽度和高度，这种情况，只会发生一次重绘，而不会发生重排，因为元素的布局没改变 所以知道了重排和重绘造成的严重问题后，我们马上对其进行分析优化...页面的渲染，大体上走的就是这5个流程。...边框、高度等）、内容改变（如：文本改变或图片被另外一个不同尺寸的图片替代）、浏览器窗口尺寸的改变、通过display: none隐藏⼀个DOM节点等 触发重绘的因素：重排必定触发重绘（重要）、通过visibility...可以很明显地看到页面重排重绘的次数减少了很多很多，剩余的基本都是页面最基本的重排和重绘了。

    1.1K30

    我优化了进度条，页面性能竟提高了70%

    缺陷：这两种方案都会引发频繁的重排和重绘 可以借助chrome devtools performance来验证一下页面的情况 小小的一个进度条触发了那么那么多次重排和重绘，那么它到底有什么影响呢？...重绘：不是所有的DOM变化都影响元素的几何属性，如果改变元素的背景色并不影响它的宽度和高度，这种情况，只会发生一次重绘，而不会发生重排，因为元素的布局没改变 所以知道了重排和重绘造成的严重问题后，我们马上对其进行分析优化...Part6极致的优化 先来看看一个非常常见的图 页面的渲染，大体上走的就是这5个流程。...边框、高度等）、内容改变（如：文本改变或图片被另外一个不同尺寸的图片替代）、浏览器窗口尺寸的改变、通过display: none隐藏⼀个DOM节点等 触发重绘的因素：重排必定触发重绘（重要）、通过visibility...2 = -50% 这么做了以后，我们再次用performance检验一下 可以很明显地看到页面重排重绘的次数减少了很多很多，剩余的基本都是页面最基本的重排和重绘了。

    1.3K40

    AnyView 对 SwiftUI 性能的影响

    如果是 AnyView（基本上是一个包装类型），SwiftUI 将很难确定视图的身份和结构，并且它将重新绘制整个视图，这并不是真正高效的。...在浏览数据时修改我们可以进行的另一个测试是性能测试 - 向列表发送大量内容并强制更新视图（例如，响应消息），同时我们也浏览数据。这将在较短的时间间隔内触发视图的多次重绘。...由于在几秒钟内强制重绘视图多次，帧丢失在这里更加明显。由于 SwiftUI 不知道这个视图是什么，我假设它每次都会从头开始重绘。...这意味着，当列表发生更改时，我们实际上重新创建了整个列表。这也解释了为什么 AnyView 实现随着时间的推移变慢 - 每次重绘时都需要从头开始创建更多内容。...总结总而言之，在这些情景中（包含异构视图的可滚动列表），最好为容器中的不同视图使用具体类型。这可能听起来更复杂一些，但实际上你可以使其更简单，而不必过多地处理泛型。

    2.2K00

    彻底搞懂Vue虚拟Dom和diff算法

    起初我们在使用JS/JQuery时，不可避免的会大量操作DOM，而DOM的变化又会引发回流或重绘，从而降低页面渲染性能。那么怎样来减少对DOM的操作呢？...此时虚拟DOM应用而生，所以虚拟DOM出现的主要目的就是为了减少频繁操作DOM而引起回流重绘所引发的性能问题的！虚拟DOM的作用是什么？兼容性好。...总结大概如下：虚拟DOM不会进行回流和重绘；真实DOM在频繁操作时引发的回流重绘导致性能很低；虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗...；虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部；总损耗 = 真实DOM增删改 + (多节点)回流/重绘; //计算使用真实DOM的损耗总损耗 = 虚拟...DOM增删改 + (diff对比)真实DOM差异化增删改 + (较少节点)回流/重绘; //计算使用虚拟DOM的损耗可以发现，都是围绕频繁操作真实DOM引起回流重绘，导致页面性能损耗来说的。

    1K10

    emwin教程_emwin教程

    为了加快绘制过程，窗口管理器的裁剪机制会确保只重绘窗口的无效区域 注：在 WM_PAINT 消息中，除了重绘窗口内容外不得执行其他操作。...如果像上面一样创建并删除一个窗口，回调函数将触发窗口管理器确认桌面窗口不再有效并自动重绘。 窗口无效化 无效窗口或窗口的一部分失效区域会告诉窗口管理器，在下一次调用重绘函数时重绘窗口的无效区域。...emWin 提供的无效化函数不负责重绘窗口的无效部分，它们只负责管理窗口的无效区域。 无效化函数： void WM_InvalidateWindow(WM_HWIN hWin); 使指定窗口无效。...，或使用函数 WM_EnableMemdev() 为指定窗口开启内存设备 窗口管理器将 WM_PAINT 消息的输出位置重定向到内存设备中，重绘完成后把内存设备中的内容复制到屏幕上。...以上这些内存设备都是在窗口管理器发送 WM_PAINT 消息之前在内部创建的，并在重绘完成后立即删除。如果使用内存设备重绘透明窗口，那么窗口无效区域下方的内容也会放到内存设备中进行重绘。

    6.8K40

    掌握这个关键技术，让你的APP开发事半功倍！——Flutter与其他方案的区别

    2005年被Google公司收购后，因为其出色的绘制表现被广泛应用在Chrome和Android等核心产品上。Skia在图形转换、文字渲染、位图渲染方面都表现卓越，并提供了开发者友好的API。...Dart因同时支持AOT和JIT，所以具有运行速度快、执行性能好的特点外，Flutter为什么选择了Dart，而不是前端应用的准官方语言JavaScript呢？这问题有意思，但也有争议。...由于一些其他原因（比如，视图手动合并）导致2的子节点5与它的兄弟节点6处于了同一层，这样会导致当节点2需要重绘的时候，与其无关的节点6也会被重绘，带来性能损耗。...在重绘边界内，Flutter会强制切换新的图层，这样就可以避免边界内外的互相影响，避免无关内容置于同一图层引起不必要的重绘。 重绘边界的一个典型场景是Scrollview。...ScrollView滚动的时候需要刷新视图内容，从而触发内容重绘。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，这时候重绘边界就派上用场了。

    1.2K20

    Flutter区别于其他技术的关键是什么？

    2005年被Google公司收购后，由于其出色的绘制表现被广泛应用在Chrome和Android等核心产品上。Skia在图形转换、文字渲染、位图渲染等方面都表现卓越，并提供了开发者友好的API。...前文提到，Dart因为同时支持JIT和AOT，所以既开发效率高，又运行速度好、执行性能高，那么除了这个特点之外，还有什么特点促使Flutter选择Dart，而不是选择前端应用的准官方语言JavaScript...可以看到，由于一些其他原因（比如，视图手动合并）导致2的子节点5与它的兄弟节点6处于了同一层，这样会导致当节点2需要重绘的时候，与它无关的节点6也会被重绘，带来性能损耗。...在重绘边界内，Flutter会强制切换新的图层，这样就可以避免边界内外的互相影响，避免无关内容置于同一图层引起不必要的重绘。 ? 重绘边界的一个典型场景是ScrollView。...ScrollView滚动的时候需要刷新视图内容，从而触发内容重绘。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，这时候重绘边界就派上用场了。

    3.2K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券