กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • HTTP Request + Data URI

    August 24, 2018

    ทำไมต้องลดจำนวน HTTP Request + วิธีใช้ Data URI

    HTTP Request เยอะจะช้า

    • มี Overhead เกิดขึ้นพร้อมกับ HTTP Requestในการเชื่อมต่อระหว่าง browser กับ server จะต้องใช้เวลาเสมอ (HTTP overhead) ถึงแม้ว่าไฟล์นั้นๆ จะติดแคชไปแล้ว แต่ web browser ก็ยังจะต้องส่ง HTTP request เพื่อไปเช็คกับ server ว่าไฟล์นั้นมีการอัพเดทหรือเปล่าอยู่ดี
    • เปลือง Persistent Connectionในแต่ละ web browser จะมีการจำกัดจำนวนของ persistent connection ซึ่งก็คือปริมาณของการเชื่อมต่อที่ web browser ทำพร้อมกันได้ใน hostname เดียวกันนั่นเอง โดย persistent connection นี้มักจะถูกจำกัดเอาไว้ที่ประมาณ 4-6 connection หากมี HTTP request เข้ามามากๆ จะทำให้ persistent connection ถูกใช้จนหมดและจะทำให้ request ที่เข้ามาทีหลังนั้นเข้าสู่สถานะ blocked
    • Cookies ถูกส่งไปพร้อมกับ HTTP Requestอย่าลืมว่า web browser จะต้องส่ง cookie ไปพร้อมกับ HTTP request ด้วยเสมอ ยิ่งถ้าข้อมูล cookie นั้นมีขนาดใหญ่ เวลาที่เราจะต้องใช้ในการอัพโหลดก็จะยิ่งมากขึ้น (ความเร็วในการอัพโหลดมักจะช้ากว่าการดาวน์โหลดอยู่แล้วด้วย)

    ลดจำนวน HTTP Request

    • Combineวิธีนี้จะเป็นการรวมไฟล์พวก CSS หรือ JS เข้าด้วยกันให้เป็นไฟล์เดียว สมมติเดิมเรามีไฟล์ CSS อยู่ 10 ไฟล์ๆ ละ 10KB หากเรารวมไฟล์ให้เป็นไฟล์เดียว ถึงแม้ว่าขนาดรวมจะยังเป็น 100KB เท่าเดิมก็จริง แต่เวลาที่จะเสียไปกับ HTTP overhead นั้นจะเหลือเพียงแค่ครั้งเดียวเท่านั้น (แทนที่จะเป็น 10 ครั้ง) ในขั้นตอนนี้เราไม่จำเป็นต้องเขียนโค้ดลงไปในไฟล์เดียวกันทั้งหมดตั้งแต่แรก เพราะจะทำให้การกลับมาแก้ทีหลังนั้นทำได้ลำบาก การใช้ tool อย่าง Prepros เข้ามาช่วยดูจะสะดวกมากกว่า
    • CSS Spriteวิธีนี้จะเป็นการรวมรูปเล็กๆ หลายๆ รูป ให้อยู่ในไฟล์เดียวกัน สมมติเดิมเรามีรูปไอคอนขนาด 32×32 อยู่ 100 รูป ก็ให้เรานำทั้ง 100 รูป นั้นมาเรียงต่อๆ กันไป เราก็จะได้รูปขนาด 320×320 มาเพียงรูปเดียว ส่วนเวลาจะนำแต่ละรูปไปใช้ ก็ให้กำหนด css background-position เอา แต่ถ้ารู้สึกว่าขั้นตอนนี้ยุ่งยาก เราก็อาจใช้ tool อย่าง SpriteMe หรือ Sprite Cow เข้ามาช่วยก็ได้
    • Data URIหลังจากทำ 2 ขั้นตอนแรกเรียบร้อยแล้ว HTTP request ของหน้าเว็บจะลดลงอย่างมาก อย่างไรก็ตาม เรายังสามารถลด HTTP request ลงได้อีกด้วยการนำไฟล์ที่มีการเรียกใช้ในหน้าเว็บไปเข้ารหัสจนกลายเป็นเพียงโค้ดที่สามารถฝังลงในหน้าเว็บได้เลย (web browser จะทำหน้าที่ถอดรหัสเพื่อให้โค้ดที่แปลงมานั้น สามารถแสดงผลได้ตามรูปแบบที่เราระบุไว้)

    Data URI

    Data URI คือการ “ฝัง” ไฟล์ (พวก html, css และรูปต่างๆ) เอาไว้ในหน้าเว็บเลย โดยการนำไฟล์นั้นๆ ไปเข้ารหัสแบบ Base64  ซึ่ง web browser ที่รองรับการใช้ Data URI แล้ว จะสามารถถอดรหัสนี้ออกมาได้ พร้อมกับแสดงผลออกมาตามประเภทของไฟล์ที่เราได้ระบุไว้

    Syntax

    หลังจากที่เราได้นำไฟล์ไปเข้ารหัสแบบ Base64 แล้ว ให้เราแทนที่ url ของไฟล์เดิมด้วยโค้ดด้านล่างนี้

    อ่านต่อ
    +http://www.siamhtml.com/reduce-the-number-of-http-requests-using-data-uri/


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized