The most comprehensive collection of front-end interview questions

HTML+CSS

1. Understanding and knowledge of WEB standards and W3C <br /> Close tags, lowercase tags, no random nesting, increase the search robot search probability, use external css and js scripts, separate structure and behavior, faster file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, easy maintenance, convenient revision, no need to change page content, provide print version without copying content, improve website usability;

2. What is the difference between xhtml and html
HTML is a basic web design language, and XHTML is an XML-based markup language. The main differences are:
XHTML elements must be nested correctly.
XHTML elements must be closed.
Tag names must be in lowercase letters.
An XHTML document must have a root element.

3.Doctype? Strict mode and mixed mode - how to trigger these two modes and what is the significance of distinguishing them?
Used to declare which specification (html/Xhtml) the document uses. Usually it is too strict. Adding XML declaration to frame-based html documents can trigger the parsing method to change to IE5.5. It has IE5.5 bugs.

4. What are inline elements? What are block-level elements? What is the CSS box model?

Block-level elements: div p h1 h2 h3 h4 form ul
Inline elements: ab br i span input select
CSS box model: content, border, margin, padding

5. What are the ways to import CSS? What is the difference between link and @import?
The difference between inline, embedded and external link imports: loading the former at the same time is incompatible, and the latter is not supported by browsers below CSS2.1
Link supports changing the style using javascript, which cannot

6. What are the CSS selectors? Which properties can be inherited? How is the priority algorithm calculated?
Which one has higher priority, inline or important?

Tag selector class selector id selector inheritance is not as good as specifying Id>class>tag selector. The latter has higher priority.

7. What are the three layers of the front-end page? What are they? What are their functions?
Structure layer Html Presentation layer CSS Behavior layer js

8.What is the basic structure of CSS?
Selector {attribute1:value1;attribute2:value2;...}

9. Which browsers have you tested your pages on? What are the kernels of these browsers?
Ie (Ie kernel) Firefox (Gecko) Google (webkit) opear (Presto)

10. Write down several solutions to IE6 BUG
1. Double margin BUG float caused by using display
2.3 pixel problem caused by using float Use dislpay:inline -3px
3. Hyperlinks become invalid after being clicked: Use the correct writing order: link visited hover active
4.Ie z-index problem add position:relative to the parent
5. Png transparent using js code
6.Min-height minimum height! Important Solution
7.Select covers and uses iframe nesting in IE6
8. Why is there no way to define a container with a width of about 1px (caused by the default line height of IE6, use over:hidden,zoom:0.08 line-height:1px)

11. What is the difference between the title and alt attributes in a tag?
Alt When the image is not displayed, it is represented by text.
Title provides information for this property

12.Describe the function and use of css reset.
Reset resets the browser's CSS default properties. The browsers are different.
Different styles, then reset to make them unified

13. Explain CSS sprites and how to use them.
Css sprites combine a bunch of small images into one large image.
Reduce the number of requests to the server for images

14.What is the difference between browser standards mode and quirks mode?
Different box model rendering modes use window.top.document.compatMode
Can show why mode

15. How do you optimize the files and resources of the website? Expected solutions include:
File consolidation File minimization / file compression Use CDN hosting Use cache

16. What is semantic HTML?
Intuitive understanding of tags is beneficial for search engine crawling

17. Several ways to clear floating, their respective advantages and disadvantages
1. Use empty tags to clear floats clear:both (theoretically, any tag can be cleared,,, adding meaningless tags)
2. Use overflow:auto (empty label elements clear floats and have to add unintentional code, use zoom:1 for IE compatibility)
3. Use the afert pseudo element to clear the float (for non-IE browsers)

Javascript

1. What data types does JavaScript's typeof return?
Object number function boolean underfind

2. Give three examples of mandatory type conversion and two implicit type conversions?
mandatory (parseInt,parseFloat,number)
Implicit (== – ===)

3. The difference between split() and join() is that the former cuts into an array, while the latter converts the array into a string.

4. Array methods pop() push() unshift() shift()
Push() adds to the end Pop() removes from the end
Unshift() Header add shift() Header delete

5. What is the difference between event binding and normal events?

6. Differences between IE and DOM event streams
1. The execution order is different.
2. The parameters are different
3. Whether to add on to the event
4.This points to the problem

7. What are the compatible writing methods under IE and standards?
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

8. The difference between get and post when making ajax requests. One is behind the URL, and the other is in a virtual carrier. There is a size limit and security issues. The applications are different. One is for forums and other places that only require requests, and the other is similar to changing passwords.

