🤾🏽 🚷 🛂 एक भारी साइट के उद्घाटन "तेजी" 🎰 🏳️‍🌈 ✖️

दूसरे दिन साइट के उद्घाटन में तेजी लाने की आवश्यकता थी। समस्या यह थी कि केवल जेएस फाइलें, यहां तक कि एक में इकट्ठी हुई और ऑबफ्यूजन द्वारा संपीड़ित की गई, जिसका वजन 500kB से अधिक था, और फिर भी एक बड़ी सीएसएस भी है।
इस संबंध में, जिन उपयोगकर्ताओं की फाइलें कैश की जाती हैं (उदाहरण के लिए, बिल्ड के बाद एक नया उपयोगकर्ता या एक संस्करण बदल गया है) को सफेद स्क्रीन को देखते हुए धीमी गति से इंटरनेट एक्सेस के साथ लंबे समय तक इंतजार करना पड़ता था।

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

विधि IE9 ( ~~स्वाभाविक रूप से~~ बारीकियों के साथ), IE10 और ऊपर - पूरी तरह से, साथ ही सभी प्रमुख ब्राउज़रों क्रोम, फ़ायरफ़ॉक्स, ओपेरा, सफारी पर काम करती है।

शैलियों

.progress-bar { margin: 200px auto; top : -4px; display: none; width : 400px; border: 1px solid gray; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .progress-bar div { height : 16px; width : 0; background: lightgray; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .progress-bar-text { text-align: center; margin-top: 200px; }

सबसे सरल लेआउट:

 <body> <div class="progress-bar"> <div id="progressBar"></div> </div> <div id="loadingPanel" class="progress-bar-text"> ...  ... </div> </body>

क्योंकि परियोजना अभी भी jQuery का उपयोग करेगी, मेरी स्क्रिप्ट के लिए, मैंने इसे भी कनेक्ट करने का फैसला किया, हालांकि थोड़ा पुनर्निर्माण (मैंने अधिकांश कार्यों को बाहर फेंक दिया)।

लोड किए जाने की आवश्यकता की सूची फ़ाइललिस्ट चर में संग्रहीत की जाएगी।

 var progressWidth = 0, fileList = [ {type : 'style', url : '/css/bundle.css'}, {type : 'script', url : '/js/bundle.js'} ];

फ़ंक्शन जो फ़ाइल डाउनलोड शुरू करता है, पूरा होने पर, इसे पास किए गए कॉलबैक को कॉल करेगा।

 function loadFiles(callback) { if (loaded) { //     window.console && console.error('Already loaded.'); return; } loaded = true; var len = fileList.length, count = len; var _afterAll = function() { if (--count == 0) { if (typeof callback == 'function') { setTimeout(callback, 10); } } }; for(var i = 0; i < len; i++) { loadFile(fileList[i], len, _afterAll); } };

लूप में, हम फ़ाइल प्राप्त करने के लिए जिम्मेदार फ़ंक्शन को चलाते हैं।
यह फ़ंक्शन हमारी प्रगति को अपडेट करेगा।
लेकिन डाउनलोड प्रगति कैसे प्राप्त करें? यह पता चलता है कि XMLHttpRequest के पास फ़ाइल डाउनलोड करने के लिए लंबे समय से ऑनप्रोग्रेस इवेंट है ( अधिक विवरण यहां पाया जा सकता है )।
लेकिन दुर्भाग्य से IE9 onprogress को कॉल करने में सक्षम नहीं है, और इसके लिए हम यह जांचते हैं कि क्या नई विंडो .XMLHttpRequest () में ऑनप्रोग्रेस इवेंट है। यदि अधिसूचना के साथ प्लग का प्रदर्शन नहीं होता है, तो प्रतीक्षा करें, हम लोड हो जाएंगे।
डाउनलोड के पूरा होने पर, फ़ाइल के प्रकार के आधार पर, हम या तो शैली को जोड़ते हैं (ब्राउज़र इस बार फ़ाइल को कैश से लेता है, इसके लिए हमने इसे डाउनलोड किया है), या हम इसे मिटा देते हैं यदि यह जावास्क्रिप्ट है।

 function loadFile(file, len, callback) { var progressBar = $('#progressBar'), loadingPanel = $('#loadingPanel'); file.url += '?' + REVISION; //     ,        $.ajax({ xhr: function () { var xhr = new window.XMLHttpRequest(); if ('onprogress' in xhr) { progressBar.parent().show(); loadingPanel.hide(); var last = 0, max = 100 / len; xhr.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = Math.min((evt.loaded / evt.total) * max, max); if (last < percentComplete) { progressWidth += percentComplete - last; last = percentComplete; progressBar.width(progressWidth + '%'); } } }, false); } return xhr; }, type: 'GET', url: file.url, success: function (data) { if (file.type == 'style') { $('head').append('<link rel="stylesheet" type="text/css" href="' + file.url + '" media="screen" />'); } else if (file.type == 'script') { evalJS(data); } callback(); }, cache : true }); } function evalJS(text) { try { if (window.execScript) { window.execScript(text); } else { eval.call(window, text); } } catch (error) { window.console && console.error(error); } }

JQuery में, मैंने कैश पास किया : ajax मेथड के लिए सही प्रॉपर्टी, ताकि ब्राउजर फाइल्स को कैश में पहले से डाउनलोड न करे, नहीं तो, डिफ़ॉल्ट रूप से, jQuery हर समय .js फाइल डाउनलोड करेगा, चाहे वे कैशे में हों या न हों। ।

सामान्य तौर पर, सब कुछ सरल है, लेकिन जैसा कि यह निकला, ओपेरा भी आसानी से नहीं चल रहा है (कम से कम संस्करण 12 में) evt.loaded evt.total से कई गुना अधिक हो सकता है ।
मुझे अन्य नुकसान नहीं हुआ।

डेमो
नमूना स्रोतों

एक भारी साइट के उद्घाटन "तेजी"

More articles: