移動端基礎概念

時間 2019-11-08

標籤移動基礎概念欄目無線简体版

原文原文鏈接

基礎概念

屏幕尺寸

指屏幕的對角線的長度，單位是英寸，1英寸 = 2.54釐米
常見的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等

屏幕分辨率

在橫縱向上的像素點的個數，單位是px，1px = 1個像素點。
通常以縱向像素 * 橫向像素來表示一個手機的分辨率，好比 1960*1080(這裏的1像素指的是物理設備的1個像素點)

高清屏

高清屏(Retina：又稱視網膜屏)與普通屏相比，相同區域的物理像素點數是普通屏的4倍(DPR=2)
具有足夠高的物理像素密度而令人肉眼沒法分辨其中單獨像素點的液晶屏
是一種具有超高像素密度的液晶屏
一樣大小屏幕上顯示的像素點由一個變爲多個

物理像素

又稱爲設備像素，它是屏幕能顯示的最小粒度
買手機的時候會有一個 n x m 的分辨率，那是屏幕的 n x m 個呈像的點，一個點（小方格）爲一個物理像素
設備像素也被稱爲物理像素，它是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和高度
任何設備的物理像素都是固定的，任何一款設備上1物理像素的大小是不會變得
不一樣設備上1物理像素的大小多是不同的

CSS像素

CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量Web頁面上的內容
它是爲Web開發者創造的，在css或者javascript中使用的一個抽象的層
通常狀況下，css像素被稱爲與設備無關的像素(device-independent像素)，簡稱"DIPs"
在一個標準的顯示密度下，一個css像素對應着一個設備像素

像素中的最小單位

物理像素是設備呈像的最小單位
css像素是瀏覽器中的最小單位（即web開發中的最小單位）
位圖像素是圖像的最小單位

物理像素與CSS像素的關係

一個width爲200px的元素，它佔據了200個css像素，但200個css像素佔據多少個物理像素取決於屏幕的特性（是不是高密度，即像素比）和用戶的縮放行爲
- 在蘋果的視網膜屏幕上，視網膜的像素密度是普通屏幕的兩倍，這個元素就跨越了400個設備像素
- 若是用戶進行放大操做，視覺視口尺寸變小（尺寸：放的css像素個數），它將跨越更多的設備像素
須要注意的是，css像素與物理像素的關係是靠瀏覽器廠商在維護，並非設備廠商
css像素是瀏覽器中特有的概念

屏幕像素密度

又稱像素密度或屏幕密度
屏幕上每英寸能夠顯式的像素點的數量，單位是ppi(pixels per inch)
屏幕像素密度與屏幕尺寸和屏幕分辨率有關

設備獨立像素

設備獨立像素，又稱密度物管像素，能夠理解爲是計算機座標系統中的一個點
這個點表明一個能夠由程序使用的虛擬像素（好比：css像素），而後由相關係統轉換爲物理像素
它是css像素轉換物理像素過程當中很重要的一個環節
設備獨立像素能夠當作是設備提供的接口，用於對接應用的一些概念（如瀏覽器中的css像素）
只有當瀏覽器廠商對接上設備的獨立像素時，瀏覽器廠商設計的移動端規則才能起做用，不然將採起默認的規則

位圖像素

1個位圖像素是柵格圖像（如：png,jpg,gif等）最小的數據單元
只有當1個位圖像素對應1個物理像素時，圖片才能獲得完美清晰的展現

像素比(DPR)

像素比指物理像素和設備獨立像素的比例(即：devicePixelRatio = 物理像素 / 設備獨立像素)
像素比 = 一個方向上佔滿一塊屏幕須要的物理像素的個數/一個方向上佔滿一塊屏幕須要的設備獨立像素的個數
注意，像素比是比較個數而不是比較面積
添加 <meta> 標籤 width=device-width ，能夠將css像素與獨立像素連接，此時能夠把設備獨立像素當作物理像素（即：物理像素 = 設備獨立像素）
像素比能夠經過 window.devicePixelRatio 來獲取

