जाने पर सभी HTML और JS कनेक्टिविटी को कैश करें

एक बार मैंने एक भयानक काम किया - मैंने यैंडेक्स मुख्य पृष्ठ के स्रोत कोड को देखा और सोचा - यहां कुछ गलत है। मैं नवीनतम समाचारों के लिए 5 सुर्खियाँ, कुछ तस्वीरें, एक खोज बॉक्स, लिंक, और यहाँ प्रश्न देख रहा हूँ:

जहां 700Kb है कि मेरे समय के 1.56s की आवश्यकता है? (सफारी 7.0.3 वेब इंस्पेक्टर के अनुसार)



हम सभी साइटों पर जाते हैं, एक किलोबाइट की जानकारी प्राप्त करते हैं जो स्वयं या आमतौर पर किसी व्यक्ति द्वारा कथित रूप से उपयोगी होती है, और 3 एमबीपीएस की गति से हम उस पर सेकंड बिताते हैं। इस पोस्ट में मैं यह वर्णन करने की कोशिश करूँगा कि केवल किलोबाइट को स्थानांतरित करना कैसे संभव है जो एक व्यक्ति को चाहिए, और बाकी सब कुछ केवल आवश्यकता होने पर कैश या लोड किया जा सकता है।

अनुकूलन पहला - HTML

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



एक पृष्ठ को न केवल खंडों में तोड़ा जा सकता है, बल्कि शरीर में सब कुछ एक XML संरचना के साथ प्रतिस्थापित किया जा सकता है, जो सभी पितृत्व संबंधों - मौलिक और कुशलता से देख सकता है। कोई शैली या तामझाम नहीं। उदाहरण के लिए, मैं 5 समाचार प्रदर्शित करने के लिए यैंडेक्स कोड ले जाऊंगा:

<div class="b-tabs__items"> <div id="tabs088905610376_0"> <ul class="b-news-list"> <li class="b-news-list__item"> <span class="b-news-list__item_num">1.</span>    <a class="b-news-list__item-link" href="http://news.yandex.ru/yandsearch?cl4url=www.rg.ru%2F2014%2F05%2F06%2Fserdukov-anons.html&lang=ru&lr=172" onmousedown="cp('v12.news.news.links.1',this)">   </a> </li> ... </ul></div></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह निम्नलिखित निकला:

 <news> <tab ids="tabs088905610376_0"> <newsr num="1" pre="  " src="http://news.yandex.ru/yandsearch?cl4url=www.rg.ru%2F2014%2F05%2F06%2Fserdukov-anons.html&lang=ru&lr=172" onmd="cp('v12.news.news.links.1',this)" ahr="   "> ... </tab> ... </news>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्रत्येक समाचार आइटम अब एक टैग बन जाता है। यदि आप इस तरह से पूरे पृष्ठ का प्रतिनिधित्व करते हैं, तो आपको बस HTML और XML का मिश्रण मिलता है, आप इसे [X] HTML कह सकते हैं, क्योंकि वास्तव में यह HTML है, केवल अब यह एक्स्टेंसिबल है - शब्द के शाब्दिक अर्थ में। मान लें कि पृष्ठ XML में प्रस्तुत किया गया है, अब प्रत्येक ब्लॉक के लिए मैं जेएस फ़ाइल में अपना टेम्पलेट जोड़ता हूं - जिस तरह से यह वास्तव में दिखना चाहिए। PHP के साथ सादृश्य द्वारा, मैंने टेम्प्लेट्स चर में '$' को उजागर किया, जिसे विशेषताओं और $ HTML $ - इनर HTML टैग से लिया जाना चाहिए।

 var news='<div class="b-tabs__items">$HTML$</div>'; var tab='<div id="$ids$"><ul class="b-news-list">$HTML$</ul></div>'; var newsr='<li class="b-news-list__item"><span class="b-news-list__item_num">$num$.</span> $pre$ <a class="b-news-list__item-link" href="$src$" onmousedown="$onmd$">$ahr</a></li>';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

निचला रेखा - सभी HTML को एक जेएस फ़ाइल में रखा गया है, और पृष्ठ पर केवल वही है जो उपयोगकर्ता को चाहिए, लेकिन यह केवल आधी कहानी है, क्योंकि छवियों के अतिरिक्त पृष्ठ का मुख्य ट्रैफ़िक, जेएस है।

जेएस अनुकूलन

यदि JS फाइल का वजन 100-200Kb है, तो इसका डाउनलोड लगभग 0.5s है। यह कैश में लोड और रहेगा, लेकिन इसके निष्पादन से पहले की देरी अभी भी बनी रहेगी - यह इस तथ्य के कारण है कि जेएस फाइल पहले लोड की जाती है, फिर पूरे का विश्लेषण किया जाता है और उसके बाद ही निष्पादित करना शुरू होता है। यह सुविधा, उदाहरण के लिए, घोषित होने से पहले किसी फ़ंक्शन को कॉल करने की अनुमति देती है। फ़ाइल जितनी बड़ी होगी, विश्लेषण उतना ही लंबा, 300ms तक और कभी-कभी अधिक होगा। समय को कम करने के लिए एक बहुत अच्छा तरीका है - फ़ाइल को असतत बनाने के लिए: इसे अलग-अलग कार्यों या बस भागों में तोड़ दें और जब उन्हें ज़रूरत हो तब कनेक्ट करें। उन्हें भी कैश किया जाएगा, केवल उनके विश्लेषण का समय बहुत कम होगा - 1-2ms के भीतर।



