The owner of the building worked for two and a half years and began to engage in Java. He began to learn front-end after the Spring Festival in nineteen nineteen and started front-end projects in April nineteen nineteen. The basic arrangement of the interview questions is as follows, later have the opportunity to slowly complete the answer, also welcome to provide answers.

The algorithm,

Front-end algorithm test is relatively simple, and many companies do not test, currently encountered: 1, flat array 2, longest non-repeating substring 3, maximum island 4, full permutation and combination 5, implement queue 6 with two stacks, and ask some sorting algorithm ideas, complexity, advantages and disadvantages, generally speaking, it is not difficult, after all, no company will let the front-end handwriting heap hahahahaha

Two, handwritten code questions

1, the regex converts the hexadecimal color to RGB 2, handwritten call, apply, and bind 3, handwritten instanceOf 4, and the function currization

function curry(fn, args = []) {
  return function(){
      let rest = [...args, ...arguments];
      if (rest.length < fn.length) {
          return curry.call(this,fn,rest);
      }else{
          return fn.apply(this,rest); }}}//test
function sum(a,b,c) {
  return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1) (2) (3)); / / 6
console.log(sumFn(1) (2.3)); / / 6
Copy the code

5, Promise and Promise. All handwriting, and how to realize the finally of Promise 6, handwriting reduce and reduce calculation of elements

var arr = [1.4.5.3.7.2]

Array.prototype.myReduce = function(fn,prev){
  let myArr=this
  for(let i=0; i<myArr.length; i++){if(prev===undefined){
      prev=myArr[i]
    }else {
      prev=fn(prev,myArr[i],i,myArr)
    }
  }
  return prev
}

console.log(arr.reduce((a,b) = >a-b),arr.myReduce((a,b) = >a-b))
console.log(arr.reduce((a,b) = >a-b,0),arr.myReduce((a,b) = >a-b,0))
Copy the code
function count(arr,val) {
  return arr.reduce((prev,item) = >{
    if(item==val){
      return prev+1
    }else {
      return prev
    }
  },0)}console.log(count([1.2.3.2.4.4.4.9].4))
Copy the code

Implement a function that removes a specified element (there may be more than one element) from an array, requiring the array to remain in place

function fib(n,first,second){
  if(n<=1) {return first
  }else {
    return fib(n-1,second,first+second)
  }
}
Copy the code

9, throttling and stabilization 10, handwriting eventBus 11, known add, realize sum

var add = function(a,b,fn){
  fn(a+b)
}

add(1.2.(r) = >console.log(r))

var sum = function(fn,... args){
  var tempSum = 0
  for(let i=0; i<args.length; i++){ add(tempSum,args[i],(result) = >{tempSum=result})
  }
  fn(tempSum)
}

console.log(sum((r) = >{console.log(r)},1.2.4.5.5.7))
Copy the code

The interviewer asked what Set was implemented with, I said Object.is, then he said can you implement it yourself, mainly NaN and +-0 judgment, +-0 I tried to use arithmetic shift to look at symbols, failed, then the interviewer said can divide +-0, judge the equality of plus and minus infinity. 13, lru

Write CSS questions by hand

1. Implement triangles

#triangle-up {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}
Copy the code

2, Handwritten adaptive two-column layout I started to write flex, then the interviewer asked if there were any more, I answered CalC (100%-100px), then he asked if there were any more, unexpectedly, later I thought he might want to ask BFC

4. Js foundation

1, es6 new prototype class super points to the parent object, the map and weakmap, set and weakset, arrow function and the general function of this point, the document. This points to the addEventListener (arrow function in the window, Target), Genrator and yield, Proxy and Reflect 2, js event loop, setTimeout is the time to wait to join the queue, add alert to setInterval, Promise and Aysnc and await, copied a read-code problem

let a;
const b = new Promise((resolve, reject) = > {
  console.log('promise1');
  resolve();
}).then(() = > {
  console.log('promise2');
}).then(() = > {
  console.log('promise3');
}).then(() = > {
  console.log('promise4');
});

a = new Promise(async (resolve, reject) => {
  console.log(a);
  await b;
  console.log(a);
  console.log('after1');
  await a
  resolve(true);
  console.log('after2');
});

console.log('end');
Copy the code

4, prototype chain, JS inheritance of six ways and advantages and disadvantages, also copied a reading code question

console.log('Hello World! ');
Function.prototype.a = () = > console.log(1);
Object.prototype.b = () = > console.log(2);
function A() {}
const a = new A();
a.a();
a.b();
Copy the code

5, Strong cache and negotiation cache, 304 status code 6, Cookie and localStorage, sessionStorage 7, XSS and CSRF attack 8, cross-domain mode, JSONP detailed principle, CORS common request and complex request difference 9, Typeof and instanceof, and Object. The prototype. ToString. Call (10), the flow of events, event bubbling and events captured 11, dom events, document. Ready and window onload 12, XHR 14, CMD and AMD, commonJS and ES6, require loading order, see the Little Red Book 15, rearrange and redraw and how to prevent rearrange and redraw 16, []==! []

Five, the webpack

1, The difference between loader and pluguin, execution sequence 2, the difference between CSSLoader and styleloader, the difference between BabelPolyfill and babelRuntime 3, the principle of Babel and ast tree and compilation 3, Static import to do treeshaking 4, Webpack optimization related, Codesplit, Treeshaking, Sourcemap and gzip 5, Webpack multi-entry configuration 6, cssmodule open 7, skeleton screen

Vi. Vue related

1, The difference between Vue and React 2, source code understanding, including initState, nextTick, set, computed, and Object.defineProperty, publish and subscribe mode, diff algorithm 3, Watch immediate and deep 4, The difference between VUe3 and VUe2, Proxy is not compatible with IE 5, vUE parent component lifecycle hook execution order 6, communication between components, vuex modularity, how to inform one module in another module 7, Hash and history principle and advantages and disadvantages 8, Route hook 9,vue load optimization 10, vue.component and Extend 11, array variation method implementation

Seven, CSS related

Flex: 0 1 flex: 0 3 BFC juejin.cn/post/692419… Rem layout 7, how to implement fonts less than 12px 8, link and import 9, how to clear float 10, make an element disappear, then answer display: None; Visible: hidden; And opacity: 0; There should be more

Eight, TS correlation

1, type and interface 2, optional chain

Nine, network related

1, ISO model and each layer of protocol 2, HTTP1.1 and 2.0 3, TCP and UDP, three handshake and four wave, why three handshake and four wave, why two MSL 4, HTTP and HTTPS, SSL principle does not know, then I say I guess RSA public key encryption private key decryption, And the interviewer says you guessed right… 5. What happens from entering url to rendering interface, classic question.

Ten, design questions, my nightmare, really not at all…

$dialog($dialog) $dialog(….) Call 3 to implement the ajax request wrapper, which is basically implementing an AXIos? Drop down to load more and then roll it up. How to reduce rearrangement and redraw? Delete cell 5 instead of deleting it. Interviewer: Do you tell me you can write it in half an hour? 6. Design a form similar to elementUI. 7.

Xi. Miscellaneous

1. Deployment related: Jenkins and Nginx, as well as the principle of CDN, asked what request the CDN sends to the master server, I didn’t find this later… 3. Echarts base level: I said WebGL, Canvas and SVG, and the interviewer didn’t seem very satisfied. I didn’t know what to say