javascript - How can I process all the HTML tags in a document without blocking? -
i'm working on chrome extension gives users ability manipulate appearance of websites based on simple rules site content. problem have scan , classify every tag in document, potentially slow process. i'm looking way without blocking page rendering , slowing down user's experience much.
right content script looks this:
function init() { tagobserver = new mutationobserver(function(mutations, obs) { for(var i=0; i<mutations.length; ++i) { for(var j=0; j<mutations[i].addednodes.length; ++j) { var newtag = mutations[i].addednodes[j]; if (newtag.queryselectorall) { array.prototype.foreach.call( newtag.queryselectorall('*'), testtags); } } } }); array.prototype.foreach.call( document.queryselectorall('*'), testtags); tagobserver.observe(document.documentelement, { childlist: true, subtree: true }); } function testtags(tag) { sleep(5); tag.style.backgroundcolor = '#fff'; tag.style.color = '#fff'; } function sleep(ms) { var date = date.now(); var curdate = null; { curdate = date.now(); } while (curdate-date < ms); } init();
in case, testtags
placeholder function representing actual, possibly slow, classification code. if use this, slows down rendering of each page astronomically. how can pull out of rendering path possible keep page drawing fast enough average user? acceptable if tags take time classify, don't want wait until page done rendering before beginning modify anything.
Comments
Post a Comment