Front-end interview questions to sort out the dry goods manually

Front-end interview questions

HTML

What is the html doctype for?

Parse doctypes to avoid browser quirks

browser and kernel

Google: blink
Firefox: gecko
Safari：webkit
ie：trident

What are block-level elements and inline elements

Block-level elements: exclusive to one line, width and height can be set, and can be changed through display
Inline elements: do not occupy a single line, cannot set width and height, change through display

What's new in html5

Web semantic tags, local storage, form enhancement, geolocation, audio and video

What SEO needs to be paid attention to at the front end

Keep HTML tags as simple as possible
Set keywords in mate
Use the TDK label

Local storage and traditional storage

Local storage (5m in size, accessed as key-value pairs): localStoage: (permanent storage, unless manually deleted by the user)
        sessionStoage: (once the browser is closed, the stored information becomes invalid)
​
Traditional storage: cookie (4k in size, accessed as a string, and an expiration time must be set)

What are the benefits of web semantics

After removing the style, the page presents a clear structure
Search engines can better understand the page, which is conducive to indexing
Let the development team better develop and maintain pages

Which tags are removed by html5

u、big、font、center

What are Semantic Tags

Mainly used to declare the role of a piece of code in the page
menu、main、header、footer、nav

5 row-level elements

span、button、i、input、image

Labels included in the table label

thead、tbody、th、td、tr

The role of the readonly and disabled attributes on the input tag

readonly: read only
disabled: disabled

The purpose of the iframe tag

Open a subwindow, load the subwindow

difference between get and post

The information submitted by get is visible on the url, but not by post
The amount of data submitted by get is small, and the amount of data submitted by post is large
get can't upload software, post can

CSS

clear float

clear：both
overflow：hidden
overflow：auto

center a div

margin：0 auto

Vertically center a div

position
display：flex

Pseudo-class selectors and pseudo-elements

The selector is a single colon (first-child, last-child)
Pseudo elements are double colons (after, before)

The value of position

Relative (relative positioning): positioning according to the original position, without breaking away from the document flow
Absolute (absolute positioning): Find the parent-level positioning of the parent-level element. If there is a parent-level positioning, it will be positioned according to the parent-level positioning. If not, it will be positioned according to the browser window, leaving the document flow
fixed (fixed positioning): according to the browser window positioning, out of the document flow

CSS3 animation usage

Define animations using @keyframes
Use animation to apply animation

page adaptation

You can use flex layout
rem

css selector

Label selector, class selector, id selector, wildcard selector, descendant selector, child selector, pseudo class selector

new features of css3

rounded corners, shadows, transitions

box model

Standard box model: width and height of content
ie weird box model: the width and height of the content plus the total width and height of padding and border

hide element

visibility：hidden
display：none

media query

Realize different styles according to different sizes of browsers
Use @media to achieve

Sprite (Sprite) Figure

Make many small icons into one big picture to use

flex layout

Flex is an elastic layout that can provide maximum flexibility for traditional boxes
flex has two axes: horizontal axis and vertical axis (default horizontal)

JavaScript

this-oriented

In ordinary functions, this points to window
In the constructor, this points to the object
In the arrow function, where does the function call this point to
(call and apply can change the this point of ordinary functions and constructors, but cannot change the this point of arrow functions)

The difference between call and apply

Same as: change this to point to
Different: Subsequent parameters are different

dom node operation

Get node: document.getElementById()
        document.getElementByTagName()
        document.querySelected()
        document.querySelectedAll()
Insert node: appendChild()
Delete node: removeChild()
Create a node: createElement()

JS basic types

number、string、Boolean、undefined、null、symbol、object

How to deduplicate an array

use set
double array loop

ES6 new syntax

promises, let and const, ..., arrow functions, map and set

Decimal operations in JS

The decimal calculation in js is inaccurate, so the value calculated each time is different. To calculate accurately, you can use toFixed()

scope

Global scope: Variables defined outside functions, classes, and objects can be used anywhere in the script
Local scope: Variables defined in functions, classes, and objects can only be used internally, and will be destroyed after the function is executed
Block-level scope: defined in {}, can only be declared with let and const

event proxy

Also known as event delegation, use bubbling events to bind an event to the parent element and manage all child elements under the parent element

prototype chain

Every object has its parent object, which is the prototype, and the parent object and the parent object form the prototype chain

Closure

Returning a function within a function will form a closure
Disadvantages: more memory than ordinary functions, affecting performance
Pros: Protected, resident memory

let, var, and const

var: can be defined repeatedly, variable promotion, no block-level scope
let: cannot be defined repeatedly, variables cannot be promoted, and have block-level scope
const: used to declare constants

promise

Used to solve the callback hell
Parameters: resolve (success), reject (failure)

method in array

push: add elements from the end of the array
concat: splicing arrays
join: convert string
splice: Remove elements from an array
filter: filter
sort: sort

string method

length: returns the length of the array
replace: reverse
indexOf: Find. Returns the index if the character exists, or -1 if it does not
split: split the string into an array
substring: Intercept from the beginning to a certain length

What do the four methods of shift, unshift, pop, and push do?

shift: Get the first element to delete
unshift: insert elements from the front of the array
pop: get the last deletion of the element
push: remove an element from the end of the array

what is map

A data structure for storing key-value pairs

what is set

