jQuery表達式的複雜性

Question

我正在閱讀本文 - http://css-tricks.com/interviewing-front-end-engineer-san-francisco - 關於採訪前端工程師。誰寫的文章的傢伙建議如下：

而不是詢問有關合並排序的複雜性，詢問​​有關這個jQuery表達式的複雜性：

$("#nav a") 
    .addClass("link") 
    .attr("data-initialized", true) 
    .on("click", doSomething) 

他接着說：一個正確的答案對此將展示對基本計算機科學原理的理解以及對jQuery在幕後進行的深入瞭解。

那麼，什麼是正確的答案？

（我真的覺得它更容易談合併排序的複雜性（大O），即使它已經有一段時間，因爲我做的算法任何真正的分析。事實上，自大學！）

Answer 1

在這裏，逐行：

("#nav a") - 找到匹配的元素通常是O(N)任務。考慮將#nav分配給body元素，並且您在文檔中的所有內容都是<a> s。你需要掃描所有的「a」選擇器。

.addClass("link") - 這就是O(n)任務，只是通過列表。但它有隱藏的代價 - 通過改變你要求瀏覽器重新計算元素及其後代的風格的元素類。所以在最壞的情況下，所有DOM元素都會受到影響。考慮到風格重新計算的是成本O(N*S)任務（N - DOM元素，S的數量 - 在所有樣式表的樣式規則數），那麼總價格將O(N*S)

.attr("data-initialized", true) - 即在原則上具有相同的價格之上。

.on("click", doSomething) - 即O(n)任務（n - 集合中的數字元素）+它具有爲事件綁定結構分配內存的代價。集合中的每個元素都會有新的綁定，因此會分配額外的內存。

因此，對於計算複雜度，整體答案爲O(N*S)，內存消耗爲M(N)。

UA通常會做一些優化，但CSS選擇器結構規定的最壞情況就是這樣。

更新：爲簡潔起見，「小」事物例如爲「數據初始化」創建的DOM屬性節點被省略。