แนวทางปฏิบัติแนะนำสำหรับเว็บแอปที่เร็วขึ้นด้วย HTML5

Paul Irish

บทนำ

HTML5 ส่วนใหญ่มีเป้าหมายเพื่อมอบการรองรับเบราว์เซอร์เนทีฟสําหรับคอมโพเนนต์และเทคนิคที่เราได้ผ่านไลบรารี JavaScript จนถึงตอนนี้ การใช้ฟีเจอร์เหล่านี้ (หากมี) จะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่รวดเร็วขึ้นมาก ในบทแนะนํานี้ เราจะไม่สรุปการวิจัยประสิทธิภาพที่ยอดเยี่ยมที่คุณเห็นในเว็บไซต์ประสิทธิภาพยอดเยี่ยมของ Yahoo หรือเอกสารเกี่ยวกับ PageSpeed และเว็บไซต์มาทําให้เว็บเร็วขึ้นของ Google แต่เราจะเน้นที่การใช้ HTML5 และ CSS3 ในปัจจุบันเพื่อทําให้เว็บแอปของคุณตอบสนองได้ดีขึ้น

เคล็ดลับที่ 1: ใช้พื้นที่เก็บข้อมูลเว็บแทนคุกกี้

แม้ว่าคุกกี้จะถูกใช้ติดตามข้อมูลผู้ใช้ที่ไม่ซ้ำกันมานานหลายปี แต่ก็มีข้อเสียร้ายแรง ข้อบกพร่องที่ใหญ่ที่สุดคือระบบจะเพิ่มข้อมูลคุกกี้ทั้งหมดลงในส่วนหัวของคำขอ HTTP ทุกรายการ ซึ่งอาจส่งผลให้มีผลกระทบที่วัดผลได้ต่อเวลาในการตอบสนอง โดยเฉพาะอย่างยิ่งในระหว่าง XHR แนวทางปฏิบัติแนะนำคือลดขนาดคุกกี้ ใน HTML5 เราทำได้ดีกว่านั้นคือใช้ sessionStorage และ localStorage แทนคุกกี้

ออบเจ็กต์พื้นที่เก็บข้อมูลเว็บ 2 รายการนี้สามารถใช้เพื่อเก็บข้อมูลผู้ใช้ไว้ฝั่งไคลเอ็นต์ตลอดระยะเวลาของเซสชันหรือไว้อย่างไม่มีกำหนด และระบบจะไม่โอนข้อมูลของผู้ชมไปยังเซิร์ฟเวอร์ผ่านคำขอ HTTP ทุกรายการ พวกเขามี API ที่จะทำให้คุณยินดีที่จะกำจัดคุกกี้ ต่อไปนี้คือทั้ง 2 API ที่ใช้คุกกี้เป็นทางเลือกสำรอง

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

เคล็ดลับที่ 2: ใช้การเปลี่ยน CSS แทนภาพเคลื่อนไหว JavaScript

ทรานซิชัน CSS ช่วยให้คุณมีภาพการเปลี่ยนที่ดึงดูดใจระหว่าง 2 สถานะ คุณสมบัติสไตล์ส่วนใหญ่สามารถเปลี่ยนรูปแบบได้ เช่น การจัดการเงาข้อความ ตำแหน่ง พื้นหลัง หรือสี คุณสามารถใช้การเปลี่ยนรูปแบบไปยังสถานะตัวเลือกเสมือน เช่น :hover หรือจากแบบฟอร์ม HTML5, :invalid และ :valid (ตัวอย่างสถานะการตรวจสอบแบบฟอร์ม) แต่มีประสิทธิภาพมากกว่ามากและสามารถทริกเกอร์ได้เมื่อคุณเพิ่มคลาสใดก็ตามลงในองค์ประกอบ

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

