This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

---

Suitable for the first comprehensive review of the students, check the lack of information, knowledge is more complete, after the completion of the review, and then according to my collation of the interview high-frequency questions with review, make the job search twice the result with half the effort, must understand, do not rote, for some conceptual and principle of the content to in-depth understanding.

“You read from the beginning, and go on as far as you can, until you know nothing, and then start from the beginning again, and keep on reading until you understand everything.”

Vue

Is using a framework better than native or jQuery? why

Advantages of using the framework: better user experience, high development efficiency, lower cost, convenient maintenance, virtual DOM operation, and higher update performance

Disadvantages of using a framework: code bloat. When consumers use the framework, they will introduce the entire framework, and the framework encapsulates many functions and components that the consumers must use according to its rules, many of which will not be used in the actual development. The front-end framework iterates too quickly and takes time to get used to

Talk about the difference and connection between MVC, MVP and MVVM architecture patterns

MVC (Model-View-Controller)

MVC is an intuitive architectural pattern: User Action ->View (responsible for receiving user input) ->Controller (business logic processing) ->Model (data persistence) ->View (feedback to View).

MVP (Model-View-Presenter)

In MVP, the Controller in MVC is replaced by Presenter (presentation). The purpose is to completely cut off the connection between View and Model, and the Presenter acts as a bridge to achieve complete isolation of communication between view-model.

3. MVVM (Model-view-viewModel)

If MVP is a further improvement on MVC, MVVM is a complete change in thinking. It takes the idea of “two-way binding of data Model data” as the core, so there is no connection between View and Model, and the interaction between Model and ViewModel is two-way, so the change of View data will modify the data source at the same time. Changes in the data source are immediately reflected in the View.

Briefly describes the MVVM

What is MVVM?

ViewModel bidirectional binding, short for Model-view-ViewModel, is the evolution of the Controller in MVC into ViewModel. The Model layer represents the data Model and the View represents the UI component. The ViewModel is the bridge between the View and the Model layer. The data is bound to the ViewModel layer and automatically renders the data to the page. Instead of manipulating THE DOM structure to update the view, it’s now a data-driven view.

Advantages of MVVM:

1. Low coupling. Views can be changed and modified independently of the Model. A Model can be bound to different views. The Model can remain unchanged when the View changes, and the View can remain unchanged when the Model changes. 2. Reusability. You can put some View logic in a Model and have many views reuse that View logic. 3. Independent development. Developers can focus on business logic and data development (ViewModel), and designers can focus on page design. 4. Testable.

Talk about Vue MVVM implementation principle

1. Vue as MVVM pattern implementation library of two technologies

   A. Template parsing b. Data binding

2. Template parsing: to achieve initial display

   A. Parse braces. B. Parse instructions

3. Data binding: update display

   A. Through data hijacking

Observer is created to monitor/hijack attributes at all levels in data, and deP is created for each attribute. Dep corresponds to one attribute in data. Complie is used to compile templates, initialize interfaces, and call update objects. Complie also creates a watcher for each expression and specifies a callback function for the update node, adding watcher to all the corresponding dePs.

Tell me what you think of Vue

Vue is a progressive framework for building data-driven, responsive data binding and view updates through an API.

Advantages: 1. Data-driven view: Abstract the virtual DOM from the real DOM, update the DOM at the minimum cost with diff algorithm, responsive observer, asynchronous queue and other means, and render the page. 3, powerful and rich API to provide a series of APIS to meet the various needs of business development 4, due to the use of virtual DOM, 5, life cycle hook function, optional code organization, write ripe or pretty smooth, but there is still room for optimization (Vue3 commoment-API) 6, good ecology, active community

Disadvantages: 1, because the underlying implementation of response based on Object. DefineProperty, and the API itself does not support IE8 and the following browsers. 2, congenital deficiencies of CSR, first screen performance (white screen)

Talk about your understanding of vue virtual DOM

What is virtual DOM? Basically, it is to add DOM elements in the form of JS objects, which is essentially an optimization of diff algorithm. Virtual DOM also has its own defects

What is VDOM?

Virtual DOM is to use JS objects to simulate the real DOM structure, and then use the tree to build a real DOM tree, inserted into the document. When the state changes, a new object tree is reconstructed. The new tree is then compared to the old tree, and the differences between the two trees are recorded. The recorded differences are applied to the real DOM tree built, and the view is updated. The Virtual DOM is essentially a cache between JS and the DOM. [Version 1.1]

Create a virtual DOM object (JS object) corresponding to the DOM tree, and represent the DOM tree in the way of object nesting. Then every change of THE DOM will become the change of the property of the JS object. In this way, the performance overhead of finding the property change of JS object is less than that of querying the DOM tree. [Version 1.2]

First, use JS object to simulate the real DOM structure, and use this object to build a real DOM tree. When the state changes, rebuild a new object tree, and then compare the old and new trees, record the differences between them and apply to the real tree built, and the view will be updated. Second, each change from the original operation of the real DOM to find js object property changes, directly in memory to operate JS objects, performance cost is less, more efficient. [Version 2]

To sum up, Virtual DOM is to use JS objects to simulate the real DOM structure, and then use JS object tree to build the real DOM tree. When the state changes, a new object tree is rebuilt, then the old and new trees are compared with the Diff algorithm, and if there are differences, the differences are applied to the real tree that is built, and the view is updated. This comparison process, from the original query real DOM tree to find js object attributes, performance overhead is small, efficiency is high. The Virtual DOM is essentially a cache between JS and the DOM. [Version 3]

Why use VDOM?

1. Virtual DOM is to solve the performance problems caused by real DOM operation. Dom comparison operation is put in JS layer to improve efficiency

2. Compared to DOM structures, it is much more efficient to operate JS in memory in the JS layer (Turing complete languages: languages that can implement logical code)

What are the core functions of VDOM

Core function: h(‘ tag name ‘, {… The property name… }, [… child…] ) h(‘ tag name ‘, {… The property name… }, ‘… ‘) patch(container, vnode) patch(vnode, newVnode)

How do you understand the diff algorithm in Vue?

In JS, the overhead of rendering the real DOM is very large. For example, if we modify some data, if we directly render it to the real DOM, the whole DOM tree will be redrawn and rearranged. So is it possible to update only the small piece of DOM that we changed without updating the whole DOM? At this time, we need to first generate virtual DOM according to the real DOM. When the data of a node in the virtual DOM changes, a new Vnode will be generated. Then, the new Vnode will be compared with the old Vnode, and the difference will be directly modified on the real DOM, and then the value of the old Vnode will be changed to the new Vnode.

