👩🏼‍🤝‍👩🏻 🙌🏼 ✍🏾 JS1k - 1024 बाइट्स में एक शानदार वेब एप्लिकेशन लिखना 🧒🏽 🅰️ ⬜️

दूसरे वर्ष के लिए मैं JS1k में भाग ले रहा हूं, पिछले साल एक परीक्षण स्क्रिप्ट थी, अब मैंने पूरी तरह से आने का फैसला किया। मैंने पहले ही आवेदन लिखे और भेज दिए हैं। लेख में मैं अपना अनुभव साझा करना चाहता हूं: JS1k के लिए आवेदन कैसे लिखना है, इसे कैसे संपीड़ित करना है, कोड को 4 गुना कैसे कम करना है और आम तौर पर 1 Kb में कुछ दिलचस्प कैसे रटना है।

वर्तमान JS1k " ओरेगन ट्रेल " का विषय Apple II के लिए क्लासिक गेम है (कि आप इसे Google कर सकते हैं)। इसलिए, इस भावना में कुछ लिखने की सिफारिश की जाती है, लेकिन यह आवश्यक नहीं है।

शुरुआत

आपको एक छोटे से आवेदन या डेमो के साथ आने की जरूरत है, जो आपकी राय में, 1kb (विवरण और प्रबंधन पर विचार) में फिट हो सकता है। यदि आप अपने अनुमानों पर संदेह करते हैं, तो आप देख सकते हैं कि उन्होंने पिछले साल क्या देखा था : लीजेंड ऑफ़ द बाउंसिंग बीहोल्डर , टिनी शतरंज । नियमों को पढ़ें और HTML टेम्पलेट का उपयोग करें - फिर आपका एप्लिकेशन डेमो वातावरण में 100% काम करेगा।
किसी भी अनुकूलन के बिना एक स्क्रिप्ट लिखना शुरू करें, लेकिन इसके आकार के लिए देखें। यदि यह 4-5Kb से अधिक हो गया है - आपको एक अलग विषय के साथ आना चाहिए या आपको भविष्य में पसीना आना होगा (मेरे पास 4393 बाइट्स थे)।

प्राथमिक कोड पैकेजिंग

आपका कोड लॉक होना चाहिए, अन्यथा यह विफल हो जाएगा। सभी मौजूदा पैकर्स में से, सबसे अच्छा - UglifyJS आप अन्य सभी को नहीं देख सकते हैं। यदि आप UglifyJS को स्थापित करने के लिए बहुत आलसी हैं, तो वेब इंटरफ़ेस का उपयोग करें ।
अपना कोड पैक करें यदि यह 1024 बाइट्स के भीतर निकला - उत्कृष्ट - आप आगे नहीं पढ़ सकते हैं, लेकिन तुरंत आवेदन भेजें। तथ्य यह है कि आपका कोड तुरंत 1024 बाइट्स में मिला है, यह दर्शाता है कि आपका आवेदन काफी दिलचस्प है या विस्तृत नहीं है। यदि आपका सिकुड़ा हुआ कोड 2Kb के भीतर हो गया है - यह ठीक नहीं है कि ऐसी आँखें "o_O" नहीं हैं, तो मैं आपको आश्वस्त करता हूं कि इसे 2 बार कम किया जा सकता है (मेरे पास लगभग 1600 बाइट्स थे)।

मैनुअल संपीड़न या अयोग्य संपीड़ित

यह भाग उन क्षणों को मैन्युअल रूप से संपीड़ित करने के बारे में है जो UglifyJS को नहीं पता है कि कैसे। अब हर बाइट महत्वपूर्ण है!
हर बार जब आप कुछ ठीक करते हैं, तो UglifyJS कोड पैक करें और आकार देखें। सुनिश्चित करें कि सब कुछ काम करता है।

