🍄 📃 💪 عنوان HTTP لسياسة الميزات والتحكم في متصفح الويب 🤜🏻 🧔 🔈

هناك تقنية واحدة لا مثيل لها تسمح لك بالحفاظ على أداء مشروع الويب تحت السيطرة. وهو يتألف من إدخال آليات في عملية التنمية ، والتي تظهر نتائجها بوضوح. تم تصميم هذه الآليات لتذكير المبرمج دائمًا بأهمية الأداء. هناك شيء يعجبني حقًا في هذا السياق. هذا هو عنوان HTTP لسياسة الميزات . هذا العنوان هو ميزة جديدة نسبيًا تسمح لمطور البرامج بتشغيل بعض ميزات المتصفح وإيقاف تشغيلها أثناء تصفح موقعه. على سبيل المثال ، يمكنك إخبار المتصفح أنه لا يجب السماح باستخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي من خلال تمريره في الرأس التالي:

Feature-Policy: geolocation 'none'

هناك Feature-Policyالعديد من المزايا لاستخدام رأس من حيث الأمان والأداء. لكني الآن أحب بشكل خاص كيف Feature-Policyيمكنك استخدامه لجعل مشكلات أداء موقع الويب التي عادة ما يكون من السهل تجاهلها بشكل ملحوظ. ويمكن مقارنة ذلك بشيء مثل "أداء الأداء". على وجه الخصوص ، نحن نتحدث عن تحديد مشاكل الصور المستخدمة في مشاريع الويب.

سياسة الصور ذات الحجم الكبير

إذا تم إرسال الصورة إلى المستعرض بتنسيق يدعمه ، فسيتم عرض هذه الصورة. هذا هو سلوك المتصفح القياسي. المتصفح ، الذي يحاول مساعدة أولئك الذين يشاهدون الصفحة ، يقوم أيضًا بقياس هذه الصور تلقائيًا. لذلك ، تبدو جيدة حتى لو كانت ممثلة بملفات رسومية ضخمة. ونتيجة لذلك ، إذا كنت تستخدم صورًا أكبر من الأحجام التي تحتاجها الصفحة ، فهذا ، للوهلة الأولى ، غير مرئي.

سياسة ( توجيه )oversized-imagesيخبر المتصفح أنه يجب ألا يسمح باستخدام الصور التي يتجاوز حجمها ، بعدد محدد من المرات ، حجم حاوياتها. لا يمكن أن تكون الصورة ، وفقًا للقيود القياسية ، أكثر من ضعف الحاوية. ولكن يمكن إعادة تحديد هذه القيمة ، إذا لزم الأمر.

لذلك ، إذا تلقى المتصفح الرأس التالي ، فلن يسمح لك بعرض الصور المأخوذة من أي مصادر (تم تعيين هذا بفضل none) ، وأبعادها أكثر من ضعف حجم حاوياتها (في العرض أو الارتفاع).

Feature-Policy: oversized-images 'none';

إذا كنت بحاجة إلى مزيد من المرونة ، يمكنك إخبار المتصفح بأنه لا يجب أن يعرض صورًا أكبر من الحاويات بثلاث مرات:

Feature-Policy: oversized-images *(3) 'none';

على أي حال ، إذا كانت الصورة لا تتناسب مع الحدود المحددة ، فسيتم عرض كعب روتين بدلاً من الصورة ، وسيتم إرسال رسالة خطأ إلى وحدة التحكم.

إذا كان الموقع يستخدم سياسة الصور كبيرة الحجم ، فسيتم تحميل الصور الكبيرة ، ولكن سيتم عرض كعب الروتين بدلاً من ذلك ، وسيتم عرض رسالة خطأ في وحدة التحكم

صور غير محسنة