移動端視口

移動端瀏覽器一般寬度是 240px~640px，而大多數爲 PC 端設計的網站寬度至少爲 800px，若是仍以瀏覽器窗口做爲視口的話，網站內容在手機上看起來會很是窄。所以，引入了佈局視口、視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度再也不相關聯。javascript

佈局視口（layout viewport）

佈局視口的寬度/高度能夠經過 document.documentElement.clientWidth / Height 獲取。
佈局視口使視口與移動端瀏覽器屏幕寬度徹底獨立。CSS 佈局將會根據它來進行計算，並被它約束
佈局視口用於解決早期的pc端頁面在手機上顯示的問題。
iOS, Android 基本都將這個視口分辨率設置爲 980px，因此 PC 上的網頁基本能在手機上呈現，只不過元素看上去很小

視覺視口（visual viewport）

視覺視口是用戶當前看到的區域，用戶能夠經過縮放操做視覺視口，同時不會影響佈局視口。
當前縮放值 = 理想視口寬度 / 視覺視口寬度：用戶放大時，視覺視口將會變小，CSS 像素將跨越更多的物理像素。
視覺視口決定了物理像素和css像素之間的比例

理想視口

只有當咱們在頁面中加入viewport的meta標籤時，理想視口才會生效 <meta name="viewport" content="width=device-width"> (這句代碼的意思是：佈局視口寬度 = 理想視口寬度)
理想視口包含的css像素的個數等於獨立設備像素的值
理想視口由瀏覽器廠商定義，所以同一設備上的不一樣瀏覽器擁有不一樣的理想視口
瀏覽器理想視口的大小也取決於設備,同一款瀏覽器在不一樣設備上擁有不一樣的理想視口

完美視口

當咱們在頁面中加入viewport的 <meta name="viewport" content="width=device-width;initial-scale=1.0"> 標籤時,完美視口才會生效
width=device-width 和 initial-scale=1.0 這兩個條件只要缺一條就不是完美視口，而是理想視口
完美視口不只僅只能解決旋轉時的問題，當頁面中存在太大的元素時，假如使用理想視口，某些瀏覽器會擴展布局是口的寬度來容納這個元素。此時，使用完美視口能夠規避這個問題

推薦寫法：

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

佈局視口與理想視口的關係

佈局視口只規定出如今視口元素中的排列規則，它僅僅是移動端瀏覽器的一個屬性。在物理像素和css像素1:1的狀況下，能夠認爲佈局視口比設備寬度（分辨率）要大不少
視覺視口決定了用戶能看到什麼
- 從css像素角度出發，因爲視覺視口所包含的css像素的個數跟用戶的縮放行爲有關，咱們沒法準確的判斷視覺視口的尺寸。
- 默認狀況下（物理像素：css像素 = 1:1），一個視覺視口包含該設備分辨率的值所表明的css像素個數
- 視覺視口包含了整個佈局視口
移動端在初始化時，視覺視口會將整個佈局視口完整顯示出來，因此移動端瀏覽器在初始化的時候，物理像素與css像素之間的比例不多是一比一，這個比例與設備分辨率和佈局是口的大小有關
- 這個比例的本質上和視口有關，由於移動端瀏覽器初始化時視覺視口包含的css像素個數等於佈局視口包含的css像素個數
- 視覺視口包含的物理像素個數等於設備的分辨率

獲取三個視口的寬度（移動端）

佈局視口
- var layout = document.documentElement.clientWidth
- 無兼容性問題
視覺視口
- var visual = window.innerWidth
- 接近所有支持
理想視口
- var dream = screen.width
- 一些設備表明理想視口寬度，一些設備表明設備的分辨率，有極大的兼容性問題

縮放

用戶縮放

