前端性能優化方案

1. 文件體積
        1. js打包壓縮，css壓縮
        2. 圖片壓縮 雪碧圖
            1. png jpg gif svg
                1. 色彩豐富的小圖用png
                2. 大圖用jpg
                3. webp須要兼容性
                4. svg 矢量，體積小 額外計算
        3. gzip    
    2. 減小文件請求次數
        1.文件打包
        2.緩存（http緩存）數據緩存
        3.懶加載
    3. 減小用戶和服務器的距離
        1.cdn
    http緩存（面試重點）
    1. 瀏覽器：獲取index.js
    2. 服務器：給你文件（）
        1. expires 過時時間 具體日期
        2. cache-control： max-age=時間戳 這些時間內不過時
    3.協商緩存
        1.if-modified-since：日期以後與沒有修改文件
        2:Etag:哈希值
        3.響應304用緩存
        4:都不行就從新加載
        
     1:大公司怎麼上線前端代碼
     2:直接文件替換（上線後，用戶緩存問題）
         1.<script src ="xx.js?v=1.0.1"/>
        2.<script src ="xx.js?v=文件的哈希值"/>（工程化 webpack）
     3.html和js上線前後順序，怎麼回滾，cdn
         1.html或者說模板 先上模板，致使加載老的js
        2.先上js，會致使老的dom結構和新的js
        <script src ="xx文件的哈希值.js"/>
        
     1.html不用不緩存
     2.js長期緩存，前端經過文件名控制緩存
     
     圖片懶加載
         1.增長屬性data-src
            1.let viewHeight=window.innerHeight||window.documentElement.clientHeight
            function loadImg(){
                for(let i=0;i<imgs.lenght;i++){
                    let dis=viewHeight-imgs[i].getBoundingClientReact().top
                    if(dis>0){
                    imgs[i].src=imgs[i].getAttribute('data-src')
                    }
                }
            }
      react-virtualized