JS performance optimization

performance optimization

One 、 Back to the classic interview question Address field input url Press enter, what happened during this period

• Input
  URL: url - Uniform resource locator

    // http://www.zhaowa.com - http agreement 
    //  Questioning ： http  And  TCP
    // 1. http -  Application layer network protocol  < = > TCP -  Transport layer network protocol 
    // 2.  relation ： http  be based on  TCP Connect  => http request 、 send out 、 To break off 
        //  Optimization point ：1.0 1.1 2.0
        // => UDP fast  vs TCP steady 
        // => keep-alive -  keep TCP Continuous and unimpeded  -  You don't have to establish connections over and over again 
        // => 2.0 Multiple concurrent requests reuse the same path  -  Multiplexing path , No concurrent restrictions 

    // 3. http -  No state  < = > TCP -  A stateful 
        //  Optimization point ：
        // => socket  Connect , Encapsulated TCP. Let's apply , Make it easier to use calls 

    // https://www.zhaowa.com - https agreement 
    //  Questioning ： http  and  https
    // 1. https = http + SSl(TLS) =>  be located TCP Protocol and various application layer protocols 
    // 2.  Realization principle  -  Schematic diagram 
    // 3. HTTPS Multiple connections ： Causes the network request to load longer ; Increase overhead and power consumption 
        //  Optimize ：
        // =>  Merge request   A long connection 
        
    //  Middle layer   When integrating requests  -  exception handling 


    // file:///C:/Users/class/zhaowa/document  Local file directory address , Only on this machine 

• Domain name resolution

    // 1.  Browser cache  -  The browser will cache DNS A span 
    // 2.  System cache  -  Cache not found in the system  -> HOST
    // 3.  Router cache  -  Routers at all levels cache domain name information 
    // 4.  Cache information of local sites of operators  - partner
    // 5.  Root domain server 
        //  Optimize ：
        // => CDN - Content Delivery Network
        // 1.  Multiple hosts can be configured for the same host IP Address 
        // 2. LB -  Load balancing 

        // =>  cache  =>  All levels of cache  =>  Browsers distinguish between caches 

• web The server

    // apache、ngnix
    // 1.  Receiving request  =>  The code passed to the server 
    // 2.  Through reverse proxy  =>  Pass to other servers 
    // 3.  Different domain name  =>  Pointing to the same direction ip Server for  => ngnix Domain name resolution  =>  Boot to different service listening ports 

service involves network optimization

• Handwriting concurrency - QPS

    //  interview ： Concurrent optimization  10 A request , Due to background or business requirements, only three can be executed at the same time 
    //  analysis ：
    //  Input ：promise Array 、limit Parameters 
    //  Storage ：reqpool -  Concurrent pool 
    //  Ideas ： Insert  +  perform 
    function qpsLimit(requestPipe, limitMax = 3) {
    
        let reqPool = []
        let reqMap = new Map()

        //  Put... Into the concurrency pool promise
        const add = () => {
    
            let _req = requestPipe.shift()

            reqPool.push(_req)
        }
    
        //  Execute the actual request 
        const run = () => {
    
            if(requestPipe.length === 0) return
            //  When the pool is full, after the departure , direct race
            let _finish = Promise.race(reqPool)

            _finish.then(res => {
    
                //  Make one id Arrangement 
                let _done = reqPool.indexOf(_finish)
                reqPool.splice(_done, 1)
                add()
            })
            run()
        }

        while(reqPool.length < limitMax) {
    
            add()
        }
        run()
    }

When the browser renders

• Browser execution order
  Thread ：HTML => DOM + CSSOM => renderTree + js => layout => paint
  regional ：
  repaint - Change the text 、 Color, etc. Exhibition
  reflow - The geometry of the element has changed

=> Optimization point ： Reduce repaint, avoid reflow
=> display: none => reflow; visibility:hidden; => repaint

When the script executes - JS

mark & sweep => Touch mark , Lock empty 、 Erase directly without touching

    //  Memory allocation ： Declare variables 、 function 、 object 
    //  Memory usage ： Read and write memory 
    //  Memory free 

    const zhaowa = {
    
        js: {
    
            performance: 'good',
            teacher: ' Yun Yin '
        }
    }

    //  Establish a reference relationship 
    const _obj = zhaowa

    //  The reference source has been replaced  -  Not yet gc
    zhaowa = 'best'

    //  Go deep into the hierarchy and make references  -  Not yet gc
    const _class = _obj.js

    //  The reference party replaces  -  Not yet gc
    _obj = 'over'

    // gc  complete 
    _class = null
    
    // => 1.  Object level , It should be flat rather than deep  2.  Deep references are best copied , Or destroy it directly after use  3.  Avoid circular references 
    function traverseTree(node1, node2) {
    
        node1.parent = node2;
        node2.children = node1;
    }

    //  Memory leak 
    //  Global variables... Inexplicable 
    function foo() {
    
        bar1 = ''
        this.bar2 = ''
    }

    //  Unclean timer 
    setInterval(() => {
    
    }, 1000)

    //  Closure after use 
    function zhaowa() {
    
        const _no = 1
        return {
    
            number: _no
        }
    }

Package configuration optimization

    // 1.  Lazy loading  -  It is unnecessary to load 
    // 2.  Introduce on demand  -  It is unnecessary to introduce 
    // 3.  To withdraw from the public  -  Merge common items with the same items