Diff’s process is to call the patch function, compare the old and new nodes, and patch the real DOM while comparing. When the diff algorithm is used to compare old and new nodes, the comparison is only made at the same level. In the patch method, the tree level comparison is performed first if the new Vnode does not exist, the old Vnode is deleted, if the old Vnode does not exist, the new Vnode is added, and the DIFF update is performed. When the DIff algorithm is determined to be performed, the two Vnodes are compared, including three types of operations: Attribute update, text update, update child nodes Old and new node has child nodes, then the child nodes for the diff operation, called updatechidren if no child nodes and the new old node has child nodes, clears out the old node text content, and then to the new child node If there is no child node, a new node and the node has child nodes, When all child nodes of the node are removed, text is replaced when the old and new nodes have no child nodes

UpdateChildren extracts the Vch child node of Vnode and oldCh child node of oldVnode. OldCh and vCh each have two variables, StartIdx and EndIdx, and their two variables are compared to each other. There are four ways to compare them. If none of the four comparisons match, if the key is set, the comparison will be done with the key, and during the comparison, the variable will move to the middle, and once the StartIdx>EndIdx indicates that at least one of oldCh and vCh has been traversed, the comparison will end.

Underlying implementation principles of Vue

Vue.js adopts data hijacking combined with the mode of publisheer-subscriber. It hijacks the setter and getter of each property through object.defineProperty (), publishes messages to subscribers when data changes, and triggers the corresponding listening callback. Vue is a typical MVVM framework. The Model is just a normal javascript object, and attempts to modify it are automatically updated. This design makes state management very simple and intuitive

Observer (data listener) : The core of the Observer is to listen for data changes via object.defineProprtty (). This function defines the setter and getter internally and fires the setter whenever the data changes. At this point, the Observer notifies the subscriber, who is the Watcher

Watcher (subscriber) : The Watcher subscriber acts as a communication bridge between the Observer and Compile, and mainly does the following:

1. Adds itself to the property subscriber (DEP) when it instantiates itself
2. You must have an update() method on your own
3. When dep.notice() is notified of property changes, you can call your own update() method and trigger the callback bound in Compile

Compile (instruction parser) : The main thing Compile does is to parse the template instructions, replace variables in the template with data, and then initialize the render page view, and bind the corresponding node of each instruction to update functions, add subscribers to identify the data, once the data changes, receive notification, update attempt

Commonly used instructions

• V-if: determine whether to hide;
• V-for: data loops out;
• V-bind :class: binds an attribute;
• V-model: implements bidirectional binding

What is the V-model? What’s the use?

$emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) = $emit(‘input’, XXX) The same idea applies to components that implement the V-Model approach themselves.

Vue – loader explain

Vue-loader is a loader that converts a vUE component into a javascript module. The template, style, and script tags are all optimized. Script can use es6 style directly and sass by default. It also gives you scope options. In addition, the development phase provides you with hot loading and can be used as follows:

<template src=".. /hello.vue"></template>
Copy the code

What are the navigation hooks? What parameters do they have

Navigation hooks translate to vue-router functions. There are two main types of navigation hooks: global and local

The global hook function beforeEach: called when the switch starts afterEach: called when the switch leaves

Partial to single route beforeEnter

Component hook functions beforeRouterEnter, beforeRouterUpdate, beforeRouterLeave

To: the target object to be entered. From: the navigation object to be opened. Next: is a function call to resolve

What is your understanding of the VUE lifecycle and what you do at each stage?

Each Vue instance goes through a series of initialization processes when it is created. A Vue lifecycle hook is a function that is fired when a certain stage or condition is reached in order to complete some action or event

• BeforeCreate: Before the vUE instance is created, the data in data and methods are not initialized. Created: after the vUE instance is created, the data has the value, the property and the method operation, the initialization event, the $EL property is not displayed and not mounted.

• Mount phase: The vue instance is mounted to the real DOM node beforeMount: Server requests can be made, data removed, called before the mount starts, and the related render function is called for the first time. The example has been configured to compile the template and generate HTML from the data and template in data. The HTML is not mounted to the page at this point. Mounted: In this case, the DOM is called after el is replaced by the newly created VM.$el and mounted to the instance. The instance has been configured to replace the DOM object to which the EL attribute points with the compiled HTML content above. Complete the HTML rendering from the template to the HTML page. Ajax interaction during this process.

• Update phase: When the data in the vue instance changes, it triggers the re-rendering of the component. BeforeUpdate: Before the update, called before the data is updated, and occurs before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering. Updated: called after the virtual DOM has been rerendered and patched due to data changes. When called, the component DOM has been updated, so DOM dependent operations can be performed. In most cases, however, you should avoid changing the state during this period, as this can result in an infinite loop of updates. This hook is not called during server-side rendering.

• Destroy phase: Vue instance is destroyed beforeDestroy: called before the instance is destroyed. At this point, some methods can be manually destroyed, and the instance is still fully available. Destroyed: called after the instance was destroyed. After the call, all time listeners are overridden and all child instances are destroyed. This hook is not called during server-side rendering.

Component life cycle

Life Cycle (parent component) Parent component beforeCreate –> Parent component created –> Parent component beforeMount –> child component beforeCreate –> child component Created –> child component beforeMount –> Child component Mounted –> Parent component Mounted –> Parent component beforeUpdate –> child component beforeDestroy–> Child component Destroyed –> parent component updated

Loading rendering process Parent beforeCreate-> parent created-> parent beforeMount-> child beforeCreate-> child Created -> child beforeMount-> Child Mounted -> parent

Mounting Phase Parent CREATED -> Child CREATED -> child Mounted -> parent mounted

Parent component update phase Parent beforeUpdate-> Parent updated

Child component Update phase Parent beforeUpdate-> child beforeUpdate-> child Updated -> parent updated

Destruction phase Parent beforeDestroy-> Child beforeDestroy-> child Destroyed -> parent Destroyed

Computed with the watch

In general, you can implement both computed and watch listening, computed is recommended, but the important thing about computed is that the computed attribute is a declarative way of saying that one value depends on another value, When the dependent value or variable changes, the computed property changes; The watch listens to a variable that has already been defined in data, and when that variable changes, the watch method fires.

