wilsonpage / jquery-fastdom Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin that wraps all DOM APIs with FastDom, preventing layout thrashing.
A jQuery plugin that wraps all DOM APIs with FastDom, preventing layout thrashing.
If using jQuery is this still recommended? What about other third party libs that modify DOM do they all need to be wrapped?
I am trying to use your jquery plugin to avoid maintenance by adding fastdom individually. Can you please update your this repo?
The function write that returns a closure for the write jquery functions does not return the this. This breaks dot chaining for jquery. You must return this in order to preserve dot chaining.
Thank you for providing this awesome jQuery Plugin!
Currently I'm struggling with IE10 which needs about 20 seconds to display a page - and I've had the hope fastdom can speed it up.
Unfortunately the page uses extensive jQuery manipulation and various jQuery UI Plugins - so just dropping in jquery-fastdom has not worked :(
That's why I've overhelmed the plugin a bit to support all jQuery API methods and act like jQuery would expect (return immediate results for .css('height') or .height() for example).
Unfortunately my changes did not speed up IE10 at all - I'm still stuck at 20seconds. Do you have any suggestions on further improvements?
Please note I've included an option "enabled" - so fastdom can temporarily be disabled for unsupported libraries like SlickGrid by using:
$.fastdom(false) / $.fastdom(true)
Please see here my modified plugin (feel free to put things into the official release if you like to):
(function($){
var opts = {
enabled: true
};
var sources = {
write: ['animate','addClass','after','append','appendTo','before','detach','empty','fadeIn','fadeOut','fadeTo','fadeToggle','insertAfter','insertBefore','prepend','prependTo','remove','removeAttr','removeClass','removeProp','replaceAll','replaceWith','scrollLeft','scrollTop','slideDown','slideToggle','slideUp','unwrap','wrap','wrapAll','wrapInner'],
read: ['hasClass'],
readWrite: ['attr','css','height','hide','html','innerHeight','innerWidth','offset','outerHeight','outerWidth','position','prop','show','text','toggle','toggleClass','val','width']
};
var targets = {
write: function($fn,name){
return function(){
var el = this;
var args = arguments;
if( opts.enabled ){
if( fastdom.batch.write.length && ['append','appendTo','before','insertAfter','insertBefore','prepend','prependTo'].indexOf(name) != -1 ){
fastdom.flush(fastdom.batch.write);
}
fastdom.write(function(){
$fn.apply(el,args);
});
return el;
} else {
return $fn.apply(el,args);
}
};
},
read: function($fn,name){
return function(){
var el = this;
var args = arguments;
if( fastdom.batch.write.length ){
fastdom.flush(fastdom.batch.write);
}
return $fn.apply(el,args);
};
},
readWrite: function($fn,name){
return function(){
var el = this;
var args = arguments;
if( !args.length || name.indexOf('toggle') != -1 || ['attr','css','prop'].indexOf(name) != -1 && args.length == 1 && $.type(args[0]) == 'string' ){
if( fastdom.batch.write.length ){
fastdom.flush(fastdom.batch.write);
}
return $fn.apply(el,args);
} else {
if( opts.enabled ){
fastdom.write(function(){
$fn.apply(el,args);
});
return el;
} else {
return $fn.apply(el,args);
}
}
};
}
};
$.each(sources,function(target,items){
$.each(items,function(i,name){
$.fn[name] = targets[target]($.fn[name],name);
});
});
$.fastdom = function(){
if( $.type(arguments[0]) == 'boolean' && !arguments[0] ){
opts.enabled = false;
if( fastdom.batch.write.length ){
fastdom.flush(fastdom.batch.write);
}
} else {
opts.enabled = true;
}
};
})(jQuery);
What about supporting $.fn.removeClass
, $.fn.toggleClass
and $.fn.css
?
P.S. and also $.fn.position
both from jQuery and jQuery.UI
I can't add fastdom in jquery.min.js, can you show examples how i can do that?
done is not a function:
if (done) done();
I've got this when I use jquery-fastdom. my jQuery version is 1.11.1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.