Web front-end big factory interview questions set notes

(1) What is the difference between JSON and XML? What are the advantages of JSON for Ajax applications?

• JSON does not need closing tags
• JSON is shorter
• JSON reads and writes faster
• JSON can use arrays

• JSON is faster to load and easier to parse than XML data:

(2) How are the actual widths of clientWidth and offsetWidth calculated?

• clientWidth = width+左右padding

• offsetWidth = width + left and right padding + left and right boder

(3) There are several ways to embed PHP code in HTML?

• 默认语法:<?php ... ?>
• 短标记:<? ... ?>
• 脚本:<script language="php">

(4) What methods do you know to improve the efficiency of DOM manipulation?

• Use event delegates when handling click events on list child elements
• When inserting a large number of DOM elements, use innerHTML instead of building elements one by one
• Use DocumentFragment instead of multiple appendChild operations

(5) What is the correct inheritance relationship of HTMLDivElement in the DOM?

(6) When the values ​​of margin-top and padding-top are percentages, how are they calculated?

• Width relative to the nearest parent block-level element, relative to the width of the nearest parent block-level element

(7) Which elements can be nested between p elements and a elements?

• The p element cannot contain any block-level elements (including itself)
• an element can contain any other element (except itself)

(8) What is the root node of the DOM tree?

• document

(9) What is SVG?

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the web
• SVG uses XML format to define graphics
• SVG images are enlarged or resized without loss of graphic quality
• SVG is a standard of the World Wide Web Consortium
• SVG is integrated with W3C standards such as DOM and XSL
• (SVG is a fork under HTML)

(10) What is the difference between link and @import?

• link can use JavaScript to control the DOM to change the style, @import does not support
• When link refers to CSS, the page loads and loads the styles at the same time, @import requires the page to be fully loaded and then loaded
• link belongs to HTML category, @import belongs to CSS category

(11) Can the drawImage of canvas use cross-domain images? If not what is the solution?

• No, it will give an error

• Option 1: If the picture is not too large, you can use base64
• Option 2: Set img.crossOrigin = ' ' of the image object of the instance; and set Access-Control-Allow-Origin:* (or running domain name) on the server side

(12) Can the window.onerror method get the error details of the cross-domain script by default? If there is no solution?

• can not

• First: add the response header of Access-Control-Allow-Origin:** to the relevant js file
• Second: add the crossorigin attribute when referencing the relevant js file

(13) Could you please talk about the difference or effect of display:none, visibility:hidden, opacity:0?

• display:none - the element is not displayed at all, does not occupy space, rearranges and redraws the page, and cannot trigger binding events
• visibility: hidden - the element is invisible but exists, retains space, only redraws, and cannot trigger binding events
• opacity: 0 - the element is invisible but exists, retains space, only redraws, can trigger binding events

(14) Talk about the difference between the spread operator and the destructuring assignment operator.

• Spread operator: expand arrays, strings, and objects from the grammatical level to simplify the grammar
• Destructuring assignment operator: After expanding the array, string, and object from the grammar level, assign the corresponding array to the specified variable to achieve the purpose of grammar simplification

(15) Why can APIs be used for basic data types such as number, boolean, and string?

• AUTO-BOXING: Automatic boxing. When operating the API of the basic data type, the system will automatically create an object of the packaging type (package type) according to the basic data type, and use the value of the basic data type as the initial value of the packaging type

(16) Talk about your understanding of shallow copy and deep copy.

• Shallow copy only copies the reference address (value copy) of the attributes of the reference data type, and does not copy the referenced space
• The deep copy realizes the copy of the reference space for the attributes of the reference data type, which is independent of the attribute space of the source object

(17) What is the difference between call and apply?

• The same: can change the pointer of this
• Different: call arguments are passed in independently, and apply arguments are passed in in the form of array elements

(18) What is the difference between null and undefined?

• null: no "object", the top of the prototype chain is null
• undefined: no "value"
  variable declaration is not assigned (including function parameters)
  the function does not specify the return value forcibly accept the return value of the function The
  property in the object is not declared

(19) Talk about the paging implementation process and the back-end paging process?

(20) What is MVC?

(21) Talk about the difference between http and https?

(22) How to limit the file upload type?

(23) What is the file upload process?

1. Get the file of your choice
2. Create a form object, submit the file as a form or operate the binary stream yourself
3. Store the file in the form object
4. Send an asynchronous request, upload the entire form to the server, and retrieve the corresponding data by yourself
5. Check whether the upload is successful, and execute the following business

(24) How to ensure the smoothness of the page?

(25) What is the difference between anti-shake and throttling?

(26) Identity authentication process?

(27) What are the ajax configurations?

(28) What are the commonly used APIs for arrays?

(29) What are the page performance optimizations?

(30) How to switch the drop-down menu?

(31) What are the commonly used APIs for strings?

(32) What are the commonly used features of ES6?

(33) What are the general configurations of webpack?

(34) Interpret the common configuration meanings in webpack

(35) What is proxy and why should proxy be configured?

(36) What is the difference between synchronous and asynchronous?

(37) Understanding of the event loop?

(38) How to implement address parameter transfer?

(39) What is the difference between prototype and prototype chain?

(40) Talk about what is scope?

(41) After uploading the avatar, if you cancel the modification of the uploaded picture, what should be done with the uploaded picture?

The pictures uploaded to the backend will be stored in temporary files and returned to the frontend for rendering and display. Only when the modification is confirmed, the pictures of the temporary files will be moved to the picture file directory, and the backend will regularly clean up the contents of the temporary files.

(42) What is debug mode?

(43) How to implement object deep copy?

(44) What is the difference between let and const?

(45) What is the difference between ordinary functions and arrow functions?

(46) Under the login status, how to ensure that the user does not need to log in?

(47) How does taken set the whitelist?

(48) Talk about what is the phenomenon of statement promotion?

(49) Talk about function hoisting and variables?

(50) What is the difference between set and map?

(51) How to deduplicate an array, how many methods do you know?

(52) What are the commonly used functions of mogoose?

(53) How to handle files in nodejs?

(54) What is the role of the spread operator?

(54) What is destructuring assignment?

(55) await and async features?

(56) What are the commonly used apis for promises?

(57) What is the realization idea of ​​sliding module?

(58) What is a promise?

(59) What are the common http states?

(60) Redraw and reflow concepts?

(61) Where is the token stored?

(62) How to ensure that you cannot enter the homepage without logging in?

(63) What is the difference between get and post?

(64) How to realize multi-table association?