Watch property monitoring is an object, the key is the property to be observed, and the value is the corresponding callback function. It is mainly used to listen to the changes of certain specific data, so as to perform some specific business logic operations and listen to the changes of properties. It is used to perform asynchronous or costly operations when data changes

The results of computed properties are cached. When a function in computed depends on a property that has not changed, the results are read from the cache when the function is called. Functions that use computed primarily as a property must use return to return the final result for computed because computed is more efficient. Data is not changed and computed is not updated.

Use scenario Computed: This parameter is used when one attribute is affected by multiple attributes, for example, shopping cart checkout. Watch: This parameter is used when one data item affects multiple data items, for example, data search

Why is data in a component a function?

1. When a component is reused multiple times, multiple instances are created. Essentially, these instances use the same constructor. 2. If data is an object, the object is a reference type and affects all instances. So to ensure that data does not conflict between different instances of a component, data must be a function.

Why are v-for and V-if not recommended together

1. When v-for and V-if are on the same node, V-for has a higher priority than V-IF, which means v-IF will be repeated separately in each V-for loop. If you have a large array to walk through and very little data to actually display, this is a big performance waste 2. In this scenario, you are advised to use computed because data is filtered first

The role of key in V-for

• When vue. js updates a rendered list of elements with V-for, it defaults to a “reuse in place” policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element here and make sure that it shows each element that has been rendered under a specific index. Duplicate keys cause rendering errors.

• The main function of key is to enable Vue to distinguish elements and update the virtual DOM more efficiently.

• Vue determines whether two nodes are the same in the patch process. Key is a necessary condition and a unique identifier. If key is not defined, Vue can only consider the two nodes to be the same.

• As can be seen from the source code, Vue mainly determines whether two nodes are the same when judging their key and element types, so if you do not set the key, its value is undefined, you may always think that these are two same nodes, and you can only do the update operation, which causes a lot of DOM update operation, which is obviously not desirable.

Communication mode of the VUE component

• Parent-child communication

  Parent -> child props, child -> parent $on, child -> parent $on, child -> parent $on, child -> emit $on, child -> emit $on, child -> emit $on, child -> emit $on, child -> emit $on

• Sibling communication

  $Bus = new Vue() custom Event

• Cross-level component communication

  Vuex, $attrs, $Listeners Provide, inject

Bidirectional binding implementation principle

When a Vue instance is created, Vue traverses the properties of the data option, turning them into getters/setters with object.defineProperty and tracking the dependencies internally, notifying the properties of changes when they are accessed or modified. Each component instance has a corresponding watcher instance, which records properties as dependencies during component rendering, and then when the setters for dependencies are called, informs watcher to recalcalculate, so that its associated component can be updated.

V-model implementation and how it is implemented?

1. vueThe bidirectional binding in is an instructionv-modelCan bind a dynamic value to a view, and changes in the view can change the value.v-modelIs syntax sugar, which by default corresponds to:The value and @ input.
2. usev-modelCan reduce a lot of tedious event handling code, improve development efficiency, code readability is better
3. Usually used on form itemsv-model
4. Native form items can be used directlyv-modelTo use it on a custom component, bind value within the component and handle input events
5. I have done tests and the output containsv-modelThe component rendering function of the template is found to be converted to a value attribute binding and an event listener, and the event callback does the corresponding variable update operation, indicating that the magic is actually done by the vue compiler.

The realization of the nextTick

1. nextTickisVueProvides a globalAPIIt’s next timeDOMA delay callback is performed after the update loop has ended and is used after the data has been modified$nextTick, you can get the updated version in the callbackDOM;
2. Vue executes asynchronously when updating the DOM. As soon as you listen for data changes,VueA queue is started and all data changes that occur in the same event loop are buffered. If the samewatcherIf triggered multiple times, it will only be pushed to the queue – times. This removes duplicate data at buffering time to avoid unnecessary calculations andDOMOperation is very important.nextTickMethod adds a callback function to the queue, ensuring that the function is not called until the previous DOM operation has completed;
3. For example, when I’m doing something, I’ll use nextTick and pass a callback function into it to perform dom operations.
4. I also have a brief understandingnextTickImplementation, it will be incallbacksWe put in the function that we passed in, and we usetimerFuncCall them asynchronously, and the preferred asynchronous mode would bePromise. And that makes me understand why I can be herenextTickseedomOperation result.

How does nextTick work?

Execute a delayed callback after the next DOM update loop ends, and use nextTick to get the updated DOM immediately after modifying the data. NextTick mainly uses macro tasks and microtasks. Depending on the execution environment, try to use Promise, MutationObserver, and setImmediate, and if none of the above fails, define an asynchronous method with setTimeout. Multiple calls to nextTick will store the method in a queue, and the current queue will be empty through this asynchronous method.

Have you ever used a slot? Whether a named slot or an anonymous slot or scoped slot is used

A slot in vUE is a very useful thing. A slot is a placeholder. There are three types of slots in VUE: default slots (anonymous), named slots, and scoped slots

Keep – the realization of the alive

What it does: Implements a cache of components to keep them in state to avoid performance problems caused by repeated rendering. Requires cache components to switch frequently, without the need to repeat the render

Scenario: Tabs background navigation, vUE performance optimization

How it works: Viee. js internally abstracts DOM nodes into VNode nodes. The cache of keep-Alive components is also based on VNode nodes rather than storing the DOM structure directly. The components that satisfy the criteria (pruneCache and pruneCache) are cached in the cache object, and the VNode node is extracted from the cache object and rendered when it needs to be rerendered.

mixin

Mixins are used when a mixin project becomes complex and there is duplicate logic between multiple components. Multiple components have the same logic, and pulling out mixins is not a perfect solution, The Composition API proposed by VuE3 is designed to address these issues (there is a cost to being perfect, such as development costs) Scenario: The right side of the news list is the same as the details page on the PC, and you can use mixins for mixed disadvantages: 1. The source of variables is not clear, which is not good for reading. 2. Multiple mixins may cause name conflictsCopy the code

What is vuex? How does it work? How does it work? Which functional scenario uses it?

State management library, similar to Rudux in React

Vuex is a state set management specifically built for VUE, mainly to solve the problem of state sharing between components, emphasizing the centralized management of data. In a word, it is mainly easy to maintain and decouple, so not all projects are suitable to use VUEX. If you’re not building a large project, using Vuex can make your project code tedious and redundant

