🚖 🛕 🛎️ खुद को Gzip: स्क्रिप्ट 20% बेहतर सेक 👈🏾 📡 🏰

यदि आप क्लोजर कंपाइलर , YUI कंप्रेसर , या कुछ और द्वारा संकुचित स्क्रिप्ट देखते हैं, तो आप डुप्लिकेट कुंजियों के अंतहीन तार देख सकते हैं: .prototype

, .length

, offsetParent

और इसी तरह। आइए एक उदाहरण के रूप में jQuery UI सॉर्टेबल प्लगइन का उपयोग करके उनसे छुटकारा पाने का प्रयास करें। मैं तुरंत कहूंगा कि हम gzip को पार नहीं कर सकते हैं, लेकिन जब यह हाथ में नहीं है या आप इसका उपयोग नहीं कर सकते हैं (उदाहरण के लिए, 10K अतिरिक्त प्रतियोगिता में), तो यह संपीड़न तकनीक बहुत उपयोगी हो सकती है।

चलो jQuery यूआई बंडल में सबसे प्रभावशाली में से एक के रूप में jquery.ui.sortable.js फ़ाइल संस्करण 1.8.2 लेते हैं। स्रोत कोड का वजन 38.5 KB है, जो क्लोजर कंपाइलर द्वारा संकुचित है - 23.1 KB, gzip में - 5.71 KB है। स्क्रीन को अव्यवस्थित नहीं करने के लिए, हम कुछ विशेषता विधि का चयन करेंगे और कल्पना करेंगे कि यह एक अलग प्लगइन है । मुझे _mouseCapture()

पसंद आया:

/ *!
* स्रोत कोड
* /
( फ़ंक्शन ($) {
वर
_mouseCapture = function ( घटना , ओवरराइडहैंडल) {
अगर ( यह। रूपांतरण) {
झूठे लौटना ;
}
if ( यह .options.disabled) यह .options.type == 'static' ) गलत है ?
// हमें पहले एक बार आइटम डेटा को रिफ्रेश करना होगा
यह ._refreshItems ( घटना );
// पता लगाएं कि क्या क्लिक किया गया नोड (या उसके माता-पिता में से एक) इस में एक वास्तविक आइटम है
var currentItem = null , self = this , nodes = $ ( event .get) .parents ()। प्रत्येक ( फंक्शन ) ({)
अगर ($ .data ( यह , 'क्रमबद्ध-आइटम' ) == स्व) {
currentItem = $ ( यह );
झूठे लौटना ;
}
});
if ($ .data ( इवेंट .target, 'Sortable-item' ) == स्वयं) currentItem = $ ( इवेंट .target);
अगर (currentItem) झूठे लौटते हैं ;
अगर ( यह .options.handle && !! ओवरराइडहैंडल) {
var मान्यHandle = false ;
$ ( यह .options.handle, currentItem) .find ( "*" ) .andSelf (); प्रत्येक ( फ़ंक्शन () { if ( यह = ईवेंट .target) validHandle = true ;});
अगर (मान्य है) झूठी वापसी ;
}
this। currentItem = currentItem;
यह ._removeCurrentsFromItems ();
सच लौटना ;
};
}) (jQuery);

भ्रमित न होने के लिए, हम इसे एक परीक्षण प्लगइन, और संपूर्ण सॉर्टेबल - मूल एक कहेंगे। टेस्ट प्लगइन का वजन लगभग 1 KB होता है, संकुचित रूप में 576 बाइट्स, गज़िप 391 बाइट्स में।

/*! * * , 576 */ ( function (d){ var _mouseCapture= function (a,b){ if ( this .reverting) return false ; if ( this .options.disabled|| this .options.type== "static" ) return false ; this ._refreshItems(a); var c= null ,e= this ;d(a.target).parents().each( function (){ if (d.data( this , "sortable-item" )==e){c=d( this ); return false }}); if (d.data(a.target, "sortable-item" )==e)c=d(a.target); if (!c) return false ; if ( this .options.handle&&!b){ var f= false ;d( this .options.handle,c).find( "*" ).andSelf().each( function (){ if ( this ==a.target)f= true }); if (!f) return false } this .currentItem=c; this ._removeCurrentsFromItems(); return true }})(jQuery);

`this`

→ `self`

सबसे पहले, इस के सर्वव्यापी और अचूक अभिव्यक्ति से छुटकारा पाएं। हमारे मूल प्लगइन में, इसका उपयोग 587 से कम समय में नहीं किया जाता है (जो 2.3 केबी या कोड का 6% है)। फ़ंक्शन की शुरुआत में स्थानीय चर self

जोड़ें:

var self = this ; 

अब हम this

फ़ंक्शन के शरीर में हर जगह self

साथ प्रतिस्थापित करते self

और संपीड़न परिणामों को देखते हैं।

