html - Efficient Javascript for DOM modifications -


say, i've got html file want process using javascript. example:

  • add dom elements, span or div wrappers.
  • change document styling bit, base font size, line-height, etc.
  • use hyphentor add ­ entities.

what efficient way this, i.e. i'd minimum amount of reflows.

the ideal case having js-code run before first layout. possible? know, it's bad idea execute expensive scripts before page has been displayed make page blank time , it's bad experience. however, i'm going need work offline , not issue project.

or, there's way dom modifications in 1 bunch, i.e. reflow triggered after alterations have finished?

there several ways. primary goal of them end causing single - or @ least few possible - reflows/repaints.

off-dom element

you can work elements without appending dom, , append once everything's set up.

the issue if code needs reference offset dimensions, since elements not yet in dom not have any.

var container = document.createelement('section'); //not in dom yet //do extensive work here prepare doc document.body.appendchild(container); //now go dom, causing single re-paint

doc fragment

a more formalised, , possible improved, variation on theme document fragments, bring performance benefit (apparently). they're second, separate dom has no display.

string

probably quickest of of these build document string. obvious implication can't use dom methods on it, if you're happy string-handling , regex'ing (not ideal on html, of course), worth considering.

finally, if speed of essence , have lot of computation or string-handling do, might want harness web workers. these can't talk dom directly, can outsource tasks them and, crucially, work asynchronously on separate thread.


Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

c++ - Accessing inactive union member and undefined behavior? -

i under impression accessing union member other last 1 set ub, can't seem find solid reference (other answers claiming it's ub without support standard). so, undefined behavior? the confusion c explicitly permits type-punning through union, whereas c++ ( c++11 ) has no such permission. c11 6.5.2.3 structure , union members 95) if member used read contents of union object not same member last used store value in object, appropriate part of object representation of value reinterpreted object representation in new type described in 6.2.6 (a process called ‘‘type punning’’). might trap representation. the situation c++: c++11 9.5 unions [class.union] in union, @ 1 of non-static data members can active @ time, is, value of @ 1 of non-static data members can stored in union @ time. c++ later has language permitting use of unions containing struct s common initial sequences; doesn't permit type-punning. to determine whether union type-punning is allowe...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more