ความคิดเกี่ยวกับกลไกการเผยแพร่ไฟล์ CSS.JS

อธิบาย

หมายเหตุ

ระดับทรัพยากร

ระดับทรัพยากรของเพจ:

1. ระดับโลก (ทั่วไป)
2. ระดับโมดูล
3. ระดับเพจ (เพจ)

แผนการเพิ่มประสิทธิภาพ

การเพิ่มประสิทธิภาพมุ่งเน้นไปที่ประเด็นต่อไปนี้เป็นหลัก:

1. ลดขนาดไบต์ของไฟล์เดียว
2. ลดจำนวนไฟล์ (เช่น ลดจำนวนคำขอ http)

การเพิ่มประสิทธิภาพอื่นๆ ขึ้นอยู่กับทักษะการพัฒนาและขึ้นอยู่กับระดับความเชี่ยวชาญ

โซลูชันเอาต์พุตไฟล์

1. ผสาน
2. การบีบอัด

ขึ้นอยู่กับระดับทรัพยากรและแผนการเพิ่มประสิทธิภาพ มีการกำหนดแผนสี่แผนต่อไปนี้:


1. อ้างอิงไฟล์เดียวโดยตรงและแนะนำตามลำดับ (<link/>, <script/>)


2. ขึ้นอยู่กับ 1 ทำการบีบอัดไฟล์เดียว


3. รวมเป็นไฟล์เดียวใหม่ตามระดับทรัพยากร


4. ตามข้อ 3 ให้บีบอัดไฟล์ที่รวมเข้าด้วยกัน

ความคิด

ตัวเลือกที่ 3: จะกำหนดจำนวนไฟล์ที่ผสานได้อย่างไร

ปัญหาแคช

ใช้ส่วนต่อท้ายการประทับเวลา

f2econfig_json

ไฟล์การกำหนดค่า:

var f2eJson={
"เวอร์ชัน":v3",//เวอร์ชัน

"อัปเดต": "20091015" // อัปเดตแคชตามการประทับเวลา

"บีบอัด": "1" // รูปแบบไฟล์เอาต์พุต (1, 2, 3, 4)

"ทั่วไป":[//รูปแบบสาธารณะสำหรับทั้งเว็บไซต์

"ทั่วไป/global.css"

-

"Module":{ //โมดูลและสไตล์

"โมดูล 1":["ผลิตภัณฑ์,.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