当 DOM 元素在屏幕外渲染时，浏览器会执行哪些优化? [英] What optimizations does a browser perform when a DOM element is being rendered off screen?

问题描述

我控制在另一个域上呈现的 iframe.是否有明确的方法来判断此 iframe 是在父页面的折叠上方还是下方呈现?显然，由于同源策略限制，我无法访问父DOM.

I control an iframe being rendered on another domain. Is there a clear way of telling whether this iframe is being rendered above or below the fold on the parent page? Obviously, I can't access the parent DOM because of the same origin policy restriction.

例如，我尝试测量 canvas 或 VML 标签上的渲染速度，希望当标签不在屏幕上时它会更快.这不起作用 - 没有明显的速度差异.DOM 操作同上 - 似乎没有办法区分折叠下方或上方的回流/重绘操作.

For example, I tried measuring the speed of rendering on a canvas or VML tag, hoping it would be faster when the tag isn't on screen. This didn't work - there was no discernable speed difference. Ditto for DOM manipulation - there doesn't seem to be a way to differentiate between reflow/repaint operations below or above the fold.

闪光灯呢?我没有太多经验，但是可以检查浏览器呈现 Flash 操作的速度吗?或者 Flash 是否有任何 DOM 标准之外的可见"事件?

What about flash? I don't have much experience, but could one check how quickly a browser renders flash operations? Or does flash have any 'onvisible' events outside of the DOM standard?

推荐答案

这确实因浏览器而异，因为不同的浏览器与 Flash 插件的交互方式不同.我能找到的最准确的解释是在旧的 连接像素帖子.

This really varies by-browser, as different browsers interact with the Flash plugin differently. The most precise explanation I could find is on an old connectedpixel post.

在撰写本文时，Firefox 并没有初始化 flash 对象，直到它在页面上滚动.另一方面，IE 在滚动到视图中时调整了 Stage 元素的大小.没有给出浏览器、Flash 或操作系统的版本，因此自那次测试以来这可能已经发生了变化.

At the point of writing, Firefox didn't init a flash object until it was scrolled on page. IE, on the other hand, resized the Stage element when it scrolled into view. No versions of browser, Flash, or OS are given, so this may have changed since that test.

简而言之，我需要制作一个 flash 对象并使用它，观察各种事件.

In short, I need to make a flash object and play with it, watching for various events.

这篇关于当 DOM 元素在屏幕外渲染时，浏览器会执行哪些优化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！