Turbolinks เป็นการเพิ่มประสิทธิภาพที่เพิ่ม รับรู้ ประสิทธิภาพโดยฉลาดในการสลับหน้าและโหลดเนื้อหาในแอปของคุณใหม่ ไม่เหมือนกับคำขอ GET แบบมีเงื่อนไข โดยไม่จำเป็นต้องเปลี่ยนแปลงโค้ด Ruby ในแอป Rails ของคุณ Turbolinks 5 คือไลบรารี JavaScript ที่ทำงานได้ทุกที่ (แม้จะไม่มี Rails ก็ตาม เช่นเดียวกับหน้าสแตติก) และลดระดับลงอย่างสวยงามในเบราว์เซอร์ที่ไม่รองรับ
เทอร์โบ 5
Turbolinks ถูกรวมเข้ากับ Rails และรวมอยู่ในแอปพลิเคชันใหม่โดยค่าเริ่มต้นตั้งแต่ Rails 4 Rails 5 มาพร้อมกับ Turbolinks 5 ซึ่งเป็นการเขียนซ้ำถึงสิ่งที่เรียกว่า Turbolinks Classic
แม้ว่าจะมาพร้อมกับ Rails แต่ Turbolinks เวอร์ชันใหม่เป็นไลบรารี JavaScript แท้ที่สามารถใช้ได้บนหน้า HTML ใดๆ ที่วางไว้ใน <script> บนหน้าหรือรวมไว้ในชุด JavaScript ของแอป
เมื่อรวมแล้ว Turbolinks จะค้นหาลิงก์ทั้งหมดที่ชี้ไปยังโดเมนเดียวกันโดยอัตโนมัติ และแนบ Listener เหตุการณ์การคลิก การคลิกบนลิงก์เหล่านั้นจะถูกสกัดกั้น แทนที่จะติดตามลิงก์เหมือนปกติ มันขอหน้าที่เชื่อมโยงในพื้นหลังผ่าน JavaScript โดยใช้ XMLHttpRequest . จากนั้นมีสี่สิ่งเกิดขึ้น:
- สำเนาของหน้าปัจจุบันถูกเก็บไว้ในแคชของ Turbolinks เพื่อนำไปใช้ในภายหลัง
- มัน แทนที่
<body>. ของหน้าปัจจุบัน ด้วย<body>จากผล XHR - มัน ผสาน
<head>. ของหน้าปัจจุบัน ด้วย<head>จากผล XHR - เปลี่ยน URL ในเบราว์เซอร์โดยใช้ API ประวัติ
โดยผสาน <head> เบราว์เซอร์ไม่จำเป็นต้องโหลดซ้ำและแสดงผลเนื้อหา เช่น ไฟล์ CSS และ JavaScript ที่มีอยู่ในทั้งสองหน้า วิธีนี้จะช่วยเร่งความเร็วของแอปได้อย่างมาก โดยเฉพาะอย่างยิ่งหากคุณมีเนื้อหาจำนวนมากที่ใช้ซ้ำในหน้าเว็บส่วนใหญ่ของคุณ
ในแอพ Rails 5 ใหม่ที่มีมุมมองบางส่วน คุณสามารถดูการทำงานของ Turbolinks ได้โดยไปที่รอบๆ โดยคลิกลิงก์และกดปุ่มย้อนกลับ ในแท็บเครือข่ายของเบราว์เซอร์ คุณจะเห็นคำขอสำหรับหน้าที่โหลดผ่าน Turbolinks ที่ทำเครื่องหมายเป็น "xhr" นอกจากนี้ ทรัพย์สินของคุณจะไม่ถูกโหลดซ้ำสำหรับทุกคำขอ
การแคชและการแสดงตัวอย่างหน้า
เพื่อเพิ่มความเร็วในการร้องขอที่ตามมาไปยังหน้าเดียวกัน Turbolinks จะเก็บแคชของหน้าที่เยี่ยมชมล่าสุด ซึ่งช่วยให้สามารถแสดงหน้าก่อนหน้าได้ทันทีเมื่อกดปุ่มย้อนกลับ เป็นต้น
เพื่อเร่งประสิทธิภาพการรับรู้ของหน้าที่ช้า Turbolinks จะแสดงหน้าตัวอย่างหากมีอยู่ในแคช หลังจากคลิกลิงก์แล้ว เวอร์ชันแคชจะแสดงขึ้นขณะโหลดเวอร์ชันใหม่
ข้อควรระวัง
Turbolinks นำคุณลักษณะเริ่มต้นของเบราว์เซอร์กลับมาใช้ใหม่ ดังนั้นบางสิ่งจึงทำงานแตกต่างไปเมื่อเปิดใช้งาน Turbolinks มากกว่าที่ไม่มี
turbolinks:load และ <script> แท็ก
เนื่องจากหน้าไม่รีเฟรชหลังจากการคลิกทุกครั้ง การโหลด JavaScript ในการโหลดหน้าโดยใช้ window.onload หรือ DOMContentLoaded ไม่ทำงานอีกต่อไป เพื่อแก้ไขปัญหานั้น Turbolinks จะจัดหา turbolinks:load เหตุการณ์ซึ่งคุณสามารถใช้แทน:
document.addEventListener("turbolinks:load", function() {
// ...
})
สถานะการโหลดเบราว์เซอร์
เมื่อสลับไปมาระหว่างหน้า เบราว์เซอร์จะไม่แสดงตัวบ่งชี้การโหลดในเบราว์เซอร์ของคุณ เนื่องจากคำขอจะดำเนินการในพื้นหลัง
ในความพยายามที่จะแก้ไขปัญหานั้น Turbolinks จะแสดงแถบสีน้ำเงิน (ซึ่งสามารถกำหนดสไตล์ด้วย CSS) ที่ด้านบนของหน้าหลังจาก 500 มิลลิวินาทีเพื่อระบุว่าหน้ากำลังโหลด
$ rails new --skip-turbolinks ?
Turbolinks 5 มาไกลตั้งแต่ Turbolinks Classic เมื่อ Turbolinks ดูเหมือนจะเป็นสิ่งที่คุณข้ามไปเมื่อสร้างแอป Rails ใหม่ การเป็นปลั๊กอิน JavaScript แท้ที่ลดระดับลงอย่างสง่างามซึ่งไม่ได้ขึ้นอยู่กับ Rails ในตอนนี้ มันใช้งานได้ทันทีสำหรับแอปส่วนใหญ่ หากคุณคำนึงถึงคำเตือน
ในทางกลับกัน Turbolinks ให้ความเร็วที่ดีและป้องกันไม่ให้เนื้อหาคงที่ของคุณถูกโหลดซ้ำในทุก ๆ การดูหน้าเว็บ ซึ่งช่วยประหยัดคำขอเครือข่ายบางส่วน เมื่อสร้างแอป Rails ใหม่ ให้ลองเก็บ Turbolinks ไว้เพื่อดูว่าทำอะไรได้บ้าง ลองใช้ Turbolinks ในแอปที่มีอยู่!
ที่สรุปภาพรวมของ Turbolinks ของเรา คุณใช้ Turbolinks ในแอปใด ๆ ของคุณหรือไม่? เราชอบที่จะได้ยินจากคุณ! นอกจากนี้ เราอยากรู้ว่าคุณชอบบทความนี้และบทความก่อนหน้าใน AppSignal Academy อย่างไร หรืออยากอ่านอะไรต่อไปที่ @AppSignal
