2014
06
09

JQuery Tip

關鍵字:jquery效能CSSUIUX

隨著 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設計上是一大加分。
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所