0. मिनीफायर के लिए काम न करें - सभी संपत्तियों / कार्यों को तुरंत स्पष्ट नाम दें! एक पढ़ने योग्य कोड लिखें, मिनिफायर आपके लिए अतिरिक्त कोष्ठक और अर्धविरामों को हटा देगा।
1. यदि आपने IE के तहत तेज किया है - सभी हैक को हटा दें - यह शामिल नहीं है (ch9 +, o11 +, fx3.6 +, sa5 +)।
2. सभी हैक्स को हटा दें (अतिरिक्त फ़ंक्शंस बाइंड, फॉरच), हाँ अभी।
3. आपको आरक्षित शब्दों से छुटकारा पाने की आवश्यकता है - अनावश्यक संस्करण, टाइपो हटाएं। कार्यों की संख्या को कम से कम करें (यदि संभव हो तो गठबंधन करें) example1 example2 ।
4. DOM के माध्यम से बनाया गया सभी HTML, मैन्युअल निर्माण (लाइनों) को फिर से लिखना।
5. संपत्ति विधियों (2 या अधिक बार) और स्ट्रिंग और संख्यात्मक स्थिरांक के अक्सर उपयोग किए गए नामों का पता लगाएं - एक शब्दकोश संकलित करें और बिंदु कॉल को ब्रैकेट कॉल के साथ बदलें।

// : var canvas, div1, div2; canvas.moveTo(150, 150); canvas.moveTo(153, 151); canvas.moveTo(11, 151); canvas.moveTo(153, 120); canvas.moveTo(153, 1); div1 = '<div style="width:150px;height:200px;color:red"></div>'; div2 = '<div style="width:150px;height:200px;color:blue"></div>'; // : var canvas, div1, div2, __moveTo__ = 'moveTo'; __width_height__ = 'width:150px;height:200px;'; canvas[__moveTo__](150, 150); canvas[__moveTo__](153, 151); canvas[__moveTo__](11, 151); canvas[__moveTo__](153, 120); canvas[__moveTo__](153, 1); div1 = '<div style="' + __width_height__ + 'color:red"></div>'; div2 = '<div style="' + __width_height__ + 'color:blue"></div>';

एक सूत्र दिखा रहा है कि कितना कोड कम हो जाएगा
तरीकों के लिए: (N * (L+1)) - (N * (2 + V) + V + 4 + L)
एल बिंदु के बिना विधि की लंबाई है
एन - कॉल की संख्या
V मिनीफ़ायर के साथ कम होने के बाद चर की लंबाई है (आमतौर पर 1)
हमारे मामले में, हमें 9 बाइट्स मिलते हैं

तार के लिए (सबसे खराब स्थिति में): N * L - (N * (4 + V) + V + 4 + L)
एल - लाइन की लंबाई
एन प्रतिस्थापन की संख्या है
V मिनीफ़ायर के साथ कम होने के बाद चर की लंबाई है (आमतौर पर 1)
हमारे मामले में, हमें 13 बाइट्स मिलते हैं

6. चर चर var __document__ = document; में अक्सर उपयोग किए जाने वाले var __document__ = document; को बाहर var __document__ = document;
7. अगर आपको जरूरत हो तो देखें
8. अपने बंद होने के केवल वैश्विक चर का उपयोग करें
9. ~~छोरों के साथ बदलें जबकि~~ habrahabr.ru/blogs/javascript/115369/#comment_3737137 , c = smth.length काउंटर ऑप्टिमाइजेशन से छुटकारा c = smth.length

 // : for (i = 0;i<smth.length; i++)do(i); // : i=smth.length;while(i--)do(i);

