รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การทำเว็บโหลดเร็วขึ้นด้วย HTML5 Application Cache

    Feature นี้ใช้ได้เฉพาะ Safari, Chrome และ Firefox เท่านั้น IE9 ยังไม่รองรับ (ส่วน Opera ยังไม่ได้ลอง)​ Application Caching มีไว้เพื่อเก็บข้อมูลสำหรับ Application โดยหลักๆก็จะเป็นบรรดา User Interface ต่างๆ อย่างเช่น images, icons, sound เป็นต้น

     

    ซึ่งจะทำให้เวลาที่ User กลับมาใช้ Application ในครั้งถัดไป สามารถเริ่มใช้งานได้ทันที Application Caching จะต่างกับ Browser Caching เนื่องจาก Application Caching มักจะเก็บไว้นาน และไม่ถูกลบง่ายเหมือน Browser Caching (ในกรณีของ Browser Caching นั้น หาก User มีการดาวน์โหลดไฟล์ขนาดใหญ่ อาจจะทำให้ Caching อื่นๆที่เก็บไว้ถูกลบ) นอกจากนั้นเรายังสามารถกำหนดได้ว่าจะให้ Cache หรือไม่ Cache ไฟล์ไหนบ้าง    

     

    CACHE คือการเก็บข้อมูลไว้ ซึ่งเมื่อเราเปิดเว็บผ่านบราวเซอร์ ไม่ว่าจะเป็นข้อมูลอะไรก็ตาม จะถูกดาวน์โหลดมาเก็บไว้ในเครื่องของเราและไม่ดาวน์โหลดใหม่จนกว่า Manifest file จะมีการเปลี่ยนแปลง เป็นส่วนที่ทำให้เวลาเปิดเว็บขึ้นมาใหม่ แม้จะติดต่อกับ Server ไม่ได้แต่ Browser จะยังเปิดหน้าเว็บได้อยู่

     

    หน้าตาเว็บที่ใช้ Application cache ก็จะมีหน้าตา HTML ตามด้านล่าง

     <!DOCTYPE html>
    <html manifest="web.appcache">
      ...
    </html>
     
    attribute manifest ของ tag html สำหรับชี้ไปที่ไฟล์บอกว่า resource ไหนจะให้ Browser โหลดมา cache ไว้บ้างหน้าตาของ Manifest file ก็จะเหมือนด้านล่าง
     

    CACHE MANIFEST

    images/favicon.ico
    images/logo.png
     
    CACHE:
    index.html
    styles/application.css
    scripts/jquery.js
     
    NETWORK:
    /service/resource
    *
     
    FALLBACK:
    images/large/ images/offline.jpg
    จากไฟล์ด้านบนจริงๆ Manifest file ประกอบด้วยสามส่วนคือ
     
    CACHE : อะไรก็ตามที่อยู่ใต้บรรทัดนี้หรือไม่อยู่หมวดใดเลย Browser จะดาวโหลดมาเก็บไว้และไม่ดาวโหลดใหม่จนกว่า Manifest file จะมีการเปลี่ยนแปลง เป็นส่วนที่ทำให้เวลาเปิดเว็บขึ้นมาใหม่ แม้จะติดต่อกับ Server ไม่ได้แต่ Browser จะยัง Render หน้าเว็บได้อยู่ สิ่งที่ประกาศใต้นี้ส่วนใหญ่ก็จะเป็นภาพ, css, script หรือ HTML ไฟล์ที่ไม่จำเป็นต้องโหลดจาก server อีก
     
    NETWORK : สิ่งที่อยู่ใต้นี้ Browser จะพยายามโหลดจาก server ทุกครั้งไม่มีดาวโหลดมาเก็บไว้ในเครื่อง สามารถใช้ wildcard ได้
     
    FALLBACK : สำหรับระบุว่า Resource อะไรถ้าไม่สามารถโหลดได้ให้เอาไฟล์ไหนมาแสดงแทน ด้านหน้าไว้บอกว่าไฟล์รูปแบบไหน ที่จะถูกโหลดแทนด้วยไฟล์ด้านหลัง ขณะอยู่ในสถานะ Offline
     
     
บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com