2021 spring face warp

2021 spring face warp

CSS

How to clear floats?

  1. clear:both Add an empty child element to the element that needs to be cleared and set the clear class, the attribute is clear: both; or add a pseudo-class after to the target element, and set the clear attribute;
  2. Create parent BFC
  3. Set height of parent box

The adaptation principle of Rem?

The essence of rem layout is proportional scaling, which is generally based on width; if the sub-element sets the attribute of the rem unit, by changing the font size of the html element, the actual size of the sub-element can be changed;

How to solve the problem of 1px on the mobile terminal?

Reference link: www.jianshu.com/p/3a262758a...

css layout box model?

  • (W3C) standard box model box-sizeing: content-box
  • ie box model box-sizeing: border-box

Preprocessing of css?

Reference link: blog.csdn.net/ly298306812...

HTML

What are the new features and APIs of html5?

Reference link: zhuanlan.zhihu.com/p/77131734 www.jianshu.com/p/37c0b1eb4...

One: js basics

What is the point of this?

Extension: How to change the direction of this?

1. Use ES6 arrow functions;

2. Use _this = this; inside the function

3. Use apply, call, bind

4.new instantiates an object

What is the difference between apply, call, bind?

call/apply: execute the function immediately and modify the this inside, call is passed parameters one by one, apply is passed parameters according to the array; bind: use bind to change this, the current method has not been executed, similar to changing this in advance, you need to do it again It will be executed when the event is called or triggered;

Extension: What is the principle of bind?

Using the idea of Ke Lihua, the information such as "function to be processed/changed this/parameters passed" is stored in the closure in advance, and the conditions (event trigger/timer, etc.) are met later, the returned anonymous function is executed first, and then the In the process of the anonymous function, change this, etc. => this and the preprocessing of the parameters;

Reference link: juejin.cn/post/685457...

Tell me about the event loop of js?

Reference link: www.jianshu.com/p/9644f1356...

Expansion: What is the difference between microtasks and macrotasks?

  • Macro tasks: common timers, user interaction events, event binding, ajax, etc.
  • Micro tasks: Promise related tasks, async await, MutationObserver, etc.

Reference link: cloud.tencent.com/developer/a...

Event bubbling?

Event bubbling means that the event starts from the deepest node, and then gradually propagates the event upwards. For example: there is such a node tree on the page, div>ul>li>a; for example, add a click event to the innermost a, then this The event will be executed layer by layer, the order of execution is a>li>ul>div;

Event delegation, such as how to bind a hundred buttons on the page?

Event delegation is to use event bubbling to manage all things of a certain type by only specifying an event handler;

For example: Then we add a click event to the outermost div, then when the inner ul, li, and a do click events, they will all bubble to the outermost div, so they will all be triggered. This is the event delegation, which is delegated to their parent. Level generation is an execution event.

Reference link: www.cnblogs.com/mahuateng/p...

Extension: What if I want the effect of the event delegation to be the same as the effect of the event directly to the node, for example, it will only be triggered when I click li?

The Event object provides an attribute called target, which can return the target node of the event. We call it the event source. In other words, the target can be expressed as the dom of the current event operation, but it is not the real operation dom. Of course, this is compatible. Sexually, standard browsers use ev.target, IE browsers use event.srcElement, so that you can get the position of the current node;

Event binding

  • (In label) embedded dom;
  • (js get dom element) bind directly;
  • (js get dom element) event listener-addEventListener

Reference link: blog.csdn.net/bluebluesky...

How to convert parameters in url into objects?

split('&') into an array => split('=') set object properties and values

Talk about inheritance

Talk about closures

What exactly does the new operator do?

  1. Create an empty object, and introduce the this variable to the object, while inheriting the prototype of the object
  2. Properties and methods are added to the object referenced by this
  3. The newly created object is referenced by this, and finally returns this implicitly

Talk about the prototype

