@ChingHanHo

I Build Stuff.

使用 Zepto + Velocity 無縫取代 jQuery 更輕巧

zeptojs

Zepto 是個跟 jQuery API 相容的套件,但是非常輕巧。

jQuery 1.11.2 不壓縮 278KB,壓縮後是 94.8KB。儘管 jQuery 2.0 比 jQuery 1.11 減少了 12% 的體積大小,仍然是個 200KB 級的套件。而 Zepto 不壓縮 56KB,壓縮後大約是 24.5KB,比 jQuery 平均小了 74%!

Zepto 極其輕巧的秘訣在於它預設只有 jQuery 最關鍵的幾個核心功能,並且用友善的模組化設計,保持每個功能能夠輕易地被擴充。

擴充 animate 模組

jQuery 的 animate 效能不是很好,上次在製作公司官網作品牆,讓圖片載完進行 fadeIn 的效果,造成 FPS 低到明顯感受到 lag。

通常需要用到大量的動態視覺效果的首選是 GreenSock 所提供的 TweenMax(344KB)。如果只是需要用來取代 jQuery 的 animate 操作 DOM 的動態效果,那麼能夠跟 jQuery 無縫整合的 Velocity(215KB)有更好的條件。Velocity 優點是效能高,體積比較小,也能夠相容 jQuery API。

Zepto 因為模組化設計的關係,預設是不包括 animate 這個方法的,因此便可以改用 Velocity 來擴充。

外部網站參考:

瀏覽器相容性

jQuery 2.0 開始就直接放棄 IE 9 以下的瀏覽器,Zepto 更狠直接跳到 IE 10+;而 Velocity 則是不支援 IE 8 以下,所以能不能使用 Zepto + Velocity 這個組合要先觀察一下產品的目標使用群。

如果打算支援 IE 8,還是去用 jQuery 1.11.3 吧!

Comments