標籤：體驗 input 最小 網路資源 data 背景圖 start 低版本 連續
1，開發時碰到了哪些技術問題
1）低版本手機不支援es6，使用babel
2）引入百度地圖js api時，需要使用https協議，否則不能正常使用API。在iOS 10中，蘋果對webkit定位許可權進行了修改，所有定位請求的頁面必須是https協議的
3）<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
強制讓文檔的寬度與裝置的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許使用者點擊螢幕放大瀏覽；加上這一句input擷取焦點時頁面不會放大
4）在公眾號中,input擷取焦點時，頁面上方會提示就會提示“防欺詐盜號，請勿支付或輸入QQ密碼”。在公眾平台的管理後台設定業務網域名稱即可解決
5）<form action="#" @submit="doSearch"><input type="search"/></form>
//點擊鍵盤的搜尋按鈕即可觸發form的submit事件 e.preventDefault();//阻止表單預設事件
移動端的鍵盤右下角顯示“搜尋”（安卓）或“Search"（蘋果）按鈕，點擊該按鈕即可提交表單
6）頁面列表上拉載入，實現分頁，縮短請求時間
監聽頁面滾動事件，判斷捲軸離頁面底部的距離，然後距離達到一定的值，向服務端發請求。將請求的結果拼接在原有的列表後面，即可實現上拉載入分頁。
7）移動端html5拖拽
當按下手指時，觸發ontouchstart；當移動手指時，連續地觸發ontouchmove（在這個事件發生期間，調用preventDefault()事件可以阻止滾動）；當移走手指時，觸發ontouchend。
onclick只在你快速點擊並放開才會被執行，如果你點擊一個地區，很遲才放開，那麼onclick是不會執行的(touchstart->...->touchend)
執行順序是ontouchstart > ontouchend > onclick
個人觀點：移動端不能使用HTML5拖放實現拖拽效果（ondragstart...），可以使用touch事件
8）ios上頁面滾動不流暢
-webkit-overflow-scrolling: touch;
9）ios上背景圖片閃爍載入問題（原因暫時不詳）
var cvs = document.createElement(‘canvas‘);
cvs.width = 5; cvs.height = 2;cvs.toDataURL();
這句話放在瀏覽器執行一下，就得出了base64的字串。
<img class="blur-bg" :style="{backgroundImage: ‘url(‘+picUrl+item.merLogo+‘)‘}" src="data:image/png;base64,iVBORw0..."/>
2，移動端提高使用者的體驗度
1）通過上拉載入分頁，縮短請求時間
2）減少等待，反饋及時
當不可避免的出現了載入和等待的時候，需要予以及時的反饋以舒緩使用者等待的不良情緒。如：向服務端發請求時顯示“載入中”彈框，請求完成關閉該彈框；當請求的資料為空白時，在頁面上提示查詢無記錄等，避免出現空白頁面，讓使用者以為應用卡死。
3）明確直觀的的結果提示，如報錯
除了在使用者等待的過程中需予以及時反饋外，對操作的結果也需要予以明確反饋。彈出式提示（Toast）適用於輕量級的成功提示，1.5秒後自動消失，並不打斷流程，對使用者影響較小，適用於不需要強調的操作提醒，例如成功提示。特別注意該形式不適用於錯誤提示，因為錯誤提示需明確告知使用者，因而不適合使用一閃而過的彈出式提示。對於操作結果已經是當前流程的終結的情況，可使用操作結果頁來反饋。這種方式最為強烈和明確的告知使用者操作已經完成，並可根據實際情況給出下一步操作的指引。
4）減少 HTTP 資源請求次數&減小 HTTP 要求大小
使用構建工具如webpack來合并JavaScript 或 CSS 代碼，壓縮靜態圖片資源以及移除代碼中的注釋並壓縮；
5）把 CSS 資源引用放到 HTML 檔案頂部；JavaScript 資源引用放到 HTML 檔案底部
一般推薦將所有 CSS 資源儘早指定在 HTML 文檔 <head> 中，這樣瀏覽器可以優先下載 CSS 並儘早完成頁面渲染。
JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的載入和解析執行對頁面渲染造成阻塞。由於 JavaScript 資源預設是解析阻塞的，除非被標記為非同步或者通過其他的非同步方式載入，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程。
6）相對於案頭端瀏覽器，移動端 網頁瀏覽器上有一些較為明顯的特點：裝置螢幕較小、新特性相容性較好、支援一些較新的 HTML5 和 CSS3 特性、需要與 Native 應用互動等。但移動端瀏覽器可用的 CPU 計算資源和網路資源極為有限，因此要做好移動端 Web 上的最佳化往往需要做更多的事情。首先，在移動端 Web 的前端頁面渲染中，案頭瀏覽器端上的最佳化規則同樣適用，此外針對移動端也要做一些極致的最佳化來達到更好的效果。
7）首屏載入和按需載入，非首屏內容滾屏載入，保證首屏內容最小化
由於移動端網路速度相對較慢，網路資源有限，因此為了儘快完成頁面內容的載入，需要保證首屏載入資源最小化，非首屏內容使用滾動的方式非同步載入。一般推薦移動端頁面首屏資料展示延時最長不超過3秒。
8）圖片壓縮處理
在移動端，通常要保證頁面中一切用到的圖片都是經過壓縮最佳化處理的，而不是以原圖的形式直接使用的，因為那樣很消耗流量，而且載入時間更長。
9）使用 touchstart 代替 click
由於移動端螢幕的設計， touchstart 事件和 click 事件觸發時間之間存在 300 毫秒的延時，所以在頁面中沒有實現 touchmove 滾動處理的情況下，可以使用 touchstart 事件來代替元素的 click 事件，加快頁面點擊的響應速度，提高使用者體驗。但同時我們也要注意頁面重疊元素 touch 動作的點擊穿透問題。
移動端html5問題總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
