Vue-Quellcode-Analyse (Codebeispiel)

Dieser Artikel bringt Ihnen die Quellcode-Analyse (Codebeispiel) von Vue. Ich hoffe, dass er einen gewissen Referenzwert hat hilft dir.

Heute habe ich den Quellcode langsam gelesen, weil ich mir beim Lesen Notizen gemacht habe. Plötzlich eine Funktion entdeckt. Deshalb werde ich einen separaten Artikel schreiben.

Es fühlt sich an wie eine Angeberfunktion. Wenn der Interviewer Sie eines Tages fragt, ob Sie eine optimierte Seite gefunden haben,
schlagen Sie vor, dass Sie prüfen, ob der Browser diese Funktion nutzen kann. Verbessern Sie die Laufruhe.

passiv

  var supportsPassive = false;
  if (inBrowser) {
    try {
      var opts = {};
      Object.defineProperty(opts, 'passive', ({
        get: function get () {
          /* istanbul ignore next */
          supportsPassive = true;
        }
      })); // https://github.com/facebook/flow/issues/285
      window.addEventListener('test-passive', null, opts);
    } catch (e) {}
  }

Der Kern hier besteht darin, zu prüfen, ob Passiv unterstützt wird,
Tipps

• 1, was ist passiv? Eine neue von Chrome vorgeschlagene Browserfunktion: Webentwickler verwenden ein neues Attribut „passiv“, um dem Browser mitzuteilen, ob der auf der aktuellen Seite registrierte Ereignis-Listener intern die Funktion „preventDefault“ aufruft, um das Standardverhalten des Ereignisses zu verhindern, damit der Browser entsprechend handeln kann Lesen Sie diese Informationen, um bessere Entscheidungen zur Optimierung der Seitenleistung zu treffen. Wenn der Wert des Attributs „passiv“ wahr ist, bedeutet dies, dass die Funktion „preventDefault“ nicht intern im Listener aufgerufen wird, um das standardmäßige Gleitverhalten zu verhindern. Der Chrome-Browser nennt diesen Listenertyp einen passiven Listener. Derzeit nutzt Chrome diese Funktion hauptsächlich, um die Gleitleistung der Seite zu optimieren, daher unterstützt die Funktion „Passive Event Listeners“ derzeit nur Mausrad-/Touch-bezogene Ereignisse
• 2. Die Funktion „Passive Event Listeners“ soll verbessern Das Design von verbessert die Glätte der Seite, was sich direkt auf das intuitivste Gefühl des Benutzers für diese Seite auswirkt. Das ist nicht schwer zu verstehen. Stellen Sie sich vor, Sie möchten eine bestimmte Seite verschieben, um den Inhalt zu durchsuchen. Wenn Sie das Mausrad verwenden oder den Bildschirm mit dem Finger berühren, wird die Seite nicht wie erwartet gescrollt Dieses Mal werden Sie oft das Gefühl haben, dass ich ein wenig unglücklich bin und die Seite sogar verlassen möchte. Facebook hat zuvor ein Experiment durchgeführt, als die Antwortaktualisierungsrate beim Seitengleiten von 60 FPS auf 30 FPS gesenkt wurde. Dabei stellte sich heraus, dass die Benutzerbeteiligung stark zurückging.
• 3. Einfache Implementierung von Passiv

function handler(event) {
        console.log(event.type); // log event type
    }
document.addEventListener("mousewheel", handler, {passive:true});

Weitere spannende Inhalte finden Sie auf der PHP-Chinese-Website JavaScript-Tutorial-Video Kolumne!

Das obige ist der detaillierte Inhalt vonVue-Quellcode-Analyse (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!