9. The difference between call and apply
Object.call(this,obj1,obj2,obj3)
Object.apply(this, arguments)

10. When making an ajax request, how to interpret json data using eval parse? Considering security considerations, it is more reliable to use parse.
11.b inherits the method of a

12. Write a function to get non-line style

function getStyle(obj, attr, value) {
    if (!value) {
        if (obj.currentStyle) {
            return obj.currentStyle(attr)
        } else {
            obj.getComputedStyle(attr, false)
        }
    } else {
        obj.style[attr] = value
    }
}

13. What is event delegation? It makes use of the principle of event bubbling to allow the event triggered by oneself to be executed by its parent element instead!
https://www.jb51.net/article/116997.htm For examples, see this link

14. What is a closure, what are its characteristics, and what impact does it have on the page? A closure is a function that can read the internal variables of other functions.

1. Save the variable i to each paragraph object (p)

1. function init1() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].i = i;
5. pAry[i].onclick = function() {
6. alert(this.i);
7. }
8. }
9. }

2. Save the variable i in the anonymous function itself

1. function init2() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (pAry[i].onclick = function() {
5. alert(arguments.callee.i);
6. }).i = i;
7. }
8. }

3. Add a layer of closure, i is passed to the inner function as a function parameter

1. function init3() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (function(arg){
5. pAry[i].onclick = function() {
6. alert(arg);
7. };
8. })(i);//Calling parameters
9. }
10.}

4. Add a layer of closure, and pass i to the inner function as a local variable

1. function init4() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (function () {
5. var temp = i; // local variable when calling
6. pAry[i].onclick = function() {
7. alert(temp);
8. }
9. })();
10. }
11.}

5. Add a layer of closure and return a function as a response event (note the subtle difference from 3)
1. function init5() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i < pAry.length; i++ ) {
4. pAry[i].onclick = function(arg) {
5. return function() { //Return a function
6. alert(arg);
7. }
8. }(i);
9. }
10.}

6. Implemented with Function, in fact, each function instance will generate a closure

1. function init6() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].onclick = new Function("alert(" + i + ");"); //new generates a function instance at a time
5. }
6. }

7. Implement with Function, note the difference from 6

1. function init7() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].onclick = Function('alert('+i+')');
5. }
6. }

15. How to prevent event bubbling and default events
cancelBubble return false

16. Add, delete, replace, and insert methods to a certain point
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17. Explain the principle of jsonp and why it is not real ajax
Dynamically create script tags and callback functions
Ajax is a data operation request without refreshing the page

18. JavaScript's local objects, built-in objects and host objects. Local objects are array, obj, regexp, etc., which can be instantiated by new. Built-in objects are gload, Math, etc., which cannot be instantiated. Hosts are document, window, etc. that come with the browser.

19. The difference between document load and document ready
Document.onload executes js after the structure and style are loaded
Document.ready does not have this method in the native version, but there is one in jQuery
$().ready(function)

20. The difference between "==" and "===" is that the former will automatically convert the type while the latter will not.

21. JavaScript's same-origin policy: A script can only read properties of windows and documents from the same origin.
The same source here refers to the combination of host name, protocol and port number

