Disclaimer: As long as these can be mastered, can answer 70%-80% of the interviewer’s technical questions, project interview questions, next update

HTML + CSS

1. Common practical skills

01. Positioning:

Position:absolute/relative/fixed/static

Static: Static positioning.

Absolute: Absolute location. An Absolute location element is located relative to the nearest location ancestor element. However, if an absolutely located element has no located ancestor, it will be located relative to the body of the document

1. Relative, Relative to one’s initial position

Fixed: A Fixed element is positioned relative to the viewport, which means that it is always in the same position even if the page is scrolling.

02. Box Model:

Margin:

Border: Border;

Padding: inside margin;

Content: Content;

Width of box model: left margin + left border + left inner margin +width+ right inner margin + right border + right margin;

Height of box model: upper margin + upper border + upper inner margin +height+ lower inner margin + lower border + lower margin;

03. Vertical water center (the vertical water center of the content and the vertical horizontal center of the box)

(1) Vertical water content in the center:

height=line-height;

Text-align:center;

(2) There are two ways to center the box vertically and horizontally:

Method 1:

Position:absolute;

Left: 50%;

Top: 50%;

Margin-left: – Box width half;

Margin-top:- box height normal;

Method 2:

Position:absolute;

Left: 50%;

Top: 50%;

Transform:translate(-50%,-50%);

2. Knowledge points

01. What are the new HTML5 features

Added semantic labels such as header and footer

Added the video and Audio TAB

New Canvas and SVG drawing

New navigator. Geolocation

A new drag and drop API segmentfault.com/a/119000000…

New multi-threaded technology Web worker and instant messaging technology Web socket

What are the new features of CSS3

Added transition gradient, Animation, selector, Box-shadow, Elastic layout Flex, media query @media, etc

03. What are W3C standards

W3C standards are not a standard, but a collection of standards;

Standards are divided into three levels, structure (HTML), behavior (JS), and presentation (CSS)

Standards are:

Document Type Required Declaration (DOCTYPE)

Encoding format needs to be declared

Javascript code needs to be defined

CSS code needs to be defined

The name of the tag and the name of the attribute inside the tag are lowercase

04. What are the common browser compatibility problems

In different browsers

*{margin:0; padding:0},

Font size:0 for the parent label

05. What are the CSS pseudo-class selectors

: before in… before

: after the… after

Click: active

:hover mouse

The first of all letters

:first-line The first line of the selected element

:first-child The first child element

:nth-child() retrieves child elements

:nth-of-type Gets the child element of the specified type

Dozens of others

06. What are child selectors and what are descendant selectors

Represents a child selector, such as div> SPAN gets the span of a div child

The space represents a descendant selector, such as div SPAN, which gets all spans within a div

07. What is the priority of CSS weights

! Important > Inline style > ID > Class > Tag name

Weights can add up

08. How do browsers make compatible

Internet Explorer usually uses CSS hacks to solve the problem, that is, adding *, _, and + symbols before the code

Google typically prefixes attributes with -webkit- for compatibility

Firefox generally adds -moz- in front of the properties for compatibility

Webpack uses PostCSS to automatically prefix CSS attributes for compatibility

09. How is it adapted at ordinary times

The usual scheme is to match rem with media query (@media).

Instead of setting px for the label or text, I’m going to set REM,

Then use the media query to dynamically adjust the REM size based on the screen size, and all the elements that set the REM unit will change based on the screen

010. What is the difference between REM and EM

Em is defined relative to the font size of the parent label

Rem is defined relative to the font size of the HTML tag

011. What is the difference between Canvas and SVG

Both can be used to draw graphics, but Canvas is drawn based on JS and SVG is drawn based on XML

012. What are the methods of page optimization

(1) Reduce HTTP requests (2) reduce DOM elements (3) strip JavaScript and CSS from pages (4) Remove duplicate scripts (5) use appropriate image formats

13. Semantic understanding?

(1) HTML semantic is to let the content of the page structured, easy to browser, search engine parsing;

(2) It is displayed in a document format without CSS style and is easy to read.

(3) make it easier for people to read the source code to divide the site into blocks, easy to read maintenance understanding.

Second, the JS + jQuery

1. Common practical skills

01. Common functions of arrays and their functions

Juejin. Cn/post / 701582…

2. Knowledge points

01. What are the basic data types of js

Basic types Number, String, Boolean, Null, Undefined, symbol

Reference type Object

What types are returned by typeof in JS

Number, string, Boolean, undefined, symbol, function, object

03. What is the difference between return, break and continue

A return must be written inside the function. If a return is encountered, the rest of the code inside the function is not executed. You can also use return to return a value for external use

Break breaks the loop and the rest of the loop is not executed

Continue Jumps out of the loop, and the rest of the loop continues

04. What is the difference between typeof and instance of

Typeof determines the typeof the object, and there are seven possible return values

Number, string, Boolean, undefined, symbol, function, object

Instanceof checks if it is an instantiated object of the other party and returns true or false