Every js object (except null) will be associated with another object when it is created. This object is what we call the prototype, and every object will "inherit" properties from the prototype;

Expansion: How to change the orientation of the prototype?

Reference link: blog.csdn.net/weixin_4419...

Tell me about the prototype chain?

The prototype chain is composed of prototype objects. Each object has a proto attribute, which points to the prototype of the constructor that created the object. The proto connects the objects to form the prototype chain. It is a limited chain of objects used to implement inheritance and shared properties.

  • Attribute search mechanism: When searching for the attribute of an object, if the attribute does not exist in the instance object itself, it will look up one level up along the prototype chain. If it finds it, it will output. If it does not exist, it will continue to go up one level along the prototype chain. Search until the top prototype object Object.prototype, if still not found, output undefined;
  • Property modification mechanism: Only the properties of the instance object itself will be modified. If it does not exist, the property will be added. If you need to modify the properties of the prototype, you can use: b.prototype.x = 2; but this will cause all inheritance from The properties of the instance of the object have changed.

Talk about redrawing and reflow

  • Redraw: Refers to the browser behavior triggered by the change of the appearance of an element. The browser will redraw according to the new attributes of the element to make the element present a new appearance;
  • Trigger condition: change the appearance attribute color, background-color of the element
  • Rearrangement (refactoring/reflow/reflow): When part (or all) of the render tree needs to be rebuilt due to changes in the size, layout, and hiding of elements, this is called rearrangement, and each page is in the first place. It will be rearranged every time it is loaded;
  • Trigger conditions: add and delete DOM elements, change the position of the element, change the size of the element, change the size of the browser window
  • The relationship between redrawing and rearranging: During rearranging, the browser will reconstruct the affected part of the rendering tree. After the rearrangement is completed, the browser will redraw this part. So rearranging will cause redrawing, but redrawing Does not necessarily cause rearrangement; redrawing and rearrangement will affect page performance;

optimization:

  1. The browser's own optimization: It will maintain a queue and perform batch processing, so that multiple redrawing and rearranging become one;
  2. Reduce operations on the render tree, or merge multiple DOM and style modifications;
  3. Modify the className of the element directly;
  4. First set the element to display: none, then perform the operation, and then set the element to display: block, etc.

js design pattern?

Reference link: segmentfault.com/a/119000001

Two: browser related

How to solve cross-domain in the project?

  • Jsonp: Using the browser's attributes such as the src of script, iframe and other tags, there is no homologous policy restriction. Write the name of the callback function in the url, and the return is a string of the callback function??
  • iframe
  • Cross-domain resource sharing (CORS):
  • Nginx proxy cross-domain

Expansion: What is the same-origin strategy?

The same-origin policy means that the request must be the same port, the same protocol, the same domain name, and client scripts of different sources cannot read and write the other party's resources without explicit authorization;

Expansion: What are the limitations of the same-origin policy?

  • Cross-domain issues
  • Page communication issues: For example, we want to communicate between multiple pages, but due to the dom restriction operation caused by the same-origin policy, we cannot directly operate the dom of other non-same-origin pages through iframe;
  • General storage issues

Reference link: zhuanlan.zhihu.com/p/262270724

Under what circumstances do you send an option request?

When a request is cross-domain and is not a simple request, the OPTIONS request will be sent; here are two issues to note:

  1. Request cross-domain

The general common form is CORS cross-domain; nginx proxy forwarding does not cross-domain for browsers;

  1. Simple request: A request that meets the following conditions can be regarded as a simple request

Use one of the following methods:

  • GET
  • HEAD
  • POST

The value of Content-Type is limited to one of the following three:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

The above conditions, as long as one point is not met, it is not a simple request. For example, when the common application/json request is cross-domain and not a simple request, the browser first uses the OPTIONS method to initiate a pre-check request to the server to know whether the server allows the request. Actual request. The use of "preflight request" can avoid the unexpected impact of cross-domain requests on the server's user data.

