DOMNodeInserted or hashchange

Question

I am trying to write a JavaScript script that overlays on top of a Facebook page. It uses DOMContentLoaded to determine the loading of content, and then adds some additional material. However, since Facebook does not reload the page when it jumps to a new page (it simply uses AJAX), the DOMContentLoaded handler does not start again, although there are new things that can be viewed.

In any case, in order to detect the changes, I thought about using onhashchange, since Facebook used to change the hash page, but in Firefox 4 (I need to support Firefox 3 and later, but no other browsers), Facebook does not change the hash anymore and in pre-Firefox 3.6 there is no onhashchange.

I was thinking about using DOMNodeInserted, but would this really slow down the page? (I really can't slow this script down.)

Answer 1

For lightweight pages, it usually has no noticeable effect. However, on bulky pages (I tried this in gmail) it makes it really very slow that I cannot even compose a message smoothly. And this event was added to a very simple span element in which there was only one link. Events such as DOMNodeInserted and DOMSubTreeModified are real show stops.

UPDATE: for anyone trying to find the answer to this question, note that these DOMNodeInserted (or DOMSubtreeModified) methods did have performance issues, so according to the new ECMA specifications, this is a much faster listener: MutationObserver to perform the same action ( and more).

https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Answer 2

you can track the windows.history object, see the following answer on how facebook uses it to refresh pages: Redirect the page without refreshing (Facebook photo style)