首页 > 其他分享 >优化手段

优化手段

时间:2024-03-31 21:01:54浏览次数:23  
标签:console 渲染 js 手段 使用 浏览器 列表 优化

使用Key

  • 对于通过循环生成的列表,应该给列表每一项一个稳定且唯一的key,这个有利于在列表变动时,尽量减少删除,新增,改动元素。

使用冻结的对象

  • 冻结的对象不会被响应化,应用场景(当一个列表无需变化时可以使用)

使用函数式组件

  • 在模板中 添加 functional标记 在js中添加functional为true 表示 应用场景(只作纯渲染)

使用计算属性

  • 如果模板中某个数据会使用多次,并且该属性是通过计算得到的,使用计算属性以缓存他们

非实时绑定表单项

  • 当使用v-model绑定一个表单时,当用户改变表单项的状态时,也会随之改变数据,从而导致vue发生重新渲染(rerender),这会带来一些性能开销。
    我们可以通过使用lazy或不使用v-model的方式解决该问题,但要注意,这样可能会导致某一时间段内数据和表单项是不一致的

保持对象引用稳定
使用延迟装载defer

  • JS传输完成后,浏览器开始执行js构造页面但可能一开始要渲染的组件太多,不仅js执行的时间很长,而且执行完后浏览器要渲染的元素过多,从而导致页面白屏 延迟装载本质就是利用 requestAnimationFrame 事件分批渲染内容

清除生产环境console.log

  • 避免浏览器无法回收内存 导致内存泄漏
    babel-plugin-transform-remove-console
    babel.config.js
    plugins: [
    "transform-remove-console"
    ]

标签:console,渲染,js,手段,使用,浏览器,列表,优化
From: https://www.cnblogs.com/bingquan1/p/18107241

相关文章

  • 多目标应用:基于非支配排序的蜣螂优化算法(Non-Dominated Sorting Dung beetle optimize
    一、柔性作业车间调度问题柔性作业车间调度问题(FlexibleJobSchedulingProblem,FJSP)的描述如下:n个工件{J,J......
  • SQL 查询 exist join in 的用法和相应的适用场景 (优化查询)
    在SQL中常用的存在的关联查询existjoinin,优化查询一、“查询A表中在(或者不在)B表中的记录”1、join/in/exists都可以用来实现,,这种查询,在查询的两个表大小相当的情况下,3种查询方式的执行时间通常是:exists<=in<=join当表中字段允许NULL时,notin的方式最慢;note......
  • 【两阶段鲁棒微网】【不确定性】基于关键场景辨别算法的两阶段鲁棒微网优化调度(Matlab
     ......
  • ElasticSearch的监控与优化
    本篇不详写prometheus、grafana的搭建,需要可以翻阅linux监控篇ElasticSearch入门篇一、监控docker-compose.ymlelasticsearch_exporter:#监控image:quay.io/prometheuscommunity/elasticsearch-exporter:v1.3.0command:-'--es.uri=http://elasticsearch:9200'-'......
  • openGauss 鲲鹏NUMA架构优化
    鲲鹏NUMA架构优化可获得性本特性自openGauss1.0.0版本开始引入。特性简介鲲鹏NUMA架构优化,主要面向鲲鹏处理器架构特点、ARMv8指令集等,进行相应的系统优化,涉及到操作系统、软件架构、锁并发、日志、原子操作、Cache访问等一系列的多层次优化,从而大幅提升了openGauss数据库在......
  • 直播软件搭建,通过多种方式实现垃圾回收优化
    直播软件搭建,通过多种方式实现垃圾回收优化垃圾回收优化我们还需要根据直播软件搭建的性能需求,调整垃圾回收器的参数,选择合适的垃圾回收策略和算法。在进行接口调优时,垃圾回收优化是内存管理的一个重要方面。合理配置垃圾回收策略以及降低垃圾回收的成本可以有效提高系统的......
  • 直播平台制作,优化内存占用不妨试试轻量级数据架构
    直播平台制作,优化内存占用不妨试试轻量级数据架构使用轻量级数据结构在直播平台制作中选择数据结构时,考虑使用轻量级的数据结构,如ArrayList替代Vector,以及StringBuilder替代String拼接。能够在保证功能的前提下,减小内存占用。以下是一些使用轻量级数据结构的方法:1、使用......
  • 直播软件开发,利用对象池实现内存占用优化
    直播软件开发,利用对象池实现内存占用优化对象池是一种重复使用对象的机制,而不是频繁地创建和销毁对象。通过对象池,可以避免创建大量的临时对象,减小对象数量,从而减少直播软件开发中内存占用和垃圾回收的压力。importjava.util.concurrent.ArrayBlockingQueue;importjava.ut......
  • 硬件算法协同优化-嵌入式深度学习3
    嵌入式深度学习-硬件与算法协同优化本系列博客主要以BertMoons《EmbeddedDeepLearning》翻译而成GoetschalckxK,MoonsB,LauwereinsS,AndraudM,VerhelstM(2018)Optimizedhierarchicalcascadedprocessing.IEEEJEmergingSelTopCircuitsSyst.https://doi.o......
  • 每个程序员都应该了解的内存知识(五): 代码优化
    代码优化多线程优化尽量使用顺序读写因为分支预测的关系,顺序读写通常能够带来更好的性能.共享变量将只读变量和读写变量分离有可能因为缓存行的原因导致读写变量的更新影响到读变量,进而影响了运行速度提升数据的局部性,将一起使用的读写变量分组到一个结构中缓......