JQuery Tip

隨著 JQuery 的盛行，網站大量地使用JQuery來開發，但伴隨著所開發的網頁功能
益趨複雜，使用者有時也感覺這些有著絢麗功能的網站，似乎也伴隨著網頁效能不佳的問題。

JQuery 是一個很容易上手的前端開發函示庫，但也因此，多數的開發人員不見得
會去注意一些小地方，但有效的去改變依些小小的程式撰寫習慣，有時可以帶來網
頁效能的大提升。


1.重用物件

下面是一段很常見到JQuery程式碼，看起來沒有太大的問題

$("#header a.back").on("click", clickHandler); $("#header a.back").css("color", "white"); $("#header a.back").css("text-decoration", "none"); $("#header a.back").attr("href", "#");

但事實上，這潛藏了一個效能陷阱

不斷的呼叫 $("#header a.back") ,使得連覽器的JS引擎會不斷地在DOM中重複尋
找同樣的物件，這需的DOM操作是不需要的，如將程式改為

var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none"); $backButton.attr("href", "#");

效果是一樣的，但效能卻好很多


2.使用 CSS Transitions去取代JS的動畫效果

一般JS開發人員在面臨需要一些動態效果時，很自然地選擇使用
$("#page").animate() 這種語法來製作，但事實上，這一些JS動態函式的效能並不好，如果可以請使用 CSS Transitions來達成想要的效果


3.改變頁面資料顯示的順序，先顯示頁面，再改變內容

下面是一段很常見到JQuery程式碼，利用AJAX將資料帶回，並將資料顯示在螢幕上
// Get data
$.ajax({url: "product/101"}).done(function(product) {
// Display view
displayView(product);
});

但是如果將程式邏輯改成

// Display view
displayView();

// Get data
$.ajax({url: "product/101"}).done(function(product) {
// Update view
});


如此一來使用者在UX的感受上會更好，
上述幾項，其實對程式本生的架構影響並不大，
如果在程式開發的同時就予以注意，對網頁UI設計上是一大加分。