観察者たち

9383 ワード
javascript
インターセレクションObserverIntersection Observer APIは、非同期的に祖先要素または上位文書viewportとの間の変化を観察する方法を提供する.
互換性
紹介する
これまでは、要素の視認状態や2つの要素の相対的な視認状態を検出することは容易ではなかった.結局、ほとんどの解決方法は完全に信頼できるものではなく、ウェブサイト全体の性能を遅らせやすい.しかし、ウェブページの発展に伴って、上記の検出に対する需要も増えてきた.様々な場合には、要素が交差して変化する情報を使用する必要がある.
  • ページがスクロールすると、画像やその他のコンテンツがローディングされます.
  • は「無限スクロール」のウェブサイトを実現します.つまり、ユーザーがウェブページをスクロールする時、直接により多くのコンテンツをロードして、ページをめくる必要がありません.
  • は、広告収益を計算するために、広告要素の露出状況を検出する.
  • は、ユーザが当該エリアにスクロールしたかどうかに応じて、タスクまたはアニメーションを柔軟に実行することを開始する.
    これまでのやり方では、バインディング容器のscrollイベント、またはタイマーをセットして、getBoundingClientRect()を呼び起こして要素位置を取得していましたが、これらのコードは全部メインスレッドで実行されていますので、性能には一定の影響があります.
    今のmall-coreのimglazyloadは伝統的な方式です.
    APIvar observer = new IntersectionObserver(callback, options)上記のコードはIntersectionObserverの例を返します.calbackは要素の視認性が変化するときのコールバック関数です.optionsはいくつかの構成項目です.
    この例を返します.簡単な方法もあります.
  • observeは、ある要素observer.observe(ele)
    • を観察する.
  • unobserveは、ある要素observer.unobserve(ele)
    • を観察するのを停止します.
  • disconnectオブザーバobserver.disconnect()
    • Intersection Observer optionsがIntersection Observer()の構造関数のoptionsオブジェクトに伝達され、観察者のコールバックの環境を制御することができます.また、3つのフィールドがあります.
  • rootは、ターゲットの視認性をチェックするためのルート要素を指定します.ターゲット要素の親レベルの要素でなければなりません.指定されていないか、またはnullであれば、デフォルトはブラウザウィンドウです.親レベルの要素として使用する場合、親レベルの要素として値をとるgetboundingClientRect()
    • .
  • root Margroot元素の外距離.cssの中のmargin属性に似ています.例えば、「10 px 20 px 30 px 40 px」(top,right,bottom,left)を選択します.rootパラメータが指定されている場合は、root Marginも百分率で値を取ることができます.この属性値はroot要素とtargetが交差するときの計算交差として使用される領域範囲です.この属性を使用すると、root要素の収縮または拡張を制御できます.デフォルト値は0です.図で
    • を説明します.
             ，           rootMargin   ，     callback
  • thress holdは、クロス比を指定するために使用され、いつになったらレギュレータ関数をトリガするかを決定する配列であり、デフォルトは0、
    • です.
    [0,0.5,1]とは、要素が0%、50%、100%でカルバックをトリガすることです.
    カルバックは元素の視認性が変化すると、カルバック関数をトリガします.
    function callback(entries, observer) {
    //         ，   IntersectionObserverEntry  ，   obsever  
    for (var i = 0; i < entries.length; i++) {
            console.log(entries[i]);
    }
}
  • boundingCientターゲット要素の矩形情報
  • インターナショナルインターフェース領域とターゲット要素の比率値
  • intersect/boundingCient Rectが見えない時は0に等しい
    • より小さいです.
  • intersectターゲット要素とウィンドウ(ルート)が交差する矩形情報を、交差領域
    • と呼ぶことができる.
  • isIntersectingターゲット要素が現在見られているかどうか、Boolean値はtrue
    • として見られます.
  • isvisibleはいつもfalseな感じがします.公式サイトでも紹介されていません.
  • root Bounds根要素の矩形情報は、指定されていない要素が現在のウィンドウの矩形情報
    • である.
  • target観察の対象要素
  • タイムスタンプ
    • は、インターセレクションObserverからクロスがトリガされるまでの時間を記録するタイムスタンプを返します.
    登録されたコールバック関数はメインスレッドで実行されますので、できるだけ速く実行してください.時間がかかる操作があれば、Window.requestIdleCallbackを使用することをお勧めします.
    注意しなければならないのは観察という名前が交差しているため、第一の思考はそばと交差しています.元素と根の要素との間の交差ということは分かりやすいです.実際にここのトリガ方式は、必ずしも根の要素との間の交差ではなく、要素の視認性がルート全体のウィンドウ内に現れています.
    次に、これを使って簡単な怠惰ロードモジュールを作ります.
    コアコード
    import { useEffect } from 'react';
