بيانات URI Data URI هو حل محدده RFC 2397 لتضمين الملفات الصغيرة مباشرة في المستندات. من خلال بناء الجملة التالي ، يمكنك تحويل الملفات الصغيرة إلى ترميزات محددة وتضمينها مباشرة في الصفحة:
البيانات: [<mime-type>] [؛ base64] ، <data>
- من النوع MIME: يحدد التمثيل الصامت من البيانات المدمجة. شكله هو [النوع]/[النوع الفرعي] ؛ المعلمة ، على سبيل المثال ، MIME المقابلة لصورة PNG هي الصورة/PNG. يمكن للمعلمة استخدام معلومات إضافية لتحديد معلمات charset للنص/العادي والنص/htm ، وما إلى ذلك. الافتراضي هو النص/عادي ؛ charset = us-ascii.
- BASE64: أعلن أن ترميز البيانات اللاحقة هو BASE64 ، وإلا يجب ترميز البيانات برقم مئوي (أي urlencode المحتوى).
في القرن الماضي ، قدم HTML4.01 حل Data URI. حتى يومنا هذا ، جميع المتصفحات السائدة باستثناء دعم IE6 و IE7 ، ولكن لا يزال لدى IE8 قيود على دعم البيانات URI ، فقط كائن دعم (فقط عند الصور) ، IMG ، نوع الإدخال = الصورة ، الارتباط و CSS ، ولا يمكن أن يكون حجم البيانات أكبر من 32 ألفًا.
ميزة:- تقليل عدد طلبات HTTP ، دون الحد من استهلاك اتصال TCP وعدد التزامن للمتصفحات تحت نفس اسم المجال.
- بالنسبة للملفات الصغيرة ، سيتم تقليل عرض النطاق الترددي. على الرغم من أن كمية البيانات ستزداد بعد الترميز ، يتم تقليل رأس HTTP. عندما تكون كمية بيانات رأس HTTP أكبر من زيادة ترميز الملفات ، سيتم تقليل عرض النطاق الترددي.
- بالنسبة لمواقع HTTPS ، سيكون هناك مطالبات أمان لخلط HTTPs و HTTP ، و HTTPS أغلى من HTTP ، لذلك فإن Data URI لديها مزايا أكثر وضوحًا في هذا الصدد.
- يمكنك حفظ صفحة الوسائط المتعددة بأكملها كملف.
عيب :
- لا يمكن إعادة استخدامه. إذا كان المستند نفسه يطبق نفس المحتوى عدة مرات ، فيجب تكراره عدة مرات ، ويزيد مقدار البيانات بشكل كبير ، مما يزيد من وقت التنزيل.
- لا يمكن أن يتم تخزينه مؤقتًا بمفرده ، لذلك يجب إعادة تحميله أيضًا عندما يحتوي على إعادة تحميل المستندات.
- يحتاج العميل إلى إعادة صياغة الرمز والعرض ، مما يزيد من الاستهلاك.
- لا يتم دعم ضغط البيانات ، وسيزداد ترميز BASE64 بمقدار 1/3 من الحجم ، وستزداد كمية البيانات أكثر بعد urlencode.
- لا يفضي إلى تصفية برامج الأمان ، ولكن لديها أيضًا مخاطر أمنية معينة.
MHTML MHTML هو اختصار MIME HTML (امتداد بريد الإنترنت متعدد الأغراض HTML) ، والذي يتم تعريفه بواسطة RFC 2557 لحفظ جميع محتويات صفحة الوسائط المتعددة إلى نفس المستند. تم اقتراح هذا الحل من قبل Microsoft لدعمه منذ IE5.0 ، وبدأت Opera9.0 أيضًا في دعمها. يمكن لـ Safari حفظ الملف في .mht (لاحقة ملف MHTML) ، ولكنها لا تدعم عرضه.
تتشابه MHTML و DATA URI ، مع وظائف أكثر قوة وبناء بناء جملة أكثر تعقيدًا ، وليس لها عيوب لا يمكن إعادة استخدامها في URI للبيانات ، لكن MHTML غير مرن ومريحة بما يكفي للاستخدام. على سبيل المثال ، يمكن أن يكون عنوان URL المشار إليه إلى مورد عنوانًا نسبيًا في ملف MHT ، وإلا يجب أن يكون عنوانًا مطلقًا. يستخدم حل Hedger لـ IE في "Cross Browser Base64 المشفرة المدمجة في HTML" مسارات نسبية لأنه يعلن نوع المحتوى: Message/RFC822 لجعل IE PARSE وفقًا لـ MHTML. إذا لم يتم تعديل نوع المحتوى ، فسيكون بروتوكول MHTML مطلوبًا. في هذا الوقت ، يجب استخدام المسارات المطلقة ، مثل "MHTML - عندما تحتاج إلى بيانات: URIS في IE7 وتحت".
طلب مزيج من البيانات URI و MHTML يمكن أن يحل تماما جميع المتصفحات الرئيسية. نظرًا لعيوب التخزين المؤقت وإعادة استخدامها ، فهي ليست مناسبة للاستخدام في الصفحات مباشرة. ومع ذلك ، لديهم مزايا رائعة في الاستخدام المناسب للصور في ملفات CSS و JavaScript:
- تم تقليل عدد الطلبات إلى حد كبير ، وتشير CSS لمواقع الويب الكبيرة الآن إلى عدد كبير من موارد الصور.
- يمكن تخزين كل من CSS و JavaScript ، وتنفيذ تخزين البيانات بشكل غير مباشر.
- يمكن باستخدام CSS حل مشكلة إعادة استخدام البيانات URI
- قل وداعًا لـ CSS Sprites ، ويبدو أن العفاريت CSS تقلل من عدد الطلبات ، ولكن بالإضافة إلى تقديم استثناءات في المواقف غير المؤكدة ، تتطلب العفاريت CSS أيضًا دمج الصور الاصطناعي. حتى لو كانت هناك أداة دمج ، فلا يزال يتعين عليها أن تقضي الكثير من الوقت بشكل مصطنع حول كيفية الألغاز بشكل فعال وجلب صعوبات الصيانة. بعد اتباع بعض مبادئ التصميم ، يمكنك التخلي تمامًا عن العفاريت CSS لكتابة CSS ، وأخيراً استخدام الأدوات لتحويل الصور إلى Data URI و MHTML أثناء التحميل على الخادم ، مثل الأدوات التي تم تنفيذها في Python في "استخدام أوراق وصور دمج Data uri" ، والتي يمكن أن توفر الكثير من الوقت.
- يزيد ترميز BASE64 من ملف الصورة بمقدار 1/3 ، واستخدام البيانات URI و MHTML في نفس الوقت يعادل زيادة 2/3. ومع ذلك ، يمكن لـ CSS و JavaScript استخدام ضغط GZIP ، والذي يمكن أن يحفظ 2/3 من حجم البيانات ، وبالتالي فإن حجم البيانات النهائي بعد استخدام ضغط GZIP هو (1 + 1/3) * 2 * (1/3) = 8/9 ، وبالتالي يتم تقليل حركة المرور النهائية.
لتسهيل تنفيذ البيانات URI و MHTML في CSS ، كتبت مولد بيانات URI و MHTML ، والتي يمكنك استخدامها لإنشاء مثيلات تطبيق DATA ORI و MHTML.
عند استخدام MHTML في ملفات CSS ، يجب أن يستخدم عنوان URL مسارًا مطلقًا ، مما يجعله غير مرن للغاية. لذلك ، يمكنك التفكير في استخدام تعبير CSS لحل (العرض التوضيحي) ، مثل:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*صورة الخلفية: التعبير (وظيفة (eLe) {
ele.style.backgroundimage = 'url (mhtml:' +
document.getElementById ('data-uri-css'). getAttribute ('href' ، 4) +
'! 03114501408821761.gif)' ؛
}(هذا))؛