Reference link: blog.csdn.net/weixin_4348...

Tell me more about http caching (strong caching, negotiation caching)

  • The overall process of mandatory caching is relatively simple, that is, after the first access to the server to fetch the data, there will be no repeated requests within the expiration time. The core of this process is how to know whether the current time has exceeded the expiration time. The expiration time of the forced cache is obtained from the response header returned when the server is accessed for the first time. In http 1.0 and http 1.1 versions, it is implemented through different response header fields.
  • Summary: Forcing the cache to communicate with the server only for the first request. No request will be issued when reading the cached resource. The status code of the resource is 200, and the size of the resource is from memory or from disk. The implementation priority of the http 1.1 version will be Implementation higher than http 1.0 version.
  • The difference between the negotiation cache and the mandatory cache is that the negotiation cache needs to communicate with the server every time it reads data, and the cache identifier is increased. When the server is requested for the first time, the server will return the resource and return a cache identifier of the resource, which will be stored in the browser's cache database together. When requesting a resource for the second time, the browser will first send the cache ID to the server. After the server gets the ID, it will judge whether the ID matches. If it does not match, it means the resource has been updated, and the server will return the new data and the new cache ID together. To the browser; if the cache identifier matches, it means that the resource has not been updated, and a 304 status code is returned, and the browser reads the data in the local cache server.
  • Summary: The negotiation cache will interact with the server for every request. The first time is the process of getting data and identification, and the second time is the process of the browser asking whether the server resources are updated. Each request will transmit data. If it hits the cache, the status code of the resource is 304 instead of 200. Similarly, generally speaking, for compatibility, the negotiation cache of both versions will be implemented, and the implementation priority of the http 1.1 version will be higher than that of the http 1.0 version.

blog.csdn.net/m0_37631322...

Tell me about cookies and sessions?

Expansion: What problem does Cookie solve?

http stateless problem

Expansion: What is http stateless?

Reference link: blog.csdn.net/qq_42914528...

Talk about browser preflight

A page is displayed from input url to page loading?

Expansion: How to render the page when the resource is obtained? (How to deal with the external chain of js)

Reference link: blog.csdn.net/csdnnews/ar... blog.csdn.net/weixin_4588... www.sohu.com/a/244945986 ... No matter whether the JavaScript encountered in the parsing process is inline or external link, as long as the browser encounters When the script tag is reached, the JavaScript parser is awakened, the browser will be blocked (blocked) to parse the HTML, and the js script will not be executed until the CSSOM is built. Because DOM elements may be manipulated in the script, and if the DOM element is not parsed when the script is loaded and executed, the script will not be able to get the response element because the DOM element is not generated, so in actual projects, we often put resources in the document bottom.

Extension: Why does js put the body at the end?

  • CSS is regarded as rendering blocking resources (including JS), which means that the browser will not render any processed content until the CSSOM is built before proceeding to the next stage.
  • When there are blocking CSS resources, the browser will delay JavaScript execution and DOM construction until CSSOM is ready.
  • JavaScript is considered to be an interpreter blocking resource, and HTML parsing will be blocked by JS. It can not only read and modify DOM attributes, but also read and modify CSSOM attributes.
  • When the browser encounters a script tag, DOM construction will pause until the script finishes executing.
  • Therefore, the position of the script tag is very important. In actual use, you can follow the following two principles:
  1. CSS first: In the order of introduction, CSS resources precede JavaScript resources.
  2. JavaScript should affect the construction of the DOM as little as possible.

Talk about CDN?

