首页 > 其他分享 >前端性能优化

前端性能优化

时间:2024-03-05 16:59:48浏览次数:25  
标签:请求 dom 前端 接口 体积 使用 优化 性能 减少

1、尽量不要使用第三方库,考虑是否可以通过代码实现,比如时间格式化,可以自己写代码实现指定格式的转换,不要使用第三方库来实现,这样可以减少打包代码的体积
2、去除大的base64体积
3、首屏数据尽量并行,让一些小的接口合并到其他接口,请求接口的时间包括三次握手的时间,这也是时间,合并到其他接口,可以减少时间
4、页面包含大量的dom可以分批随滚动渲染,也就是先请求一部分数据,滚动的时候再请求一部分数据
5、骨架屏,loading效果,这是实在没法减少体积的时候,采取这种方案,这样减少用户的焦虑
7、什么情况下回造成页面卡顿或者渲染慢
1)、一次操作大量的dom
2)、进行了复杂度很高的运算
那么这种情况如何解决呢
首先,循环中的操作尽量精简运算
其次,循环中使用key值,通过keep-alive缓存我们的组件
另外,频繁切换的内容使用v-show,只打开一次就决定显示与否的,使用v-if
最后,区分请求粒度,减少请求范围,也能减少更新

标签:请求,dom,前端,接口,体积,使用,优化,性能,减少
From: https://www.cnblogs.com/menglm/p/18054277

相关文章

  • 2024 年春节集训 _ 第二课 - 数据结构优化动态规划
    【例题\(1\)】递增子序列\(\color{white}{link}\)考虑\(dp.\)\(dp[i][j]\)表示以元素\(i\)为结尾,长度为\(k\)的方案数。那么显而易见就有一个转移方程:\[dp[i][j]=\sum_{a[k]<a[i],\k<i}dp[k][j-1]\]先抛去第二维度的\(j\),这是可以做一个关于\(a[i]\)值的大......
  • 基于preparedStatement方式优化
    1packagecom.atsyc.api.preparedstatement;23/*4*使用预编译statement完成用户登录5*6*TODO:7*防止注入攻击,演示preparedstatement完成用户登录8*/910importjava.sql.*;11importjava.util.Scanner;1213publicclassPSUserLogi......
  • spfa优化
    1.SLF优化在我们学SPFA的时候,要把每一个入队的点插入到队尾,可是有些时候这个点作为队尾没有作为队头效率高,因为这个点有时放在队首就能直接用,那么什么样的点作为队首更好呢?当然是dis值越小越可能刷新其它\(dis\)值,所以对比当前元素与对首元素的\(dis\)值,如果当前元素的\(dis......
  • 使用 explain 索引优化(转)
    使用explain索引优化(转)原文:https://mp.weixin.qq.com/s?__biz=MzkwNjMwMTgzMQ==&mid=2247490262&idx=1&sn=a67f610afa984ecca130a54a3be453ab&source=41#wechat_redirect1、前言对于互联网公司来说,随着用户量和数据量的不断增加,慢查询是无法避免的问题。一般情况下如果出现慢......
  • 聊聊sql优化的15个小技巧(转)
    原文:https://mp.weixin.qq.com/s/DsUrEHdkMvsO7RvnDcKNhg1避免使用select*很多时候,我们写sql语句时,为了方便,喜欢直接使用select*,一次性查出表中所有列的数据。反例:select*fromuserwhereid=1;在实际业务场景中,可能我们真正需要使用的只有其中一两列。查了很多数据,但......
  • 前端基础学习1 | Web、Html、CSS
    前端基础学习1|Web、Html、CSS1、Web基础知识Web(wwwWorldWideWeb),全球广域网,也称万维网,能够通过浏览器访问的网站Web网站的工作流程Web标准,也称为网页标准,由一些列的标准组成,大部分由W3C(WorldWideWebConsortium,万维网联盟)负责制定。Web标准由三个部分组成:HTML:......
  • mysql8.0 性能优化配置 innodb_buffer_pool_size(配置原则和方式)
    1. BufferPool缓冲池是主内存中的一个区域,InnoDB在访问表和索引数据时会在该区域进行缓存。缓冲池允许直接从内存访问频繁使用的数据,这加快了处理速度。在专用服务器上,通常会将高达80%的物理内存分配给缓冲池。2.简单优化把innodb_buffer_pool_size设置为1G。专用服务......
  • 前端 vite 的原理
    很多前端框VUEReact都是使用webpack打包为何使用vitewebpack打包很慢,热更不友好一个模块的变化导致整个项目的重新编译vite真正的按需加载:利用浏览器ESM支持,实现真正的按需加载原理由于ES6的在浏览器的支持ESM可以只实现在浏览器直接使用import发送http请求......
  • javaweb03-前端工程
    Ajax异步的Javascript和XML数据交换异步交互:在不重载页面的情况下,与服务器交换数据并更新部分网页Axios入门前后端分离开发需求分析->接口定义->前后端并行开发->测试->前后端联调开发YAPI接口管理平台前端工程化规范化、标准化前端开发环境准备vue-cli脚手架Vu......
  • 44对象优化
    对象优化对象优化的原则:函数参数传递的过程中,对象优先按引用传递,不要按值传递,这样少形参的构造和析构函数返回对象时,优先返回一个临时对象,而不要返回一个定义过的对象,这样少一个函数中对象的构造析构接受返回值是对象的函数调用时,用初始化的方式接受,而不用先定义再赋值的方式......