function loadImg(entries, observer) {
    for (var i = 0; i < entries.length; i++) {
        const img = entries[i].target;
        var src = img.getAttribute("data-src");
        console.log(entries[i]);
        if (entries[i].isIntersecting) {
            img.src = src;
            
            img.removeAttribute("data-src");
            img.classList.remove('imglazy');
            observer.unobserve(img);
            //   0.5，1   
        }
    }
}
function observerImgs(className, observer) {
    const imgs = document.querySelectorAll(`img.${className}`);
    if(!imgs.length) {
        return;
    }
    imgs.forEach((img) => {
        observer.unobserve(img);
        observer.observe(img);
    });
}
function useImgLazy(className, list) {
    useEffect(() => {
        const observer = new IntersectionObserver(loadImg,{
            // root: document.querySelector('.product_list'),
            // rootMargin: '0px',
            threshold: [0.5, 1]
        });
        observerImgs(className, observer);
        return () => {
            observer.disconnect();
        };
    }, [className, list]);
}
export default useImgLazy;
    より直感的に見るために、デモは0.5露出でsrcを変更しました.
    MuttionObserver
    MuttionObserverインターフェースはDOMツリーの変更を監視する能力を提供しています.古いMutation Events機能の代替品として設計されています.この機能はDOM 3 Events仕様の一部です.
    互換性
    紹介するMutationObserverコンストラクタは一つのcalbackパラメータだけであり、calbackは上記と類似しています.一つはMutationRecord配列に変更されています.一つは観察対象です.
    実例は3つの方法を持っている.
  • disconnect()
    • MutationObserver の例の受信を停止する通知は、そのobserve()方法を再度起動するまで、観察者オブジェクトに含まれるコールバック関数は再起動されない.
  • observe()
    • 設定MutationObserverは、DOMが所与のオプションにマッチするように変更したときに、通知の受信を開始する.
  • タキレコーダ()
    • MutationObserverの通知キューから処理対象のすべての通知を削除し、MutationRecordオブジェクトの新しいArayに戻すと、処理対象は何ですか?ここでの操作はすべて非同期ですので、tarecordsは直ちに実行します.
    observe方法は二つのパラメータを提供する必要があります.
  • target
    • DOMツリーの中の1つは変化を観察するDOM Node(おそらくElement)、または観察されるサブノードツリーのルートノードである.
  • optionsオプション
    • オプションのMutationObserverInitオブジェクトは、このオブジェクトの構成項目は、DOMのどの変化が現在の観察者に提供されるべきかを記述しています.傍受すると、中の属性は少なくとも一つtrueであり、そうでなければ、例外を投げます.
    mutationObserver.observe(content, {
    attributes: true, // Boolean -          
    characterData: true, // Boolean -                        
    childList: true, // Boolean -     （  subtree true，       ）          。    false。
    subtree: true, // Boolean -                ，        true,     true         。
    attributeOldValue: true, // Boolean -                
    characterDataOldValue: true, // Boolean -    characterDataOldValue    characterData  
    // attributeFilter: ['src', 'class'] // Array -       
});
    muttionRecord配列には属性があります.
    MutationRecord = {
  type：       ，  "attributes"，     CharacterData  （Text  、Comment  ）  ，  "characterData"，       "childList"
  target：         
  addedNodes：         
  removedNodes：         
  previousSibling：                    ，    null
  nextSibling：                    ，    null
  attributeName：            ，    null
  attributeNamespace：            ，    null
  oldValue：      type。  "attributes"，           。  "characterData"，           。  "childList"，  null
}
    主にどのような元素の属性が変化しているかを知りました.性に対しては、ある元素に対して操作ができます.デモを行います.
    適用
  • JSスクリプト作成のDOMレンダリング完了
  • 待ち受け画像/リッチテキストエディタ/ノードの内容変化および処理
  • MuttionObserverに対するvueのアプリケーション
    • について
    Performance Observer()PerformanceObserverは、パフォーマンス計量イベントを監視するために使用され、ブラウザの性能時間軸に次の新しいperformance entriesを記録すると通知されます.これは各リソースのローディングに応じてリアルタイムで通知されます.
    使い方
        const observer = new PerformanceObserver(performanceCallBack);
    observer.observe({entryTypes: ['paint', 'resource']});  
    observer.disconnect();
    observer.takeRecords();
    ここで、calbackの最初のパラメータはPerformanceObserverEntryListであり、getEntriesの方法があり、監視されたlistを取得することができ、2番目のパラメータはobserverオブジェクトである.
    これと言えばPerformance.timingとperformance.getEntries()です.
    対照的に、window.onload関数では、私たちはloadEventEndの値が取れなくなりますが、Performance Observerにはこのような問題がありません.2:PerformanceObserverを使って、navigationStart、dom Loadingの値がないことが分かりました.3:PerformanceObserverより正確です.
    【Prompt for unload】-       （      url    ，    a     ）
 navigationStart、startTime //                        
 unloadStart //      unload       
