أفكار حول آلية نشر ملف CSS.JS

يصف

ملاحظة

مستوى الموارد

مستوى موارد الصفحة:

1. المستوى العالمي (مشترك)
2. مستوى الوحدة
3. مستوى الصفحة (الصفحة)

خطة التحسين

يركز التحسين بشكل أساسي على الجوانب التالية:

1. تقليل حجم البايت لملف واحد
2. تقليل عدد الملفات (أي تقليل عدد طلبات http)

وتعتمد التحسينات الأخرى على مهارات التطوير وتعتمد على مستوى الخبرة

حل إخراج الملف

1. دمج
2. ضغط

بناءً على مستويات الموارد وخطط التحسين، تمت صياغة الخطط الأربع التالية:


1. اقتبس ملفًا واحدًا مباشرةً وقدمه بالتسلسل (<link/>، <script/>)


2. بناءً على 1، قم بإجراء ضغط ملف واحد


3. الدمج في ملف واحد جديد وفقًا لمستوى الموارد


4. بناءً على 3، قم بضغط الملفات المدمجة

أفكار

الخيار 3: كيفية تحديد عدد الملفات المدمجة؟

مشكلة التخزين المؤقت

استخدم لاحقة الطابع الزمني

f2econfig_json

ملف التكوين:

فار f2eJson={
"الإصدار": "v3"،//version

"Update":":"20091015"،//تحديث ذاكرة التخزين المؤقت وفقًا للطابع الزمني

"Compress": "1"،//مخطط إخراج الملف (1، 2، 3، 4)

"مشترك":[//النمط العام للموقع بأكمله

"المشترك/العالمي.css"

]،

"الوحدة النمطية": {//الوحدة النمطية والأسلوب

"الوحدة 1":["product,.css"]

},

"الصفحة":{// الأنماط التي تملكها كل صفحة

"index.php":[""،"sys/index.css"]،

// يخزن العنصر الأول الاسم المرجعي للوحدة، وإذا لم يكن كذلك، فاتركه فارغًا.

"search.php":["الوحدة 1"، "المنتج/search.css"]

// مرجع وحدات متعددة، مفصولة بـ ""، على سبيل المثال: الوحدة 1، الوحدة 2

}

}

1. لدى PHP مكتبة تحويل json مخصصة
2. بنية تكوين js هي نفس بنية تكوين json لـ css

f2engine.php

1. عندما لا يتم تحديث ملف التكوين، يتم تحليل json مرة واحدة فقط في المصفوفة.
2. قم بتحليل المورد مرة واحدة فقط واحفظ النتيجة للاستخدام المباشر في المرة القادمة

مثال

على سبيل المثال، مرجع النمط لصفحة search.php

1. ابحث عن الموارد على مستوى الصفحة بناءً على الصفحة: الصفحة["search.php"]
2. ابحث عن نمط الوحدة المشار إليه بناءً على القيمة الأولى لهذه المصفوفة
3. تحديد نظام إخراج الملف بناءً على قيمة "الضغط" في ملف التكوين ومعالجته
4. الإخراج على الصفحة

   // نمط الموقع الكامل شائع

   <link type="text/css" href="common/global.pack.css?20091015" rel="stylesheet" />

   // نمط الوحدة النمطية

   <link type="text/css" href="product.pack.css?20091015" rel="stylesheet" />

   // صفحة نمط الصفحة

   <link type="text/css" href="product/serach.pack.css?20091015" rel="stylesheet" />

   ملاحظة: بعد الضغط، يصبح اسم الملف هو search.pack.css