最新ブラウザAPI - パート1

現代のブラウザーは、開発者がよりよく実行することができるアプリケーションを構築し、オフラインで動作し、より良いユーザー体験を提供することができるAPIの一握りを作成しています.今日、我々はWebアプリケーション開発のために使用できる現代的なブラウザの5つのAPIをチェックし、多くの作品やトラブルから自分自身を保存します.

ウィンドウ.リクエストアニメーションフレーム

リソースプリフェッチ

リソースプリロード

ナビゲータ.センダビコン

交差点オブザーバ

ウィンドウ.リクエストアニメーションフレームWindow.requestAnimationFrame() APIは、毎秒約60以上の表示フレームの変更/更新を毎回関数を呼び出すために使用することができます.このメソッドを使用すると、スムーズなアニメーションを作成するか、ポーリング機能を作成できます.requestAnimationFrame 次の利点があります.

ブラウザには、パフォーマンスを最適化する機能があります

無効なブラウザのタブの実行を停止します

settimeout/setintervalより正確です

デモ:

function animate() {

  // your code goes here

  //the will be called repeatedly by requestAnimationFrame
  requestAnimationFrame(animate);
}
// Intial call to the function
animate();

また、アニメーションを停止することができますwindow.cancelAnimationFrame メソッド:

window.cancelAnimationFrame(animate);

HTML要素を待機するポーリング関数requestAnimationFrame :

const waitForElement = function (elem) {
    if (typeof elem === 'string') {
        return new Promise(function (resolve) {
            var wfelem = function () {
                if (null != document.querySelector(elem)) {
                    resolve(document.querySelector(elem));
                } else {
                    window.requestAnimationFrame(wfelem);
                }
            };
            wfelem();
        });
    }
};

// You can use the function in following way:

waitForElement('body').then(function(body){
    body.style.background = 'red';
});

リソースプリフェッチ
リソースプリフェッチは、ユーザーがアクセスする前に、ブラウザやページやリソースをダウンロードするよう指示するためのテクニックです.このテクニックは、ユーザーが最も訪問しそうなページに使用することができます.ブラウザはダウンロードし、低優先度でバックグラウンドでリソースをキャッシュするので、それはより重要なリソースを妨げることはありません.

<link rel="prefetch" href="/your-resource-link" />

リソースプリロード
リソースプリロードはリソースプリフェッチに似ていますが、違いは、プリフェッチはブラウザに次のナビゲーションとプリローディングでアクセスされる可能性があるリソースをダウンロードするリソースをダウンロードする方法です.構文は似ていますが、リソース型をas 属性.

<link rel="preload" href="/images/background.jpg" as="image" />

ナビゲータ.センダビコン
時々、訪問者がページを去るとき、サーバーにデータを送る必要があるかもしれません.ユーザーがページを離れると、JavaScriptはイベントと呼ばれるイベントを発生させるunload そして、このイベント中にAJAXリクエストを送信するのは簡単なことではありません.
私たちはXMLHttpRequest インunload ハンドラ.しかし、要求が完了するまで、ブラウザは次のページを読み込むのを妨げます.

window.addEventListener("unload", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
  xhr.send(data); 
});

でもNavigator.sendBeacon() その問題を解決するためにここにある.Ajaxを通してデータを送る必要があるが、応答を期待しないとき、このメソッドは役に立ちます.そして、リクエストがアイドル処理時間の間、データを送る機会を得るときに、非同期に実行される.Navigator.sendBeacon() つのパラメータがあります:最初の1つのURLと2番目のデータです.この関数はtrue データがサーバーに正常に送信された場合の応答false を返します.

window.addEventListener("unload", function() {
  if (navigator.sendBeacon) {
      // Send the beacon
      var status = navigator.sendBeacon(url, data);
      // Log the result
      console.log(status);
  }
};

交差点オブザーバ
ビューポート内に要素が見えるかどうかを調べるためにコードを書きませんでした開発者を見つけるのは難しいです.
通常、関数を作成し、scroll イベントとターゲット要素が画面にポップアップかどうかを確認します.jQueryで次のスニペットをチェックします

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }
});

ホロウ!計算の多くは、私は覚えていることがないことが起こっている.しかし、我々は今持っているIntersectionObserver() これらのすべてのトラブルから私たちを救うことができる方法.

const observer = new IntersectionObserver(function(elements) {
    console.log(elements);
});

observer.observe(document.querySelectorAll('p'));

最初の引数IntersectionObserver はHTML要素の配列を取ることができる関数です.オプションの引数をとる第2のオプション引数があります.

const observer = new IntersectionObserver(function(elements) {
    elements.forEach(function(element) {
        if (element.intersectionRatio >= 0.5 && element.intersectionRatio < 1) {
            element.style.opacity = "0.5";
        } else if (element.intersectionRatio >= 1) {
            element.style.opacity = "1";
        }
    });
}, {
    // You can use a single value
    threshold: 0.5 // The observer's callback will be once the target element is 50% visible
    // Or you can use an array of value
    threshold: [0.5, 1.0] // The callback will run when target element is 50% and 100% visible
});

observer.observe(document.querySelectorAll('p'));