การเพิ่มการสลับคอลัมน์ totheleft และ totheright จะช่วยให้คุณย้ายกล่องไปรอบๆ ได้ เปรียบเทียบจำนวนโค้ดนี้กับจำนวนโค้ดของไลบรารีภาพเคลื่อนไหว JavaScript เห็นได้ชัดว่าจำนวนไบต์ที่ส่งไปยังเบราว์เซอร์จะน้อยกว่ามากเมื่อใช้ภาพเคลื่อนไหวแบบ CSS นอกจากนี้ การใช้การเร่งระดับ GPU ยังช่วยให้การเปลี่ยนภาพเหล่านี้เป็นไปอย่างราบรื่นที่สุด

เคล็ดลับที่ 3: ใช้ฐานข้อมูลฝั่งไคลเอ็นต์แทนการส่งข้อมูลไปมาของเซิร์ฟเวอร์

ฐานข้อมูล Web SQL และ IndexedDB นำเสนอฐานข้อมูลไปยังฝั่งไคลเอ็นต์ คุณใช้ประโยชน์จากฐานข้อมูลฝั่งไคลเอ็นต์เหล่านี้ได้แทนรูปแบบทั่วไปในการโพสต์ข้อมูลไปยังเซิร์ฟเวอร์ผ่าน XMLHttpRequest หรือการส่งแบบฟอร์ม การลดคําขอ HTTP เป็นเป้าหมายหลักของวิศวกรด้านประสิทธิภาพทุกคน ดังนั้นการใช้ข้อมูลเหล่านี้เป็นดาต้าสตोरจะช่วยประหยัดการเรียกใช้หลายครั้งผ่าน XHR หรือการส่งแบบฟอร์มกลับไปที่เซิร์ฟเวอร์ localStorage และ sessionStorage อาจใช้ในบางกรณี เช่น การบันทึกความคืบหน้าในการส่งแบบฟอร์ม และพบว่าเร็วกว่า API ฐานข้อมูลฝั่งไคลเอ็นต์อย่างเห็นได้ชัด เช่น หากคุณมีคอมโพเนนต์ตารางกริดข้อมูลหรือกล่องจดหมายที่มีข้อความหลายร้อยรายการ การจัดเก็บข้อมูลไว้ในฐานข้อมูลในเครื่องจะช่วยประหยัดเวลาในการส่ง HTTP ไปมาเมื่อผู้ใช้ต้องการค้นหา กรอง หรือจัดเรียง ระบบสามารถกรองรายการเพื่อนหรือการเติมข้อความอัตโนมัติตามการกดแป้นแต่ละครั้งได้ ซึ่งทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ตอบสนองได้เร็วขึ้นมาก

เคล็ดลับที่ 4: การปรับปรุง JavaScript ช่วยเพิ่มประสิทธิภาพได้อย่างมาก

มีการเพิ่มเมธอดอื่นๆ ลงในโปรโตไทป์ของอาร์เรย์ใน JavaScript 1.6 ซึ่งตอนนี้มีให้บริการในเบราว์เซอร์ส่วนใหญ่แล้ว ยกเว้น IE เช่น

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

ในกรณีส่วนใหญ่ การใช้เมธอดเนทีฟเหล่านี้จะให้ความเร็วที่เร็วกว่าวงวน for ทั่วไป เช่น for (var i = 0, len = arr.length; i < len; i++) อย่างมาก แยกวิเคราะห์ JSON ดั้งเดิม (ผ่าน JSON.parse()) แทนไฟล์ json2.js ที่เราเคยใช้มาระยะหนึ่ง JSON ในตัวจะเร็วและปลอดภัยกว่าการใช้สคริปต์ภายนอกมาก และพร้อมใช้งานใน IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 และ Chrome แล้ว String.trim ที่เป็นเนทีฟเป็นอีกตัวอย่างที่ดีที่ไม่เพียงทำงานได้เร็วกว่า JS แบบยาวที่เทียบเท่าเท่านั้น แต่ยังอาจถูกต้องกว่าด้วย การเพิ่ม JavaScript เหล่านี้ไม่ใช่ HTML5 ในทางเทคนิค แต่อยู่ในกลุ่มเทคโนโลยีที่เพิ่งเปิดตัวเมื่อเร็วๆ นี้

