记录一下vue2项目优化,虚拟列表vue-virtual-scroll-list处理10万条数据

文章目录

      • 封装BrandPickerVirtual.vue组件
      • 页面使用
      • 组件属性

在这里插入图片描述

select下拉接口一次性返回10万条数据,页面卡死,如何优化??这里使用 分页 + 虚拟列表(vue-virtual-scroll-list),去模拟一个下拉的内容显示区域。支持单选 + 多选 + 模糊查询 + 滚动触底自动分页请求


粗略实现,满足需求即可哈哈哈哈哈哈哈:
单选:
在这里插入图片描述


多选:
在这里插入图片描述


封装BrandPickerVirtual.vue组件

<template>
  <div class="brand-picker-virtual">
    <el-popover
      v-model="visible"
      placement="bottom-start"
      trigger="click"
      popper-class="brand-picker-popper"
      :append-to-body="false"
      :width="300">
      <div class="brand-picker-popover">
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索品牌"
            prefix-icon="el-icon-search"
            clearable />
        </div>
        <div class="brand-list" ref="brandList">
          <virtual-list
            ref="virtualList"
            class="scroller"
            :data-key="'brand_id'"
            :data-sources="filteredBrands"
            :data-component="itemComponent"
            :estimate-size="40"
            :keeps="20"
            :item-class="'brand-item'"
            :extra-props="{
              multiple,
              isSelected: isSelected,
              handleSelect: handleSelect,
              disabled
            }"
            :buffer="10"
            :bottom-threshold="30"
            @tobottom="handleScrollToBottom"/>
          <div v-if="loading" class="loading-more">
            <i class="el-icon-loading"></i> 加载中...
          </div>
          <div ref="observer" class="observer-target"></div>
        </div>
        <div v-if="multiple" class="footer">
          <el-button size="small" @click="handleClear">清空</el-button>
          <el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
        </div>
      </div>
      <div 
        slot="reference" 
        class="el-input el-input--suffix select-trigger"
        :class="{ 'is-focus': visible }">
        <div class="el-input__inner select-inner">
          <div class="select-tags" v-if="multiple && selectedBrands.length">
            <el-tag
              v-for="brand in selectedBrands"
              :key="brand.brand_id"
              closable
              :disable-transitions="false"
              @close="handleRemoveTag(brand)"
              size="small"
              class="brand-tag">
              {{ brand.name }}
            </el-tag>
          </div>
          <div v-else-if="!multiple && selectedBrands.length" class="selected-single">
            <span class="selected-label">{{ selectedBrands[0].name }}</span>
          </div>
          <input
            type="text"
            readonly
            :placeholder="getPlaceholder"
            class="select-input">
          <i v-if="selectedBrands.length" 
             class="el-icon-circle-close clear-icon" 
             @click.stop="handleClear">
          </i>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import request from '@/utils/request'

const BrandItem = {
  name: 'BrandItem',
  props: {
    source: {
      type: Object,
      required: true
    },
    multiple: Boolean,
    isSelected: Function,
    handleSelect: Function,
    disabled: Boolean
  },
  render(h) {
    const isItemSelected = this.isSelected(this.source)
    return h('div', {
      class: {
        'item-content': true,
        'is-selected': isItemSelected && !this.multiple
      },
      on: {
        click: (e) => {
          if (!this.disabled) {
            this.handleSelect(this.source)
          }
        }
      }
    }, [
      this.multiple && h('el-checkbox', {
        props: {
          value: isItemSelected,
          disabled: this.disabled
        }
      }),
      h('span', { class: 'brand-name' }, this.source.name)
    ])
  }
}

