current position:Home>Summary of front-end common interview questions

Summary of front-end common interview questions

2022-06-24 07:57:34hyduan200

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. ?

copyright notice
author[hyduan200],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240359070343.html

Random recommended