Summary of front-end interview questions:

1, JS basic problems

• Shallow copy and deep copy: – Shallow copy and deep copy: shallow copy and deep copy
• Promise: – promise
• Handwritten ajax:

   const promise =(params) = >{
    let {url,data={},methods,async=true,timeout=0} = params
    console.log('url,data,methods,async:',url,data,methods,async)
    const isUrlParams = url.indexOf('? ') > -1
    let paramsStr = ' '
    if( methods.toLowerCase()=='get') {if((typeof data == 'object') &&JSON.stringify(data)! ='{}') {for(let key in data){
                paramsStr+=` &The ${encodeURIComponent(key)}=The ${encodeURIComponent(data[key])}`
            }
            if(! isUrlParams){ paramsStr=paramsStr.slice(1)
                paramsStr="?" +paramsStr
            }
            data=paramsStr
        }
    }
    console.log('Parameter:',data)
    let xhr =new XMLHttpRequest()
    xhr.timeout=timeout>0? timeout:10000
    xhr.open(methods,url,async)
    xhr.setRequestHeader('Content-type'.'application/x-www-form-urlencoded')
    xhr.send(data)
   return new Promise((resove,reject) = >{
       console.log('promise-start')
        xhr.ontimeout=() = >{
            reject({stat:0.msg:'Network timeout'})
        }
        xhr.onreadystatechang=() = >{
            if(xhr.readyState==0) {console.log('Open method not called yet')
                console.log('statusText：',xhr.statusText)
            }
            if(xhr.readyState==1) {console.log('Open has been called but no request has been sent (send has not been called)')
                console.log('statusText：',xhr.statusText)
    
            }
            if(xhr.readyState==2) {console.log('Request sent (send called)')
                console.log('statusText：',xhr.statusText)
    
            }
            if(xhr.readyState==3) {console.log('Data returned by request received')
                console.log('statusText：',xhr.statusText)
            }
            if(xhr.readyState==4) {console.log('Ajax request complete! ')
                console.log('statusText：',xhr.statusText)
                if(xhr.status>=200&&xhr.status<300 || xhr.status==304) {// 304 indicates that the request content is unchanged and is read from the cache
                    resove(xhr.responseText)
                }else{
                    reject({stat:0.msg:'Request error, please try again! '})
                }
            }
        }
        xhr.onerror=error= >{
            reject(error)
        }
    })
} 
Copy the code

• Relationship between Async await Promise Generators: Relationship between Async await promise generators
• What methods does Number have
• Let var const
• The difference between Script defer and Async
• What is a variable object
• Talk about scope chains
• Talk about the prototype chain
• What are the ways of inheritance
• Design Mode: – Design mode: Design mode
• Talk about understanding EventLoop
• Cross-domain (cause, solution)
• How do I distinguish simple requests from complex ones
• Modular specification: commonjs amd CMD and es6 module, the difference between a es6 module to realize the principle of synchronous or asynchronous: www.cnblogs.com/shirly77/p/…

Blog.csdn.net/weixin_4310… www.jianshu.com/p/da97ec65d…

Modular specification: Modular specification

• What happens from entering the URL to loading the page

• What is the difference between sessionStorage, localStorage and cookie

• What’s the difference between POST and GET

• What is a precheck request

• MVC MVVM differences

• Event delegation

• The event bubbling

• async awit

• Several ways to iterate protocols and their pros and cons

• Array methods: Array methods: Design pattern

• Object methods

• String method

• Judgment prototype method

• How is data hijacking implemented

• Closures (handwritten closures)

• The call Apply bind arrow function can be used in this way.

• What problem does Bable solve

• The difference between set and map

• Design patterns

• Implementation principle of Scheame URL protocol (how to implement the lifting end capability)

• What are the basic data types

2,Basic CSS Problems

• Flex Layout: Overall properties and usage, Handwritten layout (fixed width on both sides, adaptive in the middle, Flex :1)

• Position in addition to the four commonly used properties, you also need to understand the cohesive layout

• Translate and Position which causes reflux redraw, why

• C3 what are the new properties

• Handwritten triangle

• Mobile terminal adaptation scheme

• Rem implementation principle and VW VH difference

• 1 pixel problem

• What is reflux redraw? What are the differences and relationships

• What is BFC, what are the factors that cause BFC, and what are the solutions

• Bilateral distance problem

• What are CSS selectors and what are their weights

• What compatibility issues have the distance solved on the mobile side

• Handwritten dither animation

• Implement a simple C3 animation

• What are the semantic word tags

• What are the layout methods

• How is Lottie animation implemented

• Browser Backstory: What happens when AN HTML page is rendered to the user

3,http

• Status code (FAQ: 301, 302, 303, and 304) : Status code: status code
• What are the types of cache policies and how are they implemented: Cache policy: Cache policy
• keep-alive
• What problems does HTTP2 solve, and what are the pros and cons
• The components of the returned packet
• What is the difference between HTTP and HTTPS

4,vue

• Responsive principle: Responsive principle: Responsive principle
• $set implementation principle: Implementation principle
• How is routing on demand implemented
• keep-alive
• Dom update mode
• How to use VUEX and its application scenarios
• Component communication mode
• Routing guard
• Implementation principle of V-Model
• Functions of the V-for key: Functions of the key: Implementation principle of nextTick
• What are the life cycles and what are they achieving
• $nextTick Implementation principle: nextTick implementation principle: nextTick implementation principle
• The difference between watch and computed: the difference between watch and computed: the difference between watch and computed

5,To optimize the

• What are the front-end optimization indicators? What are the front-end optimization indicators
• How to optimize the project
• DNS optimization: DNS optimization: DNS optimization

6,The front security

• Attack mode: Attack mode: Attack mode

7,Algorithm + handwritten interview questions

• Fibonacci numbers by hand: Fibonacci numbers by hand
• Handwritten to heavy
• Achieve fast row
• Bubble sort
• Binary tree
• Handwritten Promises handle interface concurrency
• Array weft drop by hand
• Handwritten array sorting
• Handwritten ajax
• Handwritten anti-shake throttling function: Handwritten anti-shake throttling function: handwritten anti-shake throttling function
• Handwriting implementation evenBus

Eight,WEBPACK

• What are the common plug-ins
• Realize the principle of

9,Small program

• The realization principle of small program
• How to implement the pull down refresh
• Several ways to jump to a page
• How to choose applets enhancement framework

10,Exam questions

• Homework to help:Homework help
• And who learn:And who learn
• Quick hand test:And who learn
• Interview questions:

Emit (' aaa ', 123) 1, Class EventEmitter {} Const ee = new EventEmitter() eem.on (' aaa ', () => {}) ee.emit(' AAA ', 123) 2 Output the var a = {fa: () = > {the console. The log (this)}, fb: function () {the console. The log (this)}} a.f (a.f) b (3). Write a closure 4. Implement var arr = [1, 2, [3, 4, [5, 6, [7, 8]]]] function flatArr (arr, level) {} example output: [1, 2, 3, 4, [5, 6, [7, 8]]]Copy the code

• Top interview question:

Shallow copy and deep copy; Js event loop; Promise; catch; thenCopy the code

• Event Loop Classic Interview questions:

Async function async1() {console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0) async1(); new Promise(function(resolve) { console.log('promise1'); resolve(); }).then(function() { console.log('promise2'); }); console.log('script end'); /* Command output: script start async1 start async2 promise1 script end async1 end promise2 setTimeout */Copy the code