隻影響佈局視口
放大：一個css像素的面積變大，區域內css像素的個數變少，視覺視口的尺寸變小
縮小：一個css像素的面積變小，區域內css像素的個數變多，視覺視口的尺寸變大
在pc端用戶縮放影響視口的尺寸
在移動端用戶縮放影響視覺視口的尺寸

系統縮放

能夠經過<meta>設置系統縮放
影響佈局視口和視覺視口

meta&viewport

此標籤桌面瀏覽器不支持
推薦寫法： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
- width [pixel_value|device-width]
  - 用於控制佈局視口的大小， width=device-width 會使佈局視口的大小編程理想視口的大小(即獨立設備像素表明的大小)
  - 瀏覽器支持width的最大值爲10000個像素，最小值爲理想視口的20%
  - 設置具體數值大兼容性不佳，大部分的安卓手機不支持，僅有ios支持
  - 安卓的webkit不容許小於佈局視口的寬度，若是指定了一個小於佈局視口的值，它會默認轉爲佈局視口的大小(一般爲980)
  - ie10不容許超出480px的值，超出自動設置爲佈局視口的默認寬度1020px
  - 95%的瀏覽器都支持 width=device-width
- initial-scale
  - 初始縮放比例
  - 當用戶旋轉設備時，佈局視口的寬度一般會發生改變，由於橫豎屏時的理想視口尺寸不同，但ios的Safari的視口不會作出改變（基於性能的考慮）
  - ios的Safari在 inital-scale 設置的狀況下，用戶旋轉設備，其佈局視口會發生改變。但只設置 inital-scale ，ie10在旋轉時會有問題，所以須要採用完美視口的寫法
- user-scalable [no|yes] ：是否容許縮放，默認容許（ios10不支持該屬性）
- minimum-scale：容許縮放的最小比例
- maximum-scale：容許縮放的最大比例
  - 沒有經過meta標籤設置 minimum-scale 和 maximum-scale 屬性時，縮放比例爲20%-500%
  - 有經過meta標籤設置 minimum-scale 和 maximum-scale 屬性時，縮放比例爲10%-1000%
  - 安卓webkit不支持 minimum-scale 屬性，其默認範圍爲25%-400%
  - ie minimum-scale 和 maximum-scale 屬性都不支持
- target-densitydpi
  - dpi_value 70-400：每英寸像素點的個數
  - device-dpi：設置默認像素密度
  - high-dpi：高像素密度
  - medium-dpi：中等像素密度
  - low-dpi：低像素密度

移動端適配方案

rem適配原理：改變了一個元素在不一樣設備上佔據的css像素的個數
rem單位：根標籤的font-size所表明的值，即根標籤的fontsize = 1rem
rem適配優缺點
- 優勢：沒有破壞完美視口
- 缺點：px值到rem的轉換太複雜
rem與em的區別
- em
  - 子元素字體大小的em是相對於父元素字體大小
  - 元素的width/height/padding/margin用em的話是相對於該元素的font-size
- rem
  - rem是所有的長度都相對於根元素，即<html>元素

示例

(function () {
      var layout = document.documentElement.clientWidth / 16;
      var styleNode = document.createElement('style'); // 建立style標籤
      styleNode.innerHTML = "html{font-size : " + layout + "px!important"; // 將根標籤的font-size置爲佈局視口的寬/16
      document.head.appendChild(styleNode); //將style標籤添加到head中
})()

viewport適配

viewport適配原理
- 將全部設備佈局視口的寬度調整爲設計圖的寬度
- 修改css像素與佈局像素的比例，每個元素在不一樣設備上佔據的css像素的個數是同樣的。可是css像素和物理像素的比例不相同
- 適配比例 = 理想視口寬度 / 設計圖尺寸
viewport適配方案的優缺點
- 優勢：所量即所得
- 缺點：不是完美視口
獲取理想視口的寬度
- 方法一： screen.width ---- 兼容性差
- 方法二：一開始給HTML標籤添加上<meta name="viewport" content="width=device-width"> 。此時，用document.documentElement.clientWidth獲取理想視口的寬度

