前端性能优化方案

 [ 优化方案地址](https://mp.weixin.qq.com/s/xjtUK9yZVIK9-OL_WxDH7Q)

    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长期缓存，前端通过文件名控制缓存
     3.减少对DOM操作，主要是减少DOM的重绘与回流
     
     图片懒加载
         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