preface

The interview will be held at 20:00 on May 7th

I went to the interview room in advance and waited half an hour, anxious…

It was a fight between boxers and boxers. Wuhu, take off 🤓🤓!!

To introduce myself

The introduction phase of the interview is over after the introduction of the person, highlights and project experience.

Ps: Here through their own words successfully attracted the attention of the interviewer to the direction of project optimization, after 2 minutes of self-introduction, the interviewer should read the resume, is to achieve the expectations of their goals.

Resume relevant

q: Which project impressed you most? What’s the hard part? How was it solved?

Ps: here answer in the proper moment, because self introduction, has guided the interviewer, so ~ hey hey hey ~ small interviewer, see me touch you on the end, let you proud jiao.

WebPack

q: What is the difference between Loader and Plugin?

  • LoaderLoader.WebpackTreat all files as modules, butWebpackNative is parsed onlyJavaScriptFile, if you want to package other files as wellLoader. soLoaderThe function is to makeWebpackYou have load and parse nonJavaScriptDocument capability;
  • PluginPlugins.PluginYou can extend theWebpackFeatures that allowWebpackFlexibility. inWebpackA number of events are broadcast during the lifecycle of the operation,PluginYou can listen for these events and pass them at the right timeWebpackThe supplied API changes the output.

Ps: Then there are with this question and combined with the project said about 10 minutes, the beginning of the interview is good.

qWhat are the functions of bundles, chunks, and modules in WebPack?

  • bundleIs made up ofWebpackA packaged file;
  • Chunk Code block. A chunk consists of multiple modules and is used to merge and split code.
  • moduleIs a single module under development atWebpackA module corresponds to a file,WebpackIt will be configuredentryStarts to find all dependent modules.

PS: did not answer, the interviewer said three words together, I did not understand, thought that they do not understand, afraid to say then deduct points, my state of mind has a subtle change. After the interview, I asked the interviewer and realized that the question was about these three points.

qLess Indicates the Css conversion process

A: The less module uses the less-loader in the Webpack to escape the less file to the Css file

Less Converts links of the Css official principles

Ps: I finished my mind is empty, this question I killed no, the basic to this nearly 17 minutes. It’s time for the next stage.

WebpackSummary: HereWebpackThere’s some preparation, but it’s very inadequate becauseWebpackRelated to say about 17 minutes or so, so at that time the feeling is ok, but the text description seems to look for unilateral abuse

Write a topic

The isInViewport(DOM) function is used to determine whether the DOM element is located in the viewport

function isInViewport(dom){
    let viewPortHeight = window.innerHeight || document.documentElement.clientHeight 
    let viewPortWidth = window.innerWidth ||  document.documentElement.clientWidth
    let {
        top,left,right,bottom
    } = dom.getBoundingClientRect()
    
    return (
        top >= 0 &&
        left >= 0 &&
        bottom <= viewPortHeight &&
        right <= viewPortWidth
    );
    // The interviewer asked me to stop before I finished writing.
}
Copy the code

Ps: The first time I wrote here is actually not this way to write, the first time I did not consider the width, after the interviewer reminded me to optimize this way.

The role of getBoundingClientRect ()

Gets a collection of the positions of an element relative to a window. We have top, right, bottom, left, and so on.

Hand-written summary: That’s it? Huh? Is this it? With a simple guide, the interviewer will ask me what I want him to ask.

ES6 modules and CommonJS

COMMONJS and ES6 module differences

  • CommonJS is a shallow copy of a Module. ES6 Module is a reference to a Module. ES6 Module is read-only only and cannot be changed.
  • The import interface is read-only and cannot be modified. You cannot change the pointer to the variable, but you can change the pointer to the variable. You can reassign commonJS (change the pointer to), but assignment to ES6 Module will compile error.

Ps: here I answer the prevaricant, because I can’t ah, then meituan interview exam this question, again.

Tell me what the output is? On the topic

// a.js
var a = 1;
setTimeout(() = > {
    a = 2;
}, 2)

module.exports.a = a;


// main.js
const a = require('./a').a;

console.log(a);

setTimeout(() = > {
    const b = require('./a').a;
    console.log(b);
}, 100);
Copy the code

Answer :1,2 said a lot of prevarications certainly wrong, momentum on lost. The real answer is shown here

Ps: the picture is the real answer, the principle said right, but I did not understand, according to the once crater theory, I TM completely did not preview this question 😂😂😂, dang!!

Algorithm problem

You have a jumble of integers, and now the task is to reorder them so that they fit into the above sequence and output the results

Background:

  • Suppose we take a number x and do any of the following:
  • A: willxDivided by the3If it can be3In addition to)
  • B:xMultiplied by the2
  • After each operation, write down the results. If you start at 9, you get a sequence

Example:

Input: ",8,6,3,12,9 [4] "output:,3,6,12,4,8 [9] : [9,3,6,12,4,8] = > 9/3 = 3 - > 3 * 2 = 6 - > 6 * 2 = 12 - > 12/3 = 4 - > 4 * 2 = 8 input: "[0] 3000900 output:" [0] 9000300 input: "[4, 2]" output: [2, 4] input: ",6,2 [4] "output: 4-trichlorobenzene [6]Copy the code

Ps: To tell you the truth, when the interviewer made the question, MY heart was like: I must win this question, really when I LeetCode white brush? I don’t believe you can put me seconds, the interviewer questions finished, I meng, read did not read, stabbed that I know what is young, I expanded, I floated, MY person silly.

After the interview for help a certain byte big guy (fengshen), he gave me a solution, AFTER I saw, MMM ~ uneven ~~

Floating point Numbers

Why 0.1+0.2! = 0.3

Computers store data in binary, so when a computer calculates 0.1+0.2, it’s actually calculating the binary sum of the two numbers.

What’s the binary for 0.1? What’s the binary for 0.2

What?? What what?? .

Decimal binary conversion function

var num = 100;
console.log(num.toString(2));

Copy the code

Ps: function I did not write up, the first question I wordy for a long time to answer to the point, because I learned in school is UI major, so these are not so, or their own not enough effort.

Browser Principles

What is cross-domain

Violation of the browser same-origin policy is called cross-domain. The same-origin policy means that the protocol, domain name, and port must be the same

The solution

  1. JSONP
  2. postMessage()
  3. websocket
  4. Node Middleware Broker
  5. cors
  6. Nginx reverse proxy
  7. window.name + iframe
  8. location.hash + iframe
  9. document.domain + iframe

The advantages and disadvantages

Can not answer, I have not used ah, even the understanding is from the written meaning of hard back

Ps: It’s a pity that every time I almost think I can talk for an endless time, there will always be some problems I haven’t encountered, or the depth of knowledge is not enough.

Processes and Threads

A process is the smallest unit of resource allocation, and a thread is the smallest unit of CPU scheduling

Ps: Such an abstract answer is not satisfactory, including myself, I tried to guide the interviewer to answer within my proper knowledge system, unfortunately, the interviewer asked me to explain, I have nothing to continue to answer, like a squeezed man.

conclusion

At the end of the interview, starting with algorithm problems, I gradually changed from a boxer to a sandbag, and I realized that there were more than just technical differences. But, I don’t mind hey hey, this kind of interview, after is to earn, but I don’t lose. Unfortunately, byte douyin this half a year is not to get my potential. Regret for a cry. Pity the bytes.