preface

Recently PARTICIPATED in several interviews, accumulated some high-frequency interview questions, I divided the interview questions into two types, one is the basic questions: mainly investigate whether the foundation of front-end skills is solid, whether can connect the front-end knowledge system. One is the open question: look at the accumulation of business, whether they have their own thinking, thinking of the problem, there is no standard answer to this kind of question.

Basic questions

The answer to the question provides a thinking direction, the answer may not be correct and comprehensive, there are mistakes welcome to point out in the comments, common progress.

How to design a component wrapper

  1. The purpose of component encapsulation is to improve reuse, development efficiency and code quality
  2. Low coupling, single responsibility, reusability, maintainability
  3. Front end componentization design idea


Asynchronous loading of js

  1. The rendering engine stops when it encounters a script tag, waits until the script is finished, and continues rendering down
  2. Defer means “execute after rendering” and async means “execute after downloading”. If there are multiple scripts, defer will be loaded in the same order as they appear on the page. Multiple async scripts cannot guarantee the loading order
  3. Set type=module when loading ES6 module, asynchronous loading will not cause blocking browser, page rendering before execution, can add async property at the same time, asynchronous script execution (using the top-level syntax point this equals undefined, can detect whether the current code in ES6 module)


The difference between CSS animation and JS animation

  1. Code complexity, JS animation code is relatively complex
  2. When animation runs, to the extent of animation control, JS can make animation, pause, cancel, terminate, CSS animation can not add events
  3. Animation performance, JS animation has a JS parsing process, performance is not as good as CSS animation


XSS and CSRF two XSS attacks

  1. XSS cross-site scripting attacks are mainly at the front-end level. Users insert attack scripts at the input level, change the display of the page, or steal the cookies of the website. Prevention methods: Do not believe all the operations of users, escape user input, and do not allow JS to read and write cookies
  2. CSRF cross-site request forgery, sending malicious requests in your name, filtered by cookies plus parameters, etc
  3. We can’t eliminate attacks, we can only raise the bar


Event delegation, purpose, function, writing

  1. Delegate the events of one or a group of elements to its parent or outer element
  2. Benefits, reduced memory consumption, dynamically bound events
  3. Target is the most specific element that triggers the event, and currenttarGet is the element that binds the event (usually equal to this in functions).
  4. JavaScript event delegate details


Thread, process

  1. Threads are the smallest unit of execution and processes are the smallest unit of resource management
  2. A thread can only belong to one process, and a process can have multiple threads, but at least one thread


Load balancing

  1. When the system is faced with a large number of users and the load is too high, it usually expands horizontally by increasing the number of servers, and improves the processing capacity of the entire system by using clusters and load balancing
  2. How does server Cluster load Balancing work?


What is CDN cache

  1. CDN is a deployment strategy for deploying services such as Nginx based on different regions and caching static resources. During project optimization, the front-end used to add a hash value to the platform resource and change the hash value every time it was updated. When the hash value changed, the service would fetch the resource again
  2. (CDN) is a strategically deployed overall system, including distributed storage, load balancing, network request redirection and content management
  3. CDN_ Baidu Encyclopedia


How closures are written, what closures do, disadvantages of closures

  1. The purpose of using closures is to hide variables, access a variable indirectly, and call functions outside of the lexical scope in which they were defined
  2. Closure memory leak is a bug in IE. After the closure is used, the reference of the closure cannot be retrieved, resulting in memory leak
  3. What are closures in QUESTION of the Day JS?
  4. Experiments on memory leaks caused by closures


Cross-domain problem, who limits cross-domain, how to solve

  1. The same origin policy of the browser leads to cross-domain
  2. An important security mechanism for isolating potentially malicious files
  3. [jSONp, allowing scripts to load third-party resources]segmentfault.com/a/11…
  4. Nginx reverse proxy (nginx service internal configuration access-Control-allow-Origin *)
  5. Cors Sets the request headers, access-Control-Allow-Origin headers, and so on
  6. Iframe nested communication, postMessage


Common memory leak traps in javascript

  1. Memory leaks can cause a number of problems, such as slow performance, crashes, and high latency
  2. A memory leak is when variables that you don’t need (or can’t access) still occupy memory space and can’t be reused
  3. Unexpected global variables, which are not recycled (unless null is set or reassigned), especially those used to temporarily store large amounts of information
  4. The periodic function is always running, the handler is not recycled, and JQ removes event listeners before removing nodes
  5. There are references to DOM nodes in the JS code, which are maintained when the DOM node is removed
  6. Four common memory leak traps in JavaScript


What does Babel do to convert ES6 into ES5 or ES3 or something like that

  1. It’s just a compiler. The input language is ES6+ and the target language is ES5
  2. Official Babel works
  3. Parsing: Parsing code strings into abstract syntax trees
  4. Transform: Transforms the abstract syntax tree
  5. Rebuild: Regenerate code strings from the transformed abstract syntax tree


Promise to terminate

  1. The original Promise chain suspends execution when the new object remains in the “pending” state.
  2. return new Promise(()=>{}); // Returns a “pending” Promise object
  3. How to stop the Promise chain


What happens when you put a promise inside a try catch

  1. Errors on Promise objects bubble backwards until they are caught, meaning they are always caught by the next catch statement
  2. When an error is thrown in the Promise chain, the error message is passed down the link until it is caught


