मैं 1800 एक-पिक्सेल छवियों वाले दो HTML पृष्ठों के बीच तुलना किया है।
पहले पृष्ठ वाणी छवियों इनलाइन:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">
दूसरा एक में, छवियों एक बाहरी फ़ाइल संदर्भ:
<img src="img/one-gray-px.png">
मैंने पाया कि, अगर यह जब कई बार लोड हो रहा है एक ही छवि इनलाइन घोषित किया गया है, ब्राउज़र प्रत्येक छवि के लिए एक अनुरोध करता है (मुझे लगता है कि यह प्रति 64 बार एक बार यह 6464 डीकोड करता है), जबकि अन्य परिदृश्य में, प्रति दस्तावेज़ एक बार छवि से अनुरोध किया जाता है (नीचे तुलना छवि देखें)।
250ms के बारे में में इनलाइन चित्र लोड के साथ दस्तावेज़ और लिंक की गई छवियों के साथ दस्तावेज़ 30ms में यह होता है।
(क्रोमियम 34 के साथ परीक्षण किया गया)
ही इनलाइन छवि के कई उदाहरण के साथ एक HTML दस्तावेज़ के परिदृश्य खास मतलब एक प्रायोरी नहीं है। हालांकि, मैंने पाया कि प्लगइन jquery lazyload सभी "सुस्त" छवियों, जिसका src विशेषता यह करने के लिए स्थापित किया जाएगा के लिए डिफ़ॉल्ट रूप से एक इनलाइन प्लेसहोल्डर परिभाषित करता है। फिर, यदि दस्तावेज़ में बहुत आलसी छवियां हैं, तो ऊपर वर्णित एक जैसी स्थिति हो सकती है।
स्रोत
2014-05-21 09:43:02
तुम भी, HTTP अनुरोध की कम संख्या से काफी लाभ होगा। बार जब कोई उपयोगकर्ता को देखने के लिए के लिए एक पूर्ण प्रदान की गई HTML वेब पेज –
के परिभाषित के रूप में "तेजी" चलो/सर्वर अंत पर perf इतना समस्याग्रस्त नहीं हो सकता है। आप अभी भी अपने पृष्ठों को आंशिक रूप से फ़ाइलों में कैश कर सकते हैं, इसलिए बार-बार छवियों को बेस 64 में बदलने की आवश्यकता नहीं है। यदि आपका पृष्ठ अक्सर नहीं बदलता है, तो आप ब्राउज़र को HTML फ़ाइल को कैश करने के लिए भी बता सकते हैं। – Tim