Added a new data type to JS: collections
Features: 1. Can save multiple data 2. Values ​​in the collection cannot be repeated

What is pass by reference

Pass by reference is to pass the address of the variable in memory

Arrays are passed by reference and cannot be copied. How should a new array be copied?

Using the json method, first convert the string and then convert the array

how to merge two arrays

...、concat

What are global variables and local variables

Global variables: Variables defined outside the function can be used globally and always exist
Local variables: Variables defined inside the function can only be used inside the function, and will be destroyed after the function call is executed

What do break and continue do

break: end the loop
continue: end this cycle and enter the next cycle

what is true

exit function and return data

What are the arguments for?

is an object that contains all the parameters of the calling function
Represents all parameters when calling the function

Which codes in js are asynchronous

ajax、setTimeout、setInterval

event loop

js divides the code into synchronous code, macro task and micro task
Execution order: synchronization > micro task > macro task

What is Callback Hell

Callback functions are required when writing asynchronous code. When there are many levels of callback functions, the code is not easy to write and error-prone
Use async...await or promises

Vue

How the data defined in data is displayed on the page

Using {
   
  {}}, the array uses a v-for loop

filter

Use filter to define a filter
There are two types of filters: global and local
Global filter: any component can use
Partial filter: first introduced in the component, and then registered in the filter in the component
​

contamination

Mixins are what define mixins. Merge a piece of JS code into a Vue component
Purpose: The JS code shared by multiple components can be extracted separately and put into a JS file, and then any component needs to be mixed in

How does vue implement two-way binding? what is the principle

Use v-model for binding
Principle: use object.defineProperty() to reacquire the object setting value and object acquisition value to realize the operation

life cycle of vue

beforeCreate: Data observation and initialization have not yet started
created: data observation has started
beforeMount: events can be mounted here
mounted: initialization has started, you can mount dom here
beforeUpdate: The data in the page is still old, the data in data has been updated, and the data is not synchronized
updated: The data in the page has been synchronized with the data in data
beforeDestroy: data and methods in vue can still be used, not completely destroyed
destroyed: vue has been completely destroyed

vuex

vuex: state manager, vuex can be used when many components need the same data
state: declare and define variables
getter: store dependencies
mutation: modify the data in the state
actions: modify asynchronous data

How to use data from vuex in components

1. Direct reading: this.$store.state.data name
2. Introduce and map to computed properties

How to modify data in Vuex in components

1. Call mutations or actions directly
2. Introduce and map to methods

The difference between v-if and v-show

v-if: smash dom elements to show and hide
v-show: control display to show and hide

Communication between vue

Father to son: use props to accept
From child to father: use $emit to accept
Brother pass value: use the bus bus to pass value

Routing mode of vue-router

history
hash

The difference between koa and express

They are all developed by a unified team, but express still uses traditional callbacks, while koa uses promise and async...await to handle callbacks

watch、computer、methods

watch: monitor attribute
computer: computed property
methods: Binding events in components are handled here

created 和 mounted

created: used to initialize data, executed before html loading is complete
mounted: used to perform dom operations, executed after html is loaded

Advantages and disadvantages of vue single page

Advantages: component switching does not need to request the server, and the switching is fast
Disadvantages: slow loading for the first time, not conducive to seo

vue route guard

Global route guard, component guard, route exclusive guard

vue directive

v-for: loop data
v-if: judgment
v-show: show hidden
v-on: monitor
v-model: two-way binding
v-html: parse html

Why is data in vue a function

It is related to passing by reference. If data is not a function, it will make object type data. Objects are passed by reference, which will cause a data to be shared between components. One component changes and other components change accordingly. Each component instance All should be independent and independent of each other, so he should be a function

The two cores of Vue

data-driven, component system

Several components are mainly provided in vue-router

router-link: jump page
router-view: display the registration routing page

keep-alive

When a route is switched, it will be destroyed, and all data will be lost. The rendering will be recreated next time it is accessed. We can use this keep-alive to cache the component, so that the data will not be lost when the component is switched next time.
Two attributes: exclude (which page is cached), include (which page is not cached)

Routing Jump

1. Use router-link to make buttons
2. Use in JS: this.$router.push(path)
              this.$router.back() // Return to the previous page
              this.$router.go(-1) // return to the previous page

How to receive route parameters

If it is the back strap? The use of this.$route.query
If it is followed by / use this.$route.params

Several properties are required to configure routing

At least two: path (path), component (page component), children (subcomponent), name (route name), meta (set other information)

vue-router has several navigation hooks (navigation guards)

Global guard: beforeEach (executed before each routing jump)
        afterEach (executed after each routing jump)
Route exclusive guard: beforeEnter (executed when entering this route)
Guard inside component: triggered when entering this component

Parameters for nav guards

to: the routing object to go to
form: current routing object
next: jump

axios interceptor

Pre-interceptor: triggered before each call to the interface
Post-interceptor: triggered every time the server returns a result

HTTP

The process from entering url to page display

Enter the url address
The browser resolves the domain name IP address
Initiate a tcp request to the server through the IP address
The server accepts the request
The server processes and returns the corresponding file
page rendering
page loaded

status code

200 (request successful)
201 (created successfully)
300 (redirect)
401 (Unauthorized)
404 (The requested resource does not exist)
500 (Server Error)