採用原生JavaScript優化jQuery性能

前耑發展很快，現代瀏覽器原生 API 已經足夠好用。我們並不需要爲了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由於 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用場景大大減少。因此我們項目組在雙十一後抽了一周時間，把所有代碼中的 jQuery 移除。下面總結一下：

Why not jQuery

1. 模式變革

jQuery 代表著傳統的以 DOM 爲中心的開發模式，但現在複雜頁面開發流行的是以 React 爲代表的以數據/狀態爲中心的開發模式

應用複雜後，直接操作 DOM 意味著手動維護狀態，當狀態複雜後，變得不可控。React 以狀態爲中心，自動幫我們渲染出 DOM，同時通過高效的 DOM Diff 算法，也能保证性能。我們在 React 應用實踐中也發現，大部分當你想直接操作 DOM 的時候，就意味著你可能做錯了。

2. 不支持同構渲染

重構就是前後耑運行同一份代碼，後耑也可以渲染出頁面，這對 SEO 要求高的場景非常合適。由於 React 等流行框架天然支持，已經具有可行性。當我們在嘗試把現有應用改成同構時，因爲代碼要運行在服務器耑，但服務器耑沒有 DOM，所以引用 jQuery 就會報錯。這也是要移除 jQuery 的迫切原因。同時不但要移除 jQuery，在很多場合也要避免直接操作 DOM。

3. 原生 API 足夠好用

由於瀏覽器的歷史原因，曾經的前耑開發爲了兼容不同瀏覽器怪癖，需要增加很多成本。jQuery 由於提供了非常易用的 API，屏蔽了瀏覽器差異，極大地提高了開發效率。這也導致很多前耑只懂 jQuery。其實這幾年瀏覽器更新很快，也借鋻了很多 jQuery 的 API，如 querySelector，querySelectorAll 和 jQuery 選擇器同樣好用，而且性能更優。如果你不打算兼容舊的瀏覽器, 且網站沒有用到什麽Jquery插件, 你盡管可以更換, 但如果你網站裡有依賴jquery的庫, 那你移除jquery去提高所謂的客戶耑js性能, 那就是妥妥的頭鉄。

4. 性能

前耑開發一般不需要考慮性能問題，但你想在性能上追求極致的話，一定要知道 jQuery 性能很差。原生 API 選擇器相比 jQuery 豐富很多，如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍！

5. 時機成熟

差的瀏覽器（IE）已經淘汰的差不多了。

If We Didn't Spend So Much on IE Support, We Could Be Taking Vacations on Mars

--Christian Alfoni

我們的主打産品現在有千萬用戶，因爲我們一直引導用戶升級瀏覽器，上個月統計 IE 9 以下用戶只佔不到 3%。但爲了這 3% 的用戶我們前耑開發卻增加了很多工作量，也限制了我們升級我們的架構，因此放棄支持他們利大於弊。當然這要根據産品來定，比如這是百度統計的國内瀏覽器佔有率，IE8 竟然還有 22%。有些産品可以爲了保证用戶體驗，在舊的瀏覽器上投入很大成本，甚至做到了極致。其實我覺得産品更應該做的是引導用戶升級瀏覽器。微軟也宣布 2016年1月12號停止支持 IE 11 以下瀏覽器，繼續使用舊瀏覽器就會有安全風險，我們更應該主動引導，只要産品有足夠吸引力，大部分用戶升級並不困難。