export default {
  name: 'BrandPickerVirtual',
  components: {
    VirtualList
  },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    defaultBrandId: {
      type: [Array, String, Number],
      default: () => []
    },
    api: {
      type: String,
      default: 'admin/goods/brands'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false, // 弹窗是否可见
      searchKeyword: '', // 搜索关键字
      brandList: [], // 品牌列表数据
      selectedBrands: [], // 已选中的品牌列表
      tempSelectedBrands: [], // 多选时的临时选中列表
      loading: false, // 是否正在加载数据
      itemComponent: BrandItem, // 品牌项组件
      pageNo: 1, // 当前页码
      pageSize: 20, // 每页数量
      hasMore: true, // 是否还有更多数据
      searchTimer: null, // 搜索防抖定时器
      searchLoading: false, // 搜索加载状态
      lastScrollTop: 0, // 上次滚动位置
      isFirstPageLoaded: false, // 是否已加载第一页数据
      observer: null // 交叉观察器实例
    }
  },
  computed: {
    /**
     * 根据搜索关键字过滤品牌列表
     * @returns {Array} 过滤后的品牌列表
     */
    filteredBrands() {
      if (!this.searchKeyword) return this.brandList
      const keyword = this.searchKeyword.toLowerCase()
      return this.brandList.filter(item =>
        item.name.toLowerCase().includes(keyword)
      )
    },

    /**
     * 选中品牌的显示文本
     * @returns {string} 显示文本
     */
    selectedText() {
      if (this.multiple) {
        return this.selectedBrands.length
          ? `已选择 ${this.selectedBrands.length} 个品牌`
          : ''
      }
      return (this.selectedBrands[0] && this.selectedBrands[0].name) || ''
    },

    /**
     * 获取占位符文本
     */
    getPlaceholder() {
      if (this.multiple) {
        return this.selectedBrands.length ? '' : '请选择品牌(可多选)'
      }
      return this.selectedBrands.length ? '' : '请选择品牌'
    }
  },
  watch: {
    /**
     * 监听默认品牌ID变化,同步选中状态
     */
    defaultBrandId: {
      immediate: true,
      handler(val) {
        if (!val || !this.brandList.length) return
        if (this.multiple) {
          this.selectedBrands = this.brandList.filter(item =>
            val.includes(item.brand_id)
          )
        } else {
          const brand = this.brandList.find(item =>
            item.brand_id === val
          )
          this.selectedBrands = brand ? [brand] : []
        }
        this.tempSelectedBrands = [...this.selectedBrands]
      }
    },

    /**
     * 监听弹窗显示状态,首次打开时加载数据
     */
    visible(val) {
      if (val) {
        if (this.multiple) {
          this.tempSelectedBrands = [...this.selectedBrands]
        }
        this.resetData()
        this.getBrandList()
        // 确保虚拟列表在显示时重新初始化
        this.$nextTick(() => {
          if (this.$refs.virtualList) {
            this.$refs.virtualList.reset()
          }
        })
      }
    },

    /**
     * 监听搜索关键字变化,带防抖的搜索处理
     */
    searchKeyword(val) {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.resetData()
        this.getBrandList()
      }, 300)
    }
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect()
    }
  },
  methods: {
    /**
     * 初始化交叉观察器,用于监听滚动到底部
     */
    initObserver() {
      this.observer = new IntersectionObserver(
        (entries) => {
          const target = entries[0]
          if (target.isIntersecting && !this.loading && this.hasMore) {
            this.getBrandList(true)
          }
        },
        {
          root: this.$el.querySelector('.scroller'),
          threshold: 0.1
        }
      )

      if (this.$refs.observer) {
        this.observer.observe(this.$refs.observer)
      }
    },

    /**
     * 获取品牌列表数据
     * @param {boolean} isLoadMore - 是否是加载更多
     */
    async getBrandList(isLoadMore = false) {
      if (this.loading || (!isLoadMore && this.searchLoading)) return
      if (isLoadMore && !this.hasMore) return

      const loading = isLoadMore ? 'loading' : 'searchLoading'
      this[loading] = true

      try {
        if (isLoadMore) {
          this.pageNo++
        } else {
          this.pageNo = 1
        }

        const response = await request({
          url: this.api,
          method: 'get',
          params: {
            page_no: this.pageNo,
            page_size: this.pageSize,
            keyword: this.searchKeyword
          },
          loading: false
        })

        const { data, data_total } = response        
        if (!isLoadMore) {
          this.brandList = data
          this.isFirstPageLoaded = true
        } else {
          this.brandList = [...this.brandList, ...data]
        }

        this.hasMore = this.brandList.length < data_total

        if (this.defaultBrandId && !isLoadMore) {
          this.initializeSelection()
        }
      } catch (error) {
        console.error('获取品牌列表失败:', error)
      } finally {
        this[loading] = false
      }
    },

    /**
     * 滚动到底部的处理函数
     */
    handleScrollToBottom() {
      if (!this.loading && this.hasMore) {
        this.getBrandList(true)
      }
    },

    /**
     * 初始化选中状态
     */
    initializeSelection() {
      if (this.multiple) {
        this.selectedBrands = this.brandList.filter(item =>
          this.defaultBrandId.includes(item.brand_id)
        )
      } else {
        const brand = this.brandList.find(item =>
          item.brand_id === this.defaultBrandId
        )
        this.selectedBrands = brand ? [brand] : []
      }
      this.tempSelectedBrands = [...this.selectedBrands]
    },

    /**
     * 判断品牌是否被选中
     * @param {Object} item - 品牌项
     * @returns {boolean} 是否选中
     */
    isSelected(item) {
      return this.multiple
        ? this.tempSelectedBrands.some(brand => brand.brand_id === item.brand_id)
        : this.selectedBrands.some(brand => brand.brand_id === item.brand_id)
    },

    /**
     * 处理品牌选择
     * @param {Object} item - 选中的品牌项
     */
    handleSelect(item) {
      if (this.multiple) {
        const index = this.tempSelectedBrands.findIndex(
          brand => brand.brand_id === item.brand_id
        )
        if (index > -1) {
          this.tempSelectedBrands.splice(index, 1)
        } else {
          this.tempSelectedBrands.push(item)
        }
      } else {
        this.selectedBrands = [item]
        this.visible = false
        this.emitChange()
      }
    },

    /**
     * 清空选中的品牌
     */
    handleClear(e) {
      // 阻止事件冒泡,防止触发下拉框
      if (e) {
        e.stopPropagation()
      }
      this.selectedBrands = []
      this.tempSelectedBrands = []
      this.emitChange()
    },

    /**
     * 确认多选结果
     */
    handleConfirm() {
      this.selectedBrands = [...this.tempSelectedBrands]
      this.visible = false
      this.emitChange()
    },

    /**
     * 触发选中值变化事件
     */
    emitChange() {
      const value = this.multiple
        ? this.selectedBrands.map(item => item.brand_id)
        : (this.selectedBrands[0] && this.selectedBrands[0].brand_id) || null
      this.$emit('changed', value)
    },

    handleRemoveTag(brand) {
      const index = this.selectedBrands.findIndex(item => item.brand_id === brand.brand_id)
      if (index > -1) {
        this.selectedBrands.splice(index, 1)
      }
      this.tempSelectedBrands = [...this.selectedBrands]
      this.emitChange()
    },

    /**
     * 重置列表相关数据
     */
    resetData() {
      this.brandList = []
      this.pageNo = 1
      this.hasMore = true
      this.loading = false
      this.searchLoading = false
    }
  }
}
</script>

<style lang="scss">
.brand-picker-popper {
  max-height: calc(100vh - 100px);
  overflow: visible !important;
  left: 0 !important;
  top: 26px !important;

  .el-popover__title {
    margin: 0;
    padding: 0;
  }
}
</style>

<style lang="scss" scoped>
.brand-picker-virtual {
  display: inline-block;
  width: 100%;
  position: relative;

  .select-trigger {
    width: 100%;
    
    &.is-focus .el-input__inner {
      border-color: #409EFF;
    }
  }

  .select-inner {
    padding: 3px 8px;
    min-height: 32px;
    height: auto;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-height: 24px;
    padding: 2px 0;
    
    .brand-tag {
      max-width: 100%;
      margin: 2px 0;
      
      &:last-child {
        margin-right: 4px;
      }
    }
  }

  .select-input {
    width: 0;
    min-width: 60px;
    margin: 2px 0;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #606266;
    flex: 1;

    &::placeholder {
      color: #c0c4cc;
    }
  }

  .clear-icon {
    position: absolute;
    right: 8px;
    color: #c0c4cc;
    font-size: 14px;
    cursor: pointer;
    transition: color .2s;
    
    &:hover {
      color: #909399;
    }
  }

  .selected-single {
    display: flex;
    align-items: center;
    flex: 1;
    padding-right: 24px;
    
    .selected-label {
      flex: 1;
      font-size: 14px;
      color: #606266;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .el-input__suffix,
  .el-icon-arrow-down {
    display: none;
  }

  .brand-picker-popover {
    margin-top: 4px !important;
    
    .search-box {
      padding: 0 0 12px;

      .el-input {
        font-size: 14px;
      }
    }

    .brand-list {
      position: relative;
      height: 320px;
      border: 1px solid #EBEEF5;
      border-radius: 4px;
      overflow: hidden;
      
      .scroller {
        height: 100%;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding: 4px 0;

        /deep/ .virtual-list-container {
          position: relative !important;
        }

        /deep/ .virtual-list-phantom {
          position: relative !important;
        }

        /deep/ .brand-item {
          .item-content {
            padding-left: 8px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            transition: all 0.3s;
            box-sizing: border-box;
            position: relative;
            font-size: 14px;
            color: #606266;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            user-select: none;

            .el-checkbox {
              margin-right: 8px;
            }

            .brand-name {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            &:hover {
              background-color: #F5F7FA;
            }

            &.is-selected {
              background-color: #F5F7FA;
              color: #409EFF;
              font-weight: 500;

              &::after {
                content: '';
                position: absolute;
                right: 15px;
                width: 14px;
                height: 14px;
                background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00MDYuNjU2IDcwNi45NDRsLTE2MC0xNjBjLTEyLjQ4LTEyLjQ4LTMyLjc2OC0xMi40OC00NS4yNDggMHMtMTIuNDggMzIuNzY4IDAgNDUuMjQ4bDE4Mi42MjQgMTgyLjYyNGMxMi40OCAxMi40OCAzMi43NjggMTIuNDggNDUuMjQ4IDBsNDAwLTQwMGMxMi40OC0xMi40OCAxMi40OC0zMi43NjggMC00NS4yNDhzLTMyLjc2OC0xMi40OC00NS4yNDggMEw0MDYuNjU2IDcwNi45NDR6IiBmaWxsPSIjNDA5RUZGIi8+PC9zdmc+) no-repeat center center;
                background-size: contain;
              }
            }
          }
        }
      }

      .loading-more {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        text-align: center;
        background: rgba(255, 255, 255, 0.95);
        color: #909399;
        font-size: 13px;
        z-index: 1;
        border-top: 1px solid #f0f0f0;
      }

      .observer-target {
        height: 2px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .footer {
      margin-top: 12px;
      text-align: right;
      padding: 0 2px;
    }
  }

  .selected-label {
    flex: 1;
    font-size: 14px;
    color: #606266;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .selected-single {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 4px;
    
    .selected-label {
      flex: 1;
      font-size: 14px;
      height: 24px;
      line-height: 24px;
      color: #606266;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-icon-circle-close {
      margin-left: 8px;
      color: #c0c4cc;
      font-size: 14px;
      cursor: pointer;
      transition: color .2s;
      
      &:hover {
        color: #909399;
      }
    }
  }
}
</style> 

页面使用

<template>
  <!-- 单选模式 -->
  <brand-picker-virtual
    :default-brand-id="singleBrandId"
    @changed="handleBrandChange"
  />

  <!-- 多选模式 -->
  <brand-picker-virtual
    multiple
    :default-brand-id="multipleBrandIds"
    @changed="handleMultipleBrandChange"
  />
</template>

<script>
// 注册组件别忘了,我这里省略了,我是个全局注册的
export default {
  data() {
    return {
      singleBrandId: null,  // 单选模式:存储单个品牌ID
      multipleBrandIds: []  // 多选模式:存储品牌ID数组
    }
  },
  methods: {
    // 单选回调
    handleBrandChange(brandId) {
      this.singleBrandId = brandId
    },
    // 多选回调
    handleMultipleBrandChange(brandIds) {
      this.multipleBrandIds = brandIds
    }
  }
}
</script>

组件属性


props: {
  // 是否多选模式
  multiple: {
    type: Boolean,
    default: false
  },
  // 默认选中的品牌ID(单选时为number/string,多选时为array)
  defaultBrandId: {
    type: [Array, String, Number],
    default: () => []
  },
  // 自定义接口地址
  api: {
    type: String,
    default: 'admin/goods/brands'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/951952.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

迅为RK3568开发板篇OpenHarmony配置HDF驱动控制LED-配置创建私有配置文件

接 下 来 新 建 vendor/hihope/rk3568/hdf_config/khdf/topeet/topeet_config.hcs 文 件 &#xff0c;topeet_config.hcs 为驱动私有配置文件&#xff0c;用来填写一些驱动的默认配置信息。HDF 框架在加载驱动时&#xff0c;会获取相应的配置信息并将其保存在 HdfDeviceObject …

nginx负载均衡-基于端口的负载均衡(一)

注意&#xff1a; (1) 做负载均衡技术至少需要三台服务器&#xff1a;一台独立的负载均衡器&#xff0c;两台web服务器做集群 一、nginx分别代理后端web1 和 web2的三台虚拟主机 1、web1&#xff08;nginx-10.0.0.7&#xff09;配置基于端口的虚拟主机 [rootOldboy extra]# …

金融项目实战 02|接口测试分析、设计以及实现

目录 ⼀、接口相关理论 二、接口测试 1、待测接口&#xff1a;投资业务 2、接口测试流程 3、设计用例理论 1️⃣设计方法 2️⃣工具 4、测试点提取 5、测试用例&#xff08;只涉及了必测的&#xff09; 1️⃣注册图⽚验证码、注册短信验证码 2️⃣注册 3️⃣登录 …

vue3使用vue3-video-play播放m3u8视频

1.安装vue3-video-play npm install vue3-video-play --save2.在组件中使用 import vue3-video-play/dist/style.css; import VideoPlay from vue3-video-play;// 视频配置项 const options reactive({src: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, //视频源mute…

Redis:数据类型

1. 字符串&#xff08;String&#xff09; 简介 概念&#xff1a;这是最简单的数据类型&#xff0c;可以存储字符串、整数或浮点数。特点&#xff1a;支持原子操作&#xff0c;如递增和递减数值。 示例 # 设置一个键值对 SET mykey "Hello, Redis!"# 获取该键的值…

【Web安全】SQL 注入攻击技巧详解:UNION 注入(UNION SQL Injection)

【Web安全】SQL 注入攻击技巧详解&#xff1a;UNION 注入&#xff08;UNION SQL Injection&#xff09; 引言 UNION注入是一种利用SQL的UNION操作符进行注入攻击的技术。攻击者通过合并两个或多个SELECT语句的结果集&#xff0c;可以获取数据库中未授权的数据。这种注入技术要…

移远BC28_opencpu方案_pin脚分配

先上图&#xff0c;BC28模块的pin脚如图所示&#xff1a; 下面看看GPIO的复用管脚 然后我自己整理了一份完整的pin功能列表

PHP多功能投票小程序源码

多功能投票小程序&#xff1a;全方位打造专属投票盛宴的得力助手 &#x1f389; &#x1f527; 基于先进的ThinkPHP框架与Uniapp技术深度融合&#xff0c;我们匠心独运&#xff0c;精心雕琢出一款功能全面、操作便捷的投票小程序&#xff0c;旨在为您带来前所未有的投票体验。…

ORB-SALM3配置流程及问题记录

目录 前言 一、OPB-SLAM3基本配置流程 1.下载编译Pangolin 二、ORB-SLAM3配置 1.下载源码 2.创建ROS工作空间并编译ORB-SLAM3-ROS源码 3.尝试编译 三、运行测试 一、OPB-SLAM3基本配置流程 ORB-SLAM3是一个支持视觉、视觉加惯导、混合地图的SLAM&#xff08;Simultane…

RabbitMQ介绍与使用

RabbitMQ官网 RabbitMQ 介绍 RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;基于 AMQP&#xff08;高级消息队列协议&#xff09;标准&#xff0c;使用 Erlang 编程语言构建。它是消息队列&#xff08;MQ&#xff09;的一种&#xff0c;广泛应用于分布式系统中&#x…

自然语言处理之jieba分词和TF-IDF分析

jieba分词和TF-IDF分析 目录 jieba分词和TF-IDF分析1 jieba1.1 简介1.2 终端下载1.3 基本语法 2 TF-IDF分析2.1 什么是语料库2.2 TF2.3 IDF2.4 TF-IDF2.5 函数导入2.6 方法 3 实际测试3.1 问题解析3.2 代码测试 1 jieba 1.1 简介 结巴分词&#xff08;Jieba&#xff09;是一个…

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…

Opencv查找、绘制轮廓、圆形矩形轮廓和近似轮廓

查找、绘制轮廓、圆形矩形轮廓和近似轮廓 目录 查找、绘制轮廓、圆形矩形轮廓和近似轮廓1 轮廓查找和绘制1.1 轮廓查找1.1.1 函数和参数1.1.2 返回值 1.2 轮廓绘制1.2.1 函数和参数 1.3 步骤1.4 实际测试绘制轮廓 2 绘制近似轮廓2.1 函数和参数2.2 查找特定轮廓2.3 近似轮廓测试…

K8s Pod OOMKilled,监控却显示内存资源并未打满

1. 问题现象 pod一直重启&#xff0c;通过grafana查看&#xff0c;发现内存使用率并没有100%。 2. 排查过程 2.1 describe查看pod最新一次的状态 可以明显看到&#xff0c;最近一次的重启就是因为内存不足导致的。 2.2 describe 查看node节点状态 找到原因了&#xff0c;原来…

Knowledge Editing through Chain-of-Thought

题目 通过思路链进行知识编辑 论文地址&#xff1a;https://arxiv.org/abs/2412.17727 摘要 大型语言模型 (LLM) 在广泛的自然语言处理 (NLP) 任务中表现出卓越的能力。然而&#xff0c;由于频繁重新训练的成本很高&#xff0c;让这些模型与不断发展的世界知识保持同步仍然是一…

C语言Day14(c程序设计小红书+pta)

目录 &#xff08;一&#xff09;求总天数pta 题目说明&#xff1a; 代码实现&#xff1a; 程序分析&#xff1a; &#xff08;二&#xff09;十进制整数转换成R进制数pta 题目说明&#xff1a; 代码实现&#xff1a; 程序分析&#xff1a; &#xff08;三&#xff09;…

G1原理—3.G1是如何提升垃圾回收效率

大纲 1.G1为了提升GC的效率设计了哪些核心机制 2.G1中的记忆集是什么 3.G1中的位图和卡表 4.记忆集和卡表有什么关系 5.RSet记忆集是怎么更新的 6.DCQ机制的底层原理是怎样的 7.DCQS机制及GC线程对DCQ的处理 提升G1垃圾回收器GC效率的黑科技 G1设计了一套TLAB机制 快速…

算法(二)——一维差分、等差数列差分

文章目录 一维差分、等差数列差分一维差分例题&#xff1a;航班预订统计 等差数列差分例题&#xff1a;三步必杀例题&#xff1a;Lycanthropy 一维差分、等差数列差分 一维差分 差分解决的是 区间修改&#xff08;更新&#xff09;问题&#xff0c;特别是多次区间修改问题&…

nexus搭建maven私服

说到maven私服每个公司都有&#xff0c;比如我上一篇文章介绍的自定义日志starter&#xff0c;就可以上传到maven私服供大家使用&#xff0c;每次更新只需deploy一下就行&#xff0c;以下就是本人搭建私服的步骤 使用docker安装nexus #拉取镜像 docker pull sonatype/nexus3:…

StarRocks Awards 2024 年度贡献人物

在过去一年&#xff0c;StarRocks 在 Lakehouse 与 AI 等关键领域取得了显著进步&#xff0c;其卓越的产品功能极大地简化和提升了数据分析的效率&#xff0c;使得"One Data&#xff0c;All Analytics" 的愿景变得更加触手可及。 虽然实现这一目标的道路充满挑战且漫…