CDN cache (content distribution network, select a CDN edge node closest to the user to respond to the user's request)

Talk about DNS?

DNS (Domain Name System), also called domain name system, is a service of the Internet. It is essentially a distributed database that maps domain names and IPs. With it, we can access the Internet more conveniently through domain names.//DNS cache (after successful access, the domain name and IP address information of the website will be cached locally

How to deal with the submission of scrip tags in input?

www.jianshu.com/p/1d183cd70...

Three: ES6

The principle of promise

Reference link: zhuanlan.zhihu.com/p/112574291

What is the difference between promise.all and promise.race?

All can wrap multiple promise instances into a new promise instance

Expansion: What is the wrong way to fetch promises?

The difference between set and map?

Application scenario Set is used for data reorganization, Map is used for data storage Set: (1) Members cannot be repeated (2) Only key values and no key names, similar to arrays (3) It can be traversed, the methods are add, delete, has Map: (1 ) Is essentially a collection of key-value pairs, similar to the collection (2) can be traversed, can be converted with various data formats

Reference link: blog.csdn.net/qq_39581763...

Map to json?

The difference between let and const?

Variables defined by Var have no block-level scope; let and const have;

Extension: const defines an object, can the properties of the object be modified and deleted? (Define an empty array, can you push data in?)

Object.assign usage and points of attention

  • Syntax: Object.assign(target, ...sources)
  • Object.assign copies the enumerable properties in source to target. If it has the same name as the existing attribute of target, it will be overwritten. At the same time, the subsequent source will overwrite the attribute with the same name of the previous source.
  • Object.assign copies the attribute value. If the attribute value is a reference type, then the copy is actually the reference address, and there will be a problem of reference sharing.

Reference link: zhuanlan.zhihu.com/p/142994389

Four: http and https

Tell me about the http status code

  1. 200 success
  2. 301 permanent redirection, the search engine will also replace the old URL with the URL after the redirect while crawling the new content; (new resource, new URL)
  3. 302 Temporary redirect, search engines will crawl new content and retain the old URL; (new resource, old URL)
  4. 304 The requested content does not need to be transmitted again, and the cached content can be used (negotiation cache)
  5. 403 The requested resource is not allowed to be accessed, that is, no permission
  6. 404 requested content does not exist
  7. 500 server error
  8. 501 The requested function does not exist (the server does not support a function required by the current request)

Expansion: What is the difference between permanent redirection and temporary redirection?

Reference link: dditblog.com/blog_109.ht...

http protocol, principle???

Reference link: blog.51cto.com/12805107/20...

What are the caching methods on the front end?

Reference link: www.jianshu.com/p/227cee9c8...

The difference between http and https

Reference link: zhuanlan.zhihu.com/p/72616216

Five: vue

The life cycle of vue

The life cycle of Vue is divided into 8 stages in total:

  1. Before creation: beforeCreated (the mounted element $el of the vue instance and the data object data are both undefined and have not been initialized);
  2. After creation: created (data data initialization completed, el has not yet been initialized);
  3. Before loading: beforeMount (the $el and data of the vue instance are initialized, but it is still a virtual dom node before mounting, and data.message has not been replaced).
  4. After loading: mounted (html has been successfully rendered, vue instance is mounted, data.message is successfully rendered)
  5. Before update: beforeUpdate (before the data in the view layer is changed, not before the data in the data is changed)
  6. After update: update is after update status;
  7. Before destruction: beforeDestroy;
  8. After destruction: destroyed (after the destroy method is executed, the change to the data will no longer trigger the periodic function, indicating that the vue instance has removed the event monitoring and the binding with the dom, but the dom structure still exists)

Reference link: blog.csdn.net/qq340124701...

Extension: If it is a parent-child component, how should the life cycle be executed?

After the parent component executes the beforeMount phase, it enters the beforeCreate, Created, and beforeMount phases of the child component. These phases are similar to the parent component and are not shown below. After the beforeMount phase, the (child component) Mounted phase is executed. In this phase, the child component is already mounted on the parent component, and the parent component is then mounted on the page.

Expansion: what can be done at each stage

  • beforeCreated: You can add a loading event here to trigger when the instance is loaded.
  • created: The event when the initialization is completed is written here. If the loading event ends here, the asynchronous request is also called here.
  • mounted: Mount the element and get the DOM node
  • updated: The function to process the data is written here
  • beforeDestroy: You can write a confirmation box to confirm the stop event

Passing values between components, passing from parent to child, passing from child to parent, passing value between sibling components?

  • Parent-child: Mainly bind a variable name through v-on, and use props to receive it in the child component.
  • Passing from child to parent: It is mainly to bind a method in the child component, and use this parameter after passing inemit()Pass it out,emit() passes it out, EMIT (function name, variable name) which is a parameter defined in the parent component method names and parameters
  • Sibling components: Bus can be used to transfer values between sibling components

Reference link: segmentfault.com/a/119000001

How is keep-alive used?

Keep-alive is a built-in component of Vue, and the function of this component is to cache inactive components. We can know that, under normal circumstances, when a component is switched, it will be destroyed by default by default. If there is a demand, a certain component will be switched. After not destroying, but saving the previous state, then you can use keep-alive to realize that after vue2.1.0, keep-alive adds two new attributes, include (included component cache) and exclude (excluded component) No caching, priority is greater than include) Reference link: blog.csdn.net/weixin_4181...

