為網站相容性最佳化做好準備

Artikel
08/25/2015

現在要開發網站應用程式，隨著網頁新技術不斷演進、瀏覽器功能不斷強化，網站開發人員開發網站用的技術也愈來愈多元，大多數經營較久的網站可能就會累積許多「歷史陳跡」——有些程式是多年前寫的，有些是採用最新技術塞入的（還有一些是從網路上找來的片段複製貼上），所幸目前的現代化的瀏覽器行為及標準逐漸一致，所以現在正是一個簡化網站程式碼、優化網站相容性的時刻，以下針對幾個簡單的方法說明提升網頁相容性其實是非常容易的。

TechDays 2015 UWP302 演講

1. 使用新的 HTML 標準標籤

<!DOCTYPE> 文件標準宣告

時至今日，還是許多網站沒有在頁面的開頭宣告頁面所使用的 HTML 標準，因為在 W3C 的 HTML 4.01 標準（已經是西元 1999 年的事了）出來之前，沒有特別定義網頁元素繪製的方式，各家瀏覽器自行定義及實作，後來為了統一所有瀏覽器的行為，W3C 的標準中建議在網頁開頭以 <!DOCTYPE ...> 的語法宣告這份網頁用到的 HTML/XHTML 的標準版本，所以各家瀏覽器看到這樣的宣告字樣，就會以一致的行為來繪製網頁元素，同樣地，如果發現網頁沒有標示這樣的宣告，就會視為這個網頁是用標準出來前的模式（Quirks 模式）來繪製網頁。（TODO: 看比較）

依照現在的瀏覽器市佔情形，網頁標準的宣告只需要使用這個語法（大小寫字母皆可）：

 <!DOCTYPE html>

這樣就好了，比起過去在 HTML4.01 還是 XHTML 1.0 時都簡化了非常多，只要網頁的第一行有這段宣告，就可以確保網頁瀏覽器是以（HTML5 的）標準模式來繪製頁面。

避免使用相容性模式

許多網頁開發人員會在網頁中加入一個 <meta> 標籤設定 X-UA-Compatible 的標頭，強制要求瀏覽器以某個版本的瀏覽器（以 Internet Explorer 居多）的行為來呈現，像下面這個例子是強迫（IE）瀏覽器以 IE7 的行為來呈現：

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

這樣的作法，會導致即使用戶是使用了較新版本的 IE（如：IE9, 10, 11），明明已經新增較多的網頁標準，而且也改良了繪製引擎提升網頁速度，但被強制使用 IE7 的模式來運作，不但用不到這些新標準的功能，還會降低網頁操作的效能，所以建議不要使用設定 X-UA-Compatible 的語法，拿掉您頁面中使用到類似語法的部份，讓瀏覽器以最新最好的瀏覽器引擎來呈現網頁內容，也會讓用戶有更好的效能及操作體驗。

2. 使用較新版本的 JavaScript 函式

為了效能及穩定考量而升級

現代化網頁開發，或多或少都會使用各式各樣的 JavaScript 函式庫，像是 jQuery、AngularJS、React 等等，尤其是 jQuery 在大多數網站上都看得到使用的狀況，而若要善用這些方便的 JavaScript 函式庫，也應該要關注這些函式庫的版本更新是否修正了一些 bugs、提升了一些函式的執行效能。以 jQuery 為例由於 jQuery 竄紅得早，所以許多網站可能還使用較舊的 jQuery 版本（ 所謂的舊，是比相容 HTML5 的 jQuery 1.6 還舊的版本，這還已經是 4 年前的函式庫了 ），這些舊的 jQuery 版本因為時代背景，不可能對於 HTML5 或是現在眾多的行動裝置瀏覽器做了最佳化（因為這些 JavaScript 函式庫也是讓瀏覽器來執行啊），以目前最新的 jQuery 1.11.3 及 2.1.4 為例，都有針對像是 iOS 的環境做了修正。所以，同樣為了讓新時代的瀏覽器得以有更好的效能，建議升級至較新版本的 JavaScript 函式庫，以 jQuery 為例就建議升級至少 1.6.4 以上的版本。

jQuery 1.7 發佈時所宣稱的效能提升示意圖

以 jQuery 正在計劃推出的 jQuery 3.0 為例，就做了不少提升效能的改變，像是優化 $.show() 及 $.hide() 的程式碼提高元素顯示或隱藏的效能、使用新的 requestAnimationFrame API 來減少動畫操作對頻繁佔用 CPU、還有提高選擇器的效能最高可達 17 倍等等，所以升上新版本的 JavaScript 函式庫，其實可以得到更多更好的效能，甚至是大神們的最佳作法！

確保相容性及最新修正版

當然，在升級 JavaScript 函式庫時，除了要注意函式庫的瀏覽器相容性策略（比方說 jQuery 2.x 就不相容 IE6/7/8，不過還是會保有 jQuery 1.x 的發展來支援）之外，就是不論用了哪一個主要版本，一定要升到最新的次要版本以確保 bug 降到最少，舉例來說，若 jQuery 要用 1.6，就用 1.6.4 的版本、要用 jQuery 1.7 就用 1.7.2 版本，以此類推，可以在這一頁看到所有版本的 jQuery 以方便挑選。

3. 避免依據瀏覽器版本來開發

