หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

ข้อมูล URI รวม MHTML

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-08-24 18:39:34

เว็บไซต์ YanKaven : http://dancewithnet.com/

URI ข้อมูล

Data URI เป็นรูปแบบที่กำหนดโดย RFC 2397 สำหรับการฝังไฟล์ขนาดเล็กลงในเอกสารโดยตรง ด้วยไวยากรณ์ต่อไปนี้ คุณสามารถแปลงไฟล์ขนาดเล็กเป็นการเข้ารหัสที่ระบุและฝังลงในเพจได้โดยตรง:

ข้อมูล:[<ชนิด MIME>][;base64],<ข้อมูล>

  1. ประเภท MIME: ระบุ MIME ของข้อมูลที่ฝังไว้ รูปแบบของมันคือ [type]/[subtype]; ตัวอย่างเช่น MIME ที่สอดคล้องกับรูปภาพ PNG คือ image/png พารามิเตอร์สามารถใช้เพื่อระบุข้อมูลเพิ่มเติม ในกรณีอื่นๆ จะเป็นพารามิเตอร์ชุดอักขระที่ใช้ในการระบุวิธีการเข้ารหัสข้อความ เช่น ข้อความ/ธรรมดา และ ข้อความ/htm ค่าเริ่มต้นคือ text/plain;charset=US-ASCII
  2. base64: การเข้ารหัสข้อมูลที่ตามหลังคำสั่งคือ base64 ไม่เช่นนั้นข้อมูลจะต้องเข้ารหัสเป็นเปอร์เซ็นต์ (นั่นคือ urlencode เนื้อหา)

HTML 4.01 เปิดตัวรูปแบบ Data URI ในศตวรรษที่ผ่านมา ณ วันนี้ เบราว์เซอร์หลักทั้งหมดยกเว้น IE6 และ IE7 รองรับ อย่างไรก็ตาม IE8 ยังมีข้อจำกัดในการรองรับ Data URI เท่านั้น img, input type=image, link และ URL ใน CSS และขนาดข้อมูลต้องไม่เกิน 32K

ข้อได้เปรียบ:

  1. ลดจำนวนคำขอ HTTP และไม่มีการใช้การเชื่อมต่อ TCP และการจำกัดการทำงานพร้อมกันของเบราว์เซอร์ภายใต้ชื่อโดเมนเดียวกัน
  2. แบนด์วิธจะลดลงสำหรับไฟล์ขนาดเล็ก แม้ว่าปริมาณข้อมูลจะเพิ่มขึ้นหลังจากการเข้ารหัส ส่วนหัว http จะลดลง เมื่อปริมาณข้อมูลในส่วนหัว http มากกว่าการเพิ่มขึ้นของการเข้ารหัสไฟล์ แบนด์วิดท์จะลดลง
  3. สำหรับไซต์ HTTPS จะมีการแจ้งความปลอดภัยเมื่อมีการผสม HTTPS และ HTTP และ HTTPS มีราคาแพงกว่า HTTP ดังนั้น Data URI จึงมีข้อดีที่ชัดเจนกว่าในเรื่องนี้
  4. หน้ามัลติมีเดียทั้งหมดสามารถบันทึกเป็นไฟล์ได้

ข้อบกพร่อง :

  1. ไม่สามารถนำมาใช้ซ้ำได้ หากใช้เนื้อหาเดียวกันกับเอกสารเดียวกันหลายครั้ง จะต้องทำซ้ำหลายครั้ง ซึ่งจะเพิ่มปริมาณข้อมูลอย่างมากและเพิ่มเวลาในการดาวน์โหลด
  2. ไม่สามารถแคชได้ด้วยตัวเอง ดังนั้นจึงต้องโหลดซ้ำเมื่อมีการโหลดเอกสารที่บรรจุเอกสารนั้นซ้ำ
  3. ไคลเอนต์จำเป็นต้องถอดรหัสใหม่และแสดงผล ซึ่งจะเพิ่มการใช้แต้ม
  4. ไม่รองรับการบีบอัดข้อมูล การเข้ารหัส base64 จะเพิ่มขนาดขึ้น 1/3 และปริมาณข้อมูลจะเพิ่มขึ้นอีกหลังจากการเข้ารหัส urlencoding
  5. ไม่เอื้อต่อการกรองซอฟต์แวร์รักษาความปลอดภัย และยังมีความเสี่ยงด้านความปลอดภัยบางประการอีกด้วย

MHTML

MHTML เป็นตัวย่อของ MIME HTML (MultiPurpose Internet Mail Extension HTML) เป็นโซลูชันที่กำหนดโดย RFC 2557 เพื่อบันทึกเนื้อหาทั้งหมดของหน้ามัลติมีเดียลงในเอกสารเดียวกัน Microsoft เสนอโซลูชันนี้เพื่อรองรับโดยเริ่มตั้งแต่ IE5.0 และ Opera9.0 ก็เริ่มรองรับเช่นกัน Safari สามารถบันทึกไฟล์ในรูปแบบ .mht (ส่วนต่อท้ายไฟล์ MHTML) แต่ไม่รองรับการแสดงผล

