4年一次的奧運又來了，平常不看的電視轉播，最近又開始看了。

今天的主題是從邦友的分享文章中得來，關於jQuery效能的小實驗，
在邦友divaka
http://ithelp.ithome.com.tw/question/10095237
這篇文章中，提到，

【多用 ID 選擇 (#id) 器來取代其他選擇器】
因為 id 選擇器可以直接呼叫 Javascript 的 getElementById() 直接定位找出該 HTML 元素，效率最高。

【盡量少用 Class 選擇器】
class 選擇器必須解析整份文件，效能很差。但可以配合 tag, id 等組合的選擇器，將範圍縮小後，便能更有效率的使用 class 選擇器

筆者用chrome 的 JS 整合環境來追蹤一下。
以jQuery 的api 上的範例，來實驗一下：
範例在http://api.jquery.com/class-selector/，
這是class選取器的範例，把兩個含有 同名稱的class(本範例是myClass)的div，找到後，加上紅色的框。

以這行

<script>$(".myClass").css("border","3px solid red");</script>

做為程式的進入點，下中斷點。
看他的程式呼叫個數。
在call stack裏，為了找這文中的所有class, 它大概經歷了，

makeArray (jquery-latest.js:4856)
Sizzle (jquery-latest.js:5109)
jQuery.extend.merge (jquery-latest.js:743)
jQuery.fn.jQuery.init (jquery-latest.js:207)
jQuery (jquery-latest.js:27)
jQuery.fn.jQuery.pushStack (jquery-latest.js:243)
jQuery.fn.extend.find (jquery-latest.js:5426)
jQuery.fn.jQuery.init (jquery-latest.js:187)
jQuery (jquery-latest.js:27)
(anonymous function) (myclass.html:21)

因為是stack的結構，所以最早呼叫的函數，在最下面。

然後，找到了，

ret: jQuery.fn.jQuery.init[2]
0: HTMLDivElement
1: HTMLSpanElement
context: HTMLDocument
length: 2
prevObject: jQuery.fn.jQuery.init[1]
selector: ".myClass"
__proto__: Object[0]

以此範例，找到兩個，一個是div, 一個是span。

那我們找一下，id 這個選取器，
範例也是用api的文件，網址在
http://api.jquery.com/id-selector/
找到其中的一個div，把它用紅色框起來。
用以下這行做中斷點。

<script>$("#myDiv").css("border","3px solid red");</script>

它的程式叫用，

jQuery.fn.jQuery.init (jquery-latest.js:177)
jQuery (jquery-latest.js:27)
(anonymous function) (myDiv.html:20)

其實在第162行，讀者可以看到以下的code,

	// HANDLE: $("#id")
				} else {
					elem = document.getElementById( match[2] );

					// Check parentNode to catch when Blackberry 4.6 returns
					// nodes that are no longer in the document #6963
					if ( elem && elem.parentNode ) {
						// Handle the case where IE and Opera return items
						// by name instead of ID
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}

						// Otherwise, we inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}

原來jQuery對**＃id算是走捷徑，對8＋種以上的CSS選取器，對＃id**類寫的比較簡單，甚至，用

quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

這個正規式，把這種樣式定義出來，
經過之前兩篇的練習，不知道有沒有信心把這個樣式理解出來，
其中 大於>, 小於<, 不是正規式裏的保留字元，
把**<>放進來，因為筆者CSS程度不好，不知道＃<id>**這種寫法算不算是符合規範的寫法。

小結：id因為其唯一性的定義，所以jQuery當然也假設它只有一個，不會把全部的文件裏元素找過一遍，而其他選取器就會在HTML文件中到處出現，所以會在迴圈裏find個不停，
從CALL的數目來講，如果不管FUNCTION中實作的行數，可以有粗淺的量化感覺，
但不是很精確，沒有用秒數來計時，這也是chrome整合環境裏profile,timeline的強項，
可以量化視覺化畫出網頁的時間。