The core of VUEX: State mutations getters Actions modules

Understanding and usage scenarios of Vuex

Vuex is a state management pattern developed specifically for Vue applications. At the heart of every Vuex app is the store.

1. The state store of Vuex is responsive; When the Vue component reads the status from the store,

If the state in the store changes, the corresponding component is updated accordingly. 2. The only way to change the state in the Store is to explicitly commit the mutation, which makes it easy to track every state change. Vuex consists of the following core modules:

1. State: Defines the application State data
2. Getter: Defines the “Getter” (which can be thought of as the calculated property of the store) in the store,

Just like evaluating attributes, the return value of a getter is cached according to its dependencies, and is recalculated only if its dependencies have changed. 5. Module: Allows a single Store to be split into multiple stores and stored simultaneously in a single state tree

Vuex mechanism for managing state

Vuex is a Vue plug-in for state management for vue.js applications. Vue centrally manages the state shared by multiple components and the data obtained from the background to help the component manage the state. There is also a computing property data getters based on the state. Getters reads the data from the state and calculates it. Component for reading state data State or mapState(), there are also two ways to read the computed property data: store.state or mapState(), and there are also two ways to read the computed property data: store.state or mapState(). Getters and mapGetters (); Updating the state data involves actions and mutations, which trigger the call to action through $store.Dispatch or mapAction(), and actions trigger the call through Commit (), which updates the state directly; Actions can also communicate bidirectionally with the backend API.

Why cannot asynchronous operations be performed in Vuex mutation?

The only way for all state updates in Vuex is mutation, and asynchronous operations submit mutation implementations via Action, which allows us to easily track every state change, which allows us to implement tools that help us better understand our application. Each mutation execution corresponds to a new state change, so devTools can take a snapshot and save it, and then implement time-travel. If mutation supports asynchronous operations, there is no way to know when the state was updated, making it difficult to track the state well and making debugging difficult.

Unidirectional data flow

Minimalism of the idea of “Unidirectional data flow” :

• State: Data source that drives the application.
• View: Maps state to a view declaratively.
• Actions: Responds to state changes caused by user input on the view

Unidirectional data flow process:

A simple Unidirectional data flow is when a user accesses a View, the View issues an Action that the user interacts with, and the state is updated in the Action accordingly. The state update triggers the View to update the page. In this way, the data always flows clearly in one direction, which is easy to maintain and predictable

Vue’s Diff algorithm

Problem: Rendering the real DOM is expensive. Modifying a piece of data, if rendered directly to the real DOM, causes the entire DOM tree to redraw and rearrange. The Virtual Dom is a Virtual Dom generated based on the real Dom. When the data of a node in the Virtual Dom changes, a new Vnode is generated. Then the Vnode and oldVnode are compared, and the difference is directly modified on the real Dom. Then set oldVnode to Vnode. Note: When diff algorithm is used, only comparisons are made at the same level, not across levels. When the data changes, the set method calls the dep.notify () method to notify all subscribers to Watcher, who then calls the patch function to patch the real DOM and update the response attempt.

How lazy loading works

Lazy route loading: It is more efficient to divide the components of different routes into different code blocks and load the components when the route is accessed.

The combination of Vue’s asynchronous components and Webpack’s code splitting capabilities makes it easy to lazy load routing components.

First, you can define an asynchronous component as a factory function that returns a Promise (the Promise that this function returns should resolve the component itself).

Second, in Webpack 2, we can use dynamic import syntax to define split points of code: Combine the two, and this is how to define an asynchronous component that can be automatically split by Webpack code.

Image lazy loading principle: The getBoundingClientRect DOM element contains a getBoundingClientRect method that returns a collection of Css borders associated with the current DOM node. There is a Top property that represents the height of the current DOM node from the Top of the browser window. If the value is less than the innerHeight of the current browser window (window.innerheight), it indicates that the user has entered the view, and then replace it with a real image. In addition, getBoundingClientRect is used for image loading. Because we need to monitor scroll events and constantly judge the relationship between the value of top and the browser height, please throttle the listener event function 2. When the screen is rendered for the first time, the Scroll event will not be triggered. Please actively call the event handler once. Otherwise, if the user does not scroll, the first screen image will always use the lazily loaded default image 3. When all the images that need lazy loading are loaded, you need to remove the event listener to avoid unnecessary memory usage

IntersectionObserver intersectionObserver is a constructor that passes in a callback function to generate an instance observer that has an observe method to observe whether the specified element is visible to the user. Then, the callback function in the constructor is triggered and an entry parameter is passed to the callback function, which records the objects of all elements observed by the instance. The attribute intersectionRatio represents the percentage of images that have entered the visual range. Anything greater than 0 means that the user has already entered the view and replaces it with the actual image, and calls the instance unobtrusive to remove the IMG element from the instance’s view list

How to achieve two-way binding Proxy compared with Object. DefineProperty?

1. Object.definedproperty hijacks the properties of an Object. It hijacks the getter and setter methods of the properties to perform specific operations when the properties of the Object change. The Proxy hijacks the whole object.
2. Proxy returns a Proxy Object, and we only need to manipulate the new Object, whereas object.defineProperty can only be modified directly by traversing the Object properties.
3. Object.definedproperty does not support arrays, or more specifically, the array apis, because it is possible to hijack arry[I] = value, but it does not make much sense. Proxy can support various apis for arrays.
4. Although Object. DefineProperty has many drawbacks, it is more compatible than Proxy.

In the Vue project, there are three ways to realize route loading on demand (lazy route loading) :

1. Vue Asynchronous component
2. Import () for es6 proposal
3. The require of webpack. Ensure ()

vue-router

