Online uneven not to abandon the interview questions, this article from the shallow into the deep, let you do the interviewer, can distinguish the interviewee is not really something, but also can let you go to the interview intermediate front-end engineer more confidence. But remember to make reciting interview questions your only job search

  • The more open the question, the more can reflect the level of the answer, a good interview, not only can find the shortcomings of the interviewer, but also to find his shining points, but also to improve the interviewer’s own technology

1.CssandHtmlIn the first topic, please describe how you can make an element disappear in the window and center it vertically and horizontally, andFlexUnderstanding the layout

Standard answer: Baidu, of course, many, here do not elaborate, a good answer is:

  • So I’m going to list the vanishing elements,display:noneandvisibility: hidden;The difference between… andvueFramework of thev-ifandv-showCan be used with reflux and redraw to explain the difference

Reflux will inevitably cause redrawing, and redrawing will not necessarily cause reflux

Reflux (Reflow) :

When the size, structure, or attributes of some or all of the elements in the Render Tree change, the browser rerenders part or all of the document, a process known as reflux

  • The following will cause reflux:

  • First page rendering

  • The browser window size has changed

  • Element size or position changes

  • Element content changes (amount of text or image size, etc.)

  • Element font size changes

  • Add or remove visible DOM elements

  • Activate CSS pseudo-classes (e.g. : :hover)

  • Query certain properties or call certain methods

  • Some common properties and methods that cause reflux:

  • ClientWidth, clientHeight, clientTop, clientLeft

  • OffsetWidth, offsetHeight, offsetTop, offsetLeft

  • ScrollWidth, scrollHeight, scrollTop, scrollLeft

  • ScrollIntoView (), scrollIntoViewIfNeeded ()

  • getComputedStyle()

  • getBoundingClientRect()

  • scrollTo()

redraw

