移動web開發介紹——瀏覽器

標籤：

前段時間瞭解學習了一下《移動Web手冊》，覺得真的需要這種不是偏向技術、架構或工具的書籍，只是單純的講解一些關於移動Web最基本的知識。正好今天整理一部分之前學習過的內容，記錄和分享，也方便以後查閱理解。

我們在開發移動端web時，經常跟瀏覽器打交道，你知道移動端的瀏覽器有幾種類型嗎？在測試移動web頁面時，我們不能忽略的瀏覽器又有哪些呢？

在開始之前，我們先簡單瞭解一下移動Web

一、移動Web是什麼

1. 移動web和案頭web沒有本質的區別，尤其是考慮到 響應式設計 的技術運行我們在大的電腦顯示器和小的手機螢幕上使用同一套CSS，我們可以把它理解為“運行在比你聽說過的還要多的瀏覽器上的支援小型觸控螢幕的網站”

2. 但是移動web開發和案頭開發有些小小的區別，例如

• 如何適配不同大小的螢幕
• 如何相容安卓的眾多版本
• 為什麼有些css屬性在手機上不生效
• 手機上click事件有延遲

而上面的這些問題，是我們在移動開發中主要關注的話題，這些話題主要分為三類，它們是：

• 瀏覽器
• 視口
• 事件

先不要著急一口氣去瞭解和解決上面的問題（實際上，移動端web開發的問題可能是變幻莫測的，就瀏覽器而言，不同的廠商，不同的品牌手機，不同的作業系統，不同的內建瀏覽器，甚至同一種瀏覽器的不同版本都有可能對於移動端的某一些樣式或事件的支援不同。）本篇不介紹技術，著重介紹的是關於影響移動web開發的環境因素。先瞭解一下移動世界，這可能會對你進行web開發有所助益。

 二、移動端瀏覽器

 瀏覽器類型

手機上有4種瀏覽器類型：內建瀏覽器、可下載瀏覽器、代理瀏覽器以及WebView。這些瀏覽器在某些地方會重疊：一個瀏覽器不一定非要屬於一個類型。 比如：代理瀏覽器Opera Mini 被很多使用者下載，但是在某些功能手機上卻是內建瀏覽器。

下面分別說一下不同的類型瀏覽器

1.內建瀏覽器

每部手機都有內建瀏覽器，也就是說，這個瀏覽器屬於韌體，通常是作業系統廠商開發的，一般隨著系統升級而升級。下表列舉了不同平台手機的內建瀏覽器：

　　大多數內建瀏覽器都被緊緊密整合到底層的作業系統中，也就是說，無法單獨升級瀏覽器。

2. 可下載瀏覽器

許多瀏覽器是使用者能夠下載並且自行安裝的。Opera、Firefox、Chrome還有UC，是其中幾個重要的瀏覽器。

在實踐中，只有安卓才可能有可下載的瀏覽器，因為iOS上不允許安裝其他的渲染引擎。

可下載瀏覽器相比於內建瀏覽器有一個優勢，就是只要有了新版本就可以更新。

3. WebView

WebView是留給原生應用的一個作業系統瀏覽介面。比如，一個遊戲的協助頁面可能是網頁，遊戲應用會利用平台的WebView來展示頁面。

蘋果不允許iOS裝置上安裝其他渲染引擎。因此，其他瀏覽器想要在iOS上安裝就必須用蘋果的WebView。

4. 代理瀏覽器

代理瀏覽器的渲染引擎能夠解析和執行HTML、CSS還有JavaScript，但並不是運行在裝置上，而是在遠程伺服器上。

與代理瀏覽器相對應的是完備瀏覽器。當使用者請求一個頁面，瀏覽器會通過http請求去抓取HTML、CSS、JavaScript還有一些其他資源，一旦一切就緒，就會去渲染和顯示頁面。這些步驟都是在用戶端上進行的，會佔用記憶體、處理器時間和電池壽命。

