性能优化专栏
文章平均质量分 62
前端性能优化
跳跳的小古风
热爱前端的一枚小可爱~
展开
-
webpack常用优化原理剖析
这是一个异步的方法,webpack 在打包时,OComponent 会被单独打成一个文件,只有在我们跳转 O 这个路由的时候,这个异步方法的回调才会生效,才会真正地去获取 OComponent 的内容。lz77 的核心思路是如果一个串中有两个重复的串,那么只需要知道第一个串的内容和后面串相对于第一个串起始位置的距离 + 串的长度。由于(两者之间的距离,相同内容的长度)这一对信息的大小,小于被替换内容的大小,所以文件得到了压缩。其中有些部分的内容,前面已经出现过了,下面用 () 括起来的部分就是相同的部分。原创 2023-02-27 10:41:39 · 359 阅读 · 1 评论 -
前端性能优化之首页图片过大,优化加载
通过图片标签img中Onload时间优先加载模糊图片,模糊图片加载完成后触发onload事件,使之更改data中数据加载真实图片。可封装成组件,全局使用。原创 2022-10-14 10:28:59 · 697 阅读 · 0 评论 -
Vue的常见性能优化
data 中的数据都会增加getter 和 setter,会收集对应的watcher,值改变时整个应用会重新渲染,可以使用computed (当新的值需要大量计算才能得到,缓存的意义就非常大)注意:使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了。vue在更新已经渲染的元素序列时,会采用就地复用策略,都会在对顺序进行破坏时,不仅会产生真实dom更新,浪费资源,耿永导致产生错误更新。不要在模板里面写过多表达式。原创 2022-09-09 22:43:14 · 5458 阅读 · 0 评论 -
按钮点击事件节流防抖(防止重复点击的性能卡顿)
需求:连续点击宽高时,只执行鼠标放开时最后一次点击方法。在这里插入代码片原创 2022-05-09 17:44:39 · 1334 阅读 · 0 评论 -
vue 使用websocket连接优化性能
(websocket只需要一次HTTP握手,所以说整个通讯过程是建立在一次连接/状态中,也就避免了HTTP的非状态性,服务端会一直知道你的信息,直到你关闭请求)问题:前期用的是axios 轮询,添加定时器每秒请求一次接口,出现卡顿,服务器负担大现象,且不同人打开可能会显示不同的数据。需求:前端做echarts 图表展示,每隔五秒钟刷新一次数据。解决:使用了websocket建立长连接。原创 2022-10-11 10:53:39 · 2142 阅读 · 0 评论