隨著技術的不斷革新，現代瀏覽器提供了很多高級的功能用來滿足開發者的需要。這些新的API在程序員的”紅寶書“里未必能見到它們的身影，不過仍需要提前了解以備不時之需。

1 Beacon API

Beacon API可以向服務器發送少量的數據以實現統計等目的。同時它的性能比我們平常使用Ajax發送請求更好。當你需要發送數據但不要求有返回值的時候，都可以使用這個API。所有的數據都是在空閑時間發送的。

比如下面這個例子：

const beaconURL = "https://example.com"

function sendEvent(strEvent) {
// 由于這個API還處于實驗階段，為了照顧低版本瀏覽器需要進行功能檢測處理。
  if (navigator.sendBeacon) {
    navigator.sendBeacon();
  }
}

window.addEventListener('load',function(e) {
  sendEvent("loadEvent");
  document.getElementById("btn1").addEventListener("click",function(){
    sendEvent("Button 1 click");
  });
});

可以通過在事件監聽函數中觸發發送請求事件達到統計的目的。

2 InterpObserver API

InterpObserver API是用來監視某個元素是否進入了瀏覽器的可視區域。因此，可以利用這個特性達到延遲加載的目的：

window.addEventListener("load", function () {
  const observer = new InterpObserver(function (entries) {
    console.log(entries);
  }, {
    "threshold": [0, 0.5, 1.0]
  });
});

其中threshold表示觸發回調函數的臨界值。比如0.5表示在可視區域內能看到一半元素的時候觸發一次。因此上面的例子中[0, 0.5, 1.0]總共會在元素剛進入可視區域、進入一半和完全進入這三個階段都觸發一次回調函數。

3 瀏覽器通知

你可能經常在使用某個網頁的時候在瀏覽器上看到提示框，現在利用Notification接口我們自己也能夠實現這樣的功能。

主要分為兩步：

1).檢測權限

window.addEventListener("load", () => {
  document.getElementById("btnRequest").addEventListener("click",()=>{
    Notification.requestPermission().then(() => {
       if(Notification.permission==="granted") {
   // 發送通知
   sendNotifaction("歡迎關注前端人")
       }
    })
  })
})

2).發送通知

function sendNotification(text) {
    let notification = new Notification('頁面標題', {
      icon: "../image.png",
      body: text,
    });
 notification.onclick = function(evt) {
      parent.focus();
      window.focus();
      evt.target.close();
    };
   let timeObj=setTimeout(()=>{
        notification.close.bind(notification);
        clearTimeout(timeObj)
    }, 5000);
}

4使用CacheStorage API進行緩存數據

CacheStorageAPI是官方提供的另外一種用來存儲數據的接口，具體定義可以參考MDN上面：

CacheStorage 接口表示 Cache 對象的存儲。它提供了一個 ServiceWorker 、其它類型worker或者window 范圍內可以訪問到的所有命名cache的主目錄（它并不是一定要和service workers一起使用，即使它是在service workers規范中定義的），并維護一份字符串名稱到相應 Cache 對象的映射。

這個API使用起來也比較簡單：

function getJSONData(url) {
  if ('cache' in window) {
    window.caches.open('my-data-cache').then(function(cache) {
      if (result === undefined) {
        fetch(url).then(function (result) {
          let clonedresp = result.clone();
         // 將數據存儲到瀏覽器中去：
          cache.put(url, result);
          result.text().then(function(data) {
            console.log(data);
          });
        });
      }
    })
  }
}

5數據持久化

IndexedDB是異步的，可以讓web保持響應，而不是像localStorage一樣阻塞頁面。同時它還可以存儲多種類型數據，很容易分為多個獨立的實例進行存儲。

const instance1, instance2;
document.getElementById("btnMulti").addEventListener("click", function () {
  instance1 = localforage.createInstance({
    "name": "instance1"
  });
  instance2 = localforage.createInstance({
    "name": "instance2"
  });
});

document.getElementById("btnStore").addEventListener("click", function () {
  instance1.setItem("key1", "value1");
  instance2.setItem("key1", "value2");
});

不過使用IndexedDB是復雜的，可以借助第三方庫localForage來簡化代碼操作：

npm install localforage安裝完成后，可以在代碼里這樣應用：

localforage.getItem("test").then(value => {
    console.log(value);
}).catch(err => {
    console.log(err)
});