22. Write a method to remove duplicates from an array
function oSort(arr)
{
var result ={};
var newArr = [];
for(var i=0;i < arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

23. Media Picker
@media (min-width: 992px) and (max-width: 1199px)
@media screen and (min-width: 768px)
HTML & CSS

1. What browsers are commonly used for testing? What are the kernels (Layout Engine)?
(Q1) Browser: IE, Chrome, FireFox, Safari, Opera.
(Q2) Kernel: Trident, Gecko, Presto, Webkit.
2. What is the difference between inline elements and block-level elements? Compatibility use of inline-block elements? (IE8 and below)
(Q1) Inline elements: They will be arranged horizontally and cannot contain block-level elements. Setting width will have no effect.
The height is invalid (line-height can be set), the margin top and bottom are invalid, and the padding top and bottom are invalid.
Block-level elements: each occupying one line and arranged vertically. Start with a newline and end with a line break.
(Q2) Compatibility: display:inline-block;*display:inline;*zoom:1;
3. What are the ways to clear floats? Which is the better way?
(Q1)
(1) The parent div defines the height.
(2) Add an empty div tag clear:both at the end.
(3) The parent div defines pseudo-classes: after and zoom.
(4) The parent div defines overflow:hidden.
(5) The parent div defines overflow:auto.
(6) The parent div also floats and needs to have its width defined.
(7) The parent div defines display: table.
(8) Add the br tag clear:both at the end.
(Q2) The third method is better and is used by many websites.
4.What are the commonly used properties of box-sizing? What are their respective functions?
(Q1)box-sizing: content-box|border-box|inherit;
(Q2) content-box: The width and height are applied to the element's content box respectively.
Draws the element's padding and borders in addition to the width and height (the default for elements).
border-box: Any padding and borders specified for the element will be drawn within the set width and height. The content width and height are obtained by subtracting the border and padding from the set width and height respectively.
5.What is the function of Doctype? What is the difference between Standard Mode and Compatibility Mode?
(Q1)>!DOCTYPE< tells the browser's parser what document standard to use to parse this document. A non-existent or malformed DOCTYPE will cause the document to be rendered in compatibility mode.
(Q2) Both the standard mode layout and JS operation mode run at the highest standard supported by the browser. In compatibility mode, pages are displayed in a loosely backwards-compatible manner, emulating the behavior of older browsers to prevent the site from breaking.
6. Why do we only need to write >!DOCTYPE HTML< in HTML5?
HTML5 is not based on SGML, so there is no need to reference a DTD, but a doctype is needed to regulate browser behavior (to make browsers behave the way they should).
HTML4.01 is based on SGML, so it is necessary to reference DTD to tell the browser the document type used by the document.
7. When importing styles on a page, what is the difference between using link and @import?
(1) link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, define rel link attributes, etc.; while @import is provided by CSS and can only be used to load CSS;
(2) When the page is loaded, the link will be loaded at the same time, and @import references
The CSS will wait until the page is loaded before loading;
(3) Import is proposed in CSS2.1 and can only be recognized by IE5 and above.
Link is an XHTML tag and has no compatibility issues;
8.Please tell us about your understanding of browser kernel?
It is mainly divided into two parts: rendering engine (layout engineer or
Rendering Engine) and JS engine.
Rendering engine: responsible for obtaining the content of the web page (HTML, XML, images, etc.),
Organize information (such as adding CSS, etc.) and calculate how the web page will be displayed.
It is then output to a monitor or printer. Different browser kernels will interpret the syntax of web pages differently, so the rendering effects will also be different.
All web browsers, email clients, and other
Applications that display network content require a kernel.
The JS engine parses and executes JavaScript to achieve dynamic effects on web pages.
At the beginning, there was no clear distinction between the rendering engine and the JS engine. Later, as the JS engine became more and more independent, the kernel tended to refer only to the rendering engine.
9.What are the new features of HTML5? How to deal with browser compatibility issues of HTML5 new tags? How to distinguish between HTML and HTML5?
(Q1)
HTML5 is no longer a subset of SGML. It mainly adds functions such as images, location, storage, and multi-tasking.
(1) Drawing canvas;
(2) video and audio elements for media playback;
(3) Local offline storage localStorage stores data for a long time, and the data is not lost after the browser is closed;
(4) The data in sessionStorage is automatically deleted after the browser is closed;
(5) Better semantic content elements, such as article, footer, header, nav, section;
(6) Form controls: calendar, date, time, email, url, search;
(7) New technologies: webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6 support tags generated by the document.createElement method.
This feature can be used to allow these browsers to support new HTML5 tags.
After the browser supports the new tag, you also need to add the default style of the tag.
Of course, you can also directly use mature frameworks, such as html5shim;
>!--[if lt IE 9]<
>script< src="http://html5shim.googlecode.com/svn/trunk/html5.js">/script<
>![endif]--<
10. Briefly describe your understanding of HTML semantics?
Use the right labels for the right things.
Semantic HTML makes the content of the page structured and clearer, making it easier for browsers and search engines to parse;
Displays in a document format that is easy to read even without CSS styles;
Search engine crawlers also rely on HTML tags to determine the context and weight of individual keywords, which is beneficial for SEO;
Make it easier for people who read the source code to divide the website into blocks, making it easier to read, maintain and understand.
JavaScript

1. Introduce the basic data types of js
Undefined, Null, Boolean, Number, String
2. What are the built-in objects in js?
Data encapsulation class objects: Object, Array, Boolean, Number and String
Other objects: Function, Arguments, Math, Date, RegExp, Error
3. Understanding of this object
this always points to the direct caller of the function (not the indirect caller);
If there is a new keyword, this points to the new object;
In an event, this refers to the object that triggered the event. In particular, this in attachEvent in IE always refers to the global object Window.
4.What does eval do?
Its function is to parse the corresponding string into JS code and run it;
You should avoid using eval, as it is unsafe and very performance-intensive (twice, once parsed into js statements, and once executed).
When converting a JSON string to a JSON object, you can use eval, var obj =eval('('+ str +')');
5. How to add, remove, move, copy, create and find nodes in DOM
// Create a new node
createDocumentFragment() //Create a DOM fragment
createElement() //Create a specific element
createTextNode() //Create a text node
// Add, remove, replace, insert
appendChild()
removeChild()
replaceChild()
insertBefore() //Insert a new child node before an existing child node
// Search
getElementsByTagName() //By tag name
getElementsByName() //Through the value of the element's Name attribute
(IE has a stronger fault tolerance and will get an array, which includes id equal to name value)
getElementById() //By element ID, uniqueness
6.What is the difference between null and undefined?
null is an object representing "nothing", which is 0 when converted to a numerical value; undefined is a primitive value representing "nothing", which is NaN when converted to a numerical value.
undefined:
(1) When a variable is declared but not assigned a value, it is equal to undefined.
(2) When a function is called, a parameter that should be provided is not provided and the parameter is equal to undefined.
(3) If an object has no assigned property, the value of the property is undefined.
(4) When a function has no return value, it returns undefined by default.
null:
(1) As a function parameter, it indicates that the function parameter is not an object.
(2) Serves as the end point of an object’s prototype chain.
7. What exactly does the new operator do?
(1) Create an empty object and the this variable references the object.
It also inherits the prototype of this function.
(2) Properties and methods are added to the object referenced by this.
(3) The newly created object is referenced by this and is implicitly returned.
8. What do you know about JSON?
JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of JavaScript.
The data format is simple, easy to read and write, and occupies little bandwidth.
Format: key-value pairs, for example: {'age':'12', 'name':'back'}
9.What are the differences and functions of call() and apply()?
The apply() function takes two parameters: the first is the context and the second is an array of parameters. If the context is null, the global object is used instead.
For example: function.apply(this,[1,2,3]);
The first argument to call() is the context, followed by the sequence of arguments passed to the instance.
For example: function.call(this,1,2,3);
10.How to obtain UA?
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}

other
1. What do you know about HTTP status codes?
100 Continue Continue, usually when sending a post request,
After the http header, the server will return this information to indicate confirmation, and then send specific parameter information
200 OK Normal response information
201 Created The request was successful and the server created a new resource
202 Accepted The server has accepted the request but has not yet processed it
301 Moved Permanently The requested web page has been permanently moved to a new location.
302 Found Temporary redirect.
303 See Other Temporary redirection, and always uses GET request to the new URI.
304 Not Modified The requested web page has not been modified since the last request.
400 Bad Request The server cannot understand the format of the request and the client should not try to make a request again with the same content.
401 Unauthorized The request is not authorized.
403 Forbidden Access is forbidden.
404 Not Found A resource matching the URI could not be found.
500 Internal Server Error The most common server-side error.
503 Service Unavailable The server is temporarily unable to process the request (perhaps due to overload or maintenance).
2. What performance optimization methods do you have?
(1) Reduce the number of http requests: CSS Sprites, JS, CSS source code compression, large images
Small control is suitable; web page Gzip, CDN hosting, data cache, image server.
(2) Front-end template JS + data to reduce bandwidth waste caused by HTML tags.
The front end uses variables to save the AJAX request results, and operates local variables each time without making requests, reducing the number of requests (3) Use innerHTML instead of DOM operations to reduce the number of DOM operations and optimize JavaScript performance.
(4) When there are many styles to be set, set className instead of directly operating style.
(5) Use global variables less often and cache the results of DOM node searches. Reduce IO read operations.
(6) Avoid using CSS Expression, also known as Dynamic properties.
(7) Preload images, put the style sheet at the top, put the script at the bottom and add a timestamp.
3. What is graceful degradation and progressive enhancement?
Graceful degradation: The website works properly in all modern browsers.
If you are using an older browser, the code will check to make sure they work properly.
Due to IE's unique box model layout problem, hack practices for different versions of IE
Graceful degradation, adding alternative solutions for browsers that cannot support the function,
This allows the experience to be degraded in some way on older browsers without being completely ineffective.
Progressive enhancement: Start with basic features supported by all browsers, gradually add features that are only supported by new browsers, and add additional styles and functions to the page that are harmless to basic browsers. They will automatically render and work when supported by the browser.
4. What common operations can cause memory leaks?
A memory leak is any object that persists after you no longer own or need it.
The garbage collector periodically scans objects and counts the number of other objects that reference each object.
If the number of references to an object is 0 (no other object has referenced the object),
Or if the only reference to the object is circular, the memory for the object can be reclaimed.
Using a string instead of a function as the first argument to setTimeout can cause a memory leak.
Closures, console logging, loops (a cycle occurs when two objects reference each other and retain each other)
5. The difference between threads and processes A program has at least one process, and a process has at least one thread.
The thread division scale is smaller than the process, which makes the multi-threaded program have high concurrency.
In addition, a process has an independent memory unit during execution, while multiple threads share memory.
Thereby greatly improving the running efficiency of the program.
Threads are different from processes during execution. Each independent thread has an entry point for program execution, a sequential execution sequence, and an exit point for the program. However, threads cannot execute independently and must exist in an application program, which provides multiple thread execution control.
From a logical point of view, the meaning of multithreading is that in an application, multiple execution parts can be executed simultaneously. However, the operating system does not treat multiple threads as multiple independent applications to implement process scheduling, management, and resource allocation. This is the important difference between processes and threads.
Front-end development engineer interview questions Javascript
1. To dynamically change the content in a layer, you can use the following methods (AB)
a)innerHTML
b)innerText
c) It is achieved by setting the hiding and display of the layer
d) By setting the display property of the layer's style properties

