Use Mutation Observers instead of Mutation Events for inserted elements in the threads on Chrome 18+ and other browsers once they support it. It is 330% faster to expand the 1200 replies sticky on /a/ using this method.

This commit is contained in:
Nicolas Stepien 2012-02-16 21:14:53 +01:00
parent c46dc8eab3
commit af34b16310
2 changed files with 58 additions and 34 deletions

View File

@ -3594,7 +3594,7 @@
return $.ready(Main.ready); return $.ready(Main.ready);
}, },
ready: function() { ready: function() {
var callback, form, node, nodes, _i, _j, _len, _len2, _ref; var MutationObserver, form, nodes, observer;
if (d.title === '4chan - 404') { if (d.title === '4chan - 404') {
redirect.init(); redirect.init();
return; return;
@ -3622,19 +3622,16 @@
} }
form = $('body > form'); form = $('body > form');
nodes = $$('.op, a + table', form); nodes = $$('.op, a + table', form);
_ref = g.callbacks; Main.node(nodes, true);
for (_i = 0, _len = _ref.length; _i < _len; _i++) { if (MutationObserver = window.WebKitMutationObserver || window.MozMutationObserver || window.OMutationObserver || window.MutationObserver) {
callback = _ref[_i]; observer = new MutationObserver(Main.observer);
try { return observer.observe(form, {
for (_j = 0, _len2 = nodes.length; _j < _len2; _j++) { childList: true,
node = nodes[_j]; subtree: true
callback(node); });
} } else {
} catch (err) { return $.on(form, 'DOMNodeInserted', Main.listener);
alert(err);
}
} }
return $.on(form, 'DOMNodeInserted', Main.node);
}, },
addStyle: function() { addStyle: function() {
$.off(d, 'DOMNodeInserted', Main.addStyle); $.off(d, 'DOMNodeInserted', Main.addStyle);
@ -3654,21 +3651,38 @@
return window.location = "https://raw.github.com/mayhemydg/4chan-x/" + version + "/4chan_x.user.js"; return window.location = "https://raw.github.com/mayhemydg/4chan-x/" + version + "/4chan_x.user.js";
} }
}, },
node: function(e) { node: function(nodes, notify) {
var callback, target, _i, _len, _ref, _results; var callback, node, _i, _j, _len, _len2, _ref;
target = e.target;
if (target.nodeName !== 'TABLE') return;
_ref = g.callbacks; _ref = g.callbacks;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) { for (_i = 0, _len = _ref.length; _i < _len; _i++) {
callback = _ref[_i]; callback = _ref[_i];
try { try {
_results.push(callback(target)); for (_j = 0, _len2 = nodes.length; _j < _len2; _j++) {
node = nodes[_j];
callback(node);
}
} catch (err) { } catch (err) {
if (notify) alert(err.message);
} }
} }
return _results; },
observer: function(mutations) {
var addedNode, mutation, nodes, _i, _j, _len, _len2, _ref;
nodes = [];
for (_i = 0, _len = mutations.length; _i < _len; _i++) {
mutation = mutations[_i];
_ref = mutation.addedNodes;
for (_j = 0, _len2 = _ref.length; _j < _len2; _j++) {
addedNode = _ref[_j];
if (addedNode.nodeName === 'TABLE') nodes.push(addedNode);
}
}
if (nodes.length) return Main.node(nodes);
},
listener: function(e) {
var target;
target = e.target;
if (target.nodeName === 'TABLE') return Main.node([target]);
}, },
css: '\ css: '\
/* dialog styling */\ /* dialog styling */\

View File

@ -2738,7 +2738,7 @@ imgExpand =
Main = Main =
init: -> init: ->
pathname = location.pathname[1..].split('/') pathname = location.pathname[1..].split '/'
[g.BOARD, temp] = pathname [g.BOARD, temp] = pathname
if temp is 'res' if temp is 'res'
g.REPLY = true g.REPLY = true
@ -2898,13 +2898,15 @@ Main =
form = $ 'body > form' form = $ 'body > form'
nodes = $$ '.op, a + table', form nodes = $$ '.op, a + table', form
for callback in g.callbacks Main.node nodes, true
try
for node in nodes if MutationObserver = window.WebKitMutationObserver or window.MozMutationObserver or window.OMutationObserver or window.MutationObserver
callback node observer = new MutationObserver Main.observer
catch err observer.observe form,
alert err childList: true
$.on form, 'DOMNodeInserted', Main.node subtree: true
else
$.on form, 'DOMNodeInserted', Main.listener
addStyle: -> addStyle: ->
$.off d, 'DOMNodeInserted', Main.addStyle $.off d, 'DOMNodeInserted', Main.addStyle
@ -2921,14 +2923,22 @@ Main =
else if version and version isnt VERSION and confirm 'An updated version of 4chan X is available, would you like to install it now?' else if version and version isnt VERSION and confirm 'An updated version of 4chan X is available, would you like to install it now?'
window.location = "https://raw.github.com/mayhemydg/4chan-x/#{version}/4chan_x.user.js" window.location = "https://raw.github.com/mayhemydg/4chan-x/#{version}/4chan_x.user.js"
node: (e) -> node: (nodes, notify) ->
{target} = e
return unless target.nodeName is 'TABLE'
for callback in g.callbacks for callback in g.callbacks
try try
callback target callback node for node in nodes
catch err catch err
#nothing alert err.message if notify
return
observer: (mutations) ->
nodes = []
for mutation in mutations
for addedNode in mutation.addedNodes
nodes.push addedNode if addedNode.nodeName is 'TABLE'
Main.node nodes if nodes.length
listener: (e) ->
{target} = e
Main.node [target] if target.nodeName is 'TABLE'
css: ' css: '
/* dialog styling */ /* dialog styling */