Find it kind of interesting, thought sharing would be nice. Had a discussion with a colleague about performance diff. between cached jQuery and non-cached jQuery DOM manipulation. Added vanillaJS DOM manipulation to the comparasion.
4 plus ones
Shared publicly•View activity
- very interesting indeed !Mar 7, 2013
- I found this article, with some explanations behind jQuery .width method:
.width supports box-sizing since jQuery 1.8
It says: "Fortunately, most code doesn’t use .width() enough times for this to be noticeable" [... ] " There is a very easy way to avoid this performance penalty if it does impact your code. Simply use .css("width") instead of .width() to make it clear you want to get or set the actual width of the element as specified by the CSS.
I added that to the test, is true that the performance gets better.
.css() method does a lot of things. (Supports hyphenated and camelCase attributes, supports numbers, so jQuery adds the suffix 'px', supports css Hooks, etc, etc ..)
See the internals of .style method in jQuery
https://github.com/jquery/jquery/blob/master/src/css.js#L187Mar 7, 2013
- Same applies for .heightMar 7, 2013
- .css() is a nice addition, thanks +David Corbacho.Mar 7, 2013
- Really impressed by Safaris performance: http://jsperf.com/jquery-cache-no-cache/8Mar 11, 2013
Add a comment...