讓移動網站變身本地APP

移動端構建網站變得越來越簡單，一旦心裡有想法，製作一個精緻的站點就不是什麼問題。但當大多數人提及一個應用就像一個原生程式或者像本地應用時，他們並沒說是網站的外觀，他們在意的是操作之後的響應效果。本地應用相對於Web應用不止速度上有優勢，動畫效果渲染也更加平滑，當點選按鈕時，按鈕自身會立即響應變化的樣式，不管操作是否載入成功，都不會報錯。要讓站點看起來像本地應用，就意味著要盡一切可能使站點快速的響應。

體驗效能 VS 實際效能

雖然提高實際效能很重要，但這並不意味著使用者最終能夠感覺到改善。使用者對效能感知來說很重要，網站是否真正執行非常快並不重要。等待網站響應的時候也不能只專注吸引使用者的注意力，但事實上仍然讓使用者感覺在等待響應，而正確的做法是應該去分散使用者的注意力。作為設計師和開發者，我們的目標不僅僅是從學術理論上創造一個快速的站點，而更應該從體驗上去創造一個最快的站點。使用者是如何感知你的站點的執行速度才是最重要的，任何實際速度的提升不過是一個華麗的外衣，體驗效能優化比實際效能優化更重要，但絕不代表不去實施實際效能優化。

接下來介紹4個技巧來改變上述情況。

1. 給你的按鈕增加觸控狀態

   在移動裝置上改善網站體驗效能最容易的方法之一就是使用啟用狀態。眾所周知，使用者在任何時候點選你網頁上的按鈕，在網頁響應前他都必須等待約300毫秒。瀏覽器會保持這個延時，這樣它才能確保使用者並不是想做其他動作（準確地說就是雙擊）。所以瀏覽器在這三分之一秒內檢測使用者是否有其他操作，如果沒有，則響應使用者上一次點選。當這個事件最終發生時，它會給出一個灰色的高亮展示給使用者。

   要使你的站點感覺快，就要讓你的按鈕能夠及時響應使用者的點選事件，並且在狀態改變時給使用者一個可見的反饋。有一個非常好用的CSS偽類叫做 active 狀態，它可以用來在網頁上顯示一個按鈕或者連結被點選了。我們也可以同時把它使用在PC端瀏覽器上。

2. 使用預設滾動

   滾動條使用起來就像是使用本地程式的感覺，實際上它就是原生的，你需要做的只是給你的滾動容器新增這個屬性：

   Css
   -Webkit-overflow-scrolling: touch;
   

   然而，關於這個屬性還存在一個問題，那就是當滾動到頁面最頂部的時候會禁止你的iPhone顯示狀態列。這個BUG已經存在有段時間了，即使是最新版本iOS 7上的移動版Safari都沒有解決這個問題。解決問題的方法之一是：建立一個類來給容器新增overflow-scrolling:touch屬性。然後只有當容器處於可見狀態時，使用JavaScript去應用這個類，使其生效。

3. 建立高效能動畫

   在Web網站和本地應用之間最顯著的差別是動畫的使用。多年前，本地應用在當今裝置中就能夠充分利用硬體圖形加速。而在Web端，開發者卻只能基於JavaScript來實現動畫，對於移動端功能比較弱的CPU來說，執行起來會比較慢。但是現在，隨著移動瀏覽器的支援，我們可以大量利用CSS3動畫來實現硬體加速。

4. 手勢利用

   移動開發者已經意識到手勢的魅力所在，並很快就使其得到了很好的利用。大多數網站都只會使用手勢點選來觸發事件，設計師甚至不想去實現其它手勢，這樣給使用者像一個二等公民待遇的感覺。當然，移動作業系統都存在一個問題那就是：劫持在瀏覽器中的手勢，而去執行系統自身的響應。對於本地應用，比如Facebook 使用螢幕左右邊緣的滑動開拓導航。但對於Web應用來說，這種行為叫出界，因此，這些手勢還是有相當多的限制的，能納入考慮的有以下幾個：

   手勢1 一側到另一側的滑動
   即使即將出界，一側到另外一側的滑動也是一個相當不錯的手勢，只是需要注意的是不要太靠近螢幕的邊緣了。

   手勢2 拉取重新整理
   拉取重新整理是讓使用者去獲取資料的另外一個手勢，有一大堆JavaScript庫可以很簡單地去實現這個手勢，有一個我以前用過的庫叫Hook.js。

   手勢3 長按
   有一個很有用的屬性叫做–Webkit-touch-callout: none;，它將關閉移動端Safari預設的長按事件，但是你想要在Android上關閉它還需要額外的工作。長按手勢主要用於拖動一個元素或者展示更多操作給使用者。

   手勢4 縮放功能
   每個人都理解縮放，大多數人在網站上看到一個照片的時候都會去縮放來檢視更多細節。有時候瀏覽器也會劫持這種手勢，無論是否需要鎖定整個視窗的放大或者縮小，有時你也並不希望使用者去縮放整個頁面。

專注效能優化雖然是件好事，但使用者不是機器，他們不關心你的網站發出了多少請求，也不在乎你的螢幕渲染得有多快，他們只關心網站帶給他們體驗上的感覺。重要的是如何讓你的網站看起來或者感覺上是最快的，那些使用者無法感知的高速網站是毫無意義的。

本文為Anyforweb前端分享部落格，需要了解網站建設相關，請訪問anyforweb.com。