zoukankan      html  css  js  c++  java
  • 前端常见的性能优化

    前端常见的性能优化

    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会嵌入其他页面,这样父页面渲染的时候,还要同时把子页面也渲染了,渲染进度也会变慢)

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

    • 尽可能使用事件委托

    • 函数的防抖与节流

  • 相关阅读:
    数据结构 练习 22-并查集以及图的最小生成树
    C# 上传RAR文件 解压 获取解压后的文件名称
    [置顶] 程序员学数据库那些事儿
    编程挑战:字符串的完美度
    Hibernate主键生成策略
    利用冒泡排序对数组进行排序
    小学生玩ACM----广搜
    CGContext绘图
    [置顶] 《Windows编程零基础》__2 一个完整的程序
    java 网络编程
  • 原文地址:https://www.cnblogs.com/JCDXH/p/12326552.html
Copyright © 2011-2022 走看看