【unload】-      unload  
 unloadEnd //      unload       
 redirectStart //      HTTP               ，              ，     0
【redirect】-    
 redirectEnd //       HTTP     （                 ）    ,      ，              ，     0
 fetchStart //          HTTP           。                
【App cache】-         
 domainLookupStart //              。        ，             ，       fetchStart    
【DNS】-     
 domainLookupEnd //              。        ，             ，       fetchStart    
 connectStart //     TCP               。        （persistent connection），       fetchStart    
【TCP】
 secureConnectionStart //                。        ，   undefined。       ，     HTTPS，   0
 connectEnd //                      。          ，       fetchStart    。                    
                      。             ，   0
 requestStart //            HTTP   （          ）    
【Request】 -     
 responseStart //            （        ）          
【Response】
 responseEnd //            （        ）       （      HTTP      ，      ）    
 domLoading //       DOM       （ Document.readyState    “loading”、   readystatechange     ）    
【Processing】
 domInteractive //       DOM      、         （ Document.readyState    “interactive”、   readystatechange     ）    
 domContentLoadedEventStart //       DOMContentLoaded     （ DOM      、         ）    
 domContentLoadedEventEnd //                         
 domComplete //       DOM     （ Document.readyState    “complete”，     readystatechange     ）    
 loadEventStart //       load              。          ，  0
【onLoad】- window.onLoad  
 loadEventEnd //       load                。          ，  0。  while        loadEventEnd>0          ！           、dom
    デモ
    先端性能には、ホワイトスクリーンの初期画面時間など、重要な指標があります.
    あのホワイトスクリーンの時間は実は私達のページの第一の内容でレンダリングした時の時間で、ホワイトスクリーンの時間で、js、cssのロードはすべてページのレンダリングをブロックすることができます.
    最初のスクリーンの時間はいろいろな計算方法があります.標準も違っています.ここではあまり説明しません.
    拡張します.トップページの性能を最適化します.
    ListBoxに多くのデータを追加すると、どうやって更新されますか?