preface

I've been preparing for the interview, of course I have to do some work. Have a clear right company, and push the channel Anyway, will tell oneself must have a good preparation. Also say to oneself only allow success not to fail!Copy the code

If you are the interviewer, what are you going to ask?

Now I want to get into a practice test and test myself. How do I answer these classic questions? In the meantime, I'll be writing my own answers, what I think, how I answer. It's also a recognition of myself. Fortunately, I still have the opportunity to find out what I missed.Copy the code

CSS3

  • What is a box model? 
    The width and height of the container is the width and height of the content. In IE, the width and height of the container is the width and height of the contentCopy the code
  • Typical CSS3 layout 
    Display: Flex parent container jusiitngy: Center item-agin :atuo divfloatPosition Grid Layout Table layoutCopy the code
  • CSS3 elements are vertically and horizontally centered 
    Generally divided into two types: fixed width height and fixed width heightfloatBox {postion:absolute; with:100px; height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-50px; Translate margin to translate3D (-50%, translate3d) Jusiitngy: Center item- Agin: Center GridCopy the code
  • What are the new features of CSS3 
    Animations: Ground-glass background-position size Opacity opacity: Browser compatible with prefixes - its etc.Copy the code
  • Principles of CSS animation rendering 
    I'm going to talk a little bit about back-flow redrawing and then I'm going to talk a little bit about how the browser renders and the browser parses the HTML and renders a DOM tree and CSSOM parses the end of the node and the style of the node and when the element changes dynamically it will backflow and it will cost a lot of performance and backflow doesn't have to be redrawn but if you redraw it will definitely backflow and I'll give you an example Display :none Visbility Opacity display: None The node does not exist. In this case, the monitoring events that will lead to backflow redrawing of the node do not exist. The monitoring events of the node that exists do not exist but will be redrawn A little better than display: None: No backflow redraw performance Is best served by using Transform animations to enable CSS3 hardware acceleration (animations are ultimately rendered on the GPU) out of the document stream Can reduce reflux redrawCopy the code
  • BFC and its role 
    What is the BFC? Literally means block-level format context. The common root element for body is. Also, we often use Overflow to turn elements into BFC elements what is the property of BFC that margins overlap the following operations trigger BFCfloat
overflow
flex
opacity
Copy the code
  • CSS pseudo-elements 
    :before :after These two are often used to eliminate float :hover mouse move up and down :first-child selector :: pseudo-class of double quotes I forgotCopy the code

JavaScript

  • How JavaScript is compiled 
    Var a = 2; var a = 2; var a = 2;Copy the code
  • this 
    Js is running in the browser and it's pointing to Windows Node.js and it's pointing to gobal(I don't know how to spell it) this and that element calls to the scope of the current element so call applybindYou can change thisCopy the code
  • inheritance 
    ES6 has a constructor prototype chain _prto_ protyper class super () // Subclass inherits from the parent class class person{this.name ='fannie' 
}
class b exend person() {cuscreater(){} super() console.log(this.name)} constructor inheritancefunction Person(){
  this.name = 'fannie';
  this.age = 18
}

let a = new Person()
console.log(a.name)
Copy the code
  • closure 
    The typical answer is to call a function inside a function and the variables inside the function can't be accessed from the outside to form a closure while the inner function can access the outsidefunction golike() {let name = 'fannie'
    function getAge() {let age = 18
        return name + age
    }
    getAge()
}
let a = golike()
console.log(a)
Copy the code
  • scope 
    let a  = 1
function b() {var = 2 b1 console. The log (a) the console. The log (b1)} b () the console. The log (b1) b can access the parent scope But father scope can not access the son scope scope is like an apartment for a house to find items Can only be provided for Or you could go up to the top floorCopy the code
  • Prototypes and prototype chains 
    So every object has its prototype and it has its _proto_ and it has its prototype and that forms the chain a.rotyper ()Copy the code
  • Apply call bind 
    The apply parameter is a single call parameter is an array and the above are executed immediatelybindNot immediatelyCopy the code
  • event loop 
    Polling for eventsCopy the code

es6

  • Async /await Asynchronous operation
  • premise
  • class
  • deconstruction
  • AMD modular
  • Vue optimization

vue

  • Principles of bidirectional data binding
  • Component and the cords
  • What is componentization
  • The life cycle

webpack

  • The basic flow
  • Loader is different from plugin
  • Common plug-ins
  • Analyze how WebPack hot updates work
  • How do I configure multiple applications
  • Packing compression

Http

  • Three handshakes and four waves
  • Which four physical planes
  • Http2 multiplexing

The browser

Wechat small program

The front-end optimization