เคล็ดลับที่ 5: ใช้แคช Manifest สำหรับเว็บไซต์ที่เผยแพร่อยู่ ไม่ใช่แค่แอปออฟไลน์

เมื่อ 2 ปีก่อน WordPress ใช้ Google Gears เพื่อเพิ่มฟีเจอร์ที่เรียกว่า WordPress Turbo โดยพื้นฐานแล้ว แคชจะจัดเก็บทรัพยากรจำนวนมากที่ใช้ในแผงการดูแลระบบไว้ในเครื่อง ซึ่งช่วยเพิ่มความเร็วในการเข้าถึงไฟล์ เราจำลองลักษณะการทำงานดังกล่าวได้โดยใช้ applicationCache ของ HTML5 และ cache.manifest แคชของแอปมีข้อดีมากกว่าการตั้งค่าส่วนหัว Expires เล็กน้อย เนื่องจากคุณสร้างไฟล์ประกาศที่ระบุทรัพยากรแบบคงที่ซึ่งแคชได้ ซึ่งเบราว์เซอร์จะเพิ่มประสิทธิภาพทรัพยากรดังกล่าวได้อย่างมาก และอาจแคชทรัพยากรล่วงหน้าไว้ก่อนที่คุณจะใช้ พิจารณาโครงสร้างพื้นฐานของเว็บไซต์เป็นเทมเพลต คุณมีข้อมูลที่อาจเปลี่ยนแปลง แต่โดยปกติแล้ว HTML รอบๆ ข้อมูลจะค่อนข้างคงที่ เมื่อใช้แคชของแอป คุณสามารถถือว่า HTML เป็นชุดเทมเพลตล้วนๆ แคชมาร์กอัปผ่าน cache.manifest แล้วส่ง JSON ผ่านเครือข่ายเพื่ออัปเดตเนื้อหา รูปแบบนี้คล้ายกับสิ่งที่แอปข่าวที่มาพร้อมเครื่องของ iPhone หรือ Android ทำงาน

เคล็ดลับที่ 6: เปิดใช้การเร่งฮาร์ดแวร์เพื่อปรับปรุงประสบการณ์การรับชม

ในเบราว์เซอร์ชั้นนํา การดำเนินการด้านภาพจำนวนมากสามารถใช้ประโยชน์จากการเร่งระดับ GPU ซึ่งจะทำให้การดำเนินการด้านภาพที่เป็นแบบไดนามิกสูงราบรื่นขึ้นมาก มีการประกาศการเร่งฮาร์ดแวร์สำหรับ Firefox Minefield และ IE9 และ Safari ได้เพิ่มการเร่งระดับฮาร์ดแวร์ในเวอร์ชัน 5 (ฟีเจอร์นี้พร้อมใช้งานใน Safari บนอุปกรณ์เคลื่อนที่มานานแล้ว) Chromium เพิ่งเพิ่มการเปลี่ยนรูปแบบ 3 มิติและการเร่งฮาร์ดแวร์สำหรับ Windows และอีก 2 แพลตฟอร์มจะพร้อมใช้งานเร็วๆ นี้

การทำงานนี้จะเริ่มขึ้นเมื่อเกิดเงื่อนไขที่ค่อนข้างจำกัด แต่การเปลี่ยนรูปแบบ 3 มิติและความทึบของภาพเคลื่อนไหวเป็นวิธีที่พบบ่อยที่สุดในการเปิดใช้ วิธีเปิดที่ค่อนข้างยุ่งยากแต่ไม่รบกวนมีดังนี้

.hwaccel {  -webkit-transform: translateZ(0); }

แต่เราไม่สามารถรับประกันได้ :) เมื่อเปิดใช้การเร่งฮาร์ดแวร์แล้ว การแปล การหมุน การปรับขนาด และความทึบของภาพเคลื่อนไหวจะราบรื่นขึ้นอย่างแน่นอนเมื่อใช้การคอมโพสิชัน GPU ซึ่งจะมีประโยชน์ตรงที่ระบบจะจัดการกับเลเยอร์เหล่านี้โดยตรงใน GPU และไม่ต้องวาดเนื้อหาของเลเยอร์ใหม่ อย่างไรก็ตาม พร็อพเพอร์ตี้ที่ส่งผลต่อเลย์เอาต์ของหน้าเว็บจะยังคงช้ากว่า