MHTML ค่อนข้างคล้ายกับ Data URI โดยมีฟังก์ชันที่มีประสิทธิภาพมากกว่าและไวยากรณ์ที่ซับซ้อนกว่า และไม่มีข้อเสียคือ "ไม่สามารถใช้ซ้ำได้" ใน Data URI อย่างไรก็ตาม MHTML ไม่ยืดหยุ่นและสะดวกในการใช้ ตัวอย่างเช่น URL ของ การอ้างอิงทรัพยากรอยู่ในไฟล์ mht อาจเป็นที่อยู่แบบสัมพันธ์ได้ มิฉะนั้น จะต้องเป็นที่อยู่ที่แน่นอน โซลูชันของ hedger สำหรับ IE ใน "รูปภาพที่เข้ารหัส Cross Browser Base64 ที่ฝังอยู่ใน HTML" ใช้เส้นทางสัมพัทธ์เนื่องจากมีการประกาศประเภทเนื้อหา: message/rfc822 เพื่อให้ IE แยกวิเคราะห์ตาม MHTML หากคุณไม่แก้ไขประเภทเนื้อหา คุณต้องการ หากต้องการใช้โปรโตคอล MHTML ต้องใช้เส้นทางที่แน่นอนในขณะนี้ เช่น "MHTML – เมื่อคุณต้องการข้อมูล: URIs ใน IE7 และต่ำกว่า"

แอปพลิเคชัน

การรวมกันของ Data URI และ MHTML สามารถแก้ปัญหาของเบราว์เซอร์กระแสหลักทั้งหมดได้อย่างสมบูรณ์ เนื่องจากไม่สามารถแคชและนำกลับมาใช้ใหม่ได้ จึงไม่เหมาะสำหรับการใช้งานโดยตรงในหน้า แต่สามารถใช้ได้อย่างเหมาะสมกับรูปภาพในไฟล์ CSS และ JavaScript มีข้อดีอย่างมากในการใช้:

  1. จำนวนคำขอลดลงอย่างมาก ขณะนี้ CSS ของเว็บไซต์ขนาดใหญ่อ้างอิงถึงทรัพยากรรูปภาพจำนวนมาก
  2. สามารถแคชได้ทั้ง CSS และ JavaScript โดยใช้การแคชข้อมูลทางอ้อม
  3. การใช้ CSS สามารถแก้ปัญหาการนำ URI ของข้อมูลไปใช้ซ้ำได้
  4. บอกลา CSS Sprites การเกิดขึ้นของ CSS Sprites คือการลดจำนวนคำขอ อย่างไรก็ตาม นอกเหนือจาก การนำข้อยกเว้นมาภายใต้สถานการณ์ที่ไม่แน่นอน แล้ว CSS Sprites ยังจำเป็นต้องมีการรวมรูปภาพปลอมเข้าด้วยกัน แม้ว่าจะมีเครื่องมือผสานก็ตาม ปริศนาใช้เวลานานและทำให้การบำรุงรักษายาก เมื่อคุณปฏิบัติตามหลักการออกแบบบางอย่าง คุณสามารถละทิ้ง CSS Sprites เพื่อเขียน CSS ได้โดยสิ้นเชิง และสุดท้ายก็ใช้เครื่องมือในการแปลงรูปภาพเป็น Data URI และ MHTML เมื่ออัปโหลดไปยังเซิร์ฟเวอร์ เช่น "การใช้ data-uri เพื่อรวมสไตล์ชีตและรูปภาพ" การใช้ เครื่องมือที่ใช้ใน python จะช่วยประหยัดเวลาได้มาก
  5. การเข้ารหัส Base64 จะเพิ่มไฟล์รูปภาพ 1/3 การใช้ Data URI และ MHTML พร้อมกันนั้นเทียบเท่ากับการเพิ่มขึ้น 2/3 อย่างไรก็ตาม CSS และ JavaScript สามารถใช้การบีบอัด gzip ซึ่งสามารถบันทึกปริมาณข้อมูลได้ 2/3 ดังนั้นการใช้ การบีบอัด gzip จำนวนข้อมูลสุดท้ายคือ (1 + 1/3) * 2 * (1/3) = 8/9 ดังนั้นปริมาณข้อมูลสุดท้ายจึงลดลง

เพื่ออำนวยความสะดวกในการใช้งาน Data URI และ MHTML ใน CSS ฉันจึงเขียน Data URI & MHTML Generator คุณสามารถดู ตัวอย่างการใช้งานเพื่อสร้าง Data URI & MHTML

เมื่อใช้ MHTML ในไฟล์ CSS URL จะต้องใช้เส้นทางที่แน่นอน ซึ่งไม่ยืดหยุ่นมาก ดังนั้นคุณจึงสามารถพิจารณาใช้นิพจน์ CSS เพื่อแก้ปัญหาได้ ( DEMO ) เช่น:

-
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
-
*ภาพพื้นหลัง:expression(function(ele){
ele.style.พื้นหลังImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(นี้));

ข้อความต้นฉบับ: http://dancewithnet.com/2009/08/15/data-uri-mhtml/

บทความที่เกี่ยวข้อง