Share an article about real front-end interview questions

I have accumulated some high-frequency interview questions and recorded them for students in need. This article focuses on basic interview questions. It mainly tests whether the foundation of front-end technology is solid and whether the front-end knowledge system can be connected in series.

Q: How to design a component encapsulation

1. The purpose of component encapsulation is to reuse, improve development efficiency and code quality
2. Low coupling, single responsibility, reusable performance, maintainability

Q: js asynchronous loading method

1. The rendering engine will stop when it encounters a script tag, wait until the script is executed, and continue to render downwards/
2 , defer means "execute after rendering", async means "execute after downloading", if defer has multiple scripts, they will be loaded in the order they appear on the page. Multiple async scripts cannot guarantee the loading order
3. Loading When setting type=module in the es6 module, asynchronous loading will not block the browser. The page is rendered before execution. You can also add the async attribute to execute the script asynchronously (using the top-level this equals to undefined syntax point, you can detect the current code Whether it is in the ES6 module)

Q: The difference between css animation and js animation
1. Code complexity, js animation code is relatively complicated
2. Control of animation when animation is running To a certain extent, js can animate, pause, cancel, terminate, but css animation cannot add events
3. Looking at the animation performance, js animation has an additional js parsing process, and the performance is not as good as css animation

Q : Two types of cross-site attacks, XSS and CSRF
1. XSS cross-site scripting attacks are mainly at the front-end level. Users insert attack scripts at the input level to change the display of the page or steal website cookies. Prevention method: don’t believe it. For all user operations, user input is escaped and js is not allowed to read and write cookies
2. CSRF cross-site request forgery, sending malicious requests in your name, filtering through cookies and parameters, etc.
3. We cannot completely eliminate attacks, we can only raise the threshold for attacks.

Q: Event delegation, purpose, function, writing method
1. Delegate events of one or a group of elements to its parent layer Or on outer elements
2. Advantages: reduce memory consumption, dynamically bind events
3. target is the most specific element that triggers the event, and currenttarget is the element to which the event is bound (generally equal to this in the function) )

Q: Thread, process

1. Thread is the smallest execution unit, and process is the smallest resource management unit
2. A thread can only belong to one process, and a process There can be multiple threads, but there is at least one thread

Q: Load balancing

When the system faces a large number of user accesses and the load is too high, it is usually used to increase the number of servers for horizontal expansion. , use clustering and load balancing to improve the processing capacity of the entire system

Q: What is CDN cache

1. CDN is a deployment strategy that deploys services like nginx according to different regions , static resources will be cached. When the front-end is optimizing the project, it is customary to add a hash value to the podium resource, and change the hash every time it is updated. When the hash value changes, the service will re-fetch the resource
2. (CDN) is a The strategically deployed overall system includes four elements: distributed storage, load balancing, network request redirection and content management

Q: How to write closures, the role of closures, and the shortcomings of closures

1. The purpose of using closures is to hide variables, indirectly access a variable, and call functions outside the lexical scope of the defined function.
2. The memory leak of closures is a bug of IE. Closures After the package is used, the reference to the closure cannot be recovered, resulting in memory leaks

Q: Cross-domain problem, who restricts cross-domain, and how to solve it

1. Caused by the same-origin policy of the browser Cross-domain
2. Important security mechanism for isolating potentially malicious files
3. jsonp, allowing scripts to load third-party resources
4. nginx reverse proxy (nginx service internal configuration Access-Control-Allow -Origin *)
5. CORS front-end and back-end collaboration to set request headers, Access-Control-Allow-Origin and other header information

Q: Common memory leak traps in javascript

1. Memory leaks will cause a series of problems, such as: slow operation, crashes, and high latency
2. Memory leaks refer to variables that you cannot use (cannot access) and still occupy memory space and cannot be used again. Utilize it
3. Unexpected global variables, these are variables that will not be recycled (unless set to null or reassigned), especially those variables used to temporarily store a large amount of information
4. Periodic functions always During operation, the processing function will not be recycled. jq will remove the event listener before removing the node
5. There is a reference to the DOM node in the js code. When the dom node is removed, the reference is still maintained.

Q: What is the principle of babel converting ES6 to ES5 or ES3?

1. It is a compiler, the input language is ES6, and the compilation target language is ES5
2 , Parsing: Parsing the code string into an abstract syntax tree
3. Transformation: Transforming the abstract syntax tree
4. Reconstruction: Regenerating the code string based on the transformed abstract syntax tree

Q: Promise simulation termination

1. When the new object remains in the "pending" state, the original Promise chain will terminate execution.
2. return new Promise(()=>{}); // Return the Promise object in the "pending" state

