Vue source code analysis (code example)

This article brings you the source code analysis (code example) of vue. It has certain reference value and friends in need can refer to it. I hope it helps you.

Today I read the source code, and I read it slowly because I was taking notes while reading it. Suddenly discovered a feature. So I will write a separate article.

It feels like a show-off feature. If one day the interviewer asks you if you have found an optimized page,
you propose to check whether the browser can use this feature. Improve scrolling smoothness.

passive

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

The core here is to check whether Passive is supported,
tips

• 1, what is passive? A new browser feature proposed by Chrome: Web developers use a new attribute passive to tell the browser whether the event listener registered in the current page will call the preventDefault function to prevent the default behavior of the event, so that the browser can act according to this Information to make better decisions to optimize page performance. When the value of the attribute passive is true, it means that the preventDefault function will not be called internally in the listener to prevent the default sliding behavior. The Chrome browser calls this type of listener a passive listener. Currently, Chrome mainly uses this feature to optimize the sliding performance of the page, so the Passive Event Listeners feature currently only supports mousewheel/touch related events
• 2. The Passive Event Listeners feature is to improve the sliding smoothness of the page. The design and the improvement of page sliding smoothness directly affect the user's most intuitive feeling about this page. This is not difficult to understand. Imagine that you want to slide a certain page to browse the content. When you use the mouse wheel or touch the screen with your finger to slide up and down, the page does not scroll as you expected. At this time, you will often feel I feel a little unhappy and even want to abandon the page. Facebook did an experiment before. When they lowered the response refresh rate of page sliding from 60FPS to 30FPS, they found that user participation dropped sharply.
• 3, Simple implementation of passive

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

This article has ended here. For more other exciting content, you can pay attention to the of the PHP Chinese website. JavaScript tutorial video column!

The above is the detailed content of Vue source code analysis (code example). For more information, please follow other related articles on the PHP Chinese website!