示例

(function () {
      var targetW = 640 // 設計圖寬度
      var scale = document.documentElement.clientWidth / targetW // 理想視口的寬度 / 設計圖寬
      var meta = document.querySelector("meta[name='viewport']")
      meta.content = 'initial-scale=' + scale + ',minimum-scale=' + scale + ',maximum-scale='+scale+',user-scalable=no'
})()

移動端一物理像素實現

rem+系統縮放

主體適配採用rem適配並放大rem的基值(dpr倍)
再經過系統縮放縮回dpr倍，initial-scale=1/dpr

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minmul-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1物理像素</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #test {
      width: 16rem;
      height: 1px;
      background-color: black;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <div id="test"></div>

  <script>
    // rem 適配
    // 淘寶的作法，經過適配角度解決1物理像素的問題
    window.onload = function () {
      (function () {
        var dpr = window.devicePixelRatio || 1 // 像素比
        var layout = document.documentElement.clientWidth // 佈局視口寬度

        var styleNode = document.createElement('style')
        styleNode.innerHTML = "html { font-size:" + layout * dpr / 16 + "px!important}"
        document.head.appendChild(styleNode)

        var scale = 1 / dpr
        var meta = document.querySelector('meta[name="viewport"]')
        meta.content = "width=device-width, initial-scale=" + scale + ",user-scalable=no,maximum-scale=" + scale + ",minimum-scale=" + scale
      })()
    }
  </script>
</body>
</html>

響應式+變換縮放

經過媒體查詢進行單個元素的縮放

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1物理像素</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #test {
      width: 100%;
      height: 1px;
      background-color: black;
      margin-top: 5rem;
    }

    @media only screen and (-webkit-device-pixel-ratio:2) {
      #test {
        transform: scaleY(0.5);
      }
    }

    @media only screen and (-webkit-device-pixel-ratio:3) {
      #test {
        transform: scaleY(0.33333);
      }
    }
  </style>
</head>

<body>
  <div id="test"></div>

  <script>
    (function () {
      var layout = document.documentElement.clientWidth / 16;
      var styleNode = document.createElement('style');
      styleNode.innerHTML = "html{font-size :" + layout + "px!important;}"
      document.head.appendChild(styleNode)
    })()
  </script>
</body>

</html>

移動端事件基礎

觸摸事件

移動端有兩類事件：觸摸事件、指針事件[←點擊可查看MDN文檔]
本篇暫時只提到觸摸事件中的touchstart、touchmove以及touchend
touchmove與mousemove的區別
- touchmove：不可能單獨觸發
- mousemove：能夠單獨觸發
須要注意的是：touchstart、touchmove以及touchend最好不要用DOM1的事件綁定 item.ontouchstart = function(){} ，緣由在於DOM1的綁定方式在chrome早期版本（56及如下）沒法觸發，這就給調試帶來了困難
建議採用DOM2的方式綁定touchstart、touchmove以及touchend事件： addEventListener()

禁止移動端事件默認行爲

須要全面禁止的系統默認行爲有：
- 下拉橡皮泥（阻尼）效果
- 長按選中文字效果

示例

// 下面這行代碼能夠禁止手機瀏覽器全部的默認事件 
      document.addEventListener("touchstart", function (ev){
        ev = ev || window.event
        // ev.cancelable 可用於查看是否能取消該事件的瀏覽器默認行爲
        item.innerHTML = ev.cancelable;
        ev.preventDefault()
})

移動端初始模板

移動端必備條件
- meta標籤
- 全面阻止事件的默認行爲
  - 全面阻止事件的默認行爲，有一些設備會有頁面上全部的滾動條失效的隱患(可使用自定義滾動條)