How does vue's two-way binding principle?

  • Using data hijacking object.DefinePropoty(), combined with the publisher-subscriber model, hijacking the setter and getter of each property through defineProperty, when the data changes, publish a message to the subscriber to trigger the corresponding listener callback;
  • For example, when an ordinary js object is passed into a vue instance as a data option, vue will traverse and recurse the attributes in the data through the descriptor in the defineProperty, and set the getter and setter for each attribute; the user cannot see the getter and setter. , But internally Vue will track and rely on;
  • Vue's two-way data binding is to use mvvm as the entry point for data binding, integrate the observer, compile and watcher, monitor the attribute changes of the model data object through the observer, parse the instruction of the element node through compile, and replace the data according to the template. , And finally use watcher to build a communication bridge between observer and compile;
  • To achieve the two-way binding effect of data change => view update, view interaction change => data model change

How does Vue2.0 update (monitor) an object/array in real time

Reference link: www.csdn.net/tags/NtDakg... blog.csdn.net/weixin_4464

Why use vuex?

  • When multiple states (data) are scattered in various corners of different components, there are a large number of states (data) that need to be transferred to each other. If they are all placed in the background and obtained in the background, the network overhead will be relatively large. A solution like vuex is needed. Public data is hosted in the state, and different components can be used. Vuex has a lightweight alternative, bus.js.
  • Common scenarios: music playback in SPA, shopping cart data, login status, use with localstorage

The difference between computer and watcher and usage scenarios?

Reference link: blog.csdn.net/qq_42203909...

routewithroute andThe difference between router

  1. routeIt is a redirected route object, every route will have aroute is a redirected routing object, every route will have one route object that is a partial object can acquire the corresponding name, path, params, query, etc.
  2. $router is an object of VueRouter, through Vue.use (VueRouter) and Vu constructor to get a router instance object, this object is a global object, it contains all routes, contains many key objects and attributes .

Reference link: www.cnblogs.com/dhui/p/1290...

Talk about vue routing hooks

Global hook: Single hook: In-component hook:

Reference link: zhuanlan.zhihu.com/p/70536937

Does vue implement custom instructions?

Global registration syntax: Vue.directive( id, [definition]) The first parameter is the name of the custom command (the command name does not need to be prefixed with v-, the default is automatically prefixed, and the prefix must be added when using the command ), the second parameter can be object data or an instruction function.

Partial registration: Register partial custom directives by adding directives object data in the Vue instance.

Reference links: zhuanlan.zhihu.com/p/64362889 blog.csdn.net/winpanys/ar...

Extension: What are the usage scenarios for custom commands?

Expansion: Which parameters? Which must be passed?

Why must data in vue be a function?

When data is a function, the data attributes of each instance are independent and will not affect each other. This is all due to the characteristics of js itself, and has nothing to do with the design of vue itself;

