博主熱衷各種互聯網技術,常啰嗦,時常伴有強迫症，常更新，覺得文章對你有幫助的可以關注我。 轉載請注明"深藍的鐮刀"
事情是這樣的：最近開發的一個手機網站客戶反應訪問起來特別慢，刷了半天才能看到頁面，然后問我們是不是網站出問題了。於是我趕緊找了各種手機測試一下，沒有問題，首先排除程序錯誤的問題，然后服務器用的又是雲服務器，只要不是在國外應該不會太慢才對，打聽了一下，原來是該客戶用的是2G網絡訪問的，說是在信號不好的地方幾乎刷不出頁面。。。
雖然說客戶的網絡質量令人堪憂，不過作為一個有點追求（強迫症）的攻城獅還是決定幫他優化一下。
頁面另存為，打開一個頁面所需要加載的所有資源包括圖片、js、html一共才300K（jquery庫特地使用了壓縮版的，只有100K左右。。。），將圖片各種壓縮，最終還是有160多K，看來只有把jquery庫給去了，但是將所有的jquery代碼改寫成原生js又有一種想死的感覺，而且很多兼容問題層出不窮，那么有沒有一個既像jquery這么好用的，又能省流量的js庫呢？答案是：Zepto
一張圖說明Zepto.js的優勢：
jquery 1.x最新版284KB,壓縮后94KB；jquery2.x最新版247KB，壓縮后84KB；Zepto最新版54KB，
壓縮后9KB！！！
然后看看功能方面。
選擇器
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 </ul>
5 <script src="./zepto1.1.6.js"></script>
6 <script>
7 alert($("#items").html()); 8 </script>
9 </body></html>
追加
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 <p>Hello</p>
5 </ul>
6 <script src="./zepto1.1.6.js"></script>
7 <script>
8 $('ul').append('<p>new list item</p>') 9 </script>
10 </body></html>
克隆 （注：zepto的clone()方法不能像jquery的clone()可以同時克隆data和綁定事件）
1 <html><body>
2 <ul id="items">
3 <p>This is it!</p>
4 <p>Hello</p>
5 </ul>
6 <script src="./zepto1.1.6.js"></script>
7 <script>
8 $('ul').append($("#items").clone()) 9 </script>
10 </body></html>
ajax
1 $.ajax({ 2 type: 'GET', 3 url: '/projects', 4 data: { name: 'Zepto.js' }, 5 dataType: 'json', 6 timeout: 300, 7 context: $('body'), 8 success: function(data){ 9 this.append(data.project.html) 10 }, 11 error: function(xhr, type){ 12 alert('Ajax error!') 13 } 14 }) 15
16 $.ajax({ 17 type: 'POST', 18 url: '/projects', 19 data: JSON.stringify({ name: 'Zepto.js' }), 20 contentType: 'application/json' 21 })
因為Zepto是jQuery-compatible的，所有如果你會使用jquery，那么你已經會了Zepto。以上這些用法基本與jquery一致，下面說幾個我看到的與jquery不同的地方。
1.Zepto基礎庫不支持很多css選擇器
比如很常用的$(":selected"),$("p:eq(1)"),$("li:first")這類，不過Zepto的庫提供很多拓展的模塊，你只需要在他的官網上按需要編譯你需要的模塊然后保存為zepto.js即可，或者直接使用在線編譯，其中如果開啟了selector模塊，你就能支持大部分的css選擇器了。
2.如果你開啟了detect模塊，那么你就可以用Zepto判斷用戶設備、操作系統和瀏覽器的功能(測試了幾個還算可以用，不知是否准確)
1 <html><body> 2 <ul id="items"> 3 <p>This is it!</p> 4 </ul> 5 <!-- 該js必須開啟了detect模塊 --> 6 <script src="./zepto.js"></script> 7 <script> 8 // general device type 9 alert($.os.phone); 10 alert($.os.tablet); 11 12 // specific OS 13 alert($.os.ios); 14 alert($.os.android); 15 alert($.os.webos); 16 alert($.os.blackberry); 17 alert($.os.bb10); 18 alert($.os.rimtabletos); 19 20 // specific device type 21 alert($.os.iphone); 22 alert($.os.ipad); 23 alert($.os.ipod); // [v1.1] 24 alert($.os.touchpad); 25 alert($.os.kindle); 26 27 // specific browser 28 alert($.browser.chrome); 29 alert($.browser.firefox); 30 alert($.browser.safari); // [v1.1] 31 alert($.browser.webview); // (iOS) [v1.1] 32 alert($.browser.silk); 33 alert($.browser.playbook); 34 alert($.browser.ie); // [v1.1] 35 </script> 36 </body></html>
3.如果開啟了form模塊，就可以對你的表單進行數據序列化，類似jquery的jquery form插件
1 <html><body> 2 <form> 3 <input name="user" value="xxx" type="text"/> 4 <input name="password" value="123" type="password"/> 5 </form> 6 <!-- 該js必須開啟了form模塊 --> 7 <script src="./zepto.js"></script> 8 <script> 9 var formData = $('form').serializeArray(); 10 alert(formData[0]['name']); 11 alert(formData[1]['name']); 12 alert(formData[0]['value']); 13 alert(formData[1]['value']); 14 </script> 15 </body></html>
4.如果開啟了touch模塊，你就可以使用tap(觸屏點擊) 和 swipe(觸屏滑動),類似Jquery mobile 插件
1 <html><body> 2 3 <style> 4 .delete { display: none; } 5 #items{font-size:30px;}</style> 6 7 <ul id="items"> 8 <li>List item 1 <span class="delete">DELETE</span></li> 9 <li>List item 2 <span class="delete">DELETE</span></li> 10 </ul> 11 12 <!-- 該js必須開啟了touch模塊 --> 13 <script src="./zepto.js"></script> 14 <script> 15 $('#items li').swipe(function(){ 16 $('.delete').hide() 17 $('.delete', this).show() 18 }) 19 20 $('.delete').tap(function(){ 21 $(this).parent('li').remove() 22 }) 23 </script> 24 </body></html>
注：Zepto的swipe事件在某些Android手機(如安卓4.4)仍存在不起作用的情況。期待Zepto修復這個bug。
這么多有用的模塊如果用jquery來實現，除了需要加載那個壓縮后還有90多KB的核心庫外，我還要加載各種插件諸如jquery mobile,jquery form,jquery detect等等，這個大小不用我說，要多臃腫多臃腫，而Zepto全部開啟模塊后只有39KB，所以說作為
業績良心省流量
的手機網站還是使用Zepto吧。
總的來說，Zepto像是一個
Jquery體系的一個精簡版，專注於移動端，兼顧主流PC瀏覽器，對於Jquery庫的文件大小問題我猜想Jquery在發展的同時可能因為很多歷史遺留問題還有需要兼顧各種並不是主流的瀏覽器導致代碼略臃腫。