- 適配方案

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    window.onload = function () {

      // 阻止默認行爲
      document.addEventListener('touchstart', function (ev) {
        ev = ev || window.event
        ev.preventDefault()
      })

      // rem適配方案
      !(function (flag) {
        var w = document.documentElement.clientWidth
        var styleNode = document.createElement('style')
        styleNode.innerHTML = "html{font-size: " + w / flag + "px!important}"
        document.head.appendChild(styleNode)
      })(16)
    }  
  </script>
</body>

</html>

事件穿透

事件穿透產生的緣由
- pc端的事件能夠在移動端觸發
- pc端事件有300毫秒延遲
- 移動端事件不會有延遲

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      line-height: 0;
    }

    .wrapper {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
    }

    a {
      font-size: 12px;
      line-height: 18px;
    }
  </style>
</head>

<body>
  <div class="wrapper"></div>
  <a href="http://www.baidu.com">百度一下</a>

  <script>
    window.onload = function () {
      // 阻止默認行爲
      document.addEventListener('touchstart', function (ev) {
        ev = ev || window.event
        ev.preventDefault()
      })

      // rem適配方案
      !(function (flag) {
        var w = document.documentElement.clientWidth
        var styleNode = document.createElement('style')
        styleNode.innerHTML = "html{font-size: " + w / flag + "px!important}"
        document.head.appendChild(styleNode)
      })(16)

      var wrapper = document.querySelector('.wrapper')
     
      wrapper.addEventListener('click', function () {
        wrapper.style.display = "none"
      })

      // 全面禁止事件默認行爲會致使手機端a標籤沒法跳轉
      //  移動端a標籤跳轉方案，解決誤觸
      var aNodes = document.querySelectorAll("a")
      for (var i = 0; i < aNodes.length; i++) {
        // 該寫法使滑動的時候頁面不發生跳轉
        aNodes[i].addEventListener('touchstart', function () {
          this.isMove = false;
        })

        aNodes[i].addEventListener('touchmove', function () {
          this.isMove = true;
        })

        aNodes[i].addEventListener('touchend', function () {
          if (!this.isMove) {
            window.location = this.href
          }
        })
      }
    }  
  </script>
</body>

</html>

TouchEvent

touchEvent.changedTouches

觸發事件時改變的觸摸點的集合
能夠經過clientX和clientY屬性來獲取當前集合中手指在視口中的座標的座標
- touchEvent.changedTouches[0].clientX; // 獲取當前集合中第一根手指的橫座標

touchEvent.targetTouches

綁定事件的那個結點上的觸摸點的集合列表

touchEvent.touches

觸發事件時改變的觸摸點的集合

移動端常見問題

禁止電話與郵箱

iPhone上的Safari和某些webkit android手機瀏覽器，會自動對看起來像是電話號碼的數字串（包括已經加入連字符或括號格式化過的）和郵箱添加連接，致使用戶點擊該數字後跳轉到撥打電話的界面
能夠經過使用meta標籤來禁止掉電話及郵箱的跳轉 <meta name="format-detection" content="telephone=no,email=no">
當禁止電話及郵箱跳轉後若是想讓用戶點擊電話或郵箱跳轉能夠將其寫成以下格式
- ```
<a href="tel:110">13579246801</a>
<a href="mailto:123@qq.com">123@qq.com</a>
```

連接高亮

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 解決連接高亮問題 */
}

圓角過圓

input {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    -webkit-appearance: none; /* iphone 只要有 border-radius 屬性就會變成一個圓  */
}

Font Boosting

Font Boosting被稱爲字體提高，也被稱爲Text Autosizer，Font Inflation.是 Webkit 給移動端瀏覽器提供的一個特性：當咱們在手機上瀏覽網頁時，極可能由於原始頁面寬度較大，在手機屏幕上縮小後就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不須要左右滑動屏幕，也不須要雙擊放大屏幕內容的前提下，也可讓人們方便的閱讀頁面中的文本。
解決方法一：給元素指定寬高
解決方法二：給元素指定max-height p { max-height: 9999px; }

