Analyse du code source Vue (exemple de code)

Cet article vous apporte l'analyse du code source (exemple de code) de vue. J'espère qu'il a une certaine valeur de référence. vous aide.

Aujourd'hui, j'ai lu le code source, je l'ai lu lentement parce que je prenais des notes en le lisant. J'ai soudainement découvert une fonctionnalité. Je vais donc écrire un article séparé.

Cela ressemble à une fonctionnalité de frime. Si un jour l'intervieweur vous demande si vous avez trouvé une page optimisée,
vous proposez de vérifier si le navigateur peut utiliser cette fonctionnalité. Améliorer la fluidité du défilement.

passif

  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) {}
  }

L'essentiel ici est de vérifier si le passif est pris en charge,
conseils

• 1, qu'est-ce que passif? Une nouvelle fonctionnalité du navigateur proposée par Chrome : les développeurs Web utilisent un nouvel attribut passif pour indiquer au navigateur si l'écouteur d'événement enregistré dans la page actuelle appellera en interne la fonction PreventDefault pour empêcher le comportement par défaut de l'événement, afin que le navigateur puisse agir en conséquence. à ces informations pour prendre de meilleures décisions afin d’optimiser les performances des pages. Lorsque la valeur de l'attribut passive est vraie, cela signifie que la fonction PreventDefault ne sera pas appelée en interne dans l'écouteur pour empêcher le comportement de glissement par défaut. Le navigateur Chrome appelle ce type d'écouteur un écouteur passif. Actuellement, Chrome utilise principalement cette fonctionnalité pour optimiser les performances de glissement de la page, de sorte que la fonctionnalité d'écouteurs d'événements passifs ne prend actuellement en charge que les événements liés à la molette de la souris et au toucher
• 2. La fonctionnalité d'écouteurs d'événements passifs vise à améliorer la fonctionnalité. fluidité de glissement de la page. Le conçu améliore la fluidité du glissement de la page, ce qui affecte directement la sensation la plus intuitive de l'utilisateur sur cette page. Ce n'est pas difficile à comprendre. Imaginez que vous souhaitiez faire glisser une certaine page pour parcourir le contenu. Lorsque vous utilisez la molette de la souris ou touchez l'écran avec votre doigt pour glisser de haut en bas, la page ne défile pas comme prévu. cette fois, vous aurez souvent l'impression que je me sens un peu malheureux et que vous aurez même envie d'abandonner la page. Facebook a déjà fait une expérience en abaissant le taux de rafraîchissement des réponses de 60 FPS à 30 FPS, et a constaté que la participation des utilisateurs avait fortement chuté.
• 3. Implémentation simple du passif

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

Cet article est terminé ici Pour d'autres contenus passionnants, vous pouvez faire attention au site Web chinois PHP. Vidéo du didacticiel JavaScriptcolonne !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!