This article begins to summarize the high-frequency questions for the spring 2019 front-end interview. It will be presented in the form of question type + ask method/test point + reference answer. If there are any mistakes or omissions, I hope you will correct them in time.

A closure

The examination site:

What is a closure

What closures do (pros and cons, usage scenarios)

Hand write a closure

Definition (as I see it) : A closure is a functional phenomenon that reads variables inside a function outside of it. It is a bridge between the inside and outside of a function.

Benefits: Reads variables inside a function and keeps the value of the variable in memory. The function is not released after execution

Disadvantages: Resident in memory, will increase the amount of memory, improper use will cause memory leaks; In addition, the processing speed of JS closures will be slower than that of ordinary functions, and excessive use of closures will also reduce script performance.

Solution: Delete all unused local variables before exiting the function

Use scenarios/handwritten closures:

Vernacular explanation:

There’s a functionfn, it has common propertiesa(ordinary variables), also have function-type attributesfn2. According to the scope rules of JS, the external function wants to fetch directlyaYou can’t get it, and FN2 can easily get ita.

So we can go throughfn2The bridge gets the targetaAt this timefn2The function is calledclosure


Here’s a basic premise to note: f n Must be f n 2 function r e t u r n Come out, or the closure implementation fails! \color{#FF3030}{there is a basic premise that needs to be noted: fn must return the fn2 function, otherwise the closure implementation fails! }

Bring a chestnut with both hands:

function fn(){ var status = '11'; Return {Arrive:function(){status = 'Arrive '; }, Lost:function(){status = 'Lost '; }, getStatus:function(){ return status; } } } var shunfeng = fn(); console.log(shunfeng.getStatus()); //11 shunfeng.Lost(); console.log(shunfeng.getStatus()); Var shunfeng2 = fn(); console.log(shunfeng2.getStatus()); // The package has been lostCopy the code

When fn is called again, the state of the express is still ‘express lost’ and has not been initialized to an empty string. This is how closures are actually used: I want to preserve a unique state that will persist even after the function is executed.

Clear closure: Color {#FF3030}{Clear closure:} Clear closure: The status variable is still “express lost” because the current shunfeng is still valid and still referring to it, and the closure can be cleared by breaking the reference.

shunfeng = null; var shunfeng2 = fn(); console.log(shunfeng2.getStatus()); / / 11Copy the code

The use of closures is a matter of opinion, and the examples I’ve given are fairly elementary, so you can try them out for yourself.

Lest I mislead you, here is teacher Ruan Yifeng’s closure interpretation:Learn Javascript closures

Two. Front-end performance optimization

This is the most common question asked in almost every interview.

Q:

  • What do you know about front-end performance optimizations
  • Performance optimizations you’ve done at work
  • Can you do this without affecting performance
  • Is there a way to write this to improve performance
  • Answer this question in terms of performance
  • …

Obviously, front-end performance optimization is getting more and more attention, and current iterations of popular technologies are also around performance. However, the scope of this question is too wide, and I did not answer it well in the interview. I checked a lot of information on the Internet and gave reference answers from the following aspects:

1. Reduce HTTP requests (this optimization is the most obvious)

1) Picture map, which allows multiple urls to be associated with an image, with the target URL depending on the location on the image that the user clicks. 2) Sprite figure 3) Merge JS and CSS files 4) reduce HTTP request headers 5) Configure multiple domain names and CDN acceleration 6) Use cache (HTTP cache, browser cache, application cache) 7) optimize cookiesCopy the code

Reference: segmentfault.com/a/119000000…

2.HTML

1) Reduce the number of DOM elements: The presence of a large number of DOM elements in a page slows down the efficiency of javascript traversing the DOM. In particular, minimize the use of iframe, which is the most energy-consuming DOM element and blocks onload events. 3) Reduce unnecessary nesting and make it as flat as possible, because when the browser compiler encounters a tag it starts looking for its closing tag and can't display its content until it matches, so opening the page is particularly slow when there is a lot of nesting.Copy the code

More full HTML performance optimization reference: www.cnblogs.com/zzhui/p/504…

3.CSS

Keywords: selectors, high-consumption style properties, inheritance, hierarchy, compression…

www.cnblogs.com/heroljy/p/9…

Baijiahao.baidu.com/s?id=160325…

Tips: Rearrange and redraw will be mentioned when answering these two questions. Every answer you give is likely to be the next question the interviewer will ask you. If you really can’t think of anything at the time, avoid it and choose a few answers that are often used in real work. If you memorize the whole thing, it will be a bit fake.

3.JS

1) Reduce lookups of global variables. Because global variables are at the top of the scope chain, frequent lookups cost performance.
Here's an example:Copy the code
var globalVar = 1; function myCallback(info){ for( var i = 100000; i--;) { globalVar += i; // Each access to globalVar requires a search to the top of the scope chain, in this case 100000 times}}Copy the code
Optimization:Copy the code
var globalVar = 1; function myCallback(info){ var localVar = globalVar; for( var i = 100000; i--;) { localVar += i; // Access to local variables is the fastest}}Copy the code
2) Carefully use with timer
3) Optimize the cycle
4) Less DOM manipulation
5) String stitching

More and more complete (I won’t be a porter) :

www.cnblogs.com/cnblogs-jcy…

www.cnblogs.com/wxiaona/p/5…

Blog.csdn.net/lululul123/…

www.cnblogs.com/MarcoHan/p/…

4. Server optimization

1)CDN: Spreading website content to multiple servers in different geographical locations can speed up the download speed. 2)GZIP compression 3) Setting ETags: ETags (Entity Tags) is a mechanism used by Web servers and browsers to determine whether content in the browser cache matches the original content in the server. 4) Flush buffers ahead of timeCopy the code

5. User experience

1) preloading, lazy loading 2) browser cache, application cache 3) detail design (full/reverse full/auto complete... All you can think of)Copy the code

Note: about the front-end performance optimization I look up and collect the information is far from enough, I mentioned here is not complete, we collect it by ourselves (when I collect the full update will inform you, thank you)

Attached is an Ali’s answer:Here’s what you should say when an interviewer asks you how to optimize your performance

Finally:

I am so tired. I will write here today and update it tomorrow. After all, I have many topics to share

Fresh out of the interview questions, welcome to move to read: program yuan interview high-frequency questions summary (two)

If you find something wrong, please point it out in time. I will correct it in the first time so as not to mislead others. Thank you