2. When you press A on the keyboard, the result of printing event.keyCode using the onKeyDown event is (A)
a)65
b)13
c)97
d)37

3. In JavaScript, the following option is not an array method (B);
a)sort()
b)length()
c)concat()
d)reverse()
4. Which of the following options can be used to retrieve the index number of the selected option? (B)
a) disabled
b)selectedIndex
c)option
d) multiple

5. I want the image to have the same function as the "Submit" button. How do I write a form submission? (A)
a) Manually submit in the onClick event of the image
b) Add an onSubmit event to the image
c) Manually submit in the onSubmit event of the image
d) Automatically submit in the form

6. The correct code to put the div layer and the text box on the same line is (D);
a)
b)
c)
d)
7. Among the following options, the correct description is (select two). ( A D )
a) options.add(new Option('a','A')) can dynamically add a drop-down list option
b) option.add(new Option('a','A')) can dynamically add a drop-down list option
c) In new Option('a','A'), 'a' represents the value of the list option, and 'A' is used to display it on the page.
d) In new Option('a','A'), 'A' represents the value of the list option, and 'a' is used to display it on the page.

8. var emp = new Array(3);
for(var i in emp)
The following answers can be interchanged with the for loop code: (select one). (D )
A for(var i =0; i
B for(var i =0; i
C for(var i =0; i
D for(var i =0; i

9. When creating a cascading menu function, the (A) event of the drop-down list box is called.
a) onChange
b) onFocus
c)selected
d) onClick