Typeof, instanceof, toString.call(), constructor

05. What is the difference between == (loose equality) and === (strict equality)

== Determine whether the values on the left and right sides are the same, but only the value, not the type, that is to say

2 == 2 is true

=== determines both value and type

06. What are cast and implicit conversions of JS

ParseInt parseFloat, Number of the three is coercion

-=, *=, /=, and %= are implicit conversions

07. What is the difference between a GET request and a POST request

A GET request places parameters in the URL, and a POST request places parameters in the request body. Post is theoretically more secure

The LENGTH of a URL cannot exceed 1KB, and the PARAMETERS of a GET request are included in the URL. Therefore, operations such as uploading an image cannot be performed using a GET request

08. What is bubbling and burrowing

When an event (such as click) is triggered by a child tag, the event is passed level by level from the top-level parent tag to that tag, a process called digging

When the child tag is found, the event is passed from the child tag to the parent tag, a process called bubbling

What about event delegate in JS

Using the principle of event bubbling, the event itself is triggered by its parent element instead of executing

010. Call, apply and bind

(1) This can be changed

(2) The first argument after call, bind is the object to which it points, and the second argument is the value passed to the object

(3) The first argument after apply is the object to which it points, and the second argument is the array that contains the value passed to the object.

(4) Call and apply will be called automatically if they change this, while bind needs to be called manually

011. What does jsonP do and how does it work

Purpose: Resolve cross-domain problems

Principle: dynamic create script tag, callback function

012. What is the difference between cookie, sessionStorage and localStorage

(1) can be used to store data

(2) Cookie a data size cannot exceed 4KB, cannot store more than 20, if the expiration time is not set, it will disappear after the browser is closed

(3) sessionStorage is a sessionStorage, the size of a sessionStorage can not exceed 5M, the number of unlimited, shut down the page data disappear

(4) localStorage localStorage, a size of no more than 5M, the number of unlimited, unless actively deleted, data will not disappear

013. The concept of a prototype

Every JavaScript object contains a [proto] internal property that corresponds to its prototype function object. In addition to the prototype property, there is also a prototype property. When a function object is used as a constructor to create an instance, The prototype property value will be used as the prototype of the instance object.

014. What is a prototype chain?

When an object A calls A method, it will first look for the method from itself. If not, it will look for its own prototype to see if there is such A method. If not, it will continue to look for the prototype of object A’s parent class B, and so on, called the prototype chain.

A is not defined; a is not defined;

015. What is a closure

Closures are when one function can access variables in another function’s scope

A closure is created when a function is wrapped around another function, and the inner function is returned outside the function, so that the original scope chain is not released.

What closures do: modularize scopes, store variables, and encapsulate private variables.

Disadvantages: Memory leaks because closures do not release the original scope chain;

How to fix memory leaks: Use immediate execution functions; (By virtue of the execute immediately function rule, destroy immediately after execution, no memory leak)

016. What is the difference between synchronous and asynchronous

Synchronization process: submit the request → wait for the server to process → return after processing

Subsequent operations can be processed only after a request is processed, which is inefficient. (e.g. B/S mode)

Asynchronous process: Request submission → server processing → complete processing

After sending a request, you do not need to wait for subsequent operations.

When a message is returned, the system notifies the process to process it, which improves the execution efficiency. (AJAX technology, for example)

017. What are the new features of ES6 syntax

(1) const let; (2) const let; Declare constants (3) template strings (4) arrow functions (5) Objects and arrays destruct (6) data types Symbol (7) Set and Map sets (8) Promise objects (9) Introduce the class keyword Symbol function stack cannot use the new command, Because Symbol is a primitive data type, not an object. You can take a string as an argument to provide a description of the newly created Symbol that can be displayed on the console or used as a string for easy differentiation. In Es6, this refers to the scope in which the function is called, and in Es5, this refers to the scope in which the function is called

018. What are the differences between var and let

(1) Var can be used to declare the same variable repeatedly, but let cannot. (2) Var has variable promotion, so it can be assigned first and declared later. Let has no variable promotion. It can only be declared and then assigned to

(3) Variables declared by let have block-level scope

019. What are the features of strict mode (strict mode here generally refers to ES6 strict mode)

(1) The variable must be declared before it is promoted. (2) The deleted variable cannot be used in strict mode. (3) In strict mode, the “this” inside the function points to undefind by default (6) In strict mode, functions cannot be declared in block-level scopes

Function stabilization and throttling

Stabilization: The event triggers and executes the event handler after a certain amount of time has elapsed. If the event is triggered again during this time, the timer will be reset.

Throttling: An event is triggered and an event handler is executed after a period of time. That means that no matter how many times you fire, you can only fire once during this period.

021. What are the common Http status codes