مشكلة أخرى شائعة في الرسومات هي استخدام الصور غير المحسنة. في كثير من الأحيان يمكنك العثور على صور لم يتم ضغطها بشكل كاف. ومع ذلك ، يمكن تحديد حجمها بشكل صحيح. لذلك ، بالنسبة للملفات التي تحتوي على صور ، عند التصوير وإنشائها ، يمكن إضافة الكثير من البيانات الوصفية غير الضرورية ، والتي غالبًا ما تبقى في الملفات وعند استخدامها في المتصفحات. أحد الأمثلة المزعجة بشكل خاص لهذا هو الصور ، التي تحتوي بياناتها الوصفية على الصور المصغرة الخاصة بها للمعاينة. في كثير من الأحيان رأيت كيف أن الصورة المصغرة المضمنة في الصورة (وجود المصممين والمطورين لم يعرفوا حتى) ، "وزن" أكثر من الصورة نفسها!

من بين أمور أخرى ، يمكنك هنا استدعاء ضغط الصور المعتاد ، المدعوم بالعديد من التنسيقات ، مما يسمح لك بتحقيق التوازن المثالي بين جودة الصورة وحجم الملف.

و -الضياع-صور غير محسن و غير محسن-ضياع-صور سياسات تتيح معرفة المتصفح الذي يطابق حجم الملف وحجم الصورة بالبكسل.

Feature-Policy: unoptimized-lossy-images 'none';
Feature-Policy: unoptimized-lossless-images 'none';

إذا كان عدد البايتات لكل بكسل (بايت لكل بكسل ، BPP) مرتفعًا جدًا ، فسيعرض المتصفح كعب الروتين بدلاً من الصورة ويعرض رسالة خطأ في وحدة التحكم.

يؤدي تطبيق سياسات غير محسنة - * إلى عرض كعب الروتين بدلاً من الصور غير الملائمة - تمامًا مثل استخدام سياسة الصور كبيرة الحجم ، فإن

مستوى BPP الموصى به للصور المضغوطة المفقودة هو 0.5 ، و 1 للصور المضغوطة بدون فقدان. بالإضافة إلى ذلك ، عند تحليل الصور ، يُسمح بانحراف طفيف في حجمها الإجمالي عن هذه المستويات. الآن هذا الانحراف للصور المضغوطة مع الفقد هو 1 كيلو بايت ، للصور المضغوطة بدون فقد - 10 كيلو بايت.

على سبيل المثال ، لنفترض أن لدينا صورة JPEG بحجم 200 × 200 بكسل. JPEG عبارة عن تنسيق ضغط صور مفقود ، مما يؤدي إلى مستوى BPP موصى به يبلغ 0.5. في الوقت نفسه ، قد يتجاوز الحجم الإجمالي للصورة الحجم الموصى به بمقدار 1 كيلوبايت فقط. لمعرفة حجم الصورة المتشابهة التي يجب أن تتناسب مع المستعرض ، تحتاج إلى مضاعفة أبعاد جوانب الصورة بالبكسل في بعضها البعض ومن خلال BPP ، ثم إضافة الانحراف المسموح به لما يحدث.

(200 x 200 x .5) + 1024 = 21,024بايت ، أو 20.5كيلوبايت

إذا تم ضغط الصورة دون فقد ، يُسمح بانحراف عن الحجم "المثالي" البالغ 10 كيلوبايت ، في حين أن ضغط BP لهذه الصورة سيكون 1. وإلا ، فإن الحسابات تبدو متشابهة تمامًا:

(200 x 200 x 1) + 10,240 = 50,240بايت ، أو 49.1كيلوبايت

من المرجح أن يتغير حجم الانحراف المسموح به في المستقبل. في الواقع ، على الرغم من أن Blink ، افتراضيًا ، يستخدم هذا المؤشر للصور المضغوطة دون فقد ، تساوي 10 كيلوبايت ، فإن التجارب جارية بالفعل مع سياسة unoptimized-lossless-images-strictتغير هذا المؤشر ، وخفضه إلى مستوى 1 كيلوبايت.

