
代码优化
文章平均质量分 86
MagnumHou
精通HTML5,CSS3,JavaScript,JQuery,Node,Vue,React等单词的拼写
展开
-
【ElementUI组件封装】搭建架子、按钮自行封装、封装element的表格、表单
有了前面封装表单的基础,要是顺手把表格也做一番封装,那么我们在处理这类增删改查页面的时候,就能节省出更多的时间去处理其它的事情,从而提高开发效率。像:后台管理系统的页面有一些表单增删改操作,这里面的控件名称和所用到的控件不一样外,逻辑大体相同。明明人家已经提供了相对完善的 UI 组件库、并且大部分想要的效果都已经有了,我们是没有必要再去浪费时间在这个上面的,应该更多的去关注业务逻辑的实现。像表格数据配置、操作列的、批量处理的、分页的、列数据个性化的等等,太多了就不一一列举了。原创 2023-07-21 16:45:49 · 1119 阅读 · 0 评论 -
vite3+vue3 项目打包优化三 — CDN加速、文件压缩
内容分发网络(Content Delivery Network,简称 CDN),是构建在数据网络上的一种分布式内容分发网,它可以让用户从最近的服务器请求资源,以提升网络请求的响应速度。:一但依赖网站出现问题,我们的项目也就不行了,建议留下备用方案,以便维护。把打包好的项目放入服务器目录,服务器开启 gzip 服务,这样通过项目地址就可以在浏览器中进行访问了。需要注意的是,浏览器解压也是需要时间的,如果项目体积不是很大的话,不建议采用 gzip 进行压缩原创 2023-05-24 15:49:19 · 2645 阅读 · 0 评论 -
【项目数据优化三】长列表数据优化
首先我们要知道,虚拟滚动是用到 Vue 的 v-for 实现的,上面也解释了,虚拟滚动是只渲染可视区域,那么我们可视区域的节点内容必然会随着用户的滚动条的改变而改变,假设一个页面就只能显示 n 个节点,那么我们如何让这n个需要变动的节点跟着滚动条动呢?这部分就是最核心的代码了。如上图,当1被卷去的时候(完全离开我们的可视区),我们就利用css的translateY将它顶下来,渲染成2,你会发现发现在可视区域外多出来了一个节点,为了保证滑动的连贯性,你可以多设置几个冗余节点。答案是肯定的,js为我们提供了。原创 2023-03-31 14:42:43 · 616 阅读 · 0 评论 -
【高频触发事件优化】封装节流和防抖
最近项目有一个数据导出功能,之前后端都是同步处理,前端做防抖处理,数据量特别大的时候,造成响应时间特别长。这次后端做了优化处理,将后端做了异步处理,响应特别快,但是需要再额外的下载页面去处理导出,这样造成用户下载后直接进入下载页面需要等待一段时间才能看到下载文件,而且对于后端来讲,防抖虽然可以控制频率(默认1s),但是他想要把时间控制在 10s 左右,才能实现二次下载。如果继续使用防抖,如果直接定 10s ,就会造成第一次点击无效的点击,当然这个可以通过一个变量动态控制这个时间,但是稍显麻烦。原创 2023-03-30 14:18:18 · 887 阅读 · 0 评论 -
【接口请求配置】axios 某个单独接口的个性化配置
现在有这么一个需求:有一个接口耗费时间巨长,网络不好时经常会超时。去改统一设置的超时时间又不太现实,所以想针对这个请求单独设置超时时间。干过前端开发的小伙伴都知道,项目中所有的接口请求都是走统一封装过的 axios,即:全局请求配置。注:这里除了可以单独配置请求超时时间, 其它属性配置也可直接在请求头上添加。原创 2023-03-13 11:09:17 · 700 阅读 · 0 评论 -
【 Vue3 性能优化】页面加载性能 与 更新性能
Vue 在大多数常见场景下性能都是很优秀的,通常不需要手动优化。然而,总会有一些具有挑战性的场景需要进行针对性的微调。原创 2023-03-08 10:56:41 · 3767 阅读 · 1 评论 -
【JS代码优化二】ES6 数组和对象篇
ES6 数组和对象新增方法原创 2023-03-07 09:54:54 · 586 阅读 · 0 评论 -
【JS代码优化一】分支优化篇
序:如何让代码看起来更优雅?代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息(状态)、表达相关的情绪(函数),所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的,就是带着大家如何实现更有效、更优雅的编程。笔记涵盖:运算符、流程语句、设计模式、ES6 新增方法等多个方面。原创 2023-03-06 12:48:24 · 644 阅读 · 0 评论