पुन: अनुकूलन ... सीमा कहां है?

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


प्रयोग में क्रोम 23, फ़ायरफ़ॉक्स 16, IE9 ब्राउज़र शामिल थे। सर्वर पर पिंग ~ 41ms, gzip को सर्वर पर सक्षम किया गया है, शर्तों को लड़ने वालों के लिए जितना संभव हो उतना करीब है। तो, हम क्या मापने / देखने जा रहे हैं? इससे जुड़े स्टाइल शीट के साथ एक परीक्षण पृष्ठ बनाएं। परीक्षण पृष्ठ आवश्यक न्यूनतम है (Doctype, html, head and body) विभिन्न आकारों की शैलियों को जोड़कर, हम पृष्ठ लोड समय और एकल फ़ाइल के डाउनलोड समय को मापेंगे। प्राप्त आंकड़ों के आधार पर, हम इस बारे में निष्कर्ष निकालेंगे कि फाइलों को कितनी देर तक चिपकाया जाना चाहिए।

टेस्ट नंबर 1।
एक फ़ाइल का आकार 2.1Kb है
Gzipped (http हेडर सहित) - 451b
कनेक्टेड फ़ाइलों की संख्या - 10

क्रोम

onload = 208ms
कनेक्ट + इंतजार = ~ 83ms
प्राप्त करना = ~ 2 मी

एफएफ

onload - 291ms
कनेक्ट + प्रतीक्षा = ~ 88ms
प्राप्त करना = ~ 1ms

आईई

ऑनलोड - 417 मी
कनेक्ट + प्रतीक्षा = ~ 190ms
प्राप्त करना = <1ms

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

हम फ़ाइलों को एक साथ गोंद करते हैं, आकार 208Kb (1.14Kb gzipped) है, ब्राउज़र इस गति से पृष्ठ लोड करते हैं:
Chrome - 142ms ( -42% ), FF - 165ms ( -44% ), IE - 389ms ( -7% )

टेस्ट नंबर 2
एक फ़ाइल का आकार 20.7Kb है
Gzipped (http हेडर सहित) - 523 बी
कनेक्टेड फ़ाइलों की संख्या - 10

क्रोम

onload = 284ms
कनेक्ट + प्रतीक्षा = ~ 110ms
प्राप्त करना = ~ 1ms

एफएफ

ऑनलोड - 352ms
कनेक्ट + प्रतीक्षा = ~ 90-130ms
प्राप्त करना = ~ 1ms

आईई

ऑनलोड - 830 मी
कनेक्ट + प्रतीक्षा = ~ 190ms
प्राप्त करना = <1ms

हम फ़ाइलों को एक साथ गोंद करते हैं, आकार 20.7Kb (523b gzipped) होगा, और ब्राउज़र इस गति से पृष्ठ को लोड करेंगे:
क्रोम - 203ms ( -29% ), एफएफ - 208ms ( -41% ), IE - 680ms ( -19% );

टेस्ट नंबर 3।
एक फ़ाइल का आकार 207Kb है
Gzipped (http हेडर सहित) - 1.14Kb
कनेक्टेड फ़ाइलों की संख्या - 10

क्रोम

onload = 368ms
कनेक्ट + प्रतीक्षा = ~ 70-80ms
प्राप्त करना = ~ 30 मी

एफएफ

ऑनलोड - 1.03s
कनेक्ट + प्रतीक्षा = ~ 88ms
प्राप्त करना = ~ 0ms (??? फायरबग मुद्दा?)

आईई

ऑनलोड - 5.55 एस
कनेक्ट + प्रतीक्षा = ~ 300ms
प्राप्त करना = ~ 8.4ms

यदि आप फ़ाइलों को गोंद करते हैं, तो आकार 2.2Mb (8.2Kb gzipped) होगा, और ब्राउज़र इस गति से पृष्ठ को लोड करेंगे:
Chrome - 401ms ( + 11% ), FF - 919ms ( -9% ), IE - 1.29s ( -77% );

परीक्षण संख्या 4. (विज्ञान कथा के क्षेत्र से)
एक फ़ाइल का आकार 4.9Mb है
Gzipped (http हेडर सहित) - 17.3Kb
कनेक्टेड फ़ाइलों की संख्या - 10

क्रोम

onload = 6.3s
कनेक्ट + प्रतीक्षा = ~ 2 एस
प्राप्त करना = ~ 2.3 s

एफएफ

onload - ~ 19 एस
कनेक्ट + इंतजार = ~ 600ms
प्राप्त करना = ~ 0ms (??? फायरबग मुद्दा?)

आईई

onload - 21 एस
कनेक्ट + प्रतीक्षा = ~ 4s
प्राप्त करना = ~ 3 s

यदि आप फ़ाइलों को गोंद करते हैं, तो आकार 48.5Mb (169.2Kb gzipped) होगा, और ब्राउज़र इस गति से पृष्ठ लोड करेंगे:
क्रोम - 6.78s (+ 7%), एफएफ - 19.65 (+ 3%), IE - 4.9s (-77%);

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