الوسائط غير محددة

الجديد هو القديم المنسي بشكل جيد.

لفترة طويلة استخدام سمات الصورة height، widthوكان أكثر أو أقل شيوعا. بدون هذه السمات ، لم يكن المتصفح يعرف مقدار المساحة التي يجب أن تشغلها الصورة حتى لحظة تحميل الصورة. هذا أدى إلى تحولات في تخطيطات الصفحة. تم عرض الصفحة ، ثم بعد أن وصلت الصورة ، تحول محتواها. كان على المتصفح مرة أخرى إعادة تخطيط التخطيط من أجل تخصيص مساحة للصورة.

عندما حان الوقت للتخطيطات التي يجب فيها تغيير أحجام الصور بمرونة باستخدام CSS ، لم يعد وجود أو عدم وجود هذه السمات يلعب دورًا خاصًا. ونتيجة لذلك ، توقف العديد ببساطة عن استخدام هذه السمات.

ولكن بفضل العمل الأخيريمكن أن يبدأ بواسطة Jen Simmons و Firefox و Chrome حساب نسبة العرض إلى الارتفاع للصور بناءً على سماتها heightو width. عندما يتم دمج هذا النهج مع الأنماط المطبقة على الصور ، يتبين أن المتصفحات يمكن أن تحجز مساحة للصور أثناء المرور الأولي للتخطيط. تخبر

سياسة الوسائط غير بحجمها المستعرض أنه يجب أن تحتوي جميع عناصر الوسائط على سمات تحدد أحجام هذه العناصر. إذا لم تكن هناك مثل هذه السمات ، فيجب أن يستخدم المتصفح القيم الافتراضية. كل شيء ، في الواقع ، أكثر تعقيدًا بعض الشيء ، ولكن الخلاصة هي أنه إذا لم يكن للصورة السمات المناسبة ، فإن المتصفح يستخدم قيمة 300x150البكسل القياسية .

Feature-Policy: unsized-media 'none';

عند تطبيق هذه السياسة ، سيتم عرض الصور ، ولكن إذا لم يتم تحديد حجمها في HTML ، فسوف يلاحظ المطور بسرعة أن الصور معروضة بالحجم الافتراضي. وكالعادة ، سيتم إرسال رسالة خطأ إلى وحدة التحكم.

يؤدي تطبيق سياسة الوسائط غير بحجمها إلى حقيقة أنه يتم عرض الصور ومقاطع الفيديو بدون سمات الارتفاع والعرض ، لكن المتصفح يضبط أحجامها على 300x150 بكسل.

ربما يجدر ذكر إحدى الميزات التي بدت غير عادية بالنسبة لي في البداية. تظهر نفسها عند مشاركة السياساتunsized-mediaوoversized-images. في هذه الحالة ، لا يجب أن يفاجأ المرء بمظهر أكثر من ذي قبل ، عدد الرسائل حول الصور الكبيرة جدًا. والحقيقة هي أنه بسبب تطبيق السياسة ، يقومunsized-mediaالمتصفح بتغيير حجم الصور التي لا تحتوي على سماتheightوماwidthيصل إلى300x150بكسل. وبعد ذلك يكون هذا الحجم الذي يستخدمه المتصفح كنقطة مرجعية لتحديد ما إذا كانت الصورة تتطابق مع الحاوية الخاصة بها.

جذب الانتباه إلى القضايا الأقل وضوحًا