localforage.setItem("test", "some value").then(value => {
    console.log(value);
}).catch(err => {
    console.log(err);
});

6瀏覽器存儲狀態檢測

檢測瀏覽器內存的功能可能不太常用，但如果你是開發移動端頁面，對于內存比較小的設備來說，檢測功能有時候就能夠派上用場：

window.addEventListener("load", () => {
  if (navigator.storage && navigator.storage.estimate) {
      navigator.storage.estimate().then(estimate => {
      console.log("The remaining space: " + estimate.quota);
      console.log("Space used:" + estimate.usage);
    });
  }
  // 檢測應用數據是否是持久化的
  if (navigator.storage && navigator.storage.persisted) {
    navigator.storage.persisted().then(persisted => {
      console.log("Storage persistence: " + persisted);
    });
  }
  if (navigator.deviceMemory) {
    console.log("The device memory is: " + navigator.deviceMemory);
  }
})

最終執行結果如下：

The device memory is: 8Storage persistence: falseVM72:3 The remaining space: 244355911680VM72:4 Space used:0

識別網絡狀態和質量

有時候我們要根據網絡狀態來采取不同的業務處理，如離線加載等，這就需要能夠檢測到瀏覽器中網絡連接情況。要實現這個需求，可以借助window.navigator對象：

const isOnline = window.navigator.onLine;
if (window.navigator.conneciton) {
 const connection = navigator.connection;
   console.log(connection);
}

這是個只讀對象，其中提供了很多很瀏覽器特性相關的屬性，利用connection這個屬性就可以檢測到瀏覽器連接狀態。

downlink: 1.05

effectiveType: "3g"

onchange: null

rtt: 300

saveData: false

而借助onLine屬性我們就可以知道此時網絡是否可用。

7全屏顯示頁面

開發視頻頁面的時候，經常需要和全屏事件打交道，此時你可以借助瀏覽器自身的這個特性對其操作：

function enterFullscreen(ele) {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  }
} 

function exitFullscreen(ele) {
  if (ele.requestFullscreen) {
    ele.exitFullscreen();
  }
} 

8:full-screen

樣式方面，和操作滾動條樣式類似，對應的瀏覽器也提供了:full-screen這樣的偽元素選擇器：

:full-screen button {
  background: red;
}

:-webkit-full-screen button {
  background: red;
}

:-moz-full-screen button {
  background: red;
}

:-ms-fullscreen button {
  backgorund: red;
}

9自定義CSS

CSS Houdini是現代CSS提供的一個高級API,由于開放了底層接口，我們借助它實現一些更加高級的特性。

比如接下來這個例子，我將實現一個自定義的屬性samplepainter。

新建一個叫做csspaint_start.js的文件：

if (typeof registerPaint !== "undefined") {
  class SampleCSSPaint {
    static get inputProperties() {
      return ['--cross-thickness', '--cross-color']
    }
    
    paint(ctx, size, props) {
      let width = props.get('--cross-thickness');
      let color = props.get('--cross-color').toString();
      
      ctx.lineWidth = width;
      ctx.strokeStyle = color;
       
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(size.width, size.height);
      ctx.stroke();

      ctx.beginPath();

      ctx.stroke();
    }
  }
    
  registerPaint('samplepainter', SampleCSSPaint);
}

然后將我們剛才寫好的模塊注冊到啟動腳本main.js中去：

window.addEventListener("load", function () {
  // 檢測瀏覽器是否支持paintWorklet
  if ('paintWorklet' in CSS) {
    console.log("paintWorklet supported")
    CSS.paintWorklet.addModule("csspaint_start.js");
  } else {
    console.log("paintWorklet not supported")
  }
});

接著我們就可以在css中使用自定義的屬性進行操作了：

#demo {
  background-image: paint(samplepainter);
  --cross-thickness: 2;
  --cross-color: red;
}

1. JavaScript 重溫系列（22篇全）

2. ECMAScript 重溫系列（10篇全）

3. JavaScript設計模式 重溫系列（9篇全）

4. 正則 / 框架 / 算法等 重溫系列（16篇全）

5. Webpack4 入門（上）|| Webpack4 入門（下）

6. MobX 入門（上） ||  MobX 入門（下）

7. 70+篇原創系列匯總

回復“加群”與大佬們一起交流學習~

點擊“閱讀原文”查看70+篇原創文章

點這，與大家一起分享本文吧~