代理瀏覽器渲染頁面步驟：

(1). 使用者請求一個頁面不會發送普通的http請求，而是通過一個加密串連發送一個特殊的請求到一個特殊的Proxy 伺服器。

(2). Proxy 伺服器會發送正常的http請求給使用者希望訪問的web伺服器，它會請求HTML和其它資源。

(3). Proxy 伺服器包含一個渲染引擎，能夠正常渲染頁面

(4). Proxy 伺服器壓縮渲染頁面，成為該網站的某種圖片（想象為一個pdf或者一個影像地圖）

(5). Proxy 伺服器通過加密串連把這個檔案發送到用戶端

(6). 用戶端把檔案展示給使用者

代理瀏覽器優缺點：

優點：致力於為使用者省錢。因為代理瀏覽器所要做的事情就是顯示靜態檔案，允許點擊或輕觸連結，產生簡單UI，所以它是輕量級的，甚至可以跑在低規格的手機上，使用者不需要買很貴的智能機就可以訪問網頁。

缺點：沒有用戶端互動。任何時候當代理瀏覽器遇到任何動態事件時，它就必須的去請求伺服器給出新的指示。因此，在觸發和執行之間往往會有一秒或者更長事件的滯後 大多數不允許做某些事件，onscroll、resize、mouseout等

三、安卓平台下的瀏覽器

先說明一下，這裡沒有介紹iOS下的瀏覽器，是因為iOS下的瀏覽器相對安卓而言不混亂。之前也提到過，蘋果不允許安裝其他渲染引擎。不過基於代理瀏覽器的特性，蘋果上可以安裝代理瀏覽器（但也不是所有代理瀏覽器都可以）。所以在蘋果手機上測試web頁面時，我們一般測試Safari瀏覽器即可，必要時可以測試代理程式瀏覽器。

下面來說一下安卓

Web開發人員在面對安卓時遇到的問題是，不像其它平台，安卓的內建瀏覽器的情況很複雜，受到多方面因素的影響，正如前面所提到的，就瀏覽器而言，不同的廠商，不同的品牌手機，不同的作業系統，不同的內建瀏覽器，甚至同一種瀏覽器的不同版本都有可能對於移動端的某一些樣式或事件的支援不同。而安卓平台的開放性，讓更多的手機廠商，瀏覽器廠商都可以開發自己的一個瀏覽器來增加裝置或操作平台的價值。這也就造就了安卓市場下的各瀏覽器的繁複和差異化。（例如，兩個不同手機廠商的內建瀏覽器在針對同一個web樣式上做了不同最佳化處理）

安卓瀏覽器

1. 安卓Webkit

　　一個智能手機作業系統需要一個瀏覽器，因此原始的安卓提供了他自己基於Webkit的瀏覽器，它沒有名字，我們稱它為“安卓WebKit”(內建瀏覽器)。

2. Chrome

基於WebKit的瀏覽器，Google想使用chrome來代替webkit。利於Google收集使用者資料並提供更強大的廣告。但是裝置廠商更希望能夠自己擷取資料，並且是自己的裝置與眾不同

3. 三星Chrome和其它瀏覽器

與Google Chrome是不一樣的。（版本和一些樣式支援的區別）

三個必須測試的瀏覽器

(1). 安卓WebKit4（富含不同的裝置和不同版本的安卓系統）

(2). GoogleChrome

(3). 三星Chrome（三星高端手機）

註：檢測使用者代理程式字串（navigator.userAgent），查看是否包含單詞chrome,如果有就是Chrome（不一定是GoogleChrome）；如果不包含，就是安卓WebKit。

 

之前做的PPT的一個知識分享，現在又重新整理了一下，主要是為了記錄和重溫，不是很詳細，還是希望可以協助感興趣的童鞋對移動端的一些知識有所瞭解。

感謝閱讀。

移動web開發介紹——瀏覽器