في السياسات المتعلقة بالصور ، أحب حقيقة أنها ، في عملية تطوير المشاريع ، تجعل من الممكن إظهار ما هو مخفي عادة. ونتيجة لذلك ، يعلم المطور أنه لم يهتم بتحسين الصور ، أو أنه نسي تعيين سماتها heightو width. تنعكس كل هذه الأخطاء على الفور في مظهر الصفحات. في الواقع ، الميزة الرئيسية لاستخدام السياسات المذكورة أعلاه هي أنها تسمح للمطور بمعرفة المشكلات المتعلقة بالصور بسرعة. بينما السياسةunsized-mediaيمكن أن يؤدي إلى انخفاض في عدد المواقف التي تحدث فيها "التحولات" في تخطيطات الصفحة ؛ ولا يمنع استخدام سياسات أخرى تحميل الصور غير الملائمة. ونتيجة لذلك ، فإن النقطة القوية الوحيدة لتطبيق هذه السياسات هي أنها تلفت انتباه المطورين إلى المشاكل.

هناك العديد من السياسات التي قد تكون مفيدة من حيث تحليل الصفحات لتأثير شيء ما على أدائها. هذا هو المكان الذي يتبادر إلى الذهن سياسات مثل سيناريو المزامنة (تمنع هذه السياسة تنفيذ البرامج النصية المتزامنة) و sync-xhr(تحظر طلبات AJAX المتزامنة) و document-write(تحظر المكالمات document.write).

تُعد هذه السياسات أدوات رائعة للتحكم في جوانب معينة من أداء الصفحة ، لكنها لا تزود المطورين بنفس التعليقات الملحوظة التي توفرها العديد من السياسات المذكورة أعلاه في شكل صور مفقودة. بالطبع ، إذا كانت الصفحة تحتوي على نص برمجي متزامن ، والذي لا يتم عرضه بدونه ، فلن يكون من السهل تفويته (وليس من الصعب العثور على هذه الصفحات). لكن هذه السياسات تشير عادةً إلى وجود أخطاء في شكل الرسائل المعروضة على وحدة التحكم. وبصراحة ، أعتقد أن معظم المطورين لا يهتمون كثيرًا بوحدة التحكم (أعتقد أننا يجب أن نكون جميعًا أكثر حذراً بشأن وحدة التحكم).

ولكن ، مع ذلك ، يمكننا أن نجعل الأخطاء المكتشفة بواسطة سياسات "غير مرئية" أكثر وضوحًا باستخدام واجهة برمجة التطبيقاتReportingObserver لرصد الانتهاكات وعرض الإخطارات ذات الصلة على الصفحة. يمكن جعل هذه الإخطارات ملحوظة للغاية.

let reportingAlerts = document.createElement('ul');
  reportingAlerts.setAttribute('id','reportingAlerts');
  document.body.appendChild(reportingAlerts);

const alertBox = document.getElementById('reportingAlerts');

new ReportingObserver((reports, observer) => {
  let fragment = document.createDocumentFragment();
  
  Object.keys(reports).forEach(function(item) {
    let li = document.createElement('li');
    li.textContent = reports[item].body.message + ': ' + reports[item].body.featureId;
    fragment.appendChild(li);
  });
  
  alertBox.appendChild(fragment)
}, {types: ['feature-policy-violation'], buffered: true}).observe();

لقد رسمت مثالاً في CodePen عن كيف قد يبدو هذا.

مثال على كيفية عرض إشعارات انتهاكات السياسة المحددة بواسطة رأس سياسة الميزات. تم تصميم هذه الإخطارات للإخراج في بيئة التطوير ، أو حيث يتم إعداد المشروع للناتج للإنتاج.

استخدام أقل لرأس سياسة الميزة

النقص الكبير في استخدام الرأس Feature-Policyهو دعمه من قبل المتصفحات. على ما يبدو ، الآن يتم دعمه فقط من قبل المتصفحات القائمة على Blink (Opera و Edge و Chrome و Samsung). تدعم متصفحات Firefox و Safari سمة allowالعناصر iframe. ولكن حتى في مكان Feature-Policyدعمه ، لضمان صحة العديد من السياسات ، تحتاج إلى تمكين العلم Experimental Web Platform features(يمكنك العثور عليه في العنوان about:flags).

كيف أستخدم رأس سياسة الميزة

