我能想到的最轻量级的方法是resizeObserver或intersectionObserver。intersectionObserver解决方案将永久观察元素X，并在元素X出现在屏幕上时运行该方法。缺点是它会在你每次滚动它的时候运行。resizeObserver解决方案将永久地观察页面的主容器(包含所有可能的移位元素)的高度变化(dom移位)，然后运行该方法。
浏览 57提问于2020-07-23得票数 0
是否有一种方法可以检测元素的getBoundingClientRect()矩形在没有实际计算getBoundingClientRect()的情况下发生了变化？像是“肮脏的旗帜”吗？天真地，我假设在浏览器的内部工作中肯定有这样一种机制，但是我还没有在DOM中找到公开的机制。也许有一种方法可以用MutationObservers来做到这一点？现在，我正在为每个元素调用getBoundingClientRect()，每个动画帧只调用一次，即使没有任何变化。感觉很贵。我通常得到%15-%50 CPU的使用率
浏览 3提问于2016-10-25得票数 47
当元素进入视口时，我使用IntersectionObserver向元素添加和删除类。如果是这样的话，我认为这是IntersectionObserver的一个缺陷，因为如果您有一个比视图高10倍的元素，那么它将永远不会被计算为可见，除非您将阈值设置为10%或更低。var observer = new IntersectionObserver(function (entries) { varDepending on your resolution the Int
浏览 0提问于2019-09-04得票数 8
回答已采纳
当我试图在React中与TypeScript一起使用ResizeObserver时，我得到了错误：'ResizeObserver' only refers to a type, but is being我定义了以下接口，因为TypeScript不包含定义： interface ResizeObserver { unobserveHTMLObjectElement>(null);
const [width, s
浏览 64提问于2020-01-10得票数 9
回答已采纳
在这个视频中，为了调整图形的大小，创建了一个使用ResizeObserver的自定义钩子。= new ResizeObserver(entries => { setDimensions(entry.contentRect); }); return () => {
resizeObserver.
浏览 6提问于2020-09-23得票数 2
回答已采纳
我目前使用ResizeObserver来观察元素的大小，但我正在考虑使用一个油门(lodash的油门)来提高它的性能。const myResize = new ResizeObserver((entries) => {
const el = document.querySelector('#foo');
浏览 44提问于2021-10-06得票数 2
回答已采纳
以前，我使用了一个滚动解锁，只有当滚动停止时才加载图像，这在性能上有了很大的提高。 let timeoutLastEntities;
new IntersectionObserver((entries) => {
浏览 0提问于2017-04-03得票数 1
我应该在ResizeObserver之上使用IntersectonObserver吗？{ rootMargin: '0px 0px -100% 0px', }
const observer = new IntersectionObserver
浏览 5提问于2022-02-25得票数 0
我们的页面中有几个CustomElements，其中一些有一个相对于观察它们的视口的IntersectionObserver。这个数字可能会增加，因为设计师似乎喜欢交叉点动画。 这会导致性能问题吗？有一个观察所有元素的IntersectionObserver和多个只观察一个元素的IntersectionObservers哪个更好？
浏览 35提问于2019-04-26得票数 13
在我的应用程序中，我有一个div，其中包含一个画布元素，显示一个图像。应用程序还有一个侧边栏，可以通过单击按钮隐藏，所有其他元素都应该调整自身大小，以占用空的剩余空间。这就是我的div： height: inherit; margin-top: 25px;
position: ab
浏览 1提问于2019-08-15得票数 0
回答已采纳
对于从DOM中删除的元素，可能有一个IntersectionObserver(或任何其他类型)setIntersectionObserver(config:LazyConfig) let intersectionObserver = new IntersectionObserverfor (let entr
浏览 0提问于2017-12-22得票数 21
使用以下自定义的React与IntersectionObserver进行交互 const intersectionObserver= useRef<In
浏览 3提问于2020-08-12得票数 0
我正在运行一个混合PhoneGap应用程序(运行了几年，运行Cordova Android6.1.2，最近的9.0)；多年来，我们的第一个javascript错误一直有很大的差距但是，与在Google上发现的关于此错误的许多其他报告相比，我的问题的主要区别是在我的代码中的任何地方都有使用ResizeObserver的0个实例。在我的整个计算机中，唯一出现在任何地方的ResizeObserver实例就是一个随机的蒸汽文件。“这个错误的答案意味着Re
浏览 3提问于2020-08-30得票数 4
回答已采纳
我试图使用对等js功能，在这里我们创建对等点并使用相应的事件侦听器--即当对等点被创建、关闭、连接和其他东西时，我试图在事件侦听器中使用它，使其工作起来类似于服务。就像这样： private peer: Peer | null = null;
this.peer = new Peer();
// Some stuff done
this.emit("Peer&
浏览 3提问于2021-06-30得票数 2
回答已采纳
通过阅读Mozilla对IntersectionObserver的解释，我遇到了，这是IntersectionObserver的一个示例用例的一部分。本文创建IntersectionObserver的方式在我正在处理的项目的代码上下文中运行得很好，但我对IntersectionObserver如何继续工作感到有点困惑，尽管用于存储IntersectionObserver函数调用结束时，不应该将IntersectionObserver与observer变量一起垃圾收集吗？
浏览 4提问于2021-11-21得票数 0
1回答
浏览器下载图像的性能成本是多少？
、、、、
然而，仅使用这些信息进行下一个合理的步骤，当查看Time to Interactive或Time to First Interactive paint时，图像应该对web应用程序的性能没有影响。从我的经验来看，与“让它们在后台下载”相比，通过在图片繁重的页面上懒惰地加载图片(使用IntersectionObserver)，性能提高了2-4秒。在加载网页时，浏览器内部解码/绘制图像的哪些特定步骤会导致性能下降？哪些步骤从主线程获取资源？
浏览 0提问于2019-12-22得票数 0
2回答
因此，我创建了一个directory并使用了IntersectionObserver，并在该产品的HTML代码中引用了它。问题是，一旦用户滚动，它就会在移动网站上造成性能影响。EventEmitter<HTMLElement>(); private subject$ = new Subject<
浏览 29提问于2021-08-03得票数 2
回答已采纳
3回答
提供了大量示例，展示如何动态地将iframe的高度设置为其内容。这非常适合我。我现在遇到的问题是，内容可以在不触发onload的情况下改变大小(比如隐藏/可扩展的div)。
浏览 1提问于2010-12-22得票数 14
回答已采纳
云服务器
对象存储
ICP备案
云点播
实时音视频
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号