• Realize the principle of
• Hash (#), history (will the request be sent to the server?)

Vue scoped implementation principle

All style tags in a project are scoped, which is equivalent to modularizing styles. The scoped property in VUE is implemented primarily through PostCSS translation: PostCSS adds a unique dynamic property to all the DOM in a component. Then, it adds an additional property selector to the CSS selector to select the DOM in that component. This makes the style apply only to the DOM containing that property — the internal DOM of the component.

Do you know what new features Vue3 has? What effect will they have?

• Performance improvement

Smaller, faster support for custom renderers Support for tree shaking: an optimization that removes unwanted code when packaging supports Fragments and cross-component rendering

• API changes

The template syntax remains 99% unchanged with native support for class-based components, And overwriting the virtual DOM without taking TypeScript’s type inference features into account at design time without any compiler and various stage features can expect more compile-time prompts to reduce runtime overhead. Optimized slot generation can render parent components and child components separately. Static tree lifting reduces rendering costs Proxy-based observer mechanism saves memory overhead

• Incompatible IE11

The detection mechanism is more comprehensive, accurate and efficient, with more debuggable response tracking

What optimizations have been made for Vue3.0 compilation?

A. The granularity that generates the data update of Block tree vue.js 2.x and triggers the re-rendering is component level, and the entire VNode tree of the component needs to be traversed within a single component. In 2.0, rendering efficiency is positively correlated with component size: the larger the component, the slower the rendering efficiency. Also, for static nodes where no data is updated, these traversals are a waste of performance. Vue.js 3.0 makes it possible to generate a Block tree by analyzing the static template in the compilation stage. Block Tree is a nested Block that cuts the template based on the dynamic node instruction. The node structure inside each Block is fixed, and each Block only needs to track its own dynamic nodes. So, in 3.0, rendering efficiency is no longer positively correlated with template size, but positively correlated with the number of dynamic nodes in the template.

In vue.js 2.x, if a component is passed into slot, every time the parent component is updated, the sub-component is forced to update, resulting in a waste of performance. Vue.js 3.0 optimizes slot generation so that updates to attributes in non-dynamic slots only trigger updates to child components. Dynamic slot refers to the operation that uses v-if, V-for, and dynamic slot name on a slot, which causes the dynamic state of the slot to change during the runtime but cannot be used for component track. C. Diff algorithm optimization

How does Vue3.0 get faster? (Bottom, source)

A. Diff method is used to optimize the virtual DOM in Vue2.x for full comparison. In Vue3.0, PatchFlag is added: When comparing with the last virtual node, the value of the node with patch flag can be compared, and the specific content of the current node to be compared can be learned from the information of flag. B. hoistStatic Static promotion vue 2.x: The element is recreated each time whether or not it participates in the update. Vue3.0: Elements that do not participate in the update are created only once and then reused every time they are rendered. By default, onClick is treated as a dynamic binding, so it is tracked each time. But because it is the same function, it is not tracked, so it can be cached and reused. Original author’s name: Ouyang ah

1. Clone a copy of the original data. 2. Set listening for each attribute in the object

Vue3.0 new features

The similarities and differences between Composition API and react.js Hooks

Use React Hooks to allow you to “hook” into React functions such as component state and side effects handling. Hooks can only be used in function components, and allow us to insert state, side effects, and more into components without having to create classes. The React core team’s adoption strategy is not against class components, so you can upgrade the React version, start trying Hooks in new components, and leave existing components unchanged. Case in point: useState and useEffect are examples of React Hooks that make it possible to add state and runtime side effects to function components. We can also create custom Hooks, which open new doors to code reusability and extensibility.

B. Vue Composition API Basically uses the Vue Composition API to create around a new component option setup. Setup () provides state, computed values, watcher, and lifecycle hooks for the Vue component. It doesn’t make the old options-based API go away. Allows developers to use a combination of old and new apis (backwards compatible).

C. React Hooks are based on a linked list. The condition that they are invoked is that all hooks are executed sequentially each time the component is rendered. Vue hook will only be registered and called once, and Vue can avoid these troublesome problems, because its noise to data should be based on proxy, and the data should be directly observed by proxy. (In this case, any change to the data location will cause the related function or template to be recalculated, thus avoiding the performance problems that React might encounter). In React, when data is changed, it will cause rerender, which will re-register the hooks again, so React will be more complicated. m

What vUE performance optimizations have you done?

The encoding phase minimizes the data and hierarchy in data, and adds getters and setters to all data in data. The watcher is collected and the v-if and V-for cannot be used together. If you need to bind events to each element using v-for, use the event proxy. The SPA page uses the keep-Alive cache component. Use V-IF instead of V-show key to ensure the only use route lazy loading, asynchronous component damping, throttling third-party modules on demand import long list scroll to the visible area dynamic loading image lazy loading SEO optimization pre-render server rendering SSR packaging optimization compression code Tree Shaking/Scope Use CDN to load third-party modules, multithreaded package, Happypack splitChunks, pull out public files, sourceMap to optimize user experience, optimize skeleton screen, PWA can also use cache optimization (client cache, server cache), enable gZIP compression on the server, etc.

Vue versus React

Similarities:

1. It’s componentized development and Virtual DOM
2. Supports data communication between parent and child components using props
3. Both support data-driven views, where the update status data interface is automatically updated without directly manipulating the DOM
4. Both support server-side rendering
5. Both support native solutions, React Native, Vue Weex

Difference:

1. Data binding: VUE implements bidirectional data binding, whereas React’s data flow is one-way
2. The component is written differently. React recommends JSX syntax, which is to write HTML and CSS into JavaScript, “all in JS “. Webpack + Vue + Loader single-file component format, that is, HTML, CSS, JS written in the same file;
3. Data state management is different. State objects in the React application are immutable and need to be updated using the setState method. A state object is not required in vUE; data is managed by the data attribute in the VUE object
4. Unlike the Virtual Dom, VUE tracks the dependencies of each component without rerendering the entire component tree. For React, every time the application state changes, all components will be rendered, so react will need the shouldComponentUpdate lifecycle function method for control
5. React is strictly for MVC’s View layer, while Vue is MVVM mode

React

React Communication mode

The following are common situations for react communication:

• 1. The parent component communicates with the child component
• 2. The child communicates with the parent
• 3. Cross-level component communication
• 4. Component communication without nested relationships

1) The parent component communicates with the child component

The parent component uses props to pass the required information to the child component. This is the function of binding a normal property directly to the parent component. This property is the exact value that can be obtained from the child component using props

// Child component: Child
const Child = props= >{
  return <p>{props.name}</p>
}

// The Parent component
const Parent = () = >{
    return <Child name="Jing Cheng Yi Guang"></Child>
}
Copy the code

2) Child component communicates with parent component

Props + callback to use a public component to boost state. When a child component needs to pass a value to its parent, it calls the function to pass the parameter to the function using props. Then it can receive the parameter in the function in the parent component. The parameter is the value passed by the child component

