南順網絡

為(wèi)什麽越來越少的(de)人用jQuery

在原來的(de)開發中，工程師們不會太糾結于性能問題。但是現在不同了，為(wèi)了提高(gāo)用戶體現，首要的(de)就是解決浏覽器繪制所帶了的(de)性能問題。經典的(de)莫過重繪和(hé)回流這兩個概念。

**重繪：**就是頁面重新進行繪制，比方說，修改一(yī)個元素的(de)背景顔色。

**回流：**一(yī)般來說，浏覽器進入頁面的(de)時候就已經進行了一(yī)次回流，回流其實指的(de)就是頁面重新進行排版布局。

既然我們想提高(gāo)性能，那麽就可(kě)以先從這兩概念入手，肯定是以小的(de)代價更新頁面是提高(gāo)性能好的(de)手段。但可(kě)惜的(de)是，jQuery并沒有做(zuò)到。為(wèi)什麽這麽說，請看以下分析:

當我們拿到一(yī)組新聞數據要渲染到ul标簽裏時，通常我們會先将新聞數據逐條進行字符串拼接，緊接着使用$符選擇ul元素，并修改ul的(de)innerHTML的(de)值為(wèi)拼接好的(de)字符串（使用html API），此時完成了次渲染。這次頁面進行了重繪（這時必然的(de)），首先不分析的(de)性能好或壞，用下一(yī)個說明将更加有力。

比如(rú)說我們這時多了一(yī)個換一(yī)換按鈕。在傳統開發模式中，這時的(de)換一(yī)換按鈕肯定執行的(de)還是上面的(de)代碼，獲取元素，修改元素的(de)innerHTML，但是現在問題出現了，就是我們有必要将所有元素重新删除，再重新添加一(yī)遍嗎？答案肯定是不需要（下圖所示，創建一(yī)個元素的(de)代價有多大）。

因為(wèi)這時我們隻需要将每一(yī)個li裏的(de)文字和(hé)a标簽裏的(de)鏈接修改即可(kě)，那顯然是沒有必要像上面那樣重新再添加一(yī)遍li的(de)。因為(wèi)一(yī)個DOM元素，可(kě)能包含上百條屬性，這對性能開銷是很大的(de)。

那麽現在出現的(de)新概念 Virtual DOM（虛拟DOM），就可(kě)以解決這個問題。其實Virtual DOM就是對真實DOM節點的(de)描述，通過改變Virtual DOM來以小變動來改變真實DOM（Virtual DOM不一(yī)定真的(de)比jQuery性能更好）。

編輯:--ns868