एक और माइनस 6 * एन बाइट्स
10. यदि आप फ़ंक्शन अभिव्यक्ति var blabla= function (){}; माध्यम से फ़ंक्शन बनाते हैं var blabla= function (){}; उन्हें फंक्शन डेफिनेशन फंक्शन ब्लाब्ला function blabla(){} एक और माइनस बाइट्स में बदलें।
11. getElementById, getElementsByTagName बजाय getElementById, getElementsByTagName querySelector, querySelectorAll उपयोग querySelector, querySelectorAll
12. Math.round (num) के बजाय ~~ num का उपयोग करें
13. अपने HTML कोड <div id="aaa"> - <div a=aaa> की विशेषताओं से दोहरे और एकल उद्धरण निकालें
14. तत्वों की आईडी में पंक्तियों को संख्याओं से प्रतिस्थापित करें <div id=aaa> - <div a=1>
15. रंगों को 3-4 वर्णों तक कम करें। सटीक रंगों का उपयोग न करें, आप हमेशा उन्हें धारणा के लिए समान लोगों के साथ बदल सकते हैं। '#ff0000' -> 'red', '#fedc52' -> '#fd5'
16. js1k हमें मुफ्त में 3 वैरिएबल प्रदान करता है, उनका उपयोग करें और उन्हें अपने बंद क्रम में a, b, c

 var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); (function (ctx, __document__body__, canvas) { //   }(a,b,c))

ऑर्डरकर्ता इस रूप में आपके कोड का रीमेक करेगा क्योंकि a, b, c महत्वपूर्ण है।

 (function(a,b,c){ //   }(a,b,c))

और आपको बाहरी लोगों के साथ आंतरिक चर के नामों की तुलना करने के बारे में चिंता करने की आवश्यकता नहीं होगी और आप वैश्विक बंद को हटा सकते हैं। 26 बाइट के रूप में माइनस!
17. एक छोटी तुलना e.keyCode^27||e.preventDefault() उपयोग करें। e.keyCode^27||e.preventDefault() बजाय e.keyCode==27&&e.preventDefault()
18. यदि आपका कोड 1024 से बड़ा है, तो संभव हो तो गैर-महत्वपूर्ण ब्लॉक (विवरण) को हटाना शुरू करें।
19. यदि आपके पास एक डेमो या गेम नहीं है, तो आपको उपयोगकर्ता को संकेत देने की आवश्यकता है कि विवरण को पढ़े बिना इसका उपयोग कैसे करें।
20. यदि संभव हो, तो इवेंट बाइंड के लिए HTML विशेषताओं का उपयोग करें, या एक अवधि के माध्यम से घटनाओं को असाइन करें, ऑनकीप्रेस के बजाय छोटी ईवेंट नाम onkeyup का उपयोग करें (मेरे कोड में पहली जगह पर विशेषता का उपयोग नहीं किया जा सकता)

टिप्पणियों से सुझाव

1. का प्रयोग करें, यह अक्षर टैग है एक, बी, मैं, पी, क्यू, एस, यू (लेकिन अपना खुद का बना नहीं है - ओपेरा कस्टम टैग में विशेषताओं में घटनाओं को नहीं बुला सकते हैं)
2. अन्य पैकर्स का प्रयास करें, शायद Uglifay आपको कंप्रेसर rater.thruhere.net के अनुरूप नहीं है

मैन्युअल अनुकूलन के बाद आपको क्या मिल सकता है, इसका एक उदाहरण

इस साल मैंने लोकलस्टोरेज में डेटा की बचत के साथ एक चिपचिपा नोट्स एप्लिकेशन बनाने का फैसला किया। यहाँ अनुकूलन के बाद मुझे मिला कोड है:

 // Full version of Notes ll be on my web site soon. // Creating closure to compile with UglifyJS // (!) After compile remove global closure manually (function (ctx, __document__body__, canvas) { // Dictionary for some frequently used method names and strings var __fillStyle__ = 'fillStyle', __dblclick__ = 'dblclick', __setAttribute__ = 'setAttribute', __background_and_left__ = 'position:absolute;left:', __fillRect__ = 'fillRect', __addColorStop__ = 'addColorStop', __innerHTML__ = 'innerHTML', __textarea__ = 'textarea', __ffe__ = '#ffe', // Other shorthands __document__ = document, __localStorage__ = localStorage, i,j,c,imageData, width = 200, height = 250, paperGradient = ctx.createLinearGradient(width, height/2, width, 0); // Making fixed canvas size canvas[__setAttribute__]('width', 202); canvas[__setAttribute__]('height', 275); // Creates note at e.clientX e.clientY function createPaper(e) { // Opera haven't onbeforeuload event // I must save document.body content on each keyup and each keyCode=27 keydown // Sorry... :3 // (!) replace b and save to actual after min __document__body__[__innerHTML__] += '<a onkeydown=event.keyCode^27||b.removeChild(this),w() style=' + __background_and_left__ + e.clientX + 'px;top:' + e.clientY + 'px;><i style=' + __background_and_left__ + '30px;top:10px;color:#a53;font-size:9px>'+Date()+'</i><img src=' + imageData + '><' + __textarea__ + ' onkeyup=this.'+__innerHTML__+'=this.value,w() style=' + __background_and_left__ + '28px;top:33px;background:transparent;width:170px;height:200px;border:0;line-height:20px;overflow:hidden>Esc</' + __textarea__ + '></a>'; save(); } // Saves document.body to localStorage function save() { __localStorage__[__dblclick__] = __document__body__[__innerHTML__]; } // Making sexy paper // Gradient paperGradient[__addColorStop__](0, '#ff9'); paperGradient[__addColorStop__](1, __ffe__); ctx[__fillStyle__] = paperGradient; ctx.strokeStyle = '#aa7'; // Draw paper body ctx.strokeRect(1,1, width,height); ctx[__fillRect__](1,1, width,height); // Creating paper texture i = width; ctx[__fillStyle__] = __ffe__; while(--i) { while(--j) { Math.random()>.7&&ctx[__fillRect__](i,j,1,1); } j = height; } // 2 Vertical red lines ctx[__fillStyle__] = '#a51'; ctx[__fillRect__](20, 1, 1, height); ctx[__fillRect__](22, 1, 1, height); // Some horizontal gray lines ctx[__fillStyle__] = '#aaa'; for (i = 50; i < height; i += 20) ctx[__fillRect__](0, i, width, 1); // Grabbing image source imageData = canvas.toDataURL(); // Print "Hello message" or load localStorage content __document__body__[__innerHTML__]=__localStorage__[__dblclick__] || __dblclick__+', uses ' + __localStorage__; // Some action events __document__.addEventListener(__dblclick__, createPaper, 0); }(a,b,c)) // Vars must be in a, b, c order

यह कोड यूलिफेर द्वारा 1048 बाइट्स तक संपीड़ित किया जाता है, फिर वैश्विक बंद को हटा दिया जाता है और इसे 1022 बाइट्स में घटा दिया जाता है। अनुकूलन के दौरान, मुझे कुछ विवरणों को कम करना पड़ा।

मेरे डेमो के लिए लिंक

मूल वह है जो शुरुआत में था (डबल-क्लिक करने से नोट बनता है, Esc नोट को हटाता है, डेटा खूबसूरती से लोकलस्टोरेज में स्थित है) JS - 4393 बाइट्स: azproduction.ru/labs/1kjs-ios-javascript-notes/index.original.html
JS1k पर डेमो (मूल के समान नियंत्रण) JS - 1022 बाइट्स: js.gd/1hn (पुराना संस्करण)

यदि आप इन 2 अनुप्रयोगों की तुलना करते हैं, तो वास्तव में वे अलग नहीं हैं। स्कॉच टेप को दूसरे से हटा दिया गया है और कोई सृजन संख्या नहीं है।

युक्तियों में क्या शामिल नहीं है, लेकिन भविष्य में उपयोगी है

-1। बाइंड का उपयोग विधि कॉल की लंबाई को काफी कम कर सकता है। एफएफ 3.6 को पता नहीं है कि कैसे बांधना है, इसलिए यह विधि अभी तक हमारे लिए उपयुक्त नहीं है ।

 //   c.lineTo(150,150);c.lineTo(150,200);c.lineTo(150,250);c.lineTo(250,350);c.lineTo(450,350); //    var a='lineTo';c[a](150,150);c[a](150,200);c[a](150,250);c[a](250,350);c[a](450,350); //    var a=z.lineTo.bind(z);a(150,150);a(150,200);a(150,250);a(250,350);a(450,350);

यदि आप भाग लेना चाहते हैं, तो आखिरी समय पर सब कुछ बंद न करें - डेमो के साथ आएं, कोड को कम करें। डेडलाइन JS1k अभी भी बहुत दूर है - 24 अप्रैल, 2011। शुभकामनाएँ!

कोड को कम करने के लिए आलोचना, सुझाव, सुझाव का स्वागत है!

UPD ने रीडर टिप्स और अपनी जोड़ी बनाई । टिप्पणियों को पढ़ने के बाद, अन्य लिपियों को देखते हुए, मैंने स्क्रिप्ट का आकार 1022 से घटाकर 975 बाइट्स कर दिया और एक दूरस्थ कार्यक्षमता जोड़ी।

JS1k - 1024 बाइट्स में एक शानदार वेब एप्लिकेशन लिखना