// Child component: Child
const Child = props= >{
  const cb = msg= >{
      return () = >{
          props.callback(msg)
      }
  }
  return (
      <button onClick={cb("Welcome to Beijing Chengyi Light!" )} >Welcome to Beijing Cheng Yi Deng</button>)}// The Parent component
class Parent extends Component {
    callback(msg){
        console.log(msg)
    }
    render(){
        return <Child callback={this.callback.bind(this)}></Child>}}Copy the code

3) Cross-level component communication

That is, the parent component communicates to the children of the child component, and to the further child components.

• If the parent component has a deeper structure, then each of the intermediate components has to pass the props, adding complexity and not being needed by the intermediate component itself.
• When you use a context, a context is like a big container, so you can put the content that you want to communicate in that container, no matter how deep it is nested, and you can use a context for global data that spans multiple levels.

// The context mode implements cross-level component communication
// Context is designed to share data that is "global" to a tree of components

const BatteryContext = createContext();

// Subcomponents of subcomponents
class GrandChild extends Component {
    render(){
        return (
            <BatteryContext.Consumer>
                {
                    color => <h1 style={{"color":color}} >I am red :{color}</h1>
                }
            </BatteryContext.Consumer>)}}/ / child component
const Child = () = >{
    return (
        <GrandChild/>)}/ / the parent component
class Parent extends Component {
      state = {
          color:"red"
      }
      render(){
          const {color} = this.state
          return (
          <BatteryContext.Provider value={color}>
              <Child></Child>
          </BatteryContext.Provider>)}}Copy the code

4) Non-nested relationship component communication

That is, components that do not have any containment relationships, including sibling components and non-sibling components that are not in the same parent.

• 1. You can use custom event communication (publish-subscribe pattern), using Pubsub-JS
• 2. You can use redux to manage the global state
• 3. If the communication is a sibling component, the common parent node of the two sibling nodes can be found, and the communication between father and son can be combined.
• 4. You can also create a new Vue EventBus that listens for events and executes the event at the same time.

SetState can be both asynchronous and synchronous

The React event is an asynchronous operation

If the setTimeout event or custom DOM event is used, it is synchronized

import React,{ Component } from "react";
class Count extends Component{
    constructor(props){
        super(props);
        this.state = {
            count:0}}render(){
        return (
            <>
                <p>count:{this.state.count}</p>
                <button onClick={this.btnAction}>increase</button>
            </>
        )
    }
    
    btnAction = () = >{
        // You cannot change the state directly, you need to change the setState
        / / synchronize
        setTimeout(() = >{
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); }}})export default Count;

Copy the code

3. Synchronization Custom DOM events

import React,{ Component } from "react";
class Count extends Component{
    constructor(props){
        super(props);
        this.state = {
            count:0}}render(){
        return (
            <>
                <p>count:{this.state.count}</p>
                <button id="btn">Bind click events</button>
            </>)}componentDidMount(){
        // Custom DOM events are also synchronized
        document.querySelector('#btn').addEventListener('click'.() = >{
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); }); }}export default Count;

Copy the code

The life cycle

When an instance of a component is created and inserted into the DOM, these methods are called in the following order:constructor()
static getDerivedStateFromProps()
render()
componentDidMount(Updates within updates can be caused by item or status changes. When a component is rerendered, these methods are called in the following order:static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate() uninstall when components fromDOMThis method is called when thecomponentWillUnmount()
Copy the code

The way the react – fiber

1) background

The root cause of react-fiber is that a large number of simultaneous computing tasks block UI rendering in the browser. By default, JS operations, page layout, and page drawing all run in the main thread of the browser and are mutually exclusive. If JS operations continue to occupy the main thread, the page will not be updated in a timely manner. When we call setState to update the page, React will iterate through all the nodes in the application, calculate the differences, and then update the UI. If the page has a lot of elements, the entire process may take longer than 16 milliseconds, and frames are likely to drop.

2) Implementation principle

• React operates in three layers:

  • The Virtual DOM layer, which describes what the page looks like.
  • The Reconciler layer is responsible for invoking component lifecycle methods and Diff operations.
  • The Renderer layer, usually ReactDOM and ReactNative, renders the page according to the platform.

Fiber refers to a data structure that can be represented as a pure JS object:

const fiber = {
    stateNode,    // Node instance
    child,        / / child nodes
    sibling,      // Sibling node
    return./ / the parent node
}
Copy the code

• To achieve this, you need a Scheduler to assign tasks. High-priority tasks (such as keyboard typing) can interrupt low-priority tasks (such as Diff) to take effect faster. There are six priorities for tasks:

  • Synchronous, as in the previous Stack Reconciler operation, is executed synchronously
  • Task, executed before the next tick
  • The animation is executed before the next frame
  • High, to be executed immediately in the near future
  • Low, it’s okay to delay execution a little bit
  • Offscreen, the next render or scroll execution

• The process of Implementing the Fiber Reconciler (REACT) is divided into two stages:

  • In phase 1, the Fiber tree is generated to obtain the node information that needs to be updated. This step is a gradual process that can be interrupted.
  • In Phase two, the nodes that need to be updated are updated in batches at a time without interruption.

• Fiber tree: When React is first rendered, it creates an Element Tree using React. CreateElement. It can be called a Virtual DOM Tree. Each Element corresponds to a Fiber Node, and the structure connecting Fiber nodes becomes a Fiber Tree. An important feature of Fiber Tree is the linked list structure, which traverses the recursive traversal programming loop and then implements task splitting, breaking, and recovering with the requestIdleCallback API.

• From the Stack Reconciler to the Fiber Reconciler, the source code is essentially a recursive loop

What are the differences between React and Vue’s diff algorithms in the virtual DOM

Portals

Portals provide a first-class way to render child components into DOM nodes that exist outside of the PARENT component’s DOM hierarchy. Structures can be created using portals without outside control

Asynchronous components

// Asynchronous lazy loading
const Box = lazy(() = >import('./components/Box'));
Use suspense when using components
<Suspense fallback={<div>loading...</div>}>
    {show && <Box/>}
</Suspense>
Copy the code

immutable.js

Immutable refers to all data types that perform arbitrary operations on data resulting in a modified value and a new object that has not been changed. Immutable. Js document

Github.com/immutable-j…

Learning document

Rhadow. Making. IO / 2015/05/10 /…

const map1 = Map({a:1.b:2.c:3});
const map2 = map1.set('b'.50);
console.log(map1);
console.log(map2);
Copy the code

