TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Faster than jQuery(document).ready() - Wait Until Exists

64 点作者 dous超过 12 年前

11 条评论

Vekz超过 12 年前
Good Idea. Unfortunately the underlying technique the author has used to achieve this (DOM mutation events) is flawed, deprecated and non-optimal.<p><a href="https://developer.mozilla.org/en-US/docs/DOM/Mutation_events" rel="nofollow">https://developer.mozilla.org/en-US/docs/DOM/Mutation_events</a><p>"Adding DOM mutation listeners to a document profoundly degrades the performance of further DOM modifications to that document (making them 1.5 - 7 times slower!). Moreover, removing the listeners does not reverse the damage."<p>Using the modern DOM mutation observers may be a better solution.
评论 #4573516 未加载
评论 #4571513 未加载
jacobr超过 12 年前
What people need to stop doing is to wrap their entire application in $(doc).ready().<p>Just as an example, you can initialize your Backbone Models and start sending out XHR's without worrying about the DOM.
kwamenum86超过 12 年前
Don't use this. Mutation events are insanely expensive.
mistercow超过 12 年前
This is very cool, and would definitely be useful whenever you don't need to know much about layout or overall page state before your code starts running. Here's some feedback:<p>I worry about the idea of waiting until late-appearing elements show up if you're selecting on the id. It's tricky to use that feature correctly because ids are globally unique. To handle ids sanely in flexible code, you have to automatically generate them (using, say underscore's uniqueId). Then you pass them around so your code is all talking about the same element. Yuck. At that point, we might as well pass around callbacks.<p>So you could solve most of that if you let waitUntilExists work for class selectors too. Then the user would just refer to it by the context, passing "itself" as the last parameter.<p>Which brings me to my last point of feedback: why "itself"? Seems to me that it would make more sense to just have the element be the default context if no last parameter is provided (or if it's undefined).
jdavid超过 12 年前
If you don't wait for the DOM to load, it really can make it hard to alter parts of it, and it can cause odd problems that are hard to debug because it creates timing inconsistencies.<p>I'd much rather see a small DOM, so the ready event can fire quickly than do something like this.<p>For an extension I wrote which adds interface elements to the Facebook timeline, I needed a custom solution to monitor when parts of the dom were changing, since facebook implements infinite scroll. In this case I couldn't use mutation even if I wanted to because of the scoping of chrome extensions.<p>Since the facebook implementation does a lot of work to render infinite scroll quickly i needed something fast, and lightweight. for this i choose a pattern that locates new dom elements on an interval, appends a class, and then triggers a new event, which then looks for that class ( which is indexed by the browser ) and then does a foreach on each of those new elements only.<p>I found setting the interval to 100ms was a good fit on facebook, as it's generally the amount of time that a user will take to notice a change. I could have set it lower, to 50ms, 20ms, or even lower, but i found that it caused too much blocking. in many cases the DOM and javascript both need access to the threads and if you have intervals running on too small of an interval, like 5 seconds in this library you are likely going to block the dom from rendering quickly. also, it's unlikely that the browser will actually fire something at 5ms precision.<p>if you are going to follow a pattern like this i would advise you to use something in the 25ms+ range for your interval and also make sure that your interval script does not cause an invalidation on your browser elements. on a second async call you can then safely alter each element which should assure that you don't have any blocking behaviors.
moonboots超过 12 年前
A simpler method is adding a blocking script tag immediately below the DOM element.
评论 #4571408 未加载
mmuro超过 12 年前
.ready() is actually pretty smart and a lot faster than most people give it credit for.
评论 #4572287 未加载
darklajid超过 12 年前
Previously: <a href="http://news.ycombinator.com/item?id=2801835" rel="nofollow">http://news.ycombinator.com/item?id=2801835</a>
2bit超过 12 年前
Same functionality but for YUI: <a href="http://yuilibrary.com/gallery/show/event-inserted" rel="nofollow">http://yuilibrary.com/gallery/show/event-inserted</a><p>Uses CSS3 Animation if available, otherwise falls back to DOMNodeInserted.
awschmitz超过 12 年前
Or you could use the built-in setInterval() function to poll for the DOM element and not have to worry about attaching an event handler to a deprecated event. It's expensive, but will only happen in between the time that this code is interpreted and the DOM element loads. And you could easily write something to check for timeout in case is takes too long.<p>var intID = setInterval(function() { if($("myDOMElement").length || checkForTimeOut()) { clearInterval(intID); doSomething(); } }, 100);<p>...if it starts lagging just increase the interval time (that last integer).
chucknibbleston超过 12 年前
I bet that setting an interval to check for the specific node is actually more performant than using the mutation event (which as @Vekz pointed out, slows down the whole DOM)...