H5新特性

1.全屏化（FullScreen）

1.1進(jìn)入全屏

elem.webkitRequestFullScreen(); // 針對 webkit 內(nèi)核的瀏覽器(Chrome / Safari / Opera)
title.mozRequestFullScreen(); // 火狐 (Firfox)

1.2退出全屏

document.webkitRequestFullScreen();

1.3注意

  • 全屏操作需要用戶來處理，代碼從上向下執(zhí)行，無法觸發(fā)效果
  • 退出全屏不能使用當(dāng)前元素調(diào)用方法，而是使用 document 對象

2.針對動畫效果的API（AnimationFrame）

2.1優(yōu)勢：

  • 瀏覽器可以優(yōu)化并行的動畫動作，更合理的重新排列動作序列，呈現(xiàn)出更流暢的動畫效果。
  • 如果在一個瀏覽器標(biāo)簽頁里運(yùn)行一個動畫，當(dāng)這個標(biāo)簽頁不可見時，瀏覽器會暫停它，這會減少CPU，內(nèi)存的壓力，節(jié)省電池電量。

2.2開啟及取消

requestAnimationFrame()
cancelAnimationFrame()

2.3注意

setInterval、setTimeout、requestAnimationFrame在被賦值給變量后，console.log出來為順序的數(shù)字，且不區(qū)分三者的區(qū)別
所以，在取消三者時，可以直接取消，方法如下

   for (var i = 1; i <= 4; i++) {
        clearInterval(i);
        clearTimeout(i);
        cancelAnimationFrame(i);
    }

3.本地存儲

3.1區(qū)別：

  • cookie: 存儲數(shù)據(jù)量小，可以設(shè)置存儲時間，到期自動刪除
  • localStorage: 將數(shù)據(jù)保存到設(shè)備上，可以實(shí)現(xiàn)永久存儲，需要主動刪除
  • sessionStorage: 將數(shù)據(jù)臨時存儲，離開當(dāng)前頁面就刪除

3.2cookie

大多數(shù)瀏覽器支持最大為4k的cookie，且只允許存儲20個cookie

3.3webStorage方法

  • setItem（）保存
  • getItem（）取出
  • removeItem（） 刪除
  • clear（）清除

代碼實(shí)例如下

保存
sessionStorage.setItem('key1', 'value1');
sessionStorage.setItem('key2', JSON.stringify([1, 2, 3, 4]));
sessionStorage.setItem('key3', JSON.stringify({ name: "xiaoming" }));
取出
sessionStorage.getItem('key3');
刪除
sessionStorage.removeItem('key2');
清除
sessionStorage.clear();
設(shè)置
localStorage.setItem('key1', 'value1');

4.離線緩存manifest

4.1介紹

  • manifest是一個同名后綴為manifest的文件，在文件中定義那些需要緩存的文件，支持manifest的瀏覽器，將會按照manifest文件的規(guī)則進(jìn)而保存數(shù)據(jù)，從而在沒有網(wǎng)絡(luò)的情況下，也可以訪問
  • 當(dāng)?shù)谝淮握_配置app cache后，再次訪問該應(yīng)用時，瀏覽器會首先檢查manifest是否有變動，如果有變動，則把相應(yīng)的變化更新下來，同時改變?yōu)g覽器的app cache，如果沒有變動，就會直接把a(bǔ)pp cache的資源返回

4.2特點(diǎn)

  • 離線瀏覽：用戶可以在離線狀態(tài)瀏覽網(wǎng)站舊數(shù)據(jù)
  • 更快的速度：因?yàn)閿?shù)據(jù)存儲在本地，所以速度會更快
  • 減輕服務(wù)器的負(fù)載：瀏覽器只會下載在服務(wù)器上發(fā)生改變的資源

4.3使用

  • 在html標(biāo)簽中增加一個manifest屬性，用來指定當(dāng)前頁面的manifest文件
  • 創(chuàng)建一個和html同名的manifest文件，然后給index.html文件添加屬性 <html manifest="index.manifest">
  • html文件設(shè)置完成，后面去操作manifest文件

4.4manifest文件的編寫--典型寫法

CACHE MANIFEST 以#號開頭為注釋

#version 1.3
   css/index.css
   js/index.js
   index.html

4.5如何更新緩存

  • 更新manifest文件
    給manifest添加或刪除文件，都可以更新緩存
    如果我們更改了js，而沒有新增或刪除，前面例子中的版本號，可以很好的用來更新manifest文件
  • 通過javascript操作
    HTML5中引入JS操作離線緩存的方法 window.applicationCache.update();
  • 清除瀏覽器緩存
    如果用戶清除了瀏覽器緩存，會重新下載文件

5.地理位置