यह था:

this .currentItem=e; this ._removeCurrentsFromItems();

यह बन गया:

d.currentItem=e;d._removeCurrentsFromItems();

पूरे परीक्षण प्लगइन:

/*! * this > self * YUI Compressor, 552 */ ( function (b){ var a= function (f,g){ var d= this ; if (d.reverting){ return false } if (d.options.disabled||d.options.type== "static" ){ return false }d._refreshItems(f); var e= null ,c=b(f.target).parents().each( function (){ if (b.data( this , "sortable-item" )==d){e=b( this ); return false }}); if (b.data(f.target, "sortable-item" )==d){e=b(f.target)} if (!e){ return false } if (d.options.handle&&!g){ var h= false ;b(d.options.handle,e).find( "*" ).andSelf().each( function (){ if ( this ==f.target){h= true }}); if (!h){ return false }}d.currentItem=e;d._removeCurrentsFromItems(); return true }})(jQuery);

बुरा नहीं है! वैसे, लाइन 19 पर इस पद्धति में पहले से ही self = this

घोषणा बनाई गई फ़ंक्शन के संदर्भ को पारित करने के लिए थी, लेकिन किसी कारण से इसका उपयोग अनुकूलन के लिए नहीं किया गया था। यहां हमने शुरुआत में ही यह घोषणा कर दी थी, और एक अन्य फ़ंक्शन में हम जोड़ सकते हैं, अतिरिक्त कुछ वर्णों को भुगतान करेंगे यदि कम से कम 4 this

फ़ंक्शन में उपयोग किए जाते हैं (और उनमें से 70 हैं)।

कुंजी और तार

अब शेष कोड को ध्यान से देखें। दोहराया अभिव्यक्ति options

, target

, data

, "sortable-item"

और अन्य स्पष्ट रूप से दिखाई देते हैं। उनमें से अधिकांश वस्तुओं या तारों के गुणों के नाम हैं, कुछ मूल प्लगइन में 50-60 बार पाए जाते हैं। कंप्रेशर्स में, केवल क्लोजर कंपाइलर इन तत्वों (छोटे लोगों को नाम बदलकर) को उन्नत मोड में संपीड़ित कर सकता है, लेकिन यहां हम उनके स्थानों में लगभग सभी गुणों का निरीक्षण करते हैं। सबसे अधिक संभावना है, जब पुस्तकालय को संकलित करते हैं, तो बाहरी, अतुलनीय नामों की एक विस्तृत सूची दी गई थी। इस स्थिति को ठीक करने की स्वाभाविक इच्छा है, क्योंकि अनुकूलन की विधि भाषा सिंटैक्स द्वारा ही संकेतित होती है। चलो अक्सर उपयोग की जाने वाली कुंजियाँ स्थानीय चर बनाते हैं:

var a = { options: { visible: true , mess: 'hi' } };

1:

if (a.options.visible) { alert(a.options.mess); a.options.visible = false ; } 2: var o = 'options' , v = 'visible' ; if (a[o][v]) { alert(a[o].mess); a[o][v] = false ; }

दूसरे विकल्प में, हमें दो के बजाय केवल एक बार visible

आवश्यकता है, और तीन के बजाय एक बार options

। 40-किलोबाइट प्लग-इन के पैमाने पर, और यहां तक कि पूरे एप्लिकेशन के और भी अधिक, यह कोड आकार में एक ठोस लाभ देता है (लेकिन समझ में नहीं)।