What is the difference between v-show and v-if instructions?

How does vue implement routing nesting?

Reference link: blog.csdn.net/github_2667...

Vue routing principle????

What are the characteristics of the vue framework?

blog.csdn.net/qq_40015826...

How to control css to work only on the current page?

Add scoped to the Style tag; scoped will limit the style to the current page;

(Background management project) Idea/logic of permission management?

Method 1: Dynamically mount routes. First define different routes arrays. After logging in, mount different routes arrays to routers according to different roles of users. The disadvantage is that pages with insufficient access permissions will return 404 (page not found) instead of 401 (insufficient permissions). The semantics are lost. The global route guard is router.forEach. Each route has a meta data, including the role that can access this page, and then judges whether it can be accessed according to the user's role information. If it is not, it will return to the 401 page.

Method 2: If the permissions of different users are limited, that is, the user roles are limited, you can use routing to control, and each role opens different routing. If a functional interface has similar roles, for example, the administrator has a delete function, just add a delete button, you can use the component configuration function, and pass a parameter to the component in the routing. For example, the administrator route passes isadmin as true.

Reference link: blog.csdn.net/qq_32340877...

How to compress the size of js files in the vue/react project?

  1. Put the infrequently changed library into index.html and import it through cdn
  2. Lazy loading of vue routing
  3. Don t introduce the infrequently used css and js into main.js to prevent the vendor.js and app.css files from being too large

Reference link: www.jianshu.com/p/96c987d81...

What should be done to encapsulate the axios components?

Reference link: www.jianshu.com/p/eb325d709...

juejin.cn/post/684490...

vue slot?

zhuanlan.zhihu.com/p/114502325...

Six: React

The life cycle of react

Talk about your understanding of setState in react

Multiple setStates in the same method will be merged, and the settings of the same attribute will only retain the last setting; the setState in the timer will cause a new render each time, even if it is multiple in the same timer. 2.setState; In the callback function, setState will not trigger the batch update mechanism, whether it is promise, ajax, setTimeout callback, etc., set multiple setState at the same time, each setState will be executed and rendered separately, because the context has changed.

Reference link: segmentfault.com/a/119000001

Extension: After setState modifies the data, when will it be rendered on the interface?

Several ways of component communication in React?

Reference link: www.jianshu.com/p/fb915d9c9...

What is the difference between functional components and class components in react?

  • Function component: A function is a component, a function component must have return, and return is a React element;
  • Class components:
  1. A Class is a class component
  2. All class components are inherited from React.Component
  3. The React.component class has its own properties and methods, such as render, componentDidMount and other life cycles
  • Contrast: Class components have this, life cycle, and state; function components (stateless components) have none of these three.

Extension: How to choose function component or class component in the project?

Function component seems to be just a function whose return value is DOM structure, but behind it is the idea of Stateless Components. In functional components, you cannot use State, nor can you use the component life cycle methods, which determines that functional components are presentational components , receiving Props, rendering DOM, and not paying attention to other logic.

Key in react?

The key is used to identify the unique Virtual DOM element and the corresponding data that drives the UI. They help React optimize rendering by recycling all elements currently in the DOM. These keys must be unique numbers or strings. React just reorders the elements instead of re-rendering them. This can improve the performance of the application.

What are the performance optimizations in react?

juejin.cn/post/684490...

The principle of react?????

Reference link: zhuanlan.zhihu.com/p/80606074

What packages and plugins does Webpack use?

Expansion: The principle of Webpack hot update?

Hot module replacement based on WDS (Webpack-dev-server) only needs to partially refresh the changed modules on the page, while retaining the current page state, such as the checked state of the check box, the input of the input box, etc. As a built-in function of Webpack, HMR can be turned on through HotModuleReplacementPlugin or --hot.

Reference link: blog.csdn.net/chern1992/a...

Introduce the more important and eye-catching parts of the project?