Q: What are the consequences of placing promise in try catch?
1. The error of the Promise object has a bubbling nature and will be passed backward until it is caught. In other words, the error will always be passed to the next one. catch statement capture
2. When an error is thrown in the Promise chain, the error information is passed backward along the link until it is captured

Q: Website performance optimization

1. In terms of http requests, reduce the number and volume of requests. The corresponding approach is to compress the project resources, control the DNS resolution of the project resources to 2 to 4 domain names, extract the styles of announcements, public components, sprites, and cache resources.
2. Compress resources, extract public resource compression, extract css, js public methods
3. Do not scale images, use sprite images, use font charts (Alibaba Vector Library)
4. Use CDN, throw away Useless cookies
5. Reduce redrawing and rearrangement, separate reading and writing of CSS attributes, it is best not to use js to modify styles, update dom offline, specify the size of the image before rendering
6. Optimize the js code level to reduce When calculating strings, use closures appropriately, and load js resources on the first screen at the bottom

Q: js custom event implementation

1. Natively provides 3 methods to implement customization Define the event
2. createEvent, set the event type, whether it is an html event or a mouse event
3. initEvent initialization event, event name, whether to allow bubbling, whether to block custom events
4. dispatchEvent trigger event

Q: Angular two-way data binding and vue data two-way data binding

1. Both are typical representatives of MVVM pattern development
2. Angular is implemented through dirty detection. Angular will put UI events, request events, settimeout and other delayed objects into the dirty queue of event monitoring. When the data changes, the $diget method is triggered to update the data and render the view.
3. Vue passes The data hijacking and publish-subscribe model implementation of data attributes can be roughly understood as consisting of three modules. The observer completes the hijacking of data, the compile completes the rendering of template fragments, and the watcher serves as a bridge to connect the two, subscribing to data changes and updating views.

Q: The difference between get and post communication
1. Get requests can be cached, but Post cannot
2. Post is a little safer than Get, because Get requests are included in the URL and will be cached. The browser saves history, Post does not, but it is the same in the case of packet capture.
3. Post can transmit more data than Get through the request body. Get does not have this technology.
4. The URL has a length limit, which will affect the Get request, but this length limit is stipulated by the browser, not RFC. Provisions
5. Post supports more encoding types and does not limit data types

Q: Have you studied some principles and mechanisms of webpack and how to implement them
1. Analyze webpack configuration parameters , merge the parameters passed in from the shell and configured in the webpack.config.js file to produce the final configuration result.
2. Register all configured plug-ins so that the plug-ins can monitor the event nodes of the webpack build life cycle and respond accordingly.
3. Start parsing the files from the configured entry file to build an AST syntax tree, find the files that each file depends on, and proceed recursively.
4. During the recursive process of parsing files, find the appropriate loader to convert the file based on the file type and loader configuration.
5. After the recursion is completed, the final result of each file is obtained, and the code block chunk is generated according to the entry configuration.
6. Output all chunks to the file system.

Q: The difference between ES6 module and CommonJS module

1. The CommonJS module outputs a copy of the value, while the ES6 module outputs a reference to the value.
2. The CommonJS module is Loaded at runtime, the ES6 module is the compile-time output interface
3. The module variable input by ES6 is just a symbolic link, so this variable is read-only, and an error will be reported if it is reassigned

Q : Module loading AMD, CMD, CommonJS Modules/2.0 specifications
1. The purpose of these specifications is for the modular development of JavaScript, especially on the browser side
2. For dependent modules, AMD is executed in advance , CMD is delayed execution
3. CMD recommends dependencies nearby, AMD recommends dependencies in advance

Q: Node event loop, js event loop differences

1. Node.js event loop Divided into 6 stages
2. In browser and Node environments, the execution timing of microtask task queue is different
In Node.js, microtask is executed between various stages of the event loop
On the browser side, microtask Execute
3 after the macrotask of the event loop is executed. Recursive calling process.nextTick() will cause I/O starving. The official recommendation is to use setImmediate()

Q: Shallow copy and deep copy issues
1. Deep copy and shallow copy are only for complex types such as Object and Array.
2. That is to say, a and b point to the same memory, so if any value is modified, the other value will follow. Changes, this is shallow copy
3, shallow copy, "Object.assign() method is used to copy the values ​​​​of all enumerable properties from one or more source objects to the target object. It will return the target object
4. Deep copy, JSON.parse() and JSON.stringify() give us a basic solution. But the function cannot be processed correctly

The above is the detailed content of Share an article about real front-end interview questions. For more information, please follow other related articles on the PHP Chinese website!