The difference between vuex and Redux?

In terms of implementation principles, the biggest differences are two:

While Redux uses immutable data, Vuex’s data is mutable. Redux replaces the old state with a new one each time, whereas Vuex is a direct modification

When detecting changes in data, Redux uses diff method to compare the differences, while Vuex actually uses getter/setter method to compare the differences (if you look at Vuex source code, in fact, it creates an internal instance of Vue to track changes in data).

React event binding principle

Instead of tying the click event to the real DOM of the div, React listens for all supported events in the Document. When an event occurs and bubbles to the document, React wraps the event content and gives it to the real handler to run. This approach not only reduces memory consumption, but also allows for uniform subscription and removal of events when a component mounts and is destroyed. In addition, the events that bubble onto the Document are not native browser events, but synthetic events implemented by React itself. So if we don’t want the event to bubble, call event.stopPropagation is invalid, call event.preventDefault instead.

What details can be optimized in the React project? What performance optimizations have been made in actual development

Compile phase -> Route phase -> Render phase -> Detail optimization -> State Management -> Massive data sources, long list rendering

Compilation phase

① Include or exclude limits the loader range.

{
    test: /\.jsx? $/,
    exclude: /node_modules/,
    include: path.resolve(__dirname, '.. /src'),
    use: ['happypack/loader? id=babel']
    // loader: 'babel-loader'
}
Copy the code

In addition to the above changes, happypack multiprocess compilation in plugin

/* Multithreaded compilation */
new HappyPack({
    id:'babel'.loaders: ['babel-loader? cacheDirectory=true']})Copy the code

③ Cache Babel compiled files

loaders:['babel-loader? cacheDirectory=true']

Copy the code

Tree Shaking removes redundant code

⑤ Load on demand and introduce on demand.

Route lazy load, route listener

AsyncRouter ()=>import(); then when the external Route loads the current component, load the real component in the componentDidMount lifecycle function, and render the component. We can also write to customize their own routing lazy loading state routing listener beforeRouterComponentLoad and afterRouterComponentDidLoaded, similar watch $route function in vue.

/ / asyncRouter. Js file
const routerObserveQueue = [] /* Store the routing satellite hook */
/* Lazily loading route guard hooks */
export const RouterHooks = {
  /* Before the routing component loads */
  beforeRouterComponentLoad: function(callback) {
    routerObserveQueue.push({
      type: 'before',
      callback
    })
  },
  /* After the routing component is loaded */
  afterRouterComponentDidLoaded(callback) {
    routerObserveQueue.push({
      type: 'after',
      callback
    })
  }
}
/* Route lazy load HOC */
export default function AsyncRouter(loadRouter) {
  return class Content extends React.Component {
    constructor(props) {
      super(props)
      /* Trigger the hook function before each route is loaded */
      this.dispatchRouterQueue('before')
    }
    state = {Component: null}
    dispatchRouterQueue(type) {
      const {history} = this.props
      routerObserveQueue.forEach(item= > {
        if (item.type === type) item.callback(history)
      })
    }
    componentDidMount() {
      if (this.state.Component) return
      loadRouter()
        .then(module= > module.default)
        .then(Component= > this.setState({Component},
          () = > {
            /* Trigger the hook function after each route is loaded */
            this.dispatchRouterQueue('after')}}))render() {
      const {Component} = this.state
      return Component ? <Component {
      . this.props} / > : null}}}Copy the code

use

import AsyncRouter ,{ RouterHooks }  from './asyncRouter.js'
const { beforeRouterComponentLoad} = RouterHooks
const Index = AsyncRouter(() = >import('.. /src/page/home/index'))
const List = AsyncRouter(() = >import('.. /src/page/list'))
const Detail = AsyncRouter(() = >import('.. /src/page/detail'))
const index = () = > {
  useEffect(() = >{
    /* Add the listener function */  
    beforeRouterComponentLoad((history) = >{
      console.log('Currently active route is',history.location.pathname)
    })
  },[])
  return <div >
    <div >
      <Router  >
      <Meuns/>
      <Switch>
          <Route path={'/index'} component={Index} ></Route>
          <Route path={'/list'} component={List} ></Route>
          <Route path={'/detail'} component={ Detail } ></Route>
          <Redirect from='/ *' to='/index' />
       </Switch>
      </Router>
    </div>
  </div>
}
Copy the code

Controlled component granulation, independent request service rendering unit

Controllable component granulation, independent request service rendering unit is the author’s experience in practical work. The goal is to avoid global rerendering due to its own render updates or side effects.

ShouldComponentUpdate,PureComponent and React.memo, immeTable.js facilitate performance tuning

Here we take immetable.js as an example, and talk about the most traditional limited update method. Part 6 will cover some details to avoid rerendering.

1. PureComponent and React. The memo

React.purecomponent implements shouldComponentUpate() by using a light contrast between props and state. If the object contains complex data structures (such as objects and arrays), it will be slightly compared, and if there are deep changes, it will be impossible to judge. React.PureComponent considers that there are no changes, and there is no render attempt.

2. shouldComponentUpdate

Use shouldComponentUpdate() to let React know if a change in state or props affects the rerender of the component. Return true by default. Return false without rerendering the update. Also, this method is not called when the render is initialized or when forceUpdate() is used, as a shouldComponentUpdate application would normally do.

// Control state updates components only if 'data1' in 'state' changes.
shouldComponentUpdate(nextProps, nextState) {
  /* Update the component when data1 changes */  
  returnnextState.data1 ! = =this.state.data1
}

// The control props property updates the component only if 'data2' in 'props' changes.
shouldComponentUpdate(nextProps, nextState) {
  /* When data2 changes in props, update the component */  
  returnnextProps.data2 ! = =this.props.data2
}
Copy the code

3. immetable.js

Immetable. js is a JAVASCRIPT library developed by Facebook that improves object comparison performance. As mentioned earlier, pureComponent is only a shallow comparison of objects. Immetable. js should be used with shouldComponentUpdate or React. Memo. In the immutable

Handle details properly

• ① Do not use arrow functions for binding events

// Stateful components
class index extends React.Component{
    handerClick=() = >{
        console.log(Awesome!)
    }
    handerClick1=() = >{
        console.log(777)}render(){
        return <div>
            <ChildComponent handerClick={ this.handerClick} / >
            <div onClick={ this.handerClick1 }  >hello,world</div>
        </div>}}// Stateless components
