From 34f10e1b02e008bb1d0bbfccc4d866b09faff0e1 Mon Sep 17 00:00:00 2001 From: Carl Monnig Date: Wed, 2 Jan 2013 22:58:37 +0200 Subject: [PATCH 1/2] Batch DOM updates to improve speed with less reflows. --- js/script.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/js/script.js b/js/script.js index c199b6e..cef4f41 100755 --- a/js/script.js +++ b/js/script.js @@ -452,6 +452,7 @@ function deleteDownloadTemplates(top_elem, data) { } function refreshDownloadTemplates(top_elem, data) { var down_template = $('#download_' + top_elem + '_template').text(); + var new_items = []; deleteDownloadTemplates('#' + top_elem + '_downloads', data); for(var i = 0; i < data.length; i++) { var ctx = getTemplateCtx(data[i]); @@ -460,11 +461,13 @@ function refreshDownloadTemplates(top_elem, data) { updateDownloadTemplates(elem, ctx); } else { var item = Mustache.render(down_template, ctx); - $('#' + top_elem + '_downloads').prepend(item); + new_items.unshift(item); } } + if (new_items.length > 0) { + $('#' + top_elem + '_downloads').prepend(new_items); + } $('#' + top_elem + '_downloads').children('.hero-unit').remove(); - } function updateGraph(gid) { var elem = $('[data-gid=' + gid + ']'); From 3d32434640d1252f94492301132ec705f7b9f4bb Mon Sep 17 00:00:00 2001 From: Carl Monnig Date: Thu, 3 Jan 2013 19:47:38 +0200 Subject: [PATCH 2/2] Performance improvements for many downloads. --- index.html | 2 +- js/libs/lodash.underscore.min.js | 33 ++++++++++++++++++++++++++++++++ js/libs/underscore.js | 32 ------------------------------- js/script.js | 25 ++++++++++++------------ 4 files changed, 47 insertions(+), 45 deletions(-) create mode 100644 js/libs/lodash.underscore.min.js delete mode 100644 js/libs/underscore.js diff --git a/index.html b/index.html index 829e258..22e37c7 100755 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - + diff --git a/js/libs/lodash.underscore.min.js b/js/libs/lodash.underscore.min.js new file mode 100644 index 0000000..daba502 --- /dev/null +++ b/js/libs/lodash.underscore.min.js @@ -0,0 +1,33 @@ +/*! + Lo-Dash 1.0.0-rc.3 (Custom Build) lodash.com/license + Build: `lodash underscore -m -o ./lodash.underscore.min.js` + Underscore.js 1.4.3 underscorejs.org/LICENSE +*/ +;(function(e,t){function n(e){if(e&&typeof e=="object"&&e.__wrapped__)return e;if(!(this instanceof n))return new n(e);this.__wrapped__=e}function r(e,t){var n=e.b,r=t.b,e=e.a,t=t.a;if(e!==t){if(e>t||typeof e=="undefined")return 1;if(en?0:n);++rr&&(r=n,u=e)});else for(;++iu&&(u=e[i]);return u}function A(e,t){return k(e,t+"")}function O(e,t,n,r){var i=3>arguments.length,t=s(t,r,V);if(Ot(e)){var o=-1 +,u=e.length;for(i&&(n=e[++o]);++oarguments.length;if(typeof i!="number")var u=Mt(e),i=u.length;return t=s(t,r,V),C(e,function(r,s,a){s=u?u[--i]:--i,n=o?(o=!1,e[s]):t(n,e[s],s,a)}),n}function _(e,t,n){var r,t=s(t,n);if(Ot(e))for(var n=-1,i=e.length;++nn?lt(0,i+n):n||0)-1;else if(n)return r=j(e,t),e[r]===t?r:-1;for(;++r>>1,n(e[r])H(a,f))n&&a.push(f),u.push(r)}return u}function I(e,t){return wt||st&&2"']/g,Y=/['\n\r\t\u2028\u2029\\]/g,Z=Math.ceil,et=W.concat,tt=Math.floor,nt=z.hasOwnProperty,rt=W.push,it=z.toString,st=K.test(st=f.bind)&&st,ot=K.test(ot=Array.isArray)&&ot,ut=e.isFinite,at=e.isNaN,ft= +K.test(ft=Object.keys)&&ft,lt=Math.max,ct=Math.min,ht=Math.random,pt="[object Array]",dt="[object Boolean]",vt="[object Date]",mt="[object Number]",gt="[object Object]",yt="[object RegExp]",bt="[object String]",z=!!e.attachEvent,z=st&&!/\n|true/.test(st+z),wt=st&&!z,Et=(Et={0:1,length:1},W.splice.call(Et,0,1),Et[0]),St=arguments.constructor==Object,xt={"boolean":!1,"function":!0,object:!0,number:!1,string:!1,"undefined":!1},Tt={"\\":"\\","'":"'","\n":"n","\r":"r"," ":"t","\u2028":"u2028","\u2029" +:"u2029"};n.templateSettings={escape:/<%-([\s\S]+?)%>/g,evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,variable:""};var Nt=function(e,t,n){if(!e)return e;var t=t&&typeof n=="undefined"?t:s(t,n),r=e.length,n=-1;if(typeof r=="number"){for(;++n":">",'"':""","'":"'"},At=v(Lt),Ot=ot||function(e){return St&&e instanceof Array||it.call(e)==pt};g(/x/)&&(g=function(e){return e instanceof Function||"[object Function]"==it.call(e)});var Mt=ft?function(e){return y(e)?ft(e):[]}:h;n.after=function(e,t){return 1> +e?t():function(){if(1>--e)return t.apply(this,arguments)}},n.bind=I,n.bindAll=function(e){for(var t=arguments,n=1H(r,s,n)&&i.push(s)}return i},n.filter=T,n.flatten=P,n.forEach=C,n.functions=d,n.groupBy=function(e,t,n){var r={},t=s(t,n);return C(e,function(e,n,i){n=t(e,n,i),(nt.call(r,n)?r[n]:r[n]=[]).push(e)}),r},n.initial=function(e,t,n){if(!e)return[];var r=e.length;return f(e,0,ct(lt(0,r-(null==t||n?1:t||0)),r))},n.intersection=function(e){var t=arguments,n=t.length,r=-1,i=e?e.length:0,s=[];e:for(;++rH(s,o)){for(var u=n;--u;)if(0>H(t[u],o))continue e;s.push(o)}}return s},n.invert= +v,n.invoke=function(e,t){var n=f(arguments,2),r=typeof t=="function",i=[];return C(e,function(e){i.push((r?t:e[t]).apply(e,n))}),i},n.keys=Mt,n.map=k,n.max=L,n.memoize=function(e,t){var n={};return function(){var r=t?t.apply(this,arguments):arguments[0];return nt.call(n,r)?n[r]:n[r]=e.apply(this,arguments)}},n.min=function(e,t,n){var r=Infinity,i=-1,o=e?e.length:0,u=r;if(t||!Ot(e))t=s(t,n),Nt(e,function(e,n,i){n=t(e,n,i),nH(t,r,1)&&(n[r]=e)}),n},n.once=function(e){var t,n=!1;return function(){return n?t:(n=!0,t=e.apply(this,arguments),e=null,t)}},n.pairs=function(e){var t=[];return kt(e,function(e,n){t.push([n,e])}),t},n.pick=function(e){for(var t=0,n=et.apply(W,arguments),r=n.length,i={};++t=f?(clearTimeout(o),o=null,u=a,i=e.apply(s,r)):o||(o=setTimeout(n,f)),i}},n.times=function(e,t,n){for(var e=+e||0,r=-1,i=Array(e);++rH(arguments,i,1)&&r.push(i)}return r},n.wrap=function(e,t){return function(){var n=[e];return rt.apply(n,arguments),t.apply(this,n)}},n.zip=function(e){for(var t=-1,n=e?L(A(arguments,"length")):0,r=Array(n);++tn?lt(0,r+n):ct(n,r-1))+1);r--;)if(e[r]===t)return r; +return-1},n.mixin=R,n.noConflict=function(){return e._=$,this},n.random=function(e,t){return null==e&&null==t&&(t=1),e=+e||0,null==t&&(t=e,e=0),e+tt(ht()*((+t||0)-e+1))},n.reduce=O,n.reduceRight=M,n.result=function(e,t){var n=e?e[t]:null;return g(n)?e[t]():n},n.size=function(e){var t=e?e.length:0;return typeof t=="number"?t:Mt(e).length},n.some=_,n.sortedIndex=j,n.template=function(e,t,r){e||(e="");var r=p({},r,n.templateSettings),i=0,s="__p+='",u=r.variable;e.replace(RegExp((r.escape||Q).source+"|"+ +(r.interpolate||Q).source+"|"+(r.evaluate||Q).source+"|$","g"),function(t,n,r,u,a){s+=e.slice(i,a).replace(Y,o),s+=n?"'+_['escape']("+n+")+'":u?"';"+u+";__p+='":r?"'+((__t=("+r+"))==null?'':__t)+'":"",i=a+t.length}),s+="';\n",u||(u="obj",s="with("+u+"||{}){"+s+"}"),s="function("+u+"){var __t,__p='',__j=Array.prototype.join;function print(){__p+=__j.call(arguments,'')}"+s+"return __p}";try{var a=Function("_","return "+s)(n)}catch(f){throw f.source=s,f}return t?a(t):(a.source=s,a)},n.unescape=function( +e){return null==e?"":(e+"").replace(J,l)},n.uniqueId=function(e){var t=++X+"";return e?e+t:t},n.all=x,n.any=_,n.detect=N,n.foldl=O,n.foldr=M,n.include=S,n.inject=O,n.first=D,n.last=function(e,t,n){if(e){var r=e.length;return null==t||n?e[r-1]:f(e,lt(0,r-t))}},n.take=D,n.head=D,n.chain=function(e){return e=new n(e),e.__chain__=!0,e},n.VERSION="1.0.0-rc.3",R(n),n.prototype.chain=function(){return this.__chain__=!0,this},n.prototype.value=function(){return this.__wrapped__},Nt("pop push reverse shift sort splice unshift" +.split(" "),function(e){var t=W[e];n.prototype[e]=function(){var e=this.__wrapped__;return t.apply(e,arguments),Et&&e.length===0&&delete e[0],this}}),Nt(["concat","join","slice"],function(e){var t=W[e];n.prototype[e]=function(){var e=t.apply(this.__wrapped__,arguments);return this.__chain__&&(e=new n(e),e.__chain__=!0),e}}),U?typeof module=="object"&&module&&module.exports==U?(module.exports=n)._=n:U._=n:e._=n})(this); \ No newline at end of file diff --git a/js/libs/underscore.js b/js/libs/underscore.js deleted file mode 100644 index 5a0cb3b..0000000 --- a/js/libs/underscore.js +++ /dev/null @@ -1,32 +0,0 @@ -// Underscore.js 1.3.3 -// (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. -// Underscore is freely distributable under the MIT license. -// Portions of Underscore are inspired or borrowed from Prototype, -// Oliver Steele's Functional, and John Resig's Micro-Templating. -// For all details and documentation: -// http://documentcloud.github.com/underscore -(function(){function r(a,c,d){if(a===c)return 0!==a||1/a==1/c;if(null==a||null==c)return a===c;a._chain&&(a=a._wrapped);c._chain&&(c=c._wrapped);if(a.isEqual&&b.isFunction(a.isEqual))return a.isEqual(c);if(c.isEqual&&b.isFunction(c.isEqual))return c.isEqual(a);var e=l.call(a);if(e!=l.call(c))return!1;switch(e){case "[object String]":return a==""+c;case "[object Number]":return a!=+a?c!=+c:0==a?1/a==1/c:a==+c;case "[object Date]":case "[object Boolean]":return+a==+c;case "[object RegExp]":return a.source== -c.source&&a.global==c.global&&a.multiline==c.multiline&&a.ignoreCase==c.ignoreCase}if("object"!=typeof a||"object"!=typeof c)return!1;for(var f=d.length;f--;)if(d[f]==a)return!0;d.push(a);var f=0,g=!0;if("[object Array]"==e){if(f=a.length,g=f==c.length)for(;f--&&(g=f in a==f in c&&r(a[f],c[f],d)););}else{if("constructor"in a!="constructor"in c||a.constructor!=c.constructor)return!1;for(var h in a)if(b.has(a,h)&&(f++,!(g=b.has(c,h)&&r(a[h],c[h],d))))break;if(g){for(h in c)if(b.has(c,h)&&!f--)break; -g=!f}}d.pop();return g}var s=this,I=s._,o={},k=Array.prototype,p=Object.prototype,i=k.slice,J=k.unshift,l=p.toString,K=p.hasOwnProperty,y=k.forEach,z=k.map,A=k.reduce,B=k.reduceRight,C=k.filter,D=k.every,E=k.some,q=k.indexOf,F=k.lastIndexOf,p=Array.isArray,L=Object.keys,t=Function.prototype.bind,b=function(a){return new m(a)};"undefined"!==typeof exports?("undefined"!==typeof module&&module.exports&&(exports=module.exports=b),exports._=b):s._=b;b.VERSION="1.3.3";var j=b.each=b.forEach=function(a, -c,d){if(a!=null)if(y&&a.forEach===y)a.forEach(c,d);else if(a.length===+a.length)for(var e=0,f=a.length;e2;a==null&&(a=[]);if(A&& -a.reduce===A){e&&(c=b.bind(c,e));return f?a.reduce(c,d):a.reduce(c)}j(a,function(a,b,i){if(f)d=c.call(e,d,a,b,i);else{d=a;f=true}});if(!f)throw new TypeError("Reduce of empty array with no initial value");return d};b.reduceRight=b.foldr=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(B&&a.reduceRight===B){e&&(c=b.bind(c,e));return f?a.reduceRight(c,d):a.reduceRight(c)}var g=b.toArray(a).reverse();e&&!f&&(c=b.bind(c,e));return f?b.reduce(g,c,d,e):b.reduce(g,c)};b.find=b.detect=function(a, -c,b){var e;G(a,function(a,g,h){if(c.call(b,a,g,h)){e=a;return true}});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(C&&a.filter===C)return a.filter(c,b);j(a,function(a,g,h){c.call(b,a,g,h)&&(e[e.length]=a)});return e};b.reject=function(a,c,b){var e=[];if(a==null)return e;j(a,function(a,g,h){c.call(b,a,g,h)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=true;if(a==null)return e;if(D&&a.every===D)return a.every(c,b);j(a,function(a,g,h){if(!(e=e&&c.call(b, -a,g,h)))return o});return!!e};var G=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(E&&a.some===E)return a.some(c,d);j(a,function(a,b,h){if(e||(e=c.call(d,a,b,h)))return o});return!!e};b.include=b.contains=function(a,c){var b=false;if(a==null)return b;if(q&&a.indexOf===q)return a.indexOf(c)!=-1;return b=G(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(b.isFunction(c)?c||a:a[c]).apply(a,d)})};b.pluck= -function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a)&&a[0]===+a[0])return Math.max.apply(Math,a);if(!c&&b.isEmpty(a))return-Infinity;var e={computed:-Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a)&&a[0]===+a[0])return Math.min.apply(Math,a);if(!c&&b.isEmpty(a))return Infinity;var e={computed:Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;bd?1:0}),"value")};b.groupBy=function(a,c){var d={},e=b.isFunction(c)?c:function(a){return a[c]}; -j(a,function(a,b){var c=e(a,b);(d[c]||(d[c]=[])).push(a)});return d};b.sortedIndex=function(a,c,d){d||(d=b.identity);for(var e=0,f=a.length;e>1;d(a[g])=0})})};b.difference=function(a){var c=b.flatten(i.call(arguments,1),true);return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a= -i.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e=0;d--)b=[a[d].apply(this,b)];return b[0]}};b.after=function(a,b){return a<=0?b():function(){if(--a<1)return b.apply(this,arguments)}};b.keys=L||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[],d;for(d in a)b.has(a,d)&&(c[c.length]=d);return c};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&& -c.push(d);return c.sort()};b.extend=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]=b[d]});return a};b.pick=function(a){var c={};j(b.flatten(i.call(arguments,1)),function(b){b in a&&(c[b]=a[b])});return c};b.defaults=function(a){j(i.call(arguments,1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return!b.isObject(a)?a:b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,b){return r(a,b,[])};b.isEmpty= -function(a){if(a==null)return true;if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(b.has(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=p||function(a){return l.call(a)=="[object Array]"};b.isObject=function(a){return a===Object(a)};b.isArguments=function(a){return l.call(a)=="[object Arguments]"};b.isArguments(arguments)||(b.isArguments=function(a){return!(!a||!b.has(a,"callee"))});b.isFunction=function(a){return l.call(a)=="[object Function]"}; -b.isString=function(a){return l.call(a)=="[object String]"};b.isNumber=function(a){return l.call(a)=="[object Number]"};b.isFinite=function(a){return b.isNumber(a)&&isFinite(a)};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===true||a===false||l.call(a)=="[object Boolean]"};b.isDate=function(a){return l.call(a)=="[object Date]"};b.isRegExp=function(a){return l.call(a)=="[object RegExp]"};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.has=function(a, -b){return K.call(a,b)};b.noConflict=function(){s._=I;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")};b.result=function(a,c){if(a==null)return null;var d=a[c];return b.isFunction(d)?d.call(a):d};b.mixin=function(a){j(b.functions(a),function(c){M(c,b[c]=a[c])})};var N=0;b.uniqueId= -function(a){var b=N++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var u=/.^/,n={"\\":"\\","'":"'",r:"\r",n:"\n",t:"\t",u2028:"\u2028",u2029:"\u2029"},v;for(v in n)n[n[v]]=v;var O=/\\|'|\r|\n|\t|\u2028|\u2029/g,P=/\\(\\|'|r|n|t|u2028|u2029)/g,w=function(a){return a.replace(P,function(a,b){return n[b]})};b.template=function(a,c,d){d=b.defaults(d||{},b.templateSettings);a="__p+='"+a.replace(O,function(a){return"\\"+n[a]}).replace(d.escape|| -u,function(a,b){return"'+\n_.escape("+w(b)+")+\n'"}).replace(d.interpolate||u,function(a,b){return"'+\n("+w(b)+")+\n'"}).replace(d.evaluate||u,function(a,b){return"';\n"+w(b)+"\n;__p+='"})+"';\n";d.variable||(a="with(obj||{}){\n"+a+"}\n");var a="var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n"+a+"return __p;\n",e=new Function(d.variable||"obj","_",a);if(c)return e(c,b);c=function(a){return e.call(this,a,b)};c.source="function("+(d.variable||"obj")+"){\n"+a+"}";return c}; -b.chain=function(a){return b(a).chain()};var m=function(a){this._wrapped=a};b.prototype=m.prototype;var x=function(a,c){return c?b(a).chain():a},M=function(a,c){m.prototype[a]=function(){var a=i.call(arguments);J.call(a,this._wrapped);return x(c.apply(b,a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];m.prototype[a]=function(){var d=this._wrapped;b.apply(d,arguments);var e=d.length;(a=="shift"||a=="splice")&&e===0&&delete d[0];return x(d, -this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];m.prototype[a]=function(){return x(b.apply(this._wrapped,arguments),this._chain)}});m.prototype.chain=function(){this._chain=true;return this};m.prototype.value=function(){return this._wrapped}}).call(this); diff --git a/js/script.js b/js/script.js index cef4f41..2ce074a 100755 --- a/js/script.js +++ b/js/script.js @@ -423,13 +423,12 @@ function updateDownloadTemplates(elem, ctx) { x += dx; }); } -function deleteDownloadTemplates(top_elem, data) { +function deleteDownloadTemplates($top_elem, data) { if(!data) { graphData = []; - $(top_elem).html(""); - } - else { - var elems = $(top_elem).find('[data-gid]'); + $top_elem.html(""); + } else { + var elems = $top_elem.find('[data-gid]'); for(var i = 0; i < elems.length; i++) { var elem = $(elems[i]); var gid = elem.attr('data-gid').toString(); @@ -451,23 +450,25 @@ function deleteDownloadTemplates(top_elem, data) { } } function refreshDownloadTemplates(top_elem, data) { - var down_template = $('#download_' + top_elem + '_template').text(); - var new_items = []; - deleteDownloadTemplates('#' + top_elem + '_downloads', data); + var down_template = $('#download_' + top_elem + '_template').text(), + new_items = [], + $top_elem = $('#' + top_elem + '_downloads'); + + deleteDownloadTemplates($top_elem, data); for(var i = 0; i < data.length; i++) { var ctx = getTemplateCtx(data[i]); - var elem = $('[data-gid=' + ctx.gid + ']'); + var elem = $top_elem.find('div.download_item[data-gid=' + ctx.gid + ']'); if(elem.length) { updateDownloadTemplates(elem, ctx); } else { var item = Mustache.render(down_template, ctx); - new_items.unshift(item); + new_items.splice(0, 0, item); //prepend to array using splice (unshift method may not be supported) } } if (new_items.length > 0) { - $('#' + top_elem + '_downloads').prepend(new_items); + $top_elem.prepend(new_items); } - $('#' + top_elem + '_downloads').children('.hero-unit').remove(); + $top_elem.children('.hero-unit').remove(); } function updateGraph(gid) { var elem = $('[data-gid=' + gid + ']');