1XX: indicates the information status code. 100 Continue Generally, when a POST request is sent, the server returns an acknowledgement message after the HTTP header is sent, and then sends specific parameter information. Success status code 200 OK Normal message returned 201 Created The request was successful and a new resource was Created. 202 Accepted the request but not yet processed. The page for the 301 Moved Permanently Permanently Moved to a new location. 302 Found Temporary redirect. 303 See Other Temporary redirects and always uses GET to request new URIs. The requested page has Not been Modified since the last request. 4XX: Client error 400 Bad Request The server cannot understand the format of the Request. The client should not attempt to use the same content to initiate a Request again. 401 Unauthorized The request is not authorized. 403 Forbidden Forbidden access. | 404 Not Found I couldn’t find how to match the URI of the resource. 5XX: Server Error 500 Internal Server Error Indicates a common Server Error. 503 Service Unavailable The server cannot process the request temporarily (possibly due to overload or maintenance).

Third, the Vue

1. Knowledge points

01. Common Vue instructions and their functions

V-text: binding text, cannot load labels

V-html: Binding text that can load tags

V-bind: Used to bind data and element attributes

V-if: indicates the condition. If it is true, elements are added and if it is false, elements are deleted

V – for: circulation

V-model: bidirectional data binding

V-show: indicates the conditional judgment. If the value is true, the value is not displayed

02. What happens when V-if and V-for are written in the same label

V-for has a higher priority than V-IF, which has no effect

03. What is the function of the template tag

Wrapping elements together does not itself load into the DOM structure

04. Why must data be a function

Ensure that each component has a single data object to itself, rather than sharing one

05. The Transition label

Set the transition effect, in which only one element can be placed, and must be used with v-if, V-show (or dynamic component, component root node)

If you want to set multiple element gradients, use transition-group

06. What does a slot do? What is a named slot

A slot with a Name value is a named slot

07. What benefits does v-text have over {{}}

{{}} page does not appear {{}}

08. What is the difference between computed and watch

Computed: Computed properties are used to compute results and return cached data when the data changes and recalculated when the data does not change

Watch: monitors the change of a value and performs related operations when the value changes

09. Key function of Vue loop

The existence of the Key ensures the uniqueness. When Vue executes, it will check the node. If there is no Key value, Vue will check the DOM node and empty the content and assign a new value. Transpose or delete operations can reduce the number of renders and improve rendering performance

010. What are the characteristics of axios data requests

1. Create XMLHttpRequests from the browser. Node.js creates the HTTP request. 3. Support Promise API; 4. Intercept requests and responses; 5. Convert request data and response data; 6. Cancel the request. 7. Automatically change to JSON.

012. What is the core of Vue

Data-driven: ViewModel to ensure consistency between data and view.

Component systems: The application UI can be thought of as being entirely composed of component trees.

013. What is the function of keep-alive

Keep components alive and do not remove them even when they are gone

Can be used on the home page, shopping cart, and product details to keep components alive;

014. What is MVVM

M Model Data model, which is the data displayed on the page

V view is the current page

The VM viewModel, which listens for changes in data, the content of the user interaction, is essentially a view Controller, a Controller

015. What are the Vue lifecycle hook functions?

BeforeCreate component before creation

Created after the component is Created

BeforeMount components before rendering

Mounted component after rendering

BeforeUpdate Before a component is updated

Updated After the component is Updated

BeforeDestroy Before a component is destroyed

After the Destroyed component is Destroyed

Activated component (used with keep-Alive)

Deactivated Component is not activated (used with keep-alive)

ErrorCaptured Is called when descendant components fail

016. How does Vue implement bidirectional data binding? What is the principle of bidirectional data binding

Use v-Model for bidirectional binding

Principle: Data hijacking, combined with the publiser-subscriber pattern, is used to hijack the setter/getter of each attribute through Object.defineProperty (). When data changes, a message is published to the subscriber and corresponding listener callback is triggered.

When passing an ordinary JS Object to a Vue instance as its data option, Vue iterates through its properties, turning them into setters/getters with Object.defineProperty ().

Setters/getters are invisible to the user, but internally they let Vue track dependencies and notify properties of changes when they are accessed and modified.

017. There are several ways to transfer data between Vue components. How to transfer data

Parent to Child: The child component accepts it in props mode

Child to parent: The child emits an event $emit, and the parent receives the event and calls the corresponding function

Non-parent: use an empty Vue object to emit $emit in the first component click event and $on in the second component Mounted function to receive the event

018. What are the three types of routing values?

This.$route.params: $route.params: $route.params: $route.params: $route.params: Variable name, Route: meat special; The router: rou (1), (2) using the path to match the routing, and then through the query to pass parameters, to get the value to this. $route. Qurey. $route.params = this.$route.params = this. The variable name

019. What are the event modifiers in Vue?

1.

BeforeEach Global front guard beforeResolve Global resolution guard afterEach Global rear guardCopy the code

beforeEnter
Copy the code

BeforeRouteEnter Component front guard (the guard does not have this) beforeRouteUpdate The route changes but the component is reused beforeRouteLeave component rear guardCopy the code

"scripts":{
           "dev":"webpack-dev-server"
          }
Copy the code