移動前端開發基礎與優化

摘要：企業號的二次開發，基本都會須要微信中展現網頁，用於完成一些獨有的定製化需求。這篇文章會簡單的聊聊移動前端開發的基礎，主要包括一些開發和調試技巧，還會簡單的提一下如何經過加載瀑布流找出性能的瓶頸從而提升網頁的加載速度。

主要內容：

1. 使用fiddler來抓包和調試
2. 抓HTTPS的數據包
3. 使用chrome devtools來模擬移動端
4. 基礎架構選型
5. 找到瓶頸提升加載速度

使用fiddler來抓包和調試

這部分會介紹，如何把手機上的資源文件代理到PC上，以便開發和調試。

須要先作一些簡單的準備工做：

• 一臺帶有無線網卡的PC或者筆記本電腦，而後將電腦和手機鏈接到同一個Wi-Fi網絡中，而且保證兩者是在同一個ip網段內的；
• 在電腦上安裝 Fiddler;
• 打開Fiddler在菜單欄中點擊 Tools - Fiddler Options - Connections 中按照以下配置後重啓下fiddle：

 

打開fiddle，鼠標mo到右上角的網絡圖標上，能夠看到本機IP，如圖是: 192.168.1.107

 

 

如今打開手機的網絡設置，把網絡設置中的代理設置爲上一步獲取到IP地址，端口號填寫8888，下圖是iphone的設置方式，Android手機根據機器不一樣設置方式有所不一樣，這裏就不一一舉例了。

 

如今在手機上訪問 騰訊網，若是一切順利，會在Fiddle上看到請求的結果：

能夠順利抓包了之後，就能夠考慮調試的問題，如今拿一個簡單的頁面來舉例：調試頁面

抓包效果：

假設，咱們須要調試 quick.js, 它出了一點問題，那麼注意Fiddler右邊的AutoResponder，把quick.js拖動到這個地方，配置它映射到本地的quick.js。如圖，注意須要選中箭頭所指向的兩個選擇框：

上圖的意思是，若是發現訪問的是lin-chao.github.io/sort/script/quick.js 就用本地的quick.js來替換它。

在本地文件開頭加上：

1	alert( 'hello, from fiddle!');

保存，而後在手機上刷新頁面，立刻就能夠看到結果。

AutoResponder能夠掛載html，css，js甚至是image，因此，開發者能夠輕易的把全部的資源都代理到PC上，而後直接在手機上刷新來查看開發結果。

抓HTTPS的數據包

對於特別注意信息安全的企業，可能會用到 HTTPS 的方式來加載網頁，這時候，上一步的配置就不足以了。好比咱們如今手機上訪問企業號官網 抓包效果如圖：

只能看到請求，可是看不到具體的內容，這時候還須要多作兩步配置：

• 安裝 CertMaker for iOS and Android 用來抓HTTPS的數據包；
• 打開Fiddler，點擊菜單欄上的 Tools - Fiddler Options - HTTPS,勾選上Decrypt HTTPS traffic ，而後重啓Fiddler；
• 打開手機，訪問本機IP+8888，例如：192.168.1.107:8888, 點擊 You can download the FiddlerRoot certificate 按照提示，在手機上安裝證書，重啓手機瀏覽器。

這時候再訪問企業號官網：https://qy.weixin.qq.com

接下去，就是和非HTTPS的頁面同樣了，經過掛載的方式來開發和調試。

使用chrome devtools來模擬移動端

經過掛載的方式來調試手機頁面，仍是不太方便，因此在開發移動前端頁面的時候，咱們通常會在PC上先作好大部分的開發工做，而後再去測試相關的手機系統，以便作好適配。在PC上開發的時候，能夠藉助Chrome Developer Tools來模擬手機頁面。

安裝最新版本的Chrome（推薦39以上的版本），而後按F12，打開開發者工具，如圖：

點擊圖右邊箭頭開啓手機模擬，刷新頁面，就能夠模擬手機了；

圖左邊箭頭能夠選擇須要模擬的機器；

甚至還能夠選擇網絡狀態，來模擬各類網絡狀況下的加載效果。

更多具體的 Chrome 開發者工具介紹能夠參考我以前兩篇文章：

優雅且高效的使用Chrome Developer Tools（上） 和 優雅且高效的使用Chrome-Developer-Tools（下）

基礎架構選型

1.放棄jQuery，擁抱zepto。絕大部分開發者都會很是熟悉jQuery，在移動端也就天然而然用jQuery來作基礎庫，可是在移動端我推薦用 [zepto]（http://zeptojs.com/） 來代替jQuery，理由：

• 相比於jQuery，zepto在GZIP後，只有區區的9.3kb，更適合移動端；
• zepto的API同jQuery幾乎是如出一轍的，熟悉jQuery的同窗很是容易上手；