मान लीजिए कि हमारे पास एक फ़ंक्शन है जो वास्तविक समय में जेएस फ़ाइलों को जोड़ता है, उदाहरण के लिए, इस तरह:

 inc({ //  /  name:'id' – name-  ( ), id-   },function() { //JS       });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

उसके लिए कई आवश्यकताएं हैं। सबसे पहले, यह पहले से ही जुड़े कार्यों और फ़ाइलों को याद रखना चाहिए, दूसरे, यह विभिन्न निर्देशिकाओं से लोडिंग का समर्थन करना चाहिए, साथ ही साथ अतुल्यकालिक होना चाहिए। एक निर्देशिका निर्दिष्ट करने के लिए, आप वैश्विक चर का उपयोग कर सकते हैं। इसमें फ़ाइलों को जोड़ने के लिए " कोई भी साइट.ru / निर्देशिका " शामिल है और फ़ंक्शन के लिए " कोई भी साइट.ru / निर्देशिका / फ़ंक्शन_ " - आईडी (पोस्टफिक्स) को इस पथ पर जोड़ा जाएगा। मान लें कि आप किसी फ़ाइल को कई भागों या कार्यों में विभाजित करना चाहते हैं, तो परिणामी फाइलें कुछ इस तरह होनी चाहिए:

 //    ,  ludes["id"]=function(a1, .., aN){ // } //  : // (   ) ludes["id"]++;//id -   ,  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस प्रकार, फ़ाइल नाम का हिस्सा फ़ंक्शन के साथ फाइल में इंगित किया जाना चाहिए, और फ़ाइल कनेक्ट करते समय, इसका नाम संकेत दिया जाना चाहिए, केवल एक्सटेंशन के बिना।

ईएसएस

ऊपर, मैंने लिखा है कि आप सभी HTML और कैश को कैसे प्रस्तुत कर सकते हैं, केवल XML फॉर्म में आवश्यक जानकारी को स्थानांतरित कर सकते हैं, फिर यह लिखा जाता है कि जेएस को कुछ मिलीसेकंड पर क्रियान्वित करने से पहले आप देरी को कैसे कम कर सकते हैं, लेकिन समस्या का कोई हल नहीं है - यही है। इसे ESS - Easy Stylesheets, CSS के समान कहा जा सकता है। 2 + 1 कार्यों से मिलकर बनता है। ESS के लिए प्रलेखन है जो वाक्यविन्यास और उदाहरण के उपयोग के उदाहरणों का वर्णन करता है।



सहायक समारोह जी (ए, बी, सी); - सीएसएस दृश्य की तर्ज पर एक वस्तु के लिए खोज। a - किस टैग / # आईडी / @ नाम / .class के साथ ऑब्जेक्ट की खोज करने के लिए, b - जिसमें ऑब्जेक्ट को खोजना है और c - फ्लैग 0/1, यह दर्शाता है कि किसी भी मामले में एरे को वापस करना है या नहीं।



Ess (a, b, ch, f); - एक फ़ंक्शन जो जेएस फाइल के टेम्प्लेट वाले पृष्ठ पर XML ब्लॉकों को बदलता है, उसे एक - एक DOM तत्व और b - एक टेम्पलेट लाइन, ch - एक वर्ण जो चर चिह्नित किया गया है, और f - पूरा होने के बाद कॉल करने के लिए एक फ़ंक्शन को पारित करने की आवश्यकता है। उपरोक्त उदाहरण के लिए, यह है:

 ess(g('newsr'), newsr, '$', function() { ess(g('tab'), tab, '$', function() { ess(g('news'), news); });});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

inc (); - एक फ़ंक्शन जो आपको किसी भी डोमेन से किसी भी फ़ाइल को अतुल्यकालिक रूप से कनेक्ट करने की अनुमति देता है और फिर काम करना जारी रखता है। इस पर अधिक विस्तार से चर्चा की जानी चाहिए। फ़ाइल संलग्न करने के लिए प्रलेखन से एक उदाहरण यहां दिया गया है:

 //   includesrc='http://fous.name/ess/';//   inc({ file1:'file1.js' }, function() { ggg(); }); // file1.js function ggg() { alert('       .'); } ludes["file1"]++;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

निर्देशिका और फ़ाइल नाम के लिए पूर्ण पथ को इंगित किया गया है - आवश्यकता के समान। js। अंतर यह है कि आप न केवल फ़ाइलों को कनेक्ट कर सकते हैं, बल्कि कार्य भी कर सकते हैं:

 includesrc='http://fous.name/ess/function_'; inc({ goodjob:'1'// "1" - ,      ludes    }, function() { goodjob();//   }); //  function_1.js ludes["1"]=function(){alert('    .');}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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