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

Paul Irish

เกริ่นนำ

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

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

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

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

// 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: ใช้ฐานข้อมูลฝั่งไคลเอ็นต์แทนการส่งข้อมูลไปกลับของเซิร์ฟเวอร์

ฐานข้อมูล 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 (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 Gear เพื่อเพิ่มฟีเจอร์ชื่อ Wordpress Turbo โดยจะแคชทรัพยากรที่ใช้ในแผงการดูแลระบบไว้ในเครื่อง ซึ่งช่วยเร่งการเข้าถึงไฟล์ได้ เราสามารถจำลองลักษณะการทำงานดังกล่าวด้วย ApplicationCache ของ HTML5 และ cache.manifest แคชของแอปมีข้อได้เปรียบกว่าการตั้งค่าส่วนหัว Expires เล็กน้อย เนื่องจากคุณสร้างไฟล์ประกาศที่ระบุทรัพยากรแบบคงที่ซึ่งสามารถแคชได้ เบราว์เซอร์จึงเพิ่มประสิทธิภาพได้อย่างมาก โดยอาจเป็นการแคชล่วงหน้าไว้ก่อนการใช้งานก็ได้ พิจารณาโครงสร้างพื้นฐานของเว็บไซต์เป็นเทมเพลต คุณมีข้อมูลที่อาจเปลี่ยนแปลงได้ แต่ HTML รอบตัวนั้นยังคงมีความสม่ำเสมอ การใช้แคชของแอปทำให้ HTML เป็นชุดเทมเพลตเพียงอย่างเดียว แคชมาร์กอัปผ่าน cache.manifest และส่ง JSON ผ่านสายเพื่ออัปเดตเนื้อหา โมเดลนี้คล้ายกับสิ่งที่แอปข่าวในเครื่องของ iPhone หรือ Android ใช้เป็นอย่างมาก

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

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

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

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

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

เคล็ดลับที่ 7: Web Workers สำหรับการปฏิบัติงานที่ใช้ CPU มาก

Web Worker มีประโยชน์ที่สำคัญ 2 ประการ ได้แก่ 1) ทำงานได้เร็ว 2) ในระหว่างที่ผู้ใช้ทำงาน เบราว์เซอร์จะยังคงตอบสนองอยู่ ดูชุดสไลด์ HTML5 สำหรับผู้ปฏิบัติงาน ตัวอย่างสถานการณ์ที่เป็นไปได้ที่คุณสามารถใช้ 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 แทนการขอภาพแบบสไปรท์ขนาดใหญ่

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

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

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

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

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

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

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

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