When the style change of an element in the page does not affect its position in the document flow (for example: color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it. This process is called redrawing.

Performance impact comparison:

The original source, thanks to the author

  • Lists scenarios where elements are vertically centered and the pitfalls of each scenario

16 intermediate schemes, thanks to the author

  • Speak outflexCommon scenarios, as wellflex 1What did

Flex layout by Mr. Ruan Yifeng

If the above questions are answered well, work hard on the redrawing and backflow sections. This is the basis of front-end performance optimization, which is the most important core foundation-skill point of the front-end and one of the most desirable bases for interviewers

2. You are rightThisYou know what? I’ve done it myselfcall,apply,bind?

50 linesjavaScriptCode to achieve call,apply,bind

This is a very basic skill point, to see how well you understand closures, function calls, and I think I wrote it fairly easily

3. How to reduce the number of redraws and backflows:

4. What do you know about front-end asynchronous programming

If the answer to this question is very perfect, it can be judged that the person has left the primary front-end engineer, the core of the front-end is asynchronous programming, this topic is also the most important basis to reflect the foundation of the front-end engineer is solid.

As usual, easy to difficult

Traditional timer, asynchronous programming:

SetTimeout (), setInterval (), etc. Disadvantages: When a lot of code is synchronized, tasks that are not determined by the asynchronous timer can be executed at a specified time. Such as: SetTimeout (()=>{console.log(1)},1000) So you can't print console.log(1) after 1s, it might be 2s or more. SetInterval is the same thing when you synchronize a lot of code, you don't make sure you're executing it at the same interval every time, and if you're animating, you might drop framesCopy the code

ES6Asynchronous programming for:

promise generator async

  • new promise((resolve,reject)=>{ resolve() }).then()....

– Cons: Still doesn’t get rid of the fallback function, although improved fallback hell

  • generatorThe function call next() executes the code contents of the next yeild, if passed as arguments, as the previous oneyieldThe return value of the

– Disadvantages: Not automated enough

  • async await
  • Only async functions can use await inside to turn asynchronous code into synchronous writing, but since async functions return a promise, it is also easy to create an async nesting hell

requestAnimationFrameandrequestIdleCallback:

Traditional javascript animation is implemented with a setTimeout or setInterval timer. But there have always been two problems with timer animation

  • The first one is that it is not easy to determine the animation cycle interval. If the setting is long, the animation will not be smooth and smooth, and if the setting is short, the browser’s redrawing frequency will reach the bottleneck. The recommended best cycle interval is 17ms (the refresh frequency of most computer monitors is 60Hz, 1000ms/60).

  • The second problem is that the second time parameter of the timer simply specifies how long it takes to add the animation task to the browser’s UI thread queue. If the UI thread is busy, the animation will not execute immediately. To solve these problems, requestAnimationFrame and requestIdleCallback have been added to H5

  • The requestAnimationFrame gathers all the DOM operations in each frame in a single redraw or backflow, and the redraw or backflow intervals closely follow the browser refresh rate

  • In hidden or invisible elements, the requestAnimationFrame will not be redrawn or reflow, which of course means less CPU, GPU, and memory usage

  • RequestAnimationFrame is a browser-specific API for animations. At run time, the browser automatically optimizes method calls and the animations are paused if the page is not active, saving CPU overhead

Performance comparison:

  • RequestAnimationFrame callbacks are executed on each frame and are high priority tasks, while requestIdleCallback callbacks are not necessarily low priority tasks.

  • The web is drawn frame by frame in the browser. A FPS of 60 is generally considered to be smooth, while a single-digit FPS is considered to be the user’s perception of a lag. So what does the browser do in a frame?

  • The frame contains user interaction, JS execution, requestAnimationFrame invocation, layout calculation, and page redrawing.

  • If there are few tasks to perform in a frame and the tasks are completed in less than 16ms (1000/60), the frame will have a certain amount of idle time, which can be used to perform the requestIdleCallback callback, as shown below:

5. Describe the browserEventloopandNode.jstheEventloop

The browserEventLoop

I don’t want to explain too much. Look at the picture

Node.jstheEventLoop

Special note: most onlineNode.jstheEventLoopInterview questions, will haveBUGIf the amount of code and computation is too small, it is likely that the timer will run out of time and be executed before the code of the microtask is executed

6. The closure andV8Garbage collection mechanism:

The basic principle of JS garbage collection mechanism is:

  • The garbage collector finds variables that are no longer in use and frees their memory, which it does periodically at fixed intervals.

  • The garbage collection strategy of V8 is mainly based on the generational garbage collection mechanism. In V8, the memory is divided into the new generation and the old generation. The objects of the new generation are those with short life time, and the objects of the old generation are those with long life events or resident memory.

  • The overall size of the V8 heap is equal to the memory used by the new generation plus the memory used by the old generation, and can only be specified at startup, meaning that it cannot automatically expand at run time, and if the limit is exceeded, a process error will occur.

Scavengealgorithm

  • Be insane. On the basis of generation, the Cenozoic object recycles garbage mainly by Scavenge. In the implementation of Scavenge, it mainly adopts a copy method — Cheney algorithm.

  • The Cheney algorithm splits the heap in two, with the space in use called the From space and the space in idle called the To space. When an object is allocated, it is first allocated in the From space.

  • When garbage collection begins, the living objects in the From space are checked and copied into the To space, while the space occupied by non-living objects is freed. After the replication is complete, the roles in the From space and To space are reversed.

  • When an object survives multiple copies, it is considered a long-lived object and is then moved to the old generation and managed using a new algorithm.

  • In another case, if an object is copied into the To space and the To space exceeds 25%, the object is directly promoted To the old generation space.

Mark-clean and mark-clean algorithms

  • For the objects in the old generation, mark-clean and mark-tidy algorithms are mainly adopted. Exploiture. As with the tag. Compared to the Scavenge algorithm, tag exploiture does not split a memory space in half. Tag exploiture marks a living object during the tag phase, and clears an untagged object during the reclaim phase.

  • Tag defragmenting is to solve the problem of memory fragmentation after the tag is cleared.

Delta mark (Incremental Marking) algorithm

  • All three algorithms require that the executing JavaScript application logic be suspended until garbage collection is complete and then resumed. This behavior is called stop-the-world.

  • In the generational collection of V8 Cenozoic, only the Cenozoic generation is collected, and the Cenozoic generation is usually configured to be small and has fewer surviving objects, so the effect of total pause is small, whereas the reverse is true for the old generation.

  • In order to reduce the pause time caused by all the old full-heap garbage collections, V8 divides the marking process into sub-marking processes, alternating the garbage collection tokens with the JS application logic until the marking phase is complete.

  • With incremental marking improvements, the maximum pause time for garbage collection can be reduced to about a sixth of that.

A memory leak

  • Memory Leak refers to a situation where the dynamically allocated heap Memory in a program is not released or cannot be released for some reason, resulting in a waste of system Memory, slowing down the running speed of the program and even causing the system to crash.

  • Common scenarios for memory leaks:

  • Cache: None of the data in memory has been cleared

  • Scope not released (closure)

  • Invalid DOM reference

  • Global variables are not necessary

  • Timer not cleared (synthesized events in React, and binding differences between native events)

  • Event listener for clear

  • Memory leak optimization

7. Which communication protocols are you familiar with, their advantages and disadvantages?

Communication protocol complete solution

  • My article goes into great detailHttp1.0 http1.1 Http2.0 HTTPS WebSocketSuch agreement

8. From the inputurlAddress bar, what’s going on? Here’s how to optimize performance:

Performance optimization incomplete manual

How to optimize your React Mega app

  • These two articles basically cover the basics of front-end performance optimization, and I’ll do a later column.

9. Browser cache implementation, please introduce:

1. Preload, prefetch, DNS – prefetch, etc

What is the preload

  • The benefits of using the preload directive include:

  • Allowing the browser to set the priority of resource loading thus allows front-end developers to optimize the loading of specified resources.

  • Gives the browser the ability to determine the type of resource, so it can tell if the resource can be reused in the future.

  • The browser can determine whether the request complies with the Content Security Policy by specifying the AS attribute.

  • The browser can send the appropriate Accept header based on the type of resource (such as image/webp).

Prefetch

  • PrefetchIs a low-priority resource tip that allows the browser to retrieve resources in the background (when idle) that may be used in the future and store them in the browser cache. Once a page loads, it starts downloading other resources, and when the user clicks a connection with Prefetched, it can immediately load the content from the cache.

DNS Prefetching

  • DNS Prefetching allows the browser to run DNS resolution in the background when the user accesses the page. This way, DNS resolution is completed by the time the user clicks on a link, thus reducing latency. You can add rel=”dns-prefetch’ to the attribute of a link tag to do DNS prefetching on the specified URL. We recommend that Google Fonts, Google Analytics and CDN handle this.

2. Servece-worker,PWA progressive Web application

PWA document

3. The localstorage and sessionstorage, cookies, session and so on. Browser session storage and persistent storage 4. Browser cache implementation mechanism implementation

10. What is the same origin policy, cross-domain solutions,cookieCan you cross domains?

Cross-domain solution

Q: Why do cross-domain problems occur?

A: The browser rejects cross-domain requests due to the same origin policy.

  • Note: Strictly speaking, browsers do not reject all cross-domain requests, but actually reject cross-domain reads. The browser’s same-origin restriction policy works like this:

  • Generally, browsers allow cross-origin writes, such as links, redirects;

  • Generally, browsers allow cross-origin embedding of resources, such as IMG and Script tags;

  • Generally, browsers do not allow cross-origin reads.

Q: When does cross-domain count?

A: Non-same-origin requests are cross-domain. Origin – If two pages have the same protocol, port, and host, then they are the same origin.

Q: Why are there cross-domain requirements?

  • A: Scenario — After the project is servized, the services of different responsibilities are dispersed in different projects. Often, the domain names of these projects are different, but one requirement may correspond to multiple services. In this case, the interfaces of different services need to be invoked, so cross-domain occurs.

  • Methods: the json, CORS, postmessage webscoket, reverse proxy server, etc.

The last

  • People feel good, you can point to like and follow

  • By the way, pay attention to my public number: front peak