2.儘可能使用CSS3動畫。一般咱們要在前端實現一個動畫效果，主流就是兩種方法：JS動畫與CSS3動畫。 經過JS動態改寫樣式實現動畫，在現代的PC上問題基本不大，由於已經有足夠強大計算能力和渲染能力去作了，而在移動端，受限於各類手機的機能，JS動畫在一些機型上就會顯得有些力不從心了，容易出現丟幀的現象，具體表現就是，感受到卡頓，而瀏覽器原生實現的CSS3動畫，就會流暢的不少，並且有很是天然的效果，體驗會很好。不具體展開CSS3動畫的具體實現方式，能夠搜索引擎或者相關的書籍獲取到使用方式，另外，推薦騰訊前端團隊的文章：高性能 CSS3 動畫

3.用touch事件來代替click。在移動端，click會有300ms左右的延遲，因此會感受點了後，過一會纔有反應，推薦使用touch事件來處理click。開發者能夠經過監聽：touchstart,touchmove,touchend,touchcancel 這四個事件來實現傳統PC上的click，scroll事件，或者直接使用zepto已經封裝好的tap,singleTap,doubleTap,swipe, swipeLeft, swipeRight, swipeUp, swipeDown等事件。

找到瓶頸提升加載速度

企業號上線到如今，咱們收到過不少起用戶的投訴，抱怨微信OAuth太慢了，頁面會白上好久，甚至是一些不經過OAuth的直接訪問，都很慢。我跟了幾個案例，發現問題基本都是出在企業具體側，具體的業務作的不是很好，致使頁面白了好久，就有一種很慢的感受。這部分只是聊一下，怎麼定位到瓶頸出如今哪裏，不會談到全部的狀況，更多的關於優化相關的方法，之後能夠詳聊。

開發者能夠經過基本的加載瀑布圖來找到性能瓶頸，而後加以優化，從而提升加載速度和體驗。第一步仍是在PC上，經過Chrome開發者工具來模擬調試。

打開chrome開發者工具，選擇手機模擬，而後選擇3G網絡，切換到Network面板，刷新頁面，能夠看服務器時間，每個資源的加載的時間。

拿一個最近遇到反饋的加載圖舉例：

左下角顯示的加載時間4.34秒，也就是說若是3G用戶在微信裏面須要看等待4秒左右纔看的到完整的頁面，若是是2G的網絡，那可想而知是會慢上更多的。

HTML返回了之後，瀏覽器開始加載資源，一次發起5個資源請求，第6個資源video.js開始的時候是處於阻塞狀態，直到apperance.css加載完成之後，纔開始真正的加載。資源過大和阻塞是致使這個頁面很慢的緣由，也就是瓶頸所在。

1.資源過大的問題：注意看size一欄，每一行的上一個數字是網絡傳輸的數據大小，下一個數字是資源真實大小。能夠注意到圖中不少資源是傳輸大小是高於於實際大小的，能夠判斷出服務器沒有對全部的資源開啓 gzip 壓縮。從雅虎的數據來看，壓縮一般能將響應的數據量減小近70%，這對於捉襟見肘的移動帶寬而言是一個很不錯的優化，數據傳輸的越快，頁面顯示的也會越早。以圖中的jQuery爲例，一個簡單的表格作了一個對比：

資源	大小	GZIP後大小	優化效果
jQuery2.1.1	82.3kb	29.6kb	32.9%
zepto	24.4kb	9.1kb	37.3%

想一下，這裏若是用zepto來代替jQuery,只有9.1kb，只有當前加載的11%。

若是把全部的資源都作了gzip壓縮之後，加載圖以下：

總體時間降低到了3.09秒，優化了1.25秒，優化了28.8%。

2.資源阻塞的問題：圖中一共加載了3個JS、4個CSS，都沒有作資源的合併。在PC端，如今高級的瀏覽器和帶寬，使得資源的加載問題暴露的不是那麼那麼的明顯，多上幾個問題也至於太大，感官上並不會以爲慢了多多少。可是移動端，這種延時就比較明顯了，若是把幾個CSS和JS合併，那仍是能夠節約一些時間的；

把全部的CSS資源合併爲main.css,全部的JS資源合併位mian.js,加載截圖以下：

時間降低到了2.61秒，相比第一步優化了0.48秒，優化了15.5%

---

關於加載性能優化，能夠作的不少，以前在PC上的優化方案，在手機端也是適用的。

開發者可使用谷歌提供的 PageSpeed Insights 服務來查看前端頁面的質量，而後根據他提出建議來優化網頁。

另外，咱們立刻就會提供一些前端的基礎庫的CDN給企業號的開發者使用，幫助你們提升加載速度。