5.1Navigator 對象

  • 包含的屬性描述了正在使用的瀏覽器
  • 實(shí)現(xiàn)了 JavaScript 的瀏覽器支持這個對象。
  • 可以用 Window 對象的 navigator 屬性來引用它。

5.2geolocation 對象

  • 地理位置 API 通過 navigator.geolocation 提供
  • 如果該對象存在，那么地理位置服務(wù)可用。
if ("geolocation" in navigator) {
  /* 地理位置服務(wù)可用 */
} else {
  /* 地理位置服務(wù)不可用 */
}

5.3獲取當(dāng)前定位

  • getCurrentPosition() 獲取當(dāng)前定位位置。當(dāng)定位被確定后，定義的回調(diào)函數(shù)就會被執(zhí)行。
  • 第一個參數(shù)為成功時回調(diào)
  • 第二個回調(diào)函數(shù)，當(dāng)有錯誤時會被執(zhí)行。
  • 第三個參數(shù)也是可選的，您可以通過該對象參數(shù)設(shè)定最長可接受的定位返回時間、等待請求的時間和是否獲取高精度定位。

代碼示例如下

window.navigator.geolocation.getCurrentPosition(function (info) { // 成功的回調(diào)
    console.log('successed');
    console.log(info);
}, function (info) { // 失敗的回調(diào)
    console.log('error');
    console.log(info);
}, { // 定位選項(xiàng)
});

6.工作線程web worker

6.1含義

  • 一般腳本在頁面中被執(zhí)行腳本時，頁面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。
  • 而web worker 運(yùn)行在后臺的javascript，獨(dú)立于其他腳本，不會影響頁面的性能，頁面可響應(yīng)

6.2創(chuàng)建 web worker 之前，請檢測用戶的瀏覽器是否支持它：

// 檢查是否可用
if (typeof Worker !== 'undefined') {
    console.log('可用');
    // 創(chuàng)建對象
    var w = new Worker('./js/worker.js');
    // 接收worker.js消息的方法
    w.onmessage = function (e) {
        console.log(e.data);
        $('title').innerHTML = e.data;
    };
} else {
    console.log('不可用');
}

6.3創(chuàng)建 web worker

  • 將與web worker相關(guān)的代碼都放在一個獨(dú)立的JavaScript文件中。
  • 父線程通過在Worker構(gòu)造函數(shù)中指定一個JavaScript文件的鏈接來創(chuàng)建一個新的worker，異步加載并執(zhí)行該JavaScript文件
 var w = new Worker('./js/worker.js');

7.模板引擎template

7.1含義

  • 根據(jù)數(shù)據(jù)，快速生成HTML代碼片段，插入到HTML結(jié)構(gòu)中顯示
  • 首先編寫結(jié)構(gòu)，可以將HTML和JavaScript混寫，然后賦值數(shù)據(jù)，就可以生成HTML代碼片段
  • http://wangxiao.github.io/BaiduTemplate/

7.2請演示baiduTemplate.js模板引擎？

代碼示例如下

<body>
       <div id="result"></div>
       <!-- 編寫模板 -->
       <script id="header" type="text/html">
             <h1>姓名: <%=name%></h1>
             <h2>年齡：<%=age%> </h2>
             <ul>
             <%for (var i = 0; i < foods.length; i++) {%>
                   <li><%=foods[i]%></li>
             <%}%>
             </ul>
        </script>
       <script type="text/javascript">
             // 數(shù)據(jù)
             var data = {
                   name: '紅燒肉',
                   age: 13.5,
                   foods: [ '蒸羊羔', '蒸熊掌', '一盆米飯我夠了' ]
              };
             // 生成html代碼片段
             var html = baidu.template('header', data);
             document.getElementById("result").innerHTML = html;
       </script>
</body>

7.3和baiduTemplate相似模板引擎

例如，artTemplate.js，語法相似 http://www.jq22.com/jquery-info1097

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載:H5緩存機(jī)制淺析-移動端Web加載性能優(yōu)化【干貨】 作者：賀輝超，騰訊游戲平臺與社區(qū)產(chǎn)品部 高級工程師 目錄...
    meng_philip123閱讀 11,676評論 6贊 48
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,506評論 19贊 139
  • 補(bǔ)充 http 超文本傳輸協(xié)議 HTTP請求 請求方式 get / post / put / de...
    社會你碼ge閱讀 293評論 0贊 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,765評論 25贊 709
  • 感覺看到現(xiàn)在，更加暈了，。雖然好像情節(jié)比之前更清晰了，但是脈絡(luò)更亂了，搞不清到底是什么樣的，哪里是實(shí)哪個是虛。
    Super_亭小亭閱讀 206評論 0贊 0

友情鏈接更多精彩內(nèi)容