function index(){
   
    const handerClick1 = useMemo(() = >() = >{
       console.log(777)
    },[])  /* [] Existing dependencies on handerClick1 */
    const handerClick = useCallback(() = >{ console.log(Awesome!) },[])  /* [] Existing dependencies for handerClick */
    return <div>
        <ChildComponent handerClick={ handerClick} / >
        <div onClick={ handerClick1 }  >hello,world</div>
    </div>
}
Copy the code

• (2) Loop the correct use of key

The correct use of key, whether react or vue, is to find the old node corresponding to the new node in a loop, reuse the node and save overhead.

• ③ Stateless components hook-usememo avoid repeated declarations.

• Suspense and lazy load

Prevent duplicate rendering

• Learn how to batch update state
• (2) merger state
• ③ useMemo React.memo isolation unit
• ④ ‘ban’ state and learn to use caches.
• (5) useCallback callback

Usage state management

For unchanging data, data required by multiple pages or components, we can put the data in state management to avoid repeated requests.

Massive data optimization

1. Time slicing

The concept of time sharding is to render a large amount of data at once, and the initialization will appear lag and other phenomena. It is important to understand that js execution is always much faster than DOM rendering. Therefore, for a large amount of data, one-time rendering is easy to cause the situation of stalling and stalling.

SetTimeout can use window. RequestAnimationFrame () instead of, can have a better rendering. Our demo uses the list to do, in fact, for the list, the best solution is virtual list, and time sharding, more suitable for the heat map, map more points.

class Index extends React.Component<any.any>{
    state={
       list: []
    }
    handerClick=() = >{
       this.sliceTime(new Array(40000).fill(0), 0)
    }
    sliceTime=(list,times) = >{
        if(times === 400) return 
        setTimeout(() = > {
            const newList = list.slice( times , (times + 1) * 100 ) /* Capture 100 */ at a time
            this.setState({
                list: this.state.list.concat(newList)
            })
            this.sliceTime( list ,times + 1)},0)}render(){
        const { list } = this.state
        return <div>
            <button onClick={ this.handerClick } >Click on the</button>
            {
                list.map((item,index)=><li className="list"  key={index} >
                    { item  + '' + index } Item
                </li>)}</div>}}Copy the code

2. Virtual list

Virtual lists are the best solution to long list rendering.

In order to prevent a large number of DOM presence from affecting performance, we only render the data in the render area and buffer, and there is no real DOM in the virtual list area. The buffer function is to prevent the rapid slide or slide up the process, there will be blank phenomenon.

Virtual lists are an on-demand display technique that renders not all list items, but only a portion of the list elements within the visual area, based on the user’s scrolling. The normal virtual list is divided into render area, buffer, virtual list area.

First screen loading:

- First screen optimization generally involves several metrics FP(First Paint is First drawn), FCP(First Contentful Paint is First rendered with content), FMP(First Meaningful Paint is First meaningfully drawn), and TTI(Time) To interactive); To have a good experience, FCP should be put in advance as much as possible, and some engineering processing should be done to optimize the load-mode and subcontracting strategy of resources. The reduction of resources is the most effective way to speed up the opening of the first screen. - For the application of CSR, the process of FCP is generally the first load js and CSS resources, js is executed locally, and then the data is loaded back, and the content is initialized and rendered. In this process, there are several repeated requests from the network; So CSR could consider using skeleton screen and pre-render (partial structure pre-render), resume and lazy to do lazy load dynamic component -- of course there is another way which is SSR(server rendering). SSR has some advantages for the optimization of the first screen, but this bottleneck is usually in Node server processing. It is recommended to use stream to process, which has advantages for experience and memory management on node side. - Whether for CSR(client rendering) or SSR(server rendering), it is recommended to use Service worker together to control resource allocation and skeleton screen opening experience. After the React project is launched, the first thing to ensure is availability. The React Profile records data from the COMMIT phase, so the React reconcile phase needs to be analyzed in conjunction with the Performance API. - Because React is the parent props, any child components that are not related to the props will trigger render without adding conditional control. This is not necessary. You can use the React PureComponent and the React. This involves immutable data processing, of course, can also be combined with ShouldComponentUpdate to do deep comparison processing; - All the state optimisations are to reduce unnecessary render, react. useMemo and react. useCallback are also a lot of optimisations; - In many applications, use redux and use context, both of which may cause a lot of unnecessary render, so when using, also need to be careful to deal with some data; - Finally, ensure the availability of the entire application by creating error bounds for components that can be handled with componentDidCatch; - Use the script async and defer properties to avoid blocking the asynchronous loadCopy the code

What does the latest version of React fix and what does it add

Three new features in React 16.x: Time Slicing, Suspense, hooks

• 1. Time Slicing (solving CPU speed issues) allows you to pause tasks during execution to do other things, and this feature allows React to perform well even on extremely poor machines
• 2. Suspense (for network IO problems) and Lazy work together to load components asynchronously. – Ability to suspend rendering of the current component and continue rendering when something is done – fixed “asynchronous side effects” that have existed since react was born
• In my opinion, this is the best way to solve the asynchronous problem
• 3. In addition, a built-in function componentDidCatch is provided to display the Fallback component in a friendly way when an error occurs; You can catch exceptions thrown by its children (including nested children); Error components can be reused.

---

If this article helped you, remember to like 👍 collection and follow oh 😊, hope to like a lot more…

If there are any mistakes in this post, feel free to correct them in the comments section

---

The articles

• ☞ Front end interview: HTTP and web topics
• In 2021, the front end of the interview knowledge essential factory
• July front – end high-frequency interview questions
• How browsers work
• Analyze the differences between TCP and UDP
• Thorough understanding of browser caching mechanisms
• How does JavaScript affect DOM tree building
• JavaScript event Model
• Learn more about modern Web browsers
• Deploy the Nextjs project on a Linux Ali Cloud server
• Snowpack – faster front-end build tool
• Learn more about JavaScript memory leaks
• Describe the hash mode and history mode of the front-end route
• Use of BFC and IFC CSS styles
• CSS Performance Optimization
• Quickly write a prototype chain that satisfies you and your interviewer
• CommonJS, AMD, CMD, ES6 Module
• How WebPack works and the difference between Loader and Plugin
• Interpret HTTP1 / HTTP2 / HTTP3