補充

Web App、Native App、hybrid app

web App：即web前端頁面，多采用h5開發
- 不須要安裝包，節約手機空間
- 量級輕，開發成本低
- 版本迭代快
- 基於瀏覽器，能夠跨平臺使用
- 安全性相對較低，頁面跳轉費力，不穩定感更強。
native app：又稱原生app，基於智能手機本地操做系統android(安卓基於Java) 、ios(基於OC --- Object-C)編寫運行的第三方應用程序。
- 性能更好
- 版本迭代須要用戶從新打包補丁
- 開發成本高。
- 發佈新版本慢，應用商店發佈審覈週期長，下載由用戶控制
hybrid app：即混合app， native app 與 web app的混合。

移動價值鏈

網絡運營商
- 中國移動
- 中國聯通
- 中國電信
設備供應商
- 華爲
- 小米
- 魅族
- oppo
- vivo
- 蘋果
- ...
軟件製造商（操做系統）
- 谷歌
- 蘋果
- ...
服務提供商
- 谷歌
- 華爲
- 小米
- ...

移動端瀏覽器分類

移動端大概有30多種瀏覽器，其中20多種處於邊緣化狀態

內置瀏覽器

每部手機都有內置瀏覽器，這個瀏覽器屬於設備的固件，一般由操做系統廠商開發，並且大多數內置瀏覽器都被緊密的集成到了底層的操做系統中去了，所以咱們沒有辦法單獨升級內置瀏覽器，只能藉助於更新操做系統。總的來講，它的特色以下：
- 更新慢
- 移植在操做系統中
安卓
- 三星 --- 三星webkit
- 中興 --- 中興webkit
- 華爲 --- 華爲webkit
- 小米 --- 小米webkit
- 索尼 --- 索尼webkit
ios --- safari
黑莓 --- 黑莓webkit
window phone --- IE

可下載瀏覽器

在實踐中，只有安卓纔有可下載瀏器(uc、獵豹、qq瀏覽器等)
可下載瀏覽器更新快
可下載瀏覽器獨立於操做系統

webview

webview是獨立程序，是留給原生應用的一個操做系統瀏覽接口，它用了內置瀏覽器不少底層的組件（好比渲染引擎）
ios的操做系統默認不容許在它身上有多餘的渲染引擎，所以其餘瀏覽器想在ios上運行就必須使用ios的webview

代理瀏覽器(較少)

代理瀏覽器的渲染引擎存在於服務端，所以其js性能及其低下
代理瀏覽器的渲染引擎可以解析和執行 HTML、CSS、Javascript,但並非運行在設備上，而是在遠程服務器上，與代理瀏覽器相對應的叫完備瀏覽器
- 完備瀏覽器
  - 它與咱們預期的瀏覽器的運行方式同樣，當用戶請求一個頁面時，瀏覽器就會經過http請求去抓取HTML CSS Javascript 和其餘資源，一旦一切就緒，就會去渲染和顯示頁面，全部的步驟都是在客戶端進行的，會佔用內存，處理器的事件，電池壽命
- 混合瀏覽器
  - 能夠在代理瀏覽器和完備瀏覽器間切換的瀏覽器稱爲混合瀏覽器(opera-mini、uc-mini)
代理瀏覽器工做流程
- 用戶請求一個頁面，他不會發送一個普通的http請求，而是發送一個特殊的加密連接到一個特殊的代理服務器
- 代理服務器會發送正常的http請求給用戶但願訪問的web服務器
- 代理服務器包含一個渲染引擎，可以正常渲染頁面
- 代理服務器壓縮頁面，壓縮頁面後的文件相似於PDF，它有連接熱點
- 代理服務器一樣經過加密連接把這個文件發到客戶端
- 客戶端展現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。