เคล็ดลับที่ 7: สำหรับการดำเนินการที่ต้องใช้ CPU มาก เว็บเวิร์กเกอร์จะทำงานได้

เวิร์กเกอร์ของเว็บมีประโยชน์ที่สำคัญ 2 อย่าง ได้แก่ 1) ทำงานได้อย่างรวดเร็ว 2) ขณะทำงาน เบราว์เซอร์จะยังคงตอบสนองอยู่ ดูชุดสไลด์ HTML5 สําหรับ Workers in Action สถานการณ์ที่อาจใช้ Web Worker ได้

• การจัดรูปแบบข้อความของเอกสารที่มีความยาว
• การไฮไลต์ไวยากรณ์
• การประมวลผลรูปภาพ
• การสังเคราะห์รูปภาพ
• การประมวลผลอาร์เรย์ขนาดใหญ่

เคล็ดลับที่ 8: แอตทริบิวต์แบบฟอร์ม HTML5 และประเภทอินพุต

HTML5 เปิดตัวชุดประเภทอินพุตใหม่ ซึ่งอัปเกรดชุด text, password และ file ให้รวม search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range และ color เบราว์เซอร์ที่รองรับฟีเจอร์เหล่านี้แตกต่างกันไป โดย Opera เป็นเบราว์เซอร์ที่รองรับมากที่สุดในขณะนี้ การตรวจหาฟีเจอร์ช่วยให้คุณทราบว่าเบราว์เซอร์รองรับฟีเจอร์นั้นๆ หรือไม่ (และจะมี UI เช่น เครื่องมือเลือกวันที่หรือเครื่องมือเลือกสี) หากไม่ คุณก็ใช้วิดเจ็ต JS เพื่อทำงานทั่วไปเหล่านี้ต่อไปได้ นอกจากประเภทแล้ว เรายังได้เพิ่มฟีเจอร์ที่มีประโยชน์บางอย่างลงในช่องป้อนข้อมูลปกติด้วย อินพุต placeholder มีข้อความเริ่มต้นที่จะล้างออกเมื่อคุณคลิก และ autofocus จะโฟกัสเคอร์เซอร์เมื่อโหลดหน้าเว็บเพื่อให้คุณโต้ตอบกับช่องนั้นทันที การตรวจสอบอินพุตเป็นอีกสิ่งหนึ่งที่เข้ามากับ HTML5 การเพิ่มแอตทริบิวต์ required หมายความว่าเบราว์เซอร์จะไม่อนุญาตให้ส่งแบบฟอร์มจนกว่าจะมีการกรอกข้อมูลในช่องนั้น นอกจากนี้ แอตทริบิวต์ pattern ยังให้คุณระบุนิพจน์ทั่วไปที่กำหนดเองสำหรับอินพุตที่จะทดสอบได้ด้วย โดยค่าที่ไม่ถูกต้องจะบล็อกการส่งแบบฟอร์ม ไวยากรณ์แบบประกาศนี้เป็นการอัปเกรดครั้งใหญ่ที่ไม่เพียงทำให้อ่านแหล่งที่มาได้ง่ายขึ้น แต่ยังช่วยลดการใช้ JavaScript ที่จำเป็นได้อย่างมาก อีกครั้ง คุณสามารถใช้การตรวจหาฟีเจอร์เพื่อแสดงโซลูชันสำรองหากไม่มีการสนับสนุนแบบเนทีฟสำหรับฟีเจอร์เหล่านี้ การใช้วิดเจ็ตแบบเนทีฟที่นี่หมายความว่าคุณไม่จําเป็นต้องส่ง JavaScript และ CSS ขนาดใหญ่ที่จําเป็นสําหรับดึงวิดเจ็ตเหล่านี้ ซึ่งจะทําให้หน้าเว็บโหลดเร็วขึ้นและอาจปรับปรุงการตอบสนองของวิดเจ็ต หากต้องการลองใช้ฟีเจอร์ที่ปรับปรุงอินพุตเหล่านี้ โปรดดูชุดสไลด์ HTML5

