أدوات المطور · التشفير ووحدة فك التشفير Base64
صور Base64 المضمنة في CSS: عندما تكون البيانات: تساعد معرفات URI وعندما تكون ضارة
· لماذا يهم
base64 أداء
تضمين صورة كبيانات Base64: URI يزيل الطلب ولكنه يكبر الملف ويبطل عملية التخزين المؤقت. يوضح هذا المنشور متى تكون الصفقة تستحق ذلك ومتى يكون الملف المنفصل أسرع.
ورقة الأنماط التي نمت إلى مئات الكيلوبايتات - عادة التضمين الخاصة بفريق واحد وكيف ظهرت في توقيتات التحميل
قرر فريق التطوير أن تضمين الرموز الصغيرة كبيانات Base64: معرفات URI في CSS من شأنه أن يقلل HTTP من الطلبات ويحسن سرعة تحميل الصفحة. بمرور الوقت، ومع إضافة المزيد من الرموز، زاد حجم ورقة الأنماط إلى 400 كيلو بايت.
الحزمة CSS، التي يجب أن تحتوي على قواعد النمط، تهيمن عليها الآن بيانات الصورة. قام الفريق بقياس توقيت التحميل ووجد أن الصفحة كانت أبطأ مما كانت عليه قبل التضمين، وليست أسرع. أصبحت المشكلة واضحة: يتم تنزيل ورقة الأنماط 400 بالكيلو بايت عند كل تحميل للصفحة وتخزينها مؤقتًا لكل صفحة، بينما إذا كانت الأيقونات عبارة عن ملفات منفصلة، فسيتم تخزين ملف رمز واحد مؤقتًا ومشاركته عبر كل صفحة.
يا لها من بيانات: URI مضمنة وسبب كونها Base64 - بناء الجملة ونوع الوسائط وعقوبة الحجم
أدت إضافة المزيد من الصفحات إلى الموقع إلى تفاقم المشكلة، نظرًا لأن كل صفحة تقوم بتنزيل نفس ورقة الأنماط مع كل تلك الصور المضمنة مرة أخرى. يشرح هذا المنشور ما هي البيانات: URI، ولماذا هي Base64، وكيف يؤثر التضمين على التخزين المؤقت والأداء، والقواعد الأساسية لتحديد متى تستحق المقايضة ذلك. البيانات: URL هي طريقة لتضمين مورد مباشرةً في ملف HTML أو CSS بدلاً من الارتباط بملف خارجي. بناء الجملة هو data:mediaType;base64,encoded_bytes.
يعلن نوع الوسائط نوع المورد التالي، مثل image/svg+xml لـ SVG، أو image/png لـ PNG، أو text/plain للنص. تشير العلامة ;base64 إلى أن الحمولة هي نص مشفر بـ Base64 وليس نصًا مشفرًا بنسبة مئوية. إن encoded_bytes هي البيانات الفعلية. عندما يواجه المتصفح بيانات: URL في خاصية href أو src أو صورة الخلفية، فإنه يقوم بفك تشفير Base64 ويعرض المورد في السطر. لا يحدث أي طلب HTTP لأن المورد موجود بالفعل، ومضمن في المستند الأصلي. يؤدي هذا إلى حفظ واحد أو عدد قليل من HTTP من الطلبات، وهو أمر مهم في عالم HTTP/1.1 حيث يكون لكل طلب حمل إضافي.
التخزين المؤقت والمسار الحرج - لماذا يتم تنزيل وحدات البايت المضمنة مرة أخرى مع كل صفحة تتضمن ورقة الأنماط
في عالم HTTP/2 أو HTTP/3 حيث يمكن إرسال العديد من الطلبات عبر اتصال واحد، تكون التوفيرات أقل. تعتبر عقوبة حجم ترميز Base64 فورية وهامة. أيقونة SVG التي يبلغ حجمها 3 كيلو بايت عند حفظها كملف XML تصبح 4 كيلو بايت عند ترميز Base64 ودمجها كبيانات: URI. يجب إضافة زيادة الحجم 33% الناتجة عن التشفير إلى كل صفحة تتضمن ورقة الأنماط. إذا تم استخدام الرمز في عشر صفحات، فسيتم تنزيل ورقة الأنماط عشر مرات، بما في ذلك في كل مرة نفس الصورة المشفرة التي يبلغ حجمها 4 كيلو بايت.
إذا كان الرمز ملفًا منفصلاً، فسيتم تنزيل النسخة الأصلية التي يبلغ حجمها 3 والتي يبلغ حجمها كيلو بايت مرة واحدة وتخزينها مؤقتًا، ثم استخدامها من ذاكرة التخزين المؤقت في جميع الصفحات العشر. الخيار الاقتصادي واضح بالنسبة لمعظم الرموز: الملفات المنفصلة أصغر بشكل عام. تنطبق فائدة التضمين فقط عند استخدام رمز على صفحة واحدة بالضبط أو عدد قليل جدًا من الصفحات، ويكون الرمز مهمًا حقًا لتلك الصفحة. يعد الرمز المفضل الذي يظهر في كل صفحة مرشحًا ضعيفًا للتضمين؛ فمن الأفضل كملف منفصل مخبأ.
تكاليف التحليل على العميل - مدى حجم السلاسل المضمنة التي يتم التعامل معها بواسطة المحللين CSS وHTML، الموصوفة نوعياً
قد يستفيد الرسم التوضيحي الذي يتم استخدامه لمرة واحدة فقط على الصفحة المقصودة من التضمين لحفظ الطلب. يبطل التخزين المؤقت معظم فوائد تضمين البيانات: عناوين URI في أوراق الأنماط. عادةً ما يتم تخزين ورقة الأنماط مؤقتًا لأيام أو أسابيع. عند تنزيل ورقة الأنماط، يتم تنزيل كل مورد مضمن فيها مرة أخرى، حتى إذا كان المتصفح يحتوي بالفعل على تلك الصورة في ذاكرة التخزين المؤقت. إذا تم تحديث ورقة الأنماط، فيجب إعادة التحقق من صحة جميع البيانات المضمنة أو إعادة تنزيلها، حتى لو تم تغيير قاعدة CSS واحدة فقط.
يؤدي هذا إلى الانتفاخ: تؤدي التغييرات في الألوان أو التباعد إلى إعادة تنزيل ورقة الأنماط بالكامل، بما في ذلك الكيلوبايت من بيانات الصورة التي لم تتغير. يمكن تخزين ملف صورة منفصل مؤقتًا بشكل مستقل مع رؤوس انتهاء الصلاحية الخاصة به، وتحديثه بشكل منفصل وإعادة استخدامه عبر أوراق الأنماط والصفحات. تكون ذاكرة التخزين المؤقت للمتصفح أكثر كفاءة عندما تكون الموارد عبارة عن ملفات منفصلة عنها عندما تكون مضمنة في مستندات أكبر. تتضاعف تكاليف التحليل والعرض عندما يتم تضمين سلاسل Base64 الكبيرة في أوراق الأنماط. يجب على المحلل اللغوي CSS قراءة ورقة الأنماط بأكملها قبل تطبيق القواعد.
مثال عملي: تضمين رمز SVG صغير كنص - لصق العلامة في برنامج التشفير وتجميع البيانات: URI يدويًا
ورقة الأنماط 400 كيلو بايت مع Base64 المضمنة هي 400 كيلو بايت من النص الذي يجب تحليله قبل تطبيق أي قواعد. يجب أن يقوم المحلل اللغوي HTML الذي يعرض صفحة تحتوي على بيانات كبيرة: URI في سمة النمط أو خاصية صورة الخلفية بفك تشفير Base64 وإنشاء الصورة قبل أن يتمكن العنصر من العرض. بالنسبة للأيقونات SVG البسيطة، يعد هذا أمرًا تافهًا. بالنسبة إلى الصور الأكثر تعقيدًا أو الرموز الأكبر حجمًا، تتم عملية فك التشفير والعرض على الموضوع الرئيسي، مما قد يؤدي إلى حظر التفاعل. والتكلفة النوعية حقيقية ولكن من الصعب قياسها دون تحديد السمات.
كقاعدة عامة، إذا كانت الصورة المضمنة أكبر من بضعة كيلو بايت، تكون الملفات المنفصلة أسرع. يوضح المثال العملي المقايضة الدقيقة. خذ رمز السهم SVG البسيط، 1.2 كيلو بايت من XML. يصبح ترميز Base64 1600 حرفًا، أو حوالي 1.6 كيلو بايت مع البيانات: URL البادئة. قاعدة CSS منفصلة مع صورة الخلفية: url(/icons/arrow.svg) ربما تضيف 40 bytes إلى ورقة الأنماط. يتم تنزيل ملف الرمز مرة واحدة، وتخزينه مؤقتًا وإعادة استخدامه. ويحفظ التضمين طلبًا واحدًا HTTP لهذا الرمز الواحد ولكنه يضيف 1.6 كيلو بايت إلى كل تحميل لورقة الأنماط.
القواعد الأساسية التي تصمد - الأصول الصغيرة والحرجة وذات الاستخدام الواحد مضمنة؛ كل شيء آخر كملف
إذا كان حجم ورقة الأنماط 50 كيلو بايت وتمت مشاركتها عبر 20 من الصفحات، فإن تضمين هذا الرمز يؤدي إلى زيادة إجمالي التنزيل بمقدار 32 كيلو بايت لكل زيارة للموقع. يبلغ حجم الطلب HTTP الذي يتم حفظه بضع مئات من البايتات على الأكثر. يتم أيضًا مضاعفة الطلب تلقائيًا في HTTP/2, مما يزيل فرق الحمل. تخسر التجارة المضمنة خسارة كبيرة ما لم تكن ورقة الأنماط صغيرة الحجم، أو يكون الرمز ضخمًا أو يظهر الرمز في صفحة واحدة فقط وليس في أي مكان آخر. إن القواعد الأساسية التي تصمد أمام التدقيق محدودة ومحددة.
يمكن تضمين الأصول الصغيرة والحرجة ذات الاستخدام الواحد. قد يتم تضمين سهم 200 بايت SVG الذي يظهر فقط على صفحة واحدة غير عادية لحفظ عبء الطلب. كل شيء آخر يجب أن يكون منفصلا. منطق مسار العرض المهم مهم: إذا كان يجب أن يكون الرمز مرئيًا على الفور وكل مللي ثانية من وقت التحميل يكلف التحويل، فقد يكون التضمين هو الفائز. بالنسبة للصفحات النموذجية التي تحتوي على أيقونات نموذجية، تكون الملفات المنفصلة دائمًا أفضل. اختبر كلا الطريقتين باستخدام أصولك الفعلية وقم بقياس تحميل الصفحة ومعدلات الوصول إلى ذاكرة التخزين المؤقت والطلب الشلالي.
ما لا يغطيه هذا — HTTP/2 وHTTP/3 تفاصيل تعدد الإرسال وضغط تنسيق الصورة
لا تفترض أن التضمين هو تحسين بدون قياس. أسهل طريقة للحصول على ورقة أنماط متضخمة هي التضمين بشكل متزايد دون قياس ما إذا كانت كل إضافة أسرع بالفعل. يساعدك برنامج التشفير ووحدة فك التشفير Base64 على اتخاذ هذا القرار قبل الالتزام بالتضمين. الصق ترميز SVG أو أي مصدر رمز آخر في الأداة كنص. انقر فوق تشفير وقم بتعيين الخيارات لإنشاء البيانات: URI. تعرض لك الأداة الطول الدقيق للبيانات: URL. قارن ذلك بحجم قاعدة CSS المنفصلة وملف الأصل نفسه.
احسب عدد الصفحات التي ستحتاج إلى مشاركة ورقة الأنماط لتحقيق التعادل في التضمين مقابل الملفات المنفصلة. قم بتجميع البيانات: URI واختبرها في صفحة HTML الفعلية قبل إلزامها بورقة الأنماط. إذا كان URI أطول من بضع مئات من الأحرف، فمن المحتمل أن تكون تكلفة التضمين أكبر من فائدة حفظ الطلب. استخدم الأداة لاختبار الرموز والأصول الفعلية، ثم قم بقياس التأثير على مقاييس تحميل الصفحة الحقيقية قبل التضمين وبعده.
الوجبات الجاهزة: مضمنة بشكل مقتصد وقياس - كيف يتيح لك برنامج التشفير ووحدة فك التشفير Base64 تشفير ترميز SVG ومعرفة الحجم الدقيق قبل الالتزام
النهج الأداءي هو أن يكون انتقائيًا بشأن التضمين. الرموز المستخدمة في كل صفحة أو عبر العديد من الصفحات هي ملفات منفصلة مخزنة مؤقتًا. يمكن تضمين الرموز المستخدمة في صفحة واحدة بالضبط أو الرموز المهمة حقًا للطلاء الأول. قم بقياس المفاضلة بين أصولك وصفحاتك الفعلية بدلاً من اتباع النصائح العامة. استخدم برنامج التشفير ووحدة فك التشفير Base64 لمعرفة الحجم الدقيق لأي أصل مضمن قبل إضافته إلى ورقة الأنماط. عقوبة الحجم حقيقية وتتضاعف في كل مشاهدة للصفحة.
التخزين المؤقت وتعدد الإرسال جعل الفائدة الأصلية للتضمين أقل أهمية. بالنسبة لمعظم التطبيقات الحديثة، فإن أوراق الأنماط الأصغر حجمًا وكفاءة ذاكرة التخزين المؤقت الأفضل من الملفات المنفصلة تفوق تكلفة الطلب. بشكل مقتصد، قم بقياس النتيجة وقياس الثقة أكثر من الحدس.