Website performance optimization

  1. In terms of HTTP requests, reduce the number of requests, the volume of requests, the corresponding approach is to compress the project resources, control the DNS resolution of the project resources in 2 to 4 domain names, extract the style of announcement, public components, Sprite images, cache resources,
  2. Compress resources, extract public resources compression, extract CSS, JS public methods
  3. Don’t zoom in, use Sprite, use font diagrams (Ali Vector Gallery)
  4. Use CDN and discard useless cookies
  5. Reduce redraw rearrangement, separate CSS properties from read and write, preferably do not change styles with JS, dom updates offline, specify image size before rendering
  6. Js code level optimization, reduce the calculation of strings, rational use of closures, the first screen js resource loading at the bottom


Js custom event implementation

  1. Native provides three ways to implement custom events
  2. CreateEvent sets the event type, whether HTML or mouse
  3. InitEvent Initializes the event, event name, whether bubbling is allowed, and whether custom events are prevented
  4. DispatchEvent Events are triggered


Angular bidirectional data binding and vUE data bidirectional data binding

  1. Both are typical examples of MVVM pattern development
  2. Angular does this through dirty detection. Angular puts UI events, request events, setTimeout, and other delayed objects into a dirty queue for event detection. When data changes, angular triggers the $diget method to update the data and render the view
  3. Vue is implemented through the data hijacking and publish and subscribe mode of data attributes, which can be roughly understood as composed of three modules. Observer completes the hijacking of data, compile completes the rendering of template fragments, and Watcher acts as a bridge connecting the two, subscribing to data changes and updating views


The difference between GET and POST communication

  1. Get requests can be cached, but Post requests cannot
  2. Post is a little more secure than Get, because Get requests are contained in the URL and will be saved by the browser. Post is not, but in the case of packet capture, it is the same.
  3. Post can use the Request Body to transfer more data than Get, which doesn’t have this technology
  4. Urls have a length limit that affects Get requests, but this length limit is browser-specific, not RFC specific
  5. Post supports more encoding types and does not restrict data types


Have you studied some principles and mechanisms of Webpack and how to achieve it

  1. Parses the webpack configuration parameters, merges the parameters passed in from the shell and configured in the webpack.config.js file, and produces the final configuration result.
  2. Register all configured plug-ins so that the plug-in listens for event nodes in the WebPack build life cycle to react accordingly.
  3. Parse the AST syntax tree from the configured entry file, find out which files each file depends on, and recursively continue.
  4. Find the appropriate Loader to convert files according to the file type and loader configuration in the process of resolving file recursion.
  5. After the recursion, the final result of each file is obtained, and the code chunk is generated according to the entry configuration.
  6. Export all chunks to the file system.


Differences between ES6 modules and CommonJS modules

  1. The CommonJs module prints a copy of a value, the ES6 module prints a reference to a value
  2. The CommonJS module is run time loaded, and the ES6 module is compile time output interface
  3. The module variable entered by ES6 is just a symbolic link, so the variable is read-only and reassigning it will report an error


Modules load AMD, CMD, CommonJS Modules/2.0 specifications

  1. These specifications are aimed at modularizing JavaScript development, especially on the browser side
  2. For dependent modules, AMD executes early and CMD executes late
  3. CMD advocates dependency nearby, AMD advocates dependency front


Node event loop, JS event loop difference

  1. The Node.js event cycle is divided into six phases
  2. The execution timing of microTask queues varies between browsers and Nodes
  • In Node.js, microTasks are executed between stages of the event cycle
  • On the browser side, microTask executes after macroTask in the event loop completes execution
  • The recursive call to process.nexttick () causes I/O medicine. SetImmediate ()


    • Shallow and deep copy problems

    1. Deep and shallow copies are only for complex types such as Object and Array
    2. That is, a and B refer to the same block of memory, so if you change any value in it, the other value will change. This is a shallow copy
    3. Shallow copy, the “object.assign () method is used to copy the values of all enumerable attributes from one or more source objects to target objects. It will return the target object
    4. Deep copy, json.parse () and json.stringify () give us a basic workaround. But functions can’t be handled correctly


    Open question

    The open questions mainly examine the candidates’ business accumulation, whether they have their own thinking, and the way of thinking about the question. There is no standard answer. But some of the questions are tricky, like: “What’s the best code you’ve ever seen? “It’s a good idea to prepare.

    1. Let’s start by introducing ourselves, talking about the technology stack of the project, and some of the problems encountered during the project
    2. From the whole, see your understanding of the project, the understanding of the framework and their own thinking
    3. Are there any difficulties encountered in the project? How to solve them
    4. How do you start from zero if you are in a startup (what framework to choose, what build tool to choose)
    5. Tell me about the technology stack you used in your project, what you were proud of, what you were good at, and what gave you a headache. How did you solve it
    6. In a business scenario, how to deal with the continuous iteration of products and the changes of requirements, and how to implement specific technical solutions
    7. What are your sources of learning
    8. Which framework do you think is better and what is better
    9. What do you think are the most difficult technical difficulties
    10. What’s the best code you’ve ever seen


    Author: themselves

    Source: segmentfault.com/a/119000001…