前端性能优化方案

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