2 دمج وضغط ملفات JavaScript وCSS على جانب الخادم
أحد أهم أفضل الممارسات لتحسين أداء الويب هو تقليل طلبات HTTP، وهي أيضًا أهم قاعدة في YSlow. تتضمن الحلول لتقليل طلبات HTTP دمج ملفات JavaScript وCSS، وCSS Sprites، وImage Maps، واستخدام معرفات URI للبيانات لتشفير الصور. تتوفر الآن برامج CSS Sprites وتعيين الصور على نطاق واسع، ولكن نظرًا لعدم دعم IE6 وIE7 لمعرفات URI للبيانات ومشكلات الأداء، لم يتم استخدام هذه التقنية على نطاق واسع. في الوقت الحاضر، عدد ملفات JavaScript وCSS في معظم صفحات الويب هو نفسه الذي كان عليه عندما تم تطويره. سيتم دمج عدد قليل من صفحات الويب محليًا وفقًا للوضع الفعلي، ويتم إجراء عدد لا بأس به من عمليات الدمج هذه يدويًا. يجب إجراء كل عملية دمج جديدة محليًا مرة أخرى، كما أن إكمالها وتحميلها إلى الخادم أمر غير رسمي ومرهق نسبيًا، كما أن ضغط نفس الملف له موقف مماثل. باستخدام الدمج والضغط من جانب الخادم، يمكننا جعل تفاصيل الملف صغيرة قدر الإمكان وفقًا لمنطق التطوير، واستخدام قواعد URL في صفحة الويب لدمج الملفات وضغطها تلقائيًا، الأمر الذي سيكون مرنًا وفعالًا للغاية.
معالج التحرير والسرد YUI
في يوليو 2008، أعلن فريق YUI أنه سيوفر خدمة Combo Handler لمكونات YUI JavaScript على YAHOO CDN. Combo Handler عبارة عن وحدة Apache تم تطويرها بواسطة Yahoo!، والتي تسمح للمطورين بدمج ملفات JavaScript وCSS بسهولة وسهولة من خلال عناوين URL، مما يقلل بشكل كبير من عدد طلبات الملفات. على سبيل المثال، يتطلب استخدام مكون Rich Text Editor الخاص بـ YUI2 على الصفحة إدخال ملفات JavaScript متعددة، والطرق الشائعة هي كما يلي:
بعد استخدام خدمة Combo Handler، يمكن كتابة الكود أعلاه على النحو التالي:
بالإضافة إلى تقليل إمكانية قراءة التعليمات البرمجية بشكل طفيف، فإن استخدام خدمة Combo Handler يقلل بشكل كبير من عدد طلبات HTTP ويقلل أيضًا من كمية كود URL، وهو أمر بالغ الأهمية لتحسين أداء الويب. لذلك، بدءًا من YUI 2.6.0، يحتوي المكون الأساسي YUI Loader على وظيفة معالجة التحرير والسرد المضمنة، أي أنه عند استخدام YUI Loader، من خلال تكوين سمة الدمج، يمكن تحميل ملفات JavaScript أو CSS المتعددة في الملف. شكل استخدام خدمة Combo Handler، طالما أن خادم الملفات الثابتة يدعم Combo Handler. في YUI، عندما يتم تكوين الدمج على true، يستخدم CDN افتراضيًا Yahoo! CDN ( http://yui.yahooapis.com )، لذلك لا توجد مشكلة. هذا هو أحد أكثر الأجزاء سحراً في YUI.
لسوء الحظ، فإن سرعة http://yui.yahooapis.com في الصين ليست جيدة جدًا في الأصل، قدمت Yahoo China http://cn.yui.yahooapis.com/ ، لكنها لم تقدم بعد خدمة Combo Handler وفي الوقت نفسه، ولأسباب مختلفة، توقفت تحديثاته منذ إصدار YUI 2.7.0. والأسوأ من ذلك هو أنه على الرغم من أن وحدة Apache التي طورتها شركة Yahoo! لدعم Combo Handler من المقرر أن تكون مفتوحة المصدر، إلا أنها لا تزال تقنية خاصة على الأقل في الوقت الحالي، لاستخدامها، تحتاج إلى تنفيذ وظائف مماثلة بنفسك، لذلك هناك لا توجد تطبيقات كثيرة لتقنيات مماثلة في الصين.
<script src="http://yui.yahooapis.com/combo? <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>