jquery 效率實驗:將$('target')結果先儲存到變數中的益處

jquery的運作模式，簡單講就是選擇目標然後執行指定動作，這裡要討論的是選擇目標這個動作對程式執行效率的影響

$('p').hide();

上面這列語法是隱藏所有的p元素，其底層運作是搜尋html文件中的所有p元素，再逐一修改其attr的style，設定其display為none

$('css selector') 這個語法包含了搜尋動作，所以先將搜尋結果儲存到變數裡，之後就不用重複搜尋，例如:

方式1:

$('p').hide();

$('p').show();

方式2:

var jqP = $('p');

jqP.hide();

jqP.show();

方式2相較於方式1，執行速度會更快

我們可以做個實驗驗證，程式碼在以下網址，進入後點擊左上"Run"按鈕即可在右下窗格看見執行結果，點擊按鈕即可進行實驗
(建議用電腦觀看，手機可能無法正常運行實驗)

點我進行效率實驗

從以上實驗結果可以看出速度的差異，速度差異和html文件中的元素數量成正比
(因為我們實驗的動作是對全部的p寫入class，所以若增加的元素是p，對整體速度影響更大，但其中有部份是寫入class造成，比較客觀的方式是加入其他元素，就主要會是搜尋的影響)

另外假設同樣在一堆元素中尋找一個特定元素，使用id尋找和使用class尋找兩者比較起來，用id速度會比用class快

有興趣可以自行修改一下上述網址程式碼，賦予其中一個p以id屬性，再將jquery語法的p改成id，跑看看時間，再將id改成class，比較一下時間差異，會發現用id尋找比較快，不過不用是用id還是class，都是先將搜尋結果儲存到變數最快

雖然一般使用差異不大，但當專案規模變大時，程式碼的效率影響力也會成正比上升，這是一個概念，這個範例只是一個簡單的例子

以上分享。