आप कोड में अभिव्यक्तियों की आवृत्ति निर्धारित करने के लिए किसी भी भाषा में एक छोटी सी स्क्रिप्ट लिख सकते हैं और उन्हें चर के साथ स्वचालित रूप से बदल सकते हैं। उदाहरण के लिए, इस तरह के एक नियमित अभिव्यक्ति द्वारा: /((\')|(\")|\.)\b([a-z_][\w-]+\w)\b(?(2)\')(?(3)\")/i

स्रोत प्लगइन के लिए, परीक्षण प्लगइन के लिए 175 प्रतिस्थापन प्राप्त हुए, 15:

/ *!
* इसे बदलें> स्व
* चाबियाँ और तार की जगह
* /
( फ़ंक्शन ($) {
वर
_reverting = ' reverting ' , // 3
_options = 'विकल्प' , // 51
_disabled = 'अक्षम' , // 4
_type = 'type' , // 2
_static = 'static' , // 2
__refreshItems = '_refreshItems' , // 2
_target = 'target' , // 4
_परि = = 'माता-पिता' , // 2
_each = 'प्रत्येक' , // 5
_दता = 'डेटा' , // 5
_sortable_item = ' सॉर्टेबल -आइटम' , // 6
_हंद = 'संभाल' , // 2
_find = 'खोज' , // 2
_currentItem = 'currentItem' , // 52
FALSE =! १, // ३०
TRUE =! ०, // ११
_mouseCapture = function ( घटना , ओवरराइडहैंडल) {
वर
स्व = यह ;
अगर (स्वयं [_reverting]) {
वापसी FALSE;
}
if (self [_options] [_ विकलांग] || self [_options] [_ type] == _static) वापसी ALAL;
आत्म [__ ताज़ा यह] ( घटना );
var currentItem = null , nodes = $ ( घटना [_target]) [_ माता-पिता] () [_ प्रत्येक] ( फ़ंक्शन () {
अगर ($ [_ डेटा] ( यह , _sortable_item) == स्वयं) {
currentItem = $ ( यह );
वापसी FALSE;
}
});
if ($ [_ डेटा] ( घटना [_target], _sortable_item) == स्वयं) currentItem = $ ( घटना [_target]);
अगर (currentItem) वापसी FALSE;
अगर (स्वयं [_options] [_ हैंडल] &&! ओवरराइडहैंडल) {
var मान्यहैंडल = FALSE;
$ (स्वयं [_options] [_ handle], currentItem) [_ find] ( "*" ) .andSelf () [_ प्रत्येक] ( फ़ंक्शन () { if ( यह = घटना [_target]) validHandh = TRUE;});
अगर (वैध है) FALSE;
}
आत्म [_currentItem] = currentItem;
self._removeCurrentsFromItems ();
TRUE लौटाओ;
};
}) (jQuery);

घोषित चर बोझिल लग रहे हैं, लेकिन यह मत भूलो कि मूल प्लगइन के कम से कम सभी तरीकों से यह आम होगा, लेकिन सिद्धांत रूप में, आप पूरे आवेदन के लिए नामों की एक सामान्य घोषणा कर सकते हैं। "गतिविधि का क्षेत्र" जितना बड़ा होगा, उतना अधिक प्रभावी नाम संपीड़न काम करेगा, क्योंकि उनमें से प्रत्येक को केवल एक बार मॉड्यूल की शुरुआत में इंगित किया जाता है, और बाद में हर जगह इसके एक या दो-अक्षर प्रतिनिधित्व द्वारा प्रतिस्थापित किया जाता है। संकुचित रूप में, परीक्षण प्लगइन बहुत अच्छा लगता है:

/ *!
* इसे बदलें> स्व
* चाबियाँ और तार की जगह
* YUI कंप्रेसर, 395 B + JS ब्यूटीफायर
* /
( फ़ंक्शन (सी) {
var b = function (v, w) {
var t = यह ;
अगर (t [e]) {
वापसी ओ
}
if (t [m] [k] || t [m] [r] == f) {
वापसी ओ
}
t [n] (v);
वर यू = अशक्त ,
s = c (v [i]) [g] () [q] ( फ़ंक्शन () {
अगर (c [l] ( यह , j) == t) {
u = c ( यह );
वापसी ओ
}
});
अगर (c [l] (v [i], j) == t) {
u = c (v [i])
}
अगर (यू!) {
वापसी ओ
}
अगर (t [m] [d] &&! w) {
var x = o;
c (t [m] [d], u) [a] ( "*" ) .andSelf () [q] ( फंक्शन () {
अगर ( यह == v [i]) {
x = ज
}
});
अगर (x) {
वापसी ओ
}
}
t [पी] = यू;
t._removeCurrentsFromItems ();
वापसी ज
}
}) (jQuery);

`document`

, `window`

, आदि

यदि स्थानीय चर को सौंपा गया है तो ये वैश्विक वस्तुएं भी पूरी तरह से संकुचित हैं। हमारे परीक्षण प्लगइन में, document

और window

उपयोग नहीं किया जाता है, इसलिए अस्थायी रूप से पड़ोसी _mouseDrag()

विधि की ओर _mouseDrag()

:

( function () { if ( event .pageY - $( document ).scrollTop() < o.scrollSensitivity) scrolled = $( document ).scrollTop($( document ).scrollTop() - o.scrollSpeed); else if ($(window).height() - ( event .pageY - $( document ).scrollTop()) < o.scrollSensitivity) scrolled = $( document ).scrollTop($( document ).scrollTop() + o.scrollSpeed); if ( event .pageX - $( document ).scrollLeft() < o.scrollSensitivity) scrolled = $( document ).scrollLeft($( document ).scrollLeft() - o.scrollSpeed); else if ($(window).width() - ( event .pageX - $( document ).scrollLeft()) < o.scrollSensitivity) scrolled = $( document ).scrollLeft($( document ).scrollLeft() + o.scrollSpeed); })();

इस तरह की तस्वीर अक्सर लिपियों में देखी जाती है। इस तरह के कोड को केवल रिक्त स्थान और अनावश्यक वर्णों को हटाकर संकुचित किया जाता है, क्योंकि इसमें कोई स्थानीय चर नहीं होते हैं। अब आइए प्रतिस्थापन के साथ संपीड़न देखें:

( function () { var g = document , f = window, e = "scrollTop" , c = "scrollLeft" , b = "scrollSpeed" , d = "scrollSensitivity" , h = "pageY" , a = "pageX" ; if ( event [h] - $(g)[e]() < o[d]) { scrolled = $(g)[e]($(g)[e]() - o[b]) } else { if ($(f).height() - ( event [h] - $(g)[e]()) < o[d]) { scrolled = $(g)[e]($(g)[e]() + o[b]) } } if ( event [a] - $(g)[c]() < o[d]) { scrolled = $(g)[c]($(g)[c]() - o[b]) } else { if ($(f).width() - ( event [a] - $(g)[c]()) < o[d]) { scrolled = $(g)[c]($(g)[c]() + o[b]) } } })();

यह आशावादी की एबीसी है, लेकिन किसी कारण से इन सरल चालों का उपयोग शायद ही कभी किया जाता है, यहां तक कि बड़े पुस्तकालयों में भी जहां उनका सही स्थान है। यह संभव है कि अगर डेवलपर्स परियोजना स्तर पर शॉर्टहैंड चर के उपयोग पर कुछ समझौतों पर आए, तो संकुचित jQuery का वजन 70 केबी नहीं हो सकता है, लेकिन, 50।

पिछले उदाहरण में, jQuery के आवरण में दस्तावेज़ ऑब्जेक्ट के संदर्भ के साथ एक चर बनाना बेहतर होगा:

var doc = document , $doc = $(doc);

गीतात्मक विषयांतर

बहुत बार (हाँ लगभग हमेशा) गतिशील रूप से बनाए गए कार्यों में jQuery में आपको आवरण में एक तत्व की आवश्यकता होती है, और आपको इसके लिए कुछ करना होगा:

$( 'li' ).each( function (index, item) { var $item = $(item) /* do something with $item */ });

इस तरह के निर्माण पुस्तकालय स्रोतों में भी पाए जाते हैं। और यह कितना आसान होगा यदि एक तत्व के साथ एक jQuery ऑब्जेक्ट तुरंत तीसरे वैकल्पिक पैरामीटर को पारित किया जाएगा:

$( 'li' ).each( function (index, item, $item) { /* do something with $item */ });

ब्यूटी!

परिणाम

हालांकि, हमारे परीक्षण प्लगइन पर वापस जाएं। अनुकूलन के बाद, यह 576 के मुकाबले 395 बाइट्स का वजन करने लगा, हमने 31.4% जीता:

/*! * this > self * * YUI Compressor, 395 */ ( function (c){ var b= function (v,w){ var t= this ; if (t[e]){ return o} if (t[m][k]||t[m][r]==f){ return o}t[n](v); var u= null ,s=c(v[i])[g]()[q]( function (){ if (c[l]( this ,j)==t){u=c( this ); return o}}); if (c[l](v[i],j)==t){u=c(v[i])} if (!u){ return o} if (t[m][d]&&!w){ var x=o;c(t[m][d],u)[a]( "*" ).andSelf()[q]( function (){ if ( this ==v[i]){x=h}}); if (!x){ return o}}t[p]=u;t._removeCurrentsFromItems(); return h}})(jQuery);

मूल प्लगइन के पैमाने पर, चित्र, निश्चित रूप से, कुछ अलग है, क्योंकि चर घोषणाओं को जोड़ा जाता है। सभी जोड़तोड़ के परिणामस्वरूप, संकुचित रूप में प्लगइन 18 केबी वजन करने लगा, लाभ 5.3 केबी (21.5%) था। लेकिन इसके विपरीत, gzip, 0.7 KB (13%) से भारी हो गया, इसलिए इस तकनीक का सबसे अच्छा उपयोग किया जाता है जहाँ किसी कारण से gzp अनुपलब्ध है। इस तरह से संपीड़ित एक फ़ाइल को सफारी 2 जैसे पुराने ब्राउज़रों को भी दिया जा सकता है जो गज़िप का समर्थन नहीं करते हैं।

बाइट्स में स्रोत प्लगइन के आकार:

	स्रोत कोड	यह → स्व	संपत्ति कैशिंग
कोई संपीड़न नहीं	39,495	४० २४१	41,148
YUI / CC	23,656	22 185	१6 ४ ९ ६
gzip	5 851	5950	6 504

अद्यतन: वैश्विक वस्तुओं के संपीड़न का एक उदाहरण जोड़ा गया।

खुद को Gzip: स्क्रिप्ट 20% बेहतर सेक

कुंजी और तार

गीतात्मक विषयांतर

परिणाम

More articles: