Summary of front-end common interview questions

Ongoing update ~
The content is just an interview example , The questions and answers are for reference only ~
The relevant knowledge points involved in the front end of the basic interview may ask , Especially theory related ~
This paper focuses on application , There are many things related to principles and theories , And everyone may understand it differently , I won't miss people's children , Therefore, it is not involved ;

One ：css piece

1： How to hide an element ？

opacity Set to 0;
visibility Set to hidden;
display Set to none;
position Set to absolute, Then set the position to the invisible area

2： How to center an element horizontally and vertically ？

The box is not fixed in width or height ：transforms deformation ; Elastic box ;
The box is fixed in width and height ： Absolute positioning +margin Negative spacing /margin:auto

3： What kinds of positioning ？ Relative to what position ？ Take a place ？

Position：absolute Absolute positioning ,relative Relative positioning ,fixed Fixed position ,static Static positioning ,stiky Viscous positioning ;

4： Double wing layout ？

Two ：js relevant

1：JS Basic data types for ？

Undefined、Null、Boolean、Number、String、Symbol、Object

null and undefined The difference between

undefined The meaning of representation is undefined ,null It means empty object .

Judge data type

Typeof, instanceof , sonstructor, object.prototype.toString.call

2： Deep copy and light copy ？

Shallow copy ：Object.assign(),concat,slice, Extension operators
Deep copy ：JSON.parse(JSON.stringify()); recursive

3： Introduce event bubbling and capture ？ Stop the event from bubbling

Event Bubbling ： Bottom up ：event.stopPropagation( )
Event capture ： From top to bottom

4：JS How to realize asynchronous programming

Callback function (callback), Event monitoring ,Promise,Generator,async/await

promise And async/await difference ？

settime out And promise Execution order ？

5：this Point to the problem

In ordinary functions this Point to window object , In strict mode
undefined;
The arrow function doesn't , Inherit from the parent scope this;
Constructor points to instance object ;
Functions that bind events ： Who calls to whom ;
Object ： Who calls to whom ;
Timer （ Callback function ）：window

6：url Input to resolution ？

DNS Domain name resolution — find ip Initiate request — The server returns data — The browser accepts the file — Resource syntax parsing — Load parse file

Front end cache understanding

Strong cache , Negotiate the cache

3、 ... and ：vue relevant

1： Mobile and pc End difference ？

difference ： framework , equipment , development language , user , compatible

What about mobile compatibility ？rem Principle ？rem To configure ？

compatible ： Media query ,vh,vw, %, em, rem; Scale proportionally

1vh,1 1em, 1rem, 1px difference

1 rem
All pages use rem The length of the unit is relative to the root element font-size size . namely 1rem Equal to the root element font-size size .
1em
Sub element font size of em Is the font size relative to the parent element .
Elemental width/height/padding/margin use em Is relative to the element font-size.
1vh、1vw
The full name is Viewport Width and Viewport Height, The width and height of the viewport ,1vh amount to Viewport height 1%.
1px
px Pixels （Pixel）, Relative length unit . Pixels px It's relative to the screen resolution of the monitor .

2： If there are five routes, two of them need to log in , Three of them can directly access this without login ？

beforEach Route guard ; Routing parameter marking , Judge the interception in the guard

Route guard ？

Global navigation hook , Assembly hook , Single route exclusive component
Parameters ： to from next()

3： System permissions ？

Including the menu 、 Button 、 Data access

route , Button , How to solve the data ？

The routing backend returns the permission routing list data , Front-end menu Render based on data ; The button back end returns the permission button list data , Front end custom instructions ;
Data permissions are encapsulated by the front end in the request header token Other user data , The backend receives and judges the current user ;

4： Component value transfer method ？

Prop $emit $paraents ref vuex eventBus

sketch vuex？

stste action mutations modules getters

action mutation Synchronous asynchronous , Why? ？

vuex Will the refresh be lost ？ solve

Meeting , Save in running memory
Do persistent storage , Save in session storage And local storage in

cookies session local difference

5： Route parameter transfer mode ？

router link to
router push qurey params

query And params difference ？

use params When passing on the ginseng
The page path after page Jump is http://localhost:8080/#/index
This method of transferring parameters ：
The user cannot see the specific parameter value , A relatively safe
Parameters passed when the page is refreshed id It doesn't exist in this page .（ Store locally or change to query The way ）
params When passing on the ginseng , Only use name Incoming routing , Out of commission path introduce
Access method ：this.$route.params
use query When passing on the ginseng
Page path after page Jump http://localhost:8080/#/index?id=1
This method of transferring parameters ：
The passed parameter values are exposed in the page path , unsafe .
When the page refreshes , The passed parameters do not disappear
query When passing on the ginseng , Can be used at the same time name and path Incoming routing

params Will the refresh be lost ？ solve ？

Meeting ,eventBus, data storage

6： When can I get an instance in the life cycle data, When the page rendering is completed in the life cycle

7：scss What is it? ？ stay vue.cli Installation and use steps in ？ What are the characteristics ？

Variable available , for example （$ Variable name = value ）;
The mixer can be used ;
Can be nested

8： In the component data Is it an object or a function ?

In the component data Write it as a function , Data is defined as a function return value , So every time you reuse a component , Will return a new data, Similar to creating a private data space for each component instance , Let each component instance maintain its own data . And it's simply written in object form , It makes all component instances share one data, It will result in a change that will all change

9： Component name What's the use of options

① Project use keep-alive when , Matching components name Cache filtering .
②DOM When making recursive components, you need to call itself name
③vue-devtools The component name displayed in the debugging tool is by vue Middle component name Decisive

10：router And route difference

Get routing data , Jump

11：nextTick The understanding of the

12： How to deal with data that does not need to be responsive ？

Method 1 ： Define data in data outside
Method 2 ：Object.freeze()
Reduce performance consumption

13： Routing mode

Hash, history, abstract Pattern ( Strict mode );
vue-router Implementation principle of ( The core )： Update the view without re requesting the page

14：Vue3.0 Understanding

There are roughly three points , The first is about the new API setup() function , The second one said that for Typescript Support for , Finally, about replacement
Object.defineProperty by Proxy Support for . In detail about Proxy
Instead of bringing performance improvements , Because the traditional prototype chain interception method , Unable to detect some update operations on objects and arrays , But use Proxy It also brings browser compatibility issues

15：vue in "dependencies","devDependencies" What is it? ？package.json In the document devDependencies and dependencies What's the difference between objects ？

Use npm i 【 Package name 】 --save-dev Installation of the package , Will be written to devDependencies Go inside the object ; While using npm i【 Package name 】 --save Installation of the package , Is written to dependencies Go inside the object .
devDependencies The plug-ins inside ( Such as a variety of loader,babel Family barrel and various webpack Plug-ins, etc ) Only for the development environment , Not used in production environment , So there's no need to pack ; and dependencies It needs to be published to the production environment , Is to be packed .

16：watch Of immediate What's the use of attributes ？

When created Request data once when , And the search value change also requires data ,

17： Parent page a Skip rotor page b, modify b Page data is returned after a page , Do not call the back-end interface to implement a Page original data retention , And b modify a A piece of data ;

Four ： Project optimization related

1： First screen rendering optimization method

Delay loading of non critical resources ： Three ways to load asynchronously ——async and defer、
Dynamic script creation ;
Road load by lazy ;
CDN;
gzip Compress ;
Browser cache ;
Try not to introduce components globally

2： Page performance optimization

Code compression level , Key resources , Browser cache ,CDN, Picture optimization , Anti shake throttling , Reduce reflow and redraw

3： If you are developing a project, how do you start to develop it

4： Cross domain solutions

JSONP;CORS Cross-domain resource sharing （Access-Control-Allow-Origin）;Nginx Reverse proxy ;webpack（ stay vue.config.js In file ） in To configure webpack-dev-server（changeOrigin: true, // Cross domain or not ）

5：webpack Understand and use ？

entrance , exit ,plugins, loader, env

Optimize configuration ？

6： Component encapsulation ？

7： Common status code ？

8： Commonly used git command ？

9：echarts Charts, etc. ？

Ongoing update ~
The content is just an interview example , The questions and answers are for reference only ~
The relevant knowledge points involved in the front end of the basic interview may ask , Especially theory related ~
This paper focuses on application , There are many things related to principles and theories , And everyone may understand it differently , I won't miss people's children , Therefore, it is not involved ;

One ：css piece

1： How to hide an element ？

opacity Set to 0;
visibility Set to hidden;
display Set to none;
position Set to absolute, Then set the position to the invisible area

2： How to center an element horizontally and vertically ？

The box is not fixed in width or height ：transforms deformation ; Elastic box ;
The box is fixed in width and height ： Absolute positioning +margin Negative spacing /margin:auto

3： What kinds of positioning ？ Relative to what position ？ Take a place ？

Position：absolute Absolute positioning ,relative Relative positioning ,fixed Fixed position ,static Static positioning ,stiky Viscous positioning ;

4： Double wing layout ？

Two ：js relevant

1：JS Basic data types for ？

Undefined、Null、Boolean、Number、String、Symbol、Object

null and undefined The difference between

undefined The meaning of representation is undefined ,null It means empty object .

Judge data type

Typeof, instanceof , sonstructor, object.prototype.toString.call

2： Deep copy and light copy ？

Shallow copy ：Object.assign(),concat,slice, Extension operators
Deep copy ：JSON.parse(JSON.stringify()); recursive

3： Introduce event bubbling and capture ？ Stop the event from bubbling

Event Bubbling ： Bottom up ：event.stopPropagation( )
Event capture ： From top to bottom

4：JS How to realize asynchronous programming

Callback function (callback), Event monitoring ,Promise,Generator,async/await

promise And async/await difference ？

settime out And promise Execution order ？

5：this Point to the problem

In ordinary functions this Point to window object , In strict mode
undefined;
The arrow function doesn't , Inherit from the parent scope this;
Constructor points to instance object ;
Functions that bind events ： Who calls to whom ;
Object ： Who calls to whom ;
Timer （ Callback function ）：window

6：url Input to resolution ？

DNS Domain name resolution — find ip Initiate request — The server returns data — The browser accepts the file — Resource syntax parsing — Load parse file

Front end cache understanding

Strong cache , Negotiate the cache

3、 ... and ：vue relevant

1： Mobile and pc End difference ？

difference ： framework , equipment , development language , user , compatible

What about mobile compatibility ？rem Principle ？rem To configure ？

compatible ： Media query ,vh,vw, %, em, rem; Scale proportionally

1vh,1 1em, 1rem, 1px difference

1 rem
All pages use rem The length of the unit is relative to the root element font-size size . namely 1rem Equal to the root element font-size size .
1em
Sub element font size of em Is the font size relative to the parent element .
Elemental width/height/padding/margin use em Is relative to the element font-size.
1vh、1vw
The full name is Viewport Width and Viewport Height, The width and height of the viewport ,1vh amount to Viewport height 1%.
1px
px Pixels （Pixel）, Relative length unit . Pixels px It's relative to the screen resolution of the monitor .

2： If there are five routes, two of them need to log in , Three of them can directly access this without login ？

beforEach Route guard ; Routing parameter marking , Judge the interception in the guard

Route guard ？

Global navigation hook , Assembly hook , Single route exclusive component
Parameters ： to from next()

3： System permissions ？

Including the menu 、 Button 、 Data access

route , Button , How to solve the data ？

The routing backend returns the permission routing list data , Front-end menu Render based on data ; The button back end returns the permission button list data , Front end custom instructions ;
Data permissions are encapsulated by the front end in the request header token Other user data , The backend receives and judges the current user ;

4： Component value transfer method ？

Prop $emit $paraents ref vuex eventBus

sketch vuex？

stste action mutations modules getters

action mutation Synchronous asynchronous , Why? ？

vuex Will the refresh be lost ？ solve

Meeting , Save in running memory
Do persistent storage , Save in session storage And local storage in

cookies session local difference

5： Route parameter transfer mode ？

router link to
router push qurey params

query And params difference ？

