blog.nadiamode.com

ปกติเวลาเราแก้ CSS แล้วอัพขึ้นไปใหม่หลังจากนั้นก็ต้องรีเฟรซเพื่อให้มันโหลดไฟล์ Style CSS ตัวใหม่ที่เราแก้เพื่อจะดูหน้าตาเว็บเพจของเราหลังจากแก้ไขแล้ว ตามธรรมดาถ้าเราต้องการ Refresh หน้าเว็บเราก็กดแค่ปุ่ม F5 ก็พอ แต่ถ้าเราต้องการ Hard Refresh หรือให้มันโหลดใหม่หมดเลยก็ต้องกดปุ่ม Ctrl กับ Shift ด้วย ถ้าใช้ Firefox ก็กด Ctrl+Shift+R ถ้าใช้ Internet Explorer ก็กด Ctrl+Shift+F5 มันก็จะรีโหลดให้โดยไม่ดึงไฟล์ใน Cache มาใช้แต่จะโหลดไฟล์ใหม่มาเลย เหมาะสำหรับเวลาที่เราต้องการดูการเปลี่ยนแปลงล่าสุดในเว็บเพจ สำหรับเว็บมาสเตอร์ที่แก้ไขไฟล์ CSS แล้วต้องการดูการเปลี่ยนแปลง เมื่อก่อนเราใช้บริการโฮสติ้ง (Hosting) ในไทยเวลา Hard Refresh ก็ทำได้ตามปกติ คือแก้ไขอะไรใน CSS แล้วก็สามารถกดรีเฟรสแล้วดูได้เลย แต่พอย้ายโฮสติ้งไปอยู่เมืองนอกก็เจอปัญหานี้ทันที โดยมันไม่ยอมโหลดไฟล์ CSS ตัวใหม่ให้ กดรีเฟรสเป็นสิบรอบก็เหมือนเดิม แต่พอรอสักพักมันถึงจะเรียกไฟล์ใหม่ให้

ปัญหานี้จะเจอกับไฟล์ Style CSS ส่วนไฟล์อื่นไม่มีปัญหา (ยังไม่พบว่ามีปัญหา) ตอนแรกนึกว่าเป็นที่บราวเซอร์ก็ลองเคลียร์ Cache ในบราวเซอร์จนหมด ไฟล์ style.css ก็ยังไม่ยอมโหลดตัวใหม่ให้ เราก็นึกว่าเอ.. ตกลงเป็นเพราะอะไร ลองใช้บราวเซอร์ยี่ห้ออื่นทั้ง IE , Opera หรือแม่แต่ Safari เปิด ไฟล์มันก็ยังโหลดตัวเก่ามา พอลองไปเช็คใน Filemanager ของโฮสติ้งที่เราใช้อยู่ ไปดูซอร์สโค็ดของไฟล์ CSS ก็ปรากฎว่ามันเป็นตัวใหม่แล้ว แสดงว่าไฟล์ในฝั่งเซิฟเวอร์ก็เป็นของใหม่แล้ว ในบราวเซอร์ก็เคลียร์ Cache จนหมดแล้ว แต่พอลองใช้ Proxy เปิดปรากฎว่ามันกลับเรียกไฟล์ใหม่ให้ปัญหาจึงน่าจะอยู่ที่อินเทอร์เน็ตกับที่ตั้งโฮสติ้งมากกว่า

ใช้ Proxy ก็เหมือนกับเราใช้ IP ของคนอื่นที่อยู่ต่างประเทศเข้า พูดง่ายๆคือเหมือนเราเข้าเว็บจากต่างประเทศงั้นแหละ พอใช้ Proxy ปรากฎว่าไฟล์ CSS มันเรียกตัวใหม่ให้เลย แต่พอไม่ใช้ Proxy ใช้เน็ตธรรมดาปรากฎว่ามันไม่รีโหลดให้

ปัญหาแบบนี้เคยเจอ เหมือนมันเป็นหาของ DNS Cache หรืออะไรสักอย่าง คือบางทีเราจะเห็นเว็บเก่าหรือไม่อัพเดท ต้องรอสัก 1 วันมันถึงจะเป็นของใหม่ สำหรับเว็บที่มีเซิฟเวอร์อยู่ต่างประเทศ แต่เมื่อก่อนที่ใช้ Host ในไทยไม่เคยเจอปัญหานี้ จึงน่าจะเป็นที่โฮสที่เราใช้อยู่กับอินเทอร์เน็ต ตอนนี้เราก็ใช้โฮสนอกอยู่ด้วย ยังไม่ชินกับปัญหาสำหรับคนทำเว็บที่ใช้โฮสต่างประเทศ ตอนแรกนึกว่ามีปัญหาเรื่องความเร็วเพียงอย่างเดียว

วิธีแก้คือต้องใส่ Random String

คือเราต้องทำให้มันเห็นว่าไฟล์ CSS ที่มันเรียกแต่ละครั้งไม่เหมือนกัน ก็เลยต้องโหลดไฟล์ใหม่ทุกครั้งที่มีมีคนเปิดเว็บ โดยไม่เรียกไฟล์ CSS จาก Cache ในบราวเซอร์ (ความจริงก็ไม่ใช่ Cache ในบราวเซอร์หรอก เพราะอย่างที่บอก เคลียร์ Cache หมดแล้ว น่าจะเป็น Cache ของอินเทอร์เน็ตที่เราใช้มากกว่า)

ก็คือว่าใส่ Random String อะไรก็ได้หลังไฟล์ Style.css?Random-String สำหรับเรา เราก็ใส่ php date ธรรมดา(ในรูปที่สอง) ดังนั้นทุกครั้งที่มีคนเปิดเว็บเรา ค่าสตริงหลังเครื่องหมาย ? ก็จะเปลี่ยนไปทุกครั้ง ทำให้ดูเหมือนมันเป็นไฟล์ CSS ใหม่ มันจึงต้องโหลดใหม่ทุกครั้ง เหมาะสำหรับเว็บมาสเตอร์ไทยที่ใช้เซิฟเวอร์ต่างประเทศ แล้วมีปัญหาเวลาแก้ไขไฟล์ Style CSS แล้วมันไม่รีโหลดให้เรา แต่พอเราแก้ไข ดูหน้าตาเว็บใหม่เรียบร้อยแล้ว เสร็จแล้วเอา String ออกก็ดี เพราะใส่ไว้เลยเดี๋ยวมันจะไปเพิ่มการใช้งานฟังก์ชัน php ปล่าวๆ เพราะพอเราแก้เสร็จแล้ว ปล่อยไว้สักวันเดี๋ยวมันก็โหลดของใหม่มาให้เราเอง แต่ก็ไม่รู้นะ ใครจะใส่ไว้เลยก็ได้แค่ เพิ่ม php date มาตัวนึงมันจะไปกินแรงอะไรมากมาย เนอะ

ความจริงมีอีกวิธีนึงคือใส่ meta no-cache เข้าไปในส่วนหัวของเว็บเพจ แต่แบบนั้นไม่เวิร์คหรอกเพราะมันโหลดบล็อกใหม่ทั้งบล็อก ทำให้กินแรงเว็บโดยใช่เหตุ ให้มันโหลดเฉพาะ CSS แหละดีแล้ว ส่วนมากพวกเว็บบอร์ดมักจะใช้กันเพราะกระทู้มันจะรันเร็ว ห้ามเก็บ Cache จะได้ดูกระทู้ล่าสุดได้