10. Among the following statements for declaring arrays, the wrong option is (C).
a)Var arry = new Array()
b)Var arry = new Array(3)
c)Var arry[] = new Array(3)(4)
d)Var arry = new Array('3','4')

11. Which of the following properties can achieve layer hiding? (C)
a)display:false
b)display:hidden
c)display:none
d)display:” ”

12. Which of the following options does not belong to the method of the document object? (D)
a)focus()
b)getElementById()
c)getElementsByName()
d)bgColor()

13. Which of the following is a keyboard press event (AB)
a) onKeyDown
b)onKeyPress
c)keyCode
d) onMouseOver
14. The purpose of javascript form validation is (B)
a) Submit the user's correct information to the server
b) Check that the submitted data is consistent with the actual
c) Make the page beautiful and generous
d) Reduce the pressure on the server
15. Common values ​​of the display attribute do not include (C)
a) inline
b)block
c)hidden
d)none

16. Which of the following statements about the pixelTop attribute and the top attribute is correct? (D )
a) are all properties of the Location object
b) When used, the return value is a string
c) Both return values ​​in pixels.
d) None of the above

17. Use the open method to open a window with a browser toolbar, address bar, and menu bar. The correct option is __D__
a)open("x.html","HI","toolbas=1,scrollbars=1,status=1");
b)open("HI","scrollbars=1,location=1,status=1");
c)open("x.html","status=yes,menubar=1,location=1");
d)open("x.html","HI","toolbas=yes,menubar=1,location=1");

