移動 Web 開發問題和優化小結

  到目前爲止，互聯網行業裏，手機愈來愈智能化，移動端佔有的比例愈來愈高，尤爲實在電商，新聞，廣告，遊戲領域。用戶要求愈來愈高，網站功能愈來愈好，效果愈來愈炫酷，這就要求咱們產品質量愈來愈高，web前端開發而言是一個挑戰，是一個難題，也是一個機遇。如何讓咱們所開發的手機頁面能有更好的交互體驗，就是這篇文章的主旨：移動web開發問題和優化小結。這個是我在掘金上看到的一篇文章，感受挺值得咱們去溫故知新，在此發出來給本身忘記時查看也給你們一個幫助。

1.Meta標籤

頁面在手機上顯示時，增長這個meta可讓頁面強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶經過點擊或者縮放等操做對屏幕放大瀏覽。（這個在ios10以上的版本已經失效了，即便加了下面的meta，用戶雙擊，縮放仍是能夠縮放頁面。你們能夠按照開發需求，參考下面的鏈接進行限制--ios10中禁止用戶縮放頁面）

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

禁止ios上自動識別電話

<meta content="telephone=no" name="format-detection" />

禁止android上自動識別郵箱

<meta content="email=no" name="format-detection" />

下面兩個是針對ios上的safari上地址欄和頂端樣式條的（個人手機是安卓，這個沒很仔細測試過，可是都有加上）

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 據說在ios7以上版本就沒效果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent 可是我都是用black-->

3.打電話發短信

<a href="tel:020-11811922">打電話給:0755-10086</a>
<a href="sms:10086">發短信給: 10086</a>

4.css3過渡動畫開啓硬件加速

ps：網上有說這個用了，手機的耗電量也會增長。我本身也在手機上粗略試過，確實有那麼一回事，日常看博客，5分鐘左右少1%，用了硬件加速3分鐘左右就少1%，你們注意合理使用。

.translate3d{
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
 }

說到這裏，也順便說下動畫或者過渡的兩個建議：

1.在手機上（其實PC也是同樣）。CSS3動畫或者過渡儘可能使用transform和opacity來實現動畫，不要使用left和top。

2.動畫和過渡能用css3解決的，就不要使用js。若是是複雜的動畫可使用css3+js（或者html5+css3+js）配合開發，效果只有想不到，沒有作不到。

5.移動端click屏幕產生200-300 ms的延遲響應

click事件由於要等待確認是不是雙擊事件，會有300ms的延遲（兩次點擊事件間隔小於300ms就認爲是雙擊），體驗並很差。如今的解決方案，第一個就是採用touchstart或者touchend代替click。或者封裝tap事件來代替click 事件，所謂的tap事件由touchstart事件+ touchmove（判斷是不是滑動事件）+touchend事件封裝組成。
關於touch和鼠標事件的延遲說明，我引用葉小釵大神博客裏面的一張圖片，以下



在手機上，click的延遲將近400ms。對於用戶而言，是一個很嚴重的延遲了！因此在手機上，並不建議用click。
附上葉小釵大神的原文-- 手持設備點擊響應速度，鼠標事件與touch事件的那些事

6.圖片優化

6-1.base64編碼圖片替換url圖片

這個應該沒什麼好解釋的，就是能不發請求的就不要發，對於一些小圖標（我這作法是把8K如下的圖標都轉換成base64）之類的，能夠將圖片用base64，來減小請求的發送。尤爲是在移動端，請求顯得特別珍貴，在網速的很差的狀況下，請求就是珍貴中的珍貴。

6-2.圖片壓縮

對於整個網站來講，圖片是最佔流量的資源之一，能不使用就不適用，圖標但是使用base64編碼，字體圖標代替，SVG等來代替，使用就要選擇最合適的格式，合適的尺寸，而後壓縮--這裏推薦騰訊推出的 智圖。
PS：過分壓縮圖片大小影響圖片顯示效果，可能會使得圖片變得模糊，通常來講，品質在60左右就差很少了！

6-3.圖片懶加載

首屏加載的快慢，直接影響用戶的體驗，建議將非首屏的圖片資源放到用戶須要時才加載。這樣能夠大大優化首屏加載，減小首屏加載所須要的時間！
ps：懶加載要使用js頻繁操做dom，期間會致使大量重繪渲染，影響性能。

6-4.img仍是background

圖片的展現方式有兩種，一種是以圖片標籤顯示，一種是以背景圖片顯示！下面寫了這二者的區別。
img： html中的標籤 img是網頁結構的一部分會在加載結構的過程當中和其餘標籤一塊兒加載。
background：以 css背景圖存在的圖片background會等到結構加載完成（網頁的內容所有顯示之後）纔開始加載
也就是說，網頁會先加載標籤 img的內容，再加載背景圖片 background引用的圖片。引入一張圖片，那麼在這個圖片加載完成以前， img後的內容不會顯示。而用 background來引入一樣的圖片，網頁結構和內容加載完成以後，纔開始加載背景圖片，網頁內容能正常瀏覽，可是看不到背景圖片。至於這兩種，你們按照習慣，需求等權重因素選擇！

7.快速回彈滾動

在ios上，若是存在局部滾動，就要加這個屬性了！若是不加，滾動會很慢，看起來也會有一卡一卡的感受。

-webkit-overflow-scrolling: touch;

可是，加上了這個，在ios上會產生bug。

以下佈局

.fb-box是一個大div，包含着頁面上的全部元素,包括所看到的那個彈窗.dialog-img，而且設置了height:100%;-webkit-overflow-scrolling:touch;position:relative;

定位須要， -webkit-overflow-scrolling:touch;也須要，可是這樣設置，在 ios上會有一個 bug,頁面滾動必定的距離後，點擊了顯示彈窗，再關閉的話，就會發現，彈窗的一部分還「留在頁面上」。



解決方案1：
把彈窗的 div和 .fb-box以兄弟節點的方式佈局，在外層再弄一個 div包住,這個坑就算爬起來了，效果以下





解決方案2：
.fb-box去掉 position:ralative;。讓彈窗的 div參考 body定位！

8.謹慎使用fixed

ios下 fixed元素容易定位出錯，軟鍵盤彈出時，影響 fixed元素定位，會發生元素錯位（滾動一下又恢復），有時候會出現閃屏的效果。我也搜過一下這個問題，發現別人還遇到了我沒遇到過的問題！真是，哎~。因此在手機上，不建議用 fixed定位，使用 absolute代替！若是必定要用，寫好了以後，必定要多測試幾回！

9.消除transition閃屏

PS：這個問題，我近段時間開發，貌似不加上這個代碼也沒什麼影響，可是之前就是要求加，就加上了，如今沒加上，也沒反饋有什麼問題！

.no-flash { 
        -webkit-transform-style: preserve-3d; 
        -webkit-backface-visibility: hidden; 
        -webkit-perspective: 1000; 
}

10.ios系統中去掉元素被觸摸時產生的半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

11.ios中去掉默認input默認樣式

input,button,textarea{-webkit-appearance: none;}

12.左右滑動，避免頁面跟着滑動

這個細節是我在基於vue開發焦點圖的時候遇到的，後來本身找不到方法，直接在sf上提問了，你們能夠去參考下： 移動端輪播圖，上下滑動的時候不觸發頁面的滾動
ps：滑動我沒有使用什麼庫，是我根據touchstart和touchend的移動距離來判斷是左右滑動或者上下滑動！

13.vue-router與微信分享的問題

分享發送的鏈接是下面這樣
http://www.example.com/dist/html#/index?utm_source=share
http://www.example.com/dist/html#/index.html/index?utm_source=share
可是分享以後的實際鏈接是下面這樣的，別人點擊的分享出去的連接，就會打不開網頁
http://www.example.com/dist/html?from=xxxx#/index&utm_source=share
http://www.example.com/dist/html#/index.html?from=xxxx/index&utm_source=share 

解決方案
1.自定義分享URL地址
2.避免使用單文件應用

14.iphoneX的齊劉海

蘋果公司新出的手機，出了沒多久，段子手就坐不住了，各類調侃，可是今天咱們聊那個！聊下iphoneX給前端帶來的困擾，也是給ui帶來的困擾吧！下面引入大漠，張鑫旭等人對iphoneX齊劉海的一個解決方案！避免到時候跳坑！
iPhone X的缺口和CSS
藉助CSS Shapes實現元素滾動自動環繞iPhone X的劉海
剖析 iOS 11 網頁適配問題

手機管家iPhoneX的適配總結

15.其它參考

上面所說都是遇到的具體問題，至於還有一些比較籠統的細節優化，或者開發遇到的問題，好比：壓縮代碼，圖片，合併文件等。你們能夠參考下面的資源，這些我不展開說了！

1. web移動前端有哪些優化方案？
2. web移動端頁面性能優化方案
3. Web前端優化最佳實踐及工具集錦
4. 移動前端系列——移動頁面性能優化
5. Web性能優化：圖片優化

 

原文連接：https://juejin.im/post/59c4c9d85188254f58412d17?utm_source=gold_browser_extension