前端常见的性能优化

Posted 2021-03-09 jcdxh

前端常见的性能优化

1.减少HTTP请求次数和请求的大小

• 雪碧图（图片精灵）
• 图片base64 （webpack中可以配置）
• 尽量使用字体图标或者SVG等矢量图
  • 减少HTTP请求次数或者减少请求内容的大小
  • 渲染更快：因为它们是基于代码渲染的，而对于位图（png/jpg/gif）是需要先把图片编码再渲染
  • 不容易失真变形
• 图片懒加载（延迟加载）
• 音频取消预加载
  • preload = ‘ none‘ 这样可以增加第一次渲染页面的速度，当需要播放的时候在加载
• 再客户端和服务器进行信息交互的时候，对于多项数据我们尽可能基于json格式来进行传送（XML格式要比JSON格式要大）
• 用WebSocket代替ajax轮询实现消息推送
• 把页面中的css/js/图片等文件进行合并压缩
  • 争取css和js都只能导入一个（webpack可以实现自动合并压缩）
  • 对于图片自己找工具先压
  • 还可以使用服务器的gzip压缩

2.建立缓存机制

• DNS缓存
• 把不经常更改的静态资源做数据缓存（一般做的是304或者ETAG等协商缓存）
• 强缓存和协商缓存（304）
• 离线存储（manifest）
• 有钱就做CDN (地域分布式服务器)，还有一个财大粗气的方式：加服务器
• 建立TCP长连接
• ....

3.代码上的优化

• 减少DOM的重绘与回流

• 再js中减少闭包的使用

  • 1.栈溢出:死递归 
    function func（）{
        func（）
    }
    func（）  //不断自己执行自己
    解决方法：
    function func（）{
       setTimeout(func,0);   
    }
    func（）//利用了异步操作的特性
    
    2.相互引用:引用类型之间的相互调用，形成嵌套式内存
    let obj1={
        name:'obj2'
    }
    let obj ={
        name:'obj2',
        x:obj1
    }
    obj1.x = obj2

• 避免使用iframe（因为iframe会嵌入其他页面，这样父页面渲染的时候，还要同时把子页面也渲染了，渲染进度也会变慢）

• 低耦合高内聚（基于封装的方式，减少页面中的冗余代码，提高代码使用效率）

• 尽可能使用事件委托

• 函数的防抖与节流