Webpack related

1. Packaging principle of Webpack

Identify entry files by identifying module dependencies layer by layer (Commonjs, AMD, or ES6 import, WebPack will analyze it to get code dependencies) WebPack is to analyze the code, transform the code, compile the code, output the code into packaged code

Ii. What is loader

Loader is a file loader that loads resource files, performs some processing, such as compilation and compression, on these files, and finally packages them into a specified file

Multiple Loaders can be used to process a file. The execution sequence of loaders is reversed from that in the configuration. That is, the last loader is executed first and the first loader is executed last

The first loader to execute receives the source file content as a parameter, the other loaders receive the return value of the previous loader as a parameter, and the last loader to execute returns the JavaScript source code for this module

What is plugin

A number of events are broadcast during the life cycle of a WebPack run, and the Plugin can listen for these events and change the output when appropriate through the API provided by WebPack.

4. Differences between Loader and Plugin

For loader, it is A converter to compile file A into file B. Here, the operation is the file, for example, a.css to A.CSS, pure file conversion process

Plugin is an extender, which enrichis Webpack itself. It is aimed at the whole process of Webpack packaging after loader ends. It does not operate files directly, but works based on the event mechanism, and will listen to some nodes in the process of Webpack packaging to perform a wide range of tasks

Vue related

The difference between VUE2 and VUE3

1. Life cycle changes

(1) beforeCreate and Created in vue2 are replaced by a new setup lifecycle function that executes before the component is created.

BeforeDestory and deStoryed are renamed beforeUnmount and unmounted, respectively.

2. Performance changes

(1) Changes in data hijacking. The original Object.defineProperty() is used for data hijacking, and the Proxy is used for data Proxy. Because the proxy can dynamically determine whether the data is deeply nested and Object.defineProperty () traverses deeply nested data, there is a large time difference in data hijacking between the two.

(2) Packaging strategy. Vue3 supports tree-shaking, eliminating any unused code and reducing the packaging size. Due to the reduced size of the package, the time required for the page to load the file is also greatly reduced.

(3) Diff optimization. Static nodes will be promoted in VUe3, and all static nodes will not be traversed during comparison. The time required for node comparison is also greatly reduced.

3. New compositionAPI (Composite API)

Fixed reuse and poor readability that the optionsAPI of vue 2.X could not solve.

A new setup() lifecycle function that is executed before the component is created. Replace beforeCreate and Created with the Setup life cycle.

Const {ref, reactive, onMountend toRefs} = Vue setup (props) {/ / statement simple data types and / / only through a complex data type. A value to get the data in the form of const refValue = ref(null); ReactiveValue = reactive({state:0}); reactiveValue = reactive({state:0}); OnMountend (()=>{// perform operations within the corresponding lifecycle}) // This type of data cannot be decomposed, so the function is not responsive console.log(props); // This method converts the proxy object to the ref variable toRefs(props); }Copy the code

4. V-model changes

Supports binding multiple V-Models for bidirectional binding.

Redraw and reflux, and how to optimize

1. Browser rendering mechanism

The browser adopts Flow Based Layout

Browsers parse HTML to DOM and CSS to CSSOM. DOM and CSSOM are combined to produce a Render Tree.

With RenderTree, we know the style of all the nodes, calculate their size and position on the page, and finally draw the nodes on the page.

Because browsers use streaming layouts, calculations of Render Tree are usually done once, except for tables and their internal elements, which can be evaluated multiple times and usually take three times as long as equivalent elements, which is one of the reasons to avoid table layouts.

2. Redrawn

Redraw a node whose geometry or style changes without affecting the layout, such as outline, visibility, color, background-color, etc. Redraw is expensive because the browser must verify the visibility of other node elements in the DOM tree.

3. Return

Backflow is when layout or geometry properties need to be changed. Backflow is a key factor affecting browser performance because it involves updating the layout of part of the page (or the entire page). The backflow of an element can result in subsequent backflow of all its child elements, as well as subsequent nodes in the DOM and ancestor node elements.

<body> <div class="error"> <h4> My component </h4> <p><strong> Error: </strong> Error description... < / p > < h5 > error-correction < / h5 > < ol > < li > the first step < / li > < li > step 2 < / li > < / ol > < / div > < / body >Copy the code

In the HTML fragment above, backflow on the paragraph (

tag) would cause a strong backflow because it is a child node. This also results in ancestor backflow (div.error and body-depending on the browser). In addition,

and < OL > also have simple backflow because they are in the DOM after the backflow element. Most of the backflow will cause the page to be re-rendered.

Backflow must occur redraw, redraw does not necessarily cause backflow.

4. Browser optimization

Most modern browsers are batch update layout through the queue mechanism, the browser will put the modification operations in the queue, at least one browser refresh (16.6 ms) will empty the queue, but when you get the layout information, the queue may affect the properties or methods return value of the operation, if not, the browser will be forced to empty the queue, Trigger backflow and redraw to ensure the correct value is returned.

These include the following attributes or methods:

ScrollTop, scrollLeft, scrollWidth, scrollHeight ClientTop, clientLeft, clientWidth, clientHeight width, height getComputedStyle() We should avoid frequent use of the above attributes, as they force the render to refresh the queue.

5. Reduce redrawing and reflow

CSS

  • Use transform instead of top

  • Use visibility instead of display: None, because the former will only cause redraw and the latter will cause backflow (changing the layout)

  • Avoid using a table layout because a small change can cause the entire table to be rearranged.

  • If possible, change the class at the very end of the DOM tree. Backflow is inevitable, but its impact can be reduced. Changing the class as far down the DOM tree as possible limits the scope of backflow, affecting as few nodes as possible.

  • Avoid multiple inline styles and CSS selectors match from right to left to avoid too many nodes.

<div>
  <a> <span></span> </a>
</div>
<style>
  span {
    color: red;
  }
  div > a > span {
    color: red;
  }
</style>
Copy the code

For the first style, the browser just needs to find all the SPAN tags on the page and set the color, but for the second style, the browser needs to find all the SPAN tags, then find the A tag on the SPAN tag, and finally find the div tag. Then color span tags that match this condition, and the recursive process becomes complicated. So we should avoid writing too specific CSS selectors as much as possible, and add as few meaningless tags to THE HTML as possible to keep the hierarchy flat.

  • Apply the animation effect to elements with position set to Absolute or fixed to avoid affecting the layout of other elements. This is just a redraw, not a backflow. Also, control the animation speed by using requestAnimationFrame. See requestAnimationFrame for details.

  • Avoid using CSS expressions, which may cause backflow.

  • If a node that is frequently redrawn or reflow is set as a layer, the layer can prevent the rendering behavior of this node from affecting other nodes, such as will-change, video, iframe, etc., and the browser will automatically turn this node into a layer.

  • CSS3 hardware acceleration (GPU acceleration) : CSS3 hardware acceleration enables transform, opacity, and filters to be redrawn without causing backflow. Other properties of animations, such as background-color, will still cause backflow redraw, but it can still improve the performance of those animations.

JavaScript

  • To avoid manipulating styles too often, it is best to override the style property once, or define the style list as class and change the class property once.
  • To avoid frequent DOM manipulation, create a documentFragment, apply all DOM manipulation to it, and finally add it to the document.
  • Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable.
  • Use absolute positioning on elements with complex animations to keep them out of the document stream, which would otherwise cause frequent backflow of parent elements and subsequent elements.