在幾年前，瀏覽器版本更新的速度並不快，而同一版本下的瀏覽器功能也較為固定，比方說較舊的 Internet Explorer 在處理事件時是使用 attachEvent 這個函式，而在 IE9 之後已經支援標準的 addEventListener 的語法，不過很多網頁開發人員喜歡使用下列的語法來決定要不要使用某個 API，或是特別為某個版本的瀏覽器做特殊的操作：

 // 不推薦的作法
var btn = document.getElementById('my-button');
if (navigator.userAgent.indexOf('MSIE') > -1) {
  btn.attachEvent('onclick', onClick);
} else {
  btn.addEventListener('click', onClick, false);
}

上面這段程式碼就是用判斷瀏覽器的方法來決定要用哪個 API，但如果這段程式跑到 IE9 以上就會發生問題，因為現在各家瀏覽器更新版本的速度都非常快，開發人員如果一直盯著某個版本才支援某個功能的話，在程式碼的撰寫上會變得冗長難以維護，而且可能有些功能在某個瀏覽器版本就已經實作，結果開發人員沒有追蹤到，就採用了過時或者是效能較差的寫法。所以應該要執行某一段程式碼時，應該要以瀏覽器是否有該物件的測試方式來判斷是否要執行，而不是用瀏覽器的版本來進行判斷。如果還是要支援舊 IE 的話，應該要調整為：

 // 比較好的作法
var btn = document.getElementById('my-button');
if (!btn.addEventListener) {
  btn.attachEvent('onclick', onClick);
} else {
  btn.addEventListener('click', onClick, false);
}

或是判斷能不能使用新 HTML5 API，比方說 LocalStorage API：

 if ('localStorage' in window) {
  // 執行 localStorage 的相關 APIs
}

這樣的程式寫法就能讓程式碼自己去適應（adaptive）瀏覽器是否支援各種 API。

4. 減少使用特定前置詞的 CSS 語法

因為 CSS 3 中有很多新的樣式語法，但各家瀏覽器的實作不一，所以有一些的 CSS 語法會帶有瀏覽器前置詞，像是 -webkit-linear-gradient、-moz-transition、-ms-animation 等等，目前常見的前置詞有：

前置詞	瀏覽器
`-webkit-*`	WebKit, Safari, Chrome, Opera (version 15 之後)
`-moz-*`	Mozilla Firefox
`-ms-*`	Internet Explorer
`-o-*`	Opera (version 14 以前)

如果使用前置詞的方式像是這樣：

 .my-background {
  background: -webkit-linear-gradient(red, blue);
}

這樣的 CSS 語法只會讓 Safari 及 Chrome 瀏覽器的使用者看到漸層色彩的效果，對於 Firefox、Internet Explorer 等其它瀏覽器就會因為不認得這樣的語法而看不到漸層效果，事實上它們是支援用 CSS 做漸層色彩的，所以一個習慣良好的寫法應該要是：

 .my-background {
  background: -webkit-linear-gradient(red, blue);
  background: -o-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: -ms-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

改成上面這樣之後，各個瀏覽器就會看到自己認得的語法而做正確的顯示，事實上新版本的瀏覽器們已經支援許多 CSS 3 的標準語法（上面的 background: linear-gradient(red, blue); 這段）而不需要加上前置詞，如果不需要支援太舊的瀏覽器，也可以只要留下標準語法即可，像是這樣：

 .my-background {
  background: linear-gradient(red, blue);
}

講結論，要讓 CSS 3 的語法順利運行：要加前置詞時就不要忘掉要把其它瀏覽器家族加上，不然就是只使用標準語法來寫 CSS 樣式。另外順帶一提的是，就要記得第一點提過的：使用正確的 doctype 宣告、並且拿掉 X-UA-Compatible 的設定。

5. 減少對外掛程式的依賴

過去會需要在網頁上另外靠外掛程式如：Java、Flash 或是 Silverlight，多半是因為想要進行一些原本在 HTML 4.01 時代無法完成的動作，像是播放多媒體影音檔案、同時上傳多個檔案、2D/3D 繪圖等等，但隨著瀏覽器對於新的網頁技術（如：HTML5）支援度逐漸成熟，這些原本要靠著外掛程式才能完成的，現在幾乎都可以靠著新的網頁技術以 HTML/CSS/JavaScript 來實現，像是用 <video>、<audio> 標籤來播放影音檔案、<canvas> 做繪圖等等都已經不是新技術了，所以現在還需要使用外掛程式才能讓網頁運作的必要性也降低了，更何況多數的行動裝置瀏覽器根本就不支援外掛程式，所以也是可以再次檢視網頁是不是真的要用外掛程式來處理。

結論

過去幾年，網頁標準技術處於一個混亂的狀況——除了網頁瀏覽器對於新舊標準技術的支援各自爬山，不過在進入行動化時代、甚至未來的多裝置的世界，網頁瀏覽器對於網頁技術的支援會漸漸一致，所以這樣要修改程式的狀況應當會愈來愈少，而且網頁開發人員的最佳做法也會減少上述這些相容性的問題，這也是為什麼現在是最好提升網頁相容性的時機，做完就更向新時代的網頁瀏覽器們一起前進。

關於檢測網頁相容性，Microsoft Edge 也提供了免費的線上的工具協助您分析網頁的相容性問題，而且如果不想被這個工具掃瞄，也可以使用它開放出來的程式碼 https://github.com/MicrosoftEdge/static-code-scan 來進行檢測，希望能幫助網頁開發人員提升相容性並優化網頁效能！

Freigeben über