เคล็ดลับที่ 9: ใช้เอฟเฟกต์ CSS3 แทนการขอ CSS Sprite รูปภาพขนาดใหญ่

CSS3 มอบทางเลือกใหม่มากมายในการจัดสไตล์ ซึ่งเข้ามาแทนที่การใช้รูปภาพเพื่อแสดงการออกแบบภาพอย่างถูกต้อง การเปลี่ยนรูปภาพ 2K เป็น CSS 100 ไบต์ถือเป็นเรื่องดีอย่างยิ่ง ยังไม่นับรวมว่าคุณได้นําคําขอ HTTP ออกอีกรายการหนึ่ง พร็อพเพอร์ตี้บางส่วนที่คุณควรทำความคุ้นเคยมีดังนี้

• การไล่ระดับสีแบบเส้นตรงและแบบรัศมี
• Border-radius สำหรับมุมมน
• Box-shadow สำหรับเงาตกกระทบและความเรืองแสง
• RGBA สำหรับความทึบของอัลฟา
• การเปลี่ยนรูปแบบสำหรับการหมุน
• หน้ากาก CSS

เช่น คุณสามารถสร้างปุ่มที่ดูดีผ่านไล่ระดับสีและจำลองเอฟเฟกต์อื่นๆ อีกมากมายได้โดยไม่ต้องใช้รูปภาพ เบราว์เซอร์ส่วนใหญ่รองรับองค์ประกอบเหล่านี้ได้ดีมาก และคุณใช้ไลบรารีอย่าง Modernizr เพื่อจับเบราว์เซอร์ที่ไม่รองรับฟีเจอร์เหล่านี้ได้เพื่อใช้รูปภาพในกรณีที่ใช้ไม่ได้

เคล็ดลับที่ 10: WebSockets เพื่อการนําส่งที่เร็วขึ้นโดยใช้แบนด์วิดท์น้อยกว่า XHR

WebSockets ได้รับการออกแบบเพื่อตอบสนองความนิยมที่เพิ่มขึ้นของ Comet การใช้ WebSocket มีข้อดีมากกว่าการใช้ Comet ผ่านรูปแบบ XHR

WebSockets มีเฟรมที่เบามาก แบนด์วิดท์ที่ใช้จึงมักจะน้อยกว่า XHR รายงานบางฉบับระบุว่ามีการลดจำนวนไบต์ที่ส่งผ่านเครือข่ายลง 35% นอกจากนี้ เมื่อปริมาณสูงขึ้น ความแตกต่างด้านประสิทธิภาพในการนำส่งข้อความจะชัดเจนขึ้นด้วย โดยเราได้บันทึก XHR ในการทดสอบนี้พบว่ามีเวลารวมนานกว่า WebSocket 3, 500% สุดท้าย Ericsson Labs ได้พิจารณาประสิทธิภาพของ WebSockets และพบว่าเวลาในการส่ง Ping ผ่าน HTTP นานกว่า 3-5 เท่าเมื่อเทียบกับ WebSockets เนื่องจากข้อกำหนดการประมวลผลที่มากขึ้น พวกเขาสรุปว่าโปรโตคอล WebSocket เหมาะสําหรับแอปพลิเคชันแบบเรียลไทม์มากกว่า

แหล่งข้อมูลเพิ่มเติม

สําหรับคําแนะนําการวัดผลและประสิทธิภาพ คุณควรใช้ส่วนขยาย Firefox อย่าง Page Speed และ YSlow นอกจากนี้ Speed Tracer สำหรับ Chrome และ DynaTrace Ajax สำหรับ IE ยังมีระดับการบันทึกการวิเคราะห์ที่ละเอียดยิ่งขึ้น