use params When passing on the ginseng
The page path after page Jump is http://localhost:8080/#/index
This method of transferring parameters ：
The user cannot see the specific parameter value , A relatively safe
Parameters passed when the page is refreshed id It doesn't exist in this page .（ Store locally or change to query The way ）
params When passing on the ginseng , Only use name Incoming routing , Out of commission path introduce
Access method ：this.$route.params
use query When passing on the ginseng
Page path after page Jump http://localhost:8080/#/index?id=1
This method of transferring parameters ：
The passed parameter values are exposed in the page path , unsafe .
When the page refreshes , The passed parameters do not disappear
query When passing on the ginseng , Can be used at the same time name and path Incoming routing

params Will the refresh be lost ？ solve ？

Meeting ,eventBus, data storage

6： When can I get an instance in the life cycle data, When the page rendering is completed in the life cycle

7：scss What is it? ？ stay vue.cli Installation and use steps in ？ What are the characteristics ？

Variable available , for example （$ Variable name = value ）;
The mixer can be used ;
Can be nested

8： In the component data Is it an object or a function ?

In the component data Write it as a function , Data is defined as a function return value , So every time you reuse a component , Will return a new data, Similar to creating a private data space for each component instance , Let each component instance maintain its own data . And it's simply written in object form , It makes all component instances share one data, It will result in a change that will all change

9： Component name What's the use of options

① Project use keep-alive when , Matching components name Cache filtering .
②DOM When making recursive components, you need to call itself name
③vue-devtools The component name displayed in the debugging tool is by vue Middle component name Decisive

10：router And route difference

Get routing data , Jump

11：nextTick The understanding of the

12： How to deal with data that does not need to be responsive ？

Method 1 ： Define data in data outside
Method 2 ：Object.freeze()
Reduce performance consumption

13： Routing mode

Hash, history, abstract Pattern ( Strict mode );
vue-router Implementation principle of ( The core )： Update the view without re requesting the page

14：Vue3.0 Understanding

There are roughly three points , The first is about the new API setup() function , The second one said that for Typescript Support for , Finally, about replacement
Object.defineProperty by Proxy Support for . In detail about Proxy
Instead of bringing performance improvements , Because the traditional prototype chain interception method , Unable to detect some update operations on objects and arrays , But use Proxy It also brings browser compatibility issues

15：vue in "dependencies","devDependencies" What is it? ？package.json In the document devDependencies and dependencies What's the difference between objects ？

Use npm i 【 Package name 】 --save-dev Installation of the package , Will be written to devDependencies Go inside the object ; While using npm i【 Package name 】 --save Installation of the package , Is written to dependencies Go inside the object .
devDependencies The plug-ins inside ( Such as a variety of loader,babel Family barrel and various webpack Plug-ins, etc ) Only for the development environment , Not used in production environment , So there's no need to pack ; and dependencies It needs to be published to the production environment , Is to be packed .

16：watch Of immediate What's the use of attributes ？

When created Request data once when , And the search value change also requires data ,

17： Parent page a Skip rotor page b, modify b Page data is returned after a page , Do not call the back-end interface to implement a Page original data retention , And b modify a A piece of data ;

Four ： Project optimization related

1： First screen rendering optimization method

Delay loading of non critical resources ： Three ways to load asynchronously ——async and defer、
Dynamic script creation ;
Road load by lazy ;
CDN;
gzip Compress ;
Browser cache ;
Try not to introduce components globally

2： Page performance optimization

Code compression level , Key resources , Browser cache ,CDN, Picture optimization , Anti shake throttling , Reduce reflow and redraw

3： If you are developing a project, how do you start to develop it

4： Cross domain solutions

JSONP;CORS Cross-domain resource sharing （Access-Control-Allow-Origin）;Nginx Reverse proxy ;webpack（ stay vue.config.js In file ） in To configure webpack-dev-server（changeOrigin: true, // Cross domain or not ）

5：webpack Understand and use ？

entrance , exit ,plugins, loader, env

Optimize configuration ？

6： Component encapsulation ？

7： Common status code ？

8： Commonly used git command ？

9：echarts Charts, etc. ？