ข้อมูล URI Data URI เป็นโซลูชันที่กำหนดโดย RFC 2397 เพื่อฝังไฟล์ขนาดเล็กลงในเอกสารโดยตรง ผ่านไวยากรณ์ต่อไปนี้คุณสามารถเปลี่ยนไฟล์ขนาดเล็กเป็นการเข้ารหัสที่ระบุและฝังลงในหน้าเว็บได้โดยตรง:
ข้อมูล: [<mime-type>] [; base64], <data>
- MIME-type: ระบุ mime ของข้อมูลฝังตัว รูปแบบของมันคือ [ประเภท]/[ชนิดย่อย]; ตัวอย่างเช่น MIME ที่สอดคล้องกับภาพ PNG คือ Image/PNG พารามิเตอร์สามารถใช้ข้อมูลเพิ่มเติมเพื่อระบุพารามิเตอร์ charset สำหรับข้อความ/ธรรมดาและข้อความ/htm ฯลฯ ค่าเริ่มต้นคือข้อความ/ธรรมดา; charset = us-ascii
- BASE64: ประกาศการเข้ารหัสข้อมูลที่ตามมาคือ BASE64 มิฉะนั้นข้อมูลจะต้องเข้ารหัสด้วยหมายเลขเปอร์เซ็นต์ (นั่นคือ urlencode เนื้อหา)
ในศตวรรษที่ผ่านมา HTML4.01 ได้แนะนำโซลูชันข้อมูล URI จนถึงทุกวันนี้เบราว์เซอร์กระแสหลักทั้งหมดยกเว้น IE6 และ IE7 รองรับ แต่ IE8 ยังคงมีข้อ จำกัด ในการสนับสนุนของข้อมูล URI เฉพาะวัตถุที่รองรับ (เฉพาะเมื่อภาพ), IMG, ประเภทอินพุต = ภาพ, ลิงก์และ CSS และปริมาณข้อมูลไม่เกิน 32K
ข้อได้เปรียบ:- ลดจำนวนคำขอ HTTP โดยไม่ จำกัด การใช้การเชื่อมต่อ TCP และจำนวนเบราว์เซอร์พร้อมกันภายใต้ชื่อโดเมนเดียวกัน
- สำหรับไฟล์ขนาดเล็กแบนด์วิดท์จะลดลง แม้ว่าจำนวนข้อมูลจะเพิ่มขึ้นหลังจากการเข้ารหัสส่วนหัว HTTP จะลดลง เมื่อจำนวนข้อมูลของส่วนหัว HTTP มากกว่าการเพิ่มขึ้นของการเข้ารหัสไฟล์แบนด์วิดท์จะลดลง
- สำหรับไซต์ HTTPS จะมีการแจ้งความปลอดภัยสำหรับการผสม HTTPS และ HTTP และ HTTPS มีราคาแพงกว่า HTTP ดังนั้นข้อมูล URI จึงมีข้อได้เปรียบที่ชัดเจนกว่าในเรื่องนี้
- คุณสามารถบันทึกหน้ามัลติมีเดียทั้งหมดเป็นไฟล์
ข้อบกพร่อง :
- ไม่สามารถนำกลับมาใช้ใหม่ได้ หากเอกสารเดียวกันใช้กับเนื้อหาเดียวกันหลายครั้งจะต้องทำซ้ำหลายครั้งและจำนวนข้อมูลที่เพิ่มขึ้นอย่างมากซึ่งจะเพิ่มเวลาในการดาวน์โหลด
- ไม่สามารถแคชเพียงอย่างเดียวดังนั้นจึงต้องโหลดซ้ำเมื่อมีการโหลดเอกสารซ้ำ
- ไคลเอนต์จำเป็นต้องใช้ใหม่และแสดงผลซึ่งจะเพิ่มการบริโภค
- ไม่รองรับการบีบอัดข้อมูลการเข้ารหัส BASE64 จะเพิ่มขึ้น 1/3 ของขนาดและปริมาณข้อมูลจะเพิ่มขึ้นมากขึ้นหลังจาก urlencode
- ไม่เอื้อต่อการกรองซอฟต์แวร์ความปลอดภัย แต่ยังมีความเสี่ยงด้านความปลอดภัยบางอย่าง
MHTML MHTML เป็นตัวย่อของ MIME HTML (Multipurpose Internet Mail Extension HTML) ซึ่งกำหนดโดย RFC 2557 เพื่อบันทึกเนื้อหาทั้งหมดของหน้ามัลติมีเดียไปยังเอกสารเดียวกัน โซลูชันนี้เสนอโดย Microsoft เพื่อสนับสนุนตั้งแต่ IE5.0 และ Opera9.0 ก็เริ่มสนับสนุน Safari สามารถบันทึกไฟล์ใน. MHT (คำต่อท้ายของไฟล์ MHTML) แต่ไม่รองรับการแสดง
MHTML และข้อมูล URI มีความคล้ายคลึงกันมีฟังก์ชั่นที่ทรงพลังกว่าและไวยากรณ์ที่ซับซ้อนมากขึ้นและไม่มีข้อเสียที่ไม่สามารถนำกลับมาใช้ใหม่ในข้อมูล URI ได้ แต่ MHTML ไม่ยืดหยุ่นและสะดวกพอที่จะใช้ ตัวอย่างเช่น URL ที่อ้างถึงทรัพยากรอาจเป็นที่อยู่สัมพัทธ์ในไฟล์ MHT มิฉะนั้นจะต้องเป็นที่อยู่สัมบูรณ์ โซลูชันของ Hedger สำหรับ IE ใน "Cross Browser Base64 ภาพที่เข้ารหัสที่ฝังอยู่ใน HTML" ใช้เส้นทางสัมพัทธ์เพราะมันประกาศประเภทเนื้อหา: ข้อความ/RFC822 เพื่อให้ IE แยกวิเคราะห์ตาม MHTML หากไม่ได้รับการแก้ไขประเภทเนื้อหาจำเป็นต้องมีโปรโตคอล MHTML ในเวลานี้จะต้องใช้เส้นทางสัมบูรณ์เช่น "MHTML - เมื่อคุณต้องการข้อมูล: URIS ใน IE7 และต่ำกว่า"
แอปพลิเคชัน การรวมกันของข้อมูล URI และ MHTML สามารถแก้ปัญหาเบราว์เซอร์หลักทั้งหมดได้อย่างสมบูรณ์ เนื่องจากข้อบกพร่องของการถูกแคชและนำกลับมาใช้ใหม่จึงไม่เหมาะสำหรับใช้ในหน้าโดยตรง อย่างไรก็ตามพวกเขามีข้อได้เปรียบที่ดีในการใช้รูปภาพที่เหมาะสมในไฟล์ CSS และ JavaScript:
- จำนวนคำขอลดลงอย่างมากและ CSS ของเว็บไซต์ขนาดใหญ่อ้างอิงทรัพยากรรูปภาพจำนวนมาก
- ทั้ง CSS และ JavaScript สามารถแคชได้โดยใช้การแคชข้อมูลทางอ้อม
- การใช้ CSS สามารถแก้ปัญหาการใช้ข้อมูลซ้ำของ URI ได้
- กล่าวคำอำลากับสไปรต์ CSS แล้วสไปรต์ CSS ดูเหมือนจะลดจำนวนคำขอ แต่นอกเหนือจากการมีข้อยกเว้นในสถานการณ์ที่ไม่แน่นอนแล้ว CSS Sprites ยังต้องการการรวมภาพเทียม แม้ว่าจะมีเครื่องมือผสาน แต่ก็ยังต้องใช้เวลามากในการไขปริศนาอย่างมีประสิทธิภาพและนำปัญหาการบำรุงรักษามาใช้ หลังจากที่คุณปฏิบัติตามหลักการออกแบบบางอย่างคุณสามารถละทิ้ง CSS Sprites เพื่อเขียน CSS ได้อย่างสมบูรณ์และในที่สุดก็ใช้เครื่องมือในการแปลงภาพเป็นข้อมูล URI และ MHTML ในระหว่างการอัปโหลดไปยังเซิร์ฟเวอร์เช่นเครื่องมือที่ใช้ใน Python
- การเข้ารหัส BASE64 เพิ่มไฟล์รูปภาพโดย 1/3 และการใช้ข้อมูล URI และ MHTML ในเวลาเดียวกันเทียบเท่ากับการเพิ่มขึ้น 2/3 อย่างไรก็ตาม CSS และ JavaScript สามารถใช้การบีบอัด GZIP ซึ่งสามารถบันทึกปริมาณข้อมูลได้ 2/3 ดังนั้นปริมาณข้อมูลสุดท้ายหลังจากใช้การบีบอัด GZIP คือ (1 + 1/3) * 2 * (1/3) = 8/9 ดังนั้นปริมาณการรับส่งข้อมูลขั้นสุดท้ายจะลดลง
เพื่ออำนวยความสะดวกในการใช้งานข้อมูล URI และ MHTML ใน CSS ฉันเขียน Data URI & MHTML Generator ซึ่งคุณสามารถเห็นการใช้เพื่อสร้างอินสแตนซ์แอปพลิเคชันของข้อมูล URI & 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/
-
*Image Background-Image: Expression (ฟังก์ชั่น (ele) {
Ele.style.BackGroundImage = 'url (mhtml:' +
document.getElementById ('data-uri-css'). getAttribute ('href', 4) +
'! 03114501408821761.gif)';
}(นี้));