ذلك الطرح من العنوان Feature-Policy، المذكور أعلاه ، بالنسبة لي شخصياً ليس مشكلة معينة. أفضل استخدام السياسات المحددة بواسطة هذا الرأس كمدقق للصفحات يعتمد على المتصفح. لذلك ، لست بحاجة إلى السعي للتقدم Feature-Policyفي الإنتاج ، أو لضمان عمل السياسات لجميع المستخدمين. لا أحتاج إليها إلا أنا ، وكذلك من جانب أولئك الذين يقومون بتطوير الموقع. أنا ، على أي حال ، أستخدم Chrome كمتصفح رئيسي في عملية التطوير. لذلك ، فإن ضمان الأداء Feature-Policeفي بيئة العمل الخاصة بي هو تمكين العلامة المناسبة. بعد ذلك ، يعمل السياسيون دون أي تدخل إضافي من جانبي.

لقد وجدت أن أسهل طريقة لاستخدام الرأس هي من Feature-Policyخلال ملحق المستعرضModHeader . يسمح لك هذا الملحق بتعيين العناوين الخاصة بك التي يتم تمريرها إلى الصفحات عند عرضها.

يسمح لك ملحق ModHeader بتكوين خيارات رأس Feature Feature. يمكن تشغيلها وإيقاف تشغيلها ، إذا رغبت في ذلك

. ولدي ثلاث مجموعات من قيم الرأسFeature-Policyالتي أستخدمها بشكل دوري:

oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';
script-sync 'none'; unsized-media 'none'; oversized-images 'none'; unoptimized-lossy-images 'none'; unoptimized-lossless-images 'none';

غالبًا ما أبقي الأول قيد التشغيل. من المثير للغاية السفر عبر صفحات الويب التي تنطبق عليها السياسات المستخدمة فيها. إنه لأمر مخيف أن ننظر إلى حجم بعض الصور. هناك العديد من الأشياء التي يمكن تحسينها على الويب الحديث.

لذلك ، غالبًا ما يتم تنشيط السياسة على الصفحات unsized-media(وأنا أخطئ أيضًا في هذا) ، لذا فإن استخدامها أثناء العمل العادي على الإنترنت غير مريح. لهذا السبب سلطت الضوء عليها في سياسة منفصلة يمكنني تشغيلها وإيقاف تشغيلها. وينطبق الشيء نفسه على السياسات sync-scripts، التي "يكسر" التطبيق العديد من المواقع.

بدأت بعض الفرق التي عملت معها في استخدام السياسات التي وصفتها أثناء التطوير. وهذا يسمح لهم بالاهتمام بسرعة بالمشكلات التي لم تكن مرئية من قبل. بالطبع ، أوصي بتضمين جميع السياسات Feature-Policyفي بيئة التطوير ، مما يسمح لك بتحديد الأخطاء وتصحيحها بسرعة.

ملخص

آمل أن Feature-Policyيظهر الدعم نتيجة لذلك ، ليس فقط في Chrome. على الرغم من أن هذا هو متصفحي الرئيسي ، إلا أنني يجب أن أستخدم متصفحات أخرى أيضًا. سيكون من المفيد إذا دعموا Feature-Policy. ولكن هنا ، على الرغم من ذلك ، نرى أن الوضع النادر عندما يكون الدعم التجريبي لفرصة معينة كافياً حتى تكون ذات فائدة حقيقية.

مشاكل الأداء الدقيقة هي أيضًا مشاكل. والقدرة على جعل هذه المشاكل أكثر وضوحًا هي واحدة من أفضل الطرق التي يمكن للمطور استخدامها من أجل تحديدها وإصلاحها.

القراء الأعزاء! هل تخطط لاستخدام عنوان ميزة السياسة لتحديد المشكلات غير الواضحة في مشروعات الويب؟

عنوان HTTP لسياسة الميزات والتحكم في متصفح الويب