18. The correct code to close the layer named mydiv is (C)
a)document.getElementByIdx_x_x_x(mydiv).style.display="none";
b)document.getElementByIdx_x_x_x("mydiv").style.display=none;
c)document.getElementByIdx_x_x_x("mydiv").style.display="none";
d)document.getElementByIdx_x_x_x("mydiv").style.display=="none";
19. Why use Div+CSS layout? Separation of form and content greatly reduces page code, improves page browsing speed, clear structure, and is beneficial to SEO
Shorten the revision time, make the layout more convenient, design once and use it many times

20. What are the characteristics of the Block element? Which elements are Block elements by default? Block elements always start on a new line;
Height, line height, and top and bottom margins are all controllable;
The default width is 100% of its container, unless a width is set for a block element:
,
, and 21. What are the characteristics of inline elements? Which elements are inline elements?
and other elements are on one line;
Height, line height, and top and bottom margins cannot be changed;
The width is the width of its text or image and cannot be changed.

The inline elements are: , , ,
, ,
and.

22. What is the result of the expression parseInt("X8X8")+paseFloat('8') in JavaScript? (C)
a)8+8
b)88
c)16
d) "8" + '8

23. The methods of String object do not include (C)
a) charAt();
b)substring()
c)length
d) toUpperCase()

24. Which of the following statements about setTimeout("check",10) is correct? (D)
a) The program loop is executed 10 times
b) The Check function is executed every 10 seconds
c) 10 is passed as a parameter to the check function
d) The Check function is executed every 10 milliseconds

25. Which of the following words is not a javascript keyword: (C)
a)with
b)parent
c)class
d) void

Preface

This article summarizes some high-quality front-end interview questions (most of which come from the Internet). Beginners should also carefully study the principles contained therein after reading them. Important knowledge needs to be studied systematically and thoroughly to form their own knowledge chain. Never try to cut corners. It is wrong to just try to pass the interview!
There are a few points to note during the interview: (Source: Cheng Shaofei's github: @wintercn)

Interview questions: Varies according to your level and position, entry level to expert level: scope ↑, depth ↑, direction ↑.

Question types: technical vision, project details, theoretical knowledge questions, algorithm questions, open questions, and case questions.

Follow up questions: Make sure to ask until you or the interviewer starts to not understand. This can greatly extend the differentiation and depth of the questions and know your actual ability. Because this kind of associative knowledge is learned over a long period of time and is definitely not something that can be remembered temporarily.

No matter how well you answer the questions, the interviewer (who may be your direct supervisor) will consider whether I want this person to be my colleague? So attitude is important. (It feels more like a blind date)

Experienced engineers can confuse absolute and relative. It is better not to have such people because the team needs you to have reliable talents (reliability).

Front-end development interview knowledge points outline:

HTML & CSS:
Understanding of Web standards, browser kernel differences, compatibility, hacks, CSS basics: layout, box model, selector priority and usage, HTML5, CSS3, mobile adaptation

JavaScript:
Data types, object-oriented, inheritance, closures, plug-ins, scopes, cross-domain, prototype chains, modularization, custom events, memory leaks, event mechanisms, asynchronous loading callbacks, template engines, Nodejs, JSON, ajax, etc.

other:
HTTP, security, regular expressions, optimization, refactoring, responsiveness, mobile, teamwork, maintainability, SEO, UED, architecture, career

As a front-end engineer, no matter how many years you have worked, you should master the following knowledge points:

This article was published by Wang Zimo in Front-end Essays

1. DOM structure - what relationships may exist between two nodes and how to move arbitrarily between nodes.

2. DOM operations - how to add, remove, move, copy, create and find nodes, etc.

3. Events - how to use events and the differences between IE and the standard DOM event model.

4. XMLHttpRequest - What is it, how to perform a complete GET request, and how to detect errors.

5. Strict mode and promiscuous mode - how to trigger these two modes and what is the significance of distinguishing them.

6. Box model - the relationship between margins, padding and borders, and the box model in browsers below IE8

7. Block-level elements and inline elements - how to control them with CSS and how to use them reasonably

8. Floating elements - how to use them, what problems they have and how to solve them.

9. HTML and XHTML - What are the differences between the two? Which one do you think should be used and why?

10. JSON - function, usage, and design structure.