diff options
Diffstat (limited to 'files/zh-cn/web/events/mozafterpaint/index.html')
| -rw-r--r-- | files/zh-cn/web/events/mozafterpaint/index.html | 179 |
1 files changed, 0 insertions, 179 deletions
diff --git a/files/zh-cn/web/events/mozafterpaint/index.html b/files/zh-cn/web/events/mozafterpaint/index.html deleted file mode 100644 index fc3b766b45..0000000000 --- a/files/zh-cn/web/events/mozafterpaint/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: MozAfterPaint -slug: Web/Events/MozAfterPaint -translation_of: Archive/Add-ons/Events/MozAfterPaint ---- -<p><code>MozAfterPaint事件在页面呈现给用户屏幕时触发，并提供页面重绘的信息，主要应用于页面优化审查。</code></p> - -<p><code>注意</code>MozAfterPaint并非在页面重绘时立即触发，而是在重绘并合成后发生。这意味着有部分内容触发时已经呈现给客户。</p> - -<div class="note"><strong>Note:</strong> - -<ul> - <li>This event is available to add-ons but since Firefox 4 it is <strong>not</strong> available to web pages by default. It can only be made available to web pages by setting the preference <code>dom.send_after_paint_to_content</code> to <code>true</code>. (源于<strong> </strong><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=539356"><strong>Bug 539356</strong></a>, 这个属性设置为<code>true</code>, 所有的<code>MozAfterPaint</code> 时间都被发动到web页面. 更多信息请查看 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=829330"><strong>Bug 829330</strong></a>)</li> - <li>Web pages that want to take an action after a repaint of the page can use <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> with a callback that sets a timeout of zero to then call the code that takes the desired post-repaint action.</li> - <li>If the handler for this event does anything that triggers repainting (such as changing the style of an element), an infinite loop will probably be triggered.</li> - <li>Repainting of areas scrolled outside the viewport is reported, but repainting of areas scrolled outside <code>overflow:auto</code> elements and the like is not.</li> - <li>Repainting in windowed plug-ins (which is most plug-ins on Windows and GTK) is not reported.</li> -</ul> -</div> - -<h2 id="General_info">General info</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><em>Add-ons specific</em></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">window</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><code>boolean</code></td> - <td>Does the event normally bubble?</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><code>boolean</code></td> - <td>Is it possible to cancel the event?</td> - </tr> - <tr> - <td><code>boundingClientRect</code></td> - <td>clientRect</td> - <td>The equivalent of {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} for the repainted zone. Read only.</td> - </tr> - <tr> - <td><code>clientRects</code></td> - <td>clientRectList</td> - <td>The equivalent of {{domxref("Element.getClientRects", "getClientRects()")}} for the repainted zone. Read only.</td> - </tr> - <tr> - <td><code>transactionId</code></td> - <td><code>uint64_t</code></td> - <td>The transaction id of the composition that just occurred to present something to the user. Read only.</td> - </tr> - </tbody> -</table> - -<h2 id="Example">Example</h2> - -<p>This example highlights elements that get repainted while hovering the document with a cursor.</p> - -<pre class="brush: js">(function(){ - var store = []; - - // every repaint will be logged in store - window.addEventListener("MozAfterPaint", log, false); - - if ( document.body ) - bind(); - else - window.addEventListener("load", bind, false); - - function log(e){ - store.push( [(new Date).getTime(), e.clientRects] ); - } - - function bind(){ - // clicking anywhere on the document will prevent other repaint to be logged - // as well as display the visual "repaint heatmap" - document.body.addEventListener("click", function onClick(){ - window.removeEventListener("MozAfterPaint", log, false); - - for ( var pos = 0; pos < store.length; pos++ ) { - var rects = store[pos][1]; - - for ( var i = 0; i < rects.length; i++ ) { - // will simply "draw" semi-transparent red divs where - // repaints where recorded - var rect = rects[i]; - var div = document.createElement("div"); - - with (div.style) { - background = "red"; - opacity = "0.1"; - position = "absolute"; - top = rect.top + "px"; - left = rect.left + "px"; - width = (rect.right - rect.left) + "px"; - height = (rect.bottom - rect.top) + "px"; - } - - document.body.appendChild( div ); - } - } - - document.body.removeEventListener("click", onClick, false); - }, false); - } -})(); -</pre> - -<p>This example is for measuring how long something took to paint to the user.</p> - -<pre class="brush: js">// Suppose we want to measure how long it takes to paint the -// next frame after a click event is fired on element "target". - -let winUtils = window.QueryInterface(Ci.nsIInterfaceRequestor) - .getInterface(Ci.nsIDOMWindowUtils); - -// The last transaction id is the last id that was sent to the -// compositor before our script started to execute. -let lastTransactionId = winUtils.lastTransactionId; -let start = window.performance.now(); - -// Set up our MozAfterPaint listener, but we only care about -// MozAfterPaint events where the transaction id is GREATER -// than lastTransactionId. This is to account for the possibility -// that a composite is underway at the time this script is running. -addEventListener("MozAfterPaint", function onPaint(event) { - if (event.transactionId > lastTransactionId) { - // Since the transaction id is greater than the last transaction - // id, that means we're safe to assume that whatever effect that - // clicking on the "target" element was supposed to have, if the - // change should have been instantaneous, then it has been presented - // to the user. - let finish = window.performance.now(); - alert(`Time to present: ${finish - start}ms`); - removeEventListener("MozAfterPaint", onPaint); - } -}); - -document.getElementById("target").click(); - -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMWindowUtils#isMozAfterPaintPendingen-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMWindowUtils#isMozAfterPaintPending">nsIDOMWindowUtils.isMozAfterPaintPending</a></li> -</ul> |