- 博客(44)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 浅谈图片优化
专业的事情交给专业的人，CDN（Content Delivery Network）为网站提供内容分发网络，把图片等静态资源放到CDN上，然后直接使用CDN上的资源。在web应用中，我们常常会遇到图片加载过慢的问题，现在市面上的解决方案已经非常成熟了。等图片出现在用户视野时才加载，适用于图片数量多的场景，如新闻和博客。图片转换是图片优化的常用手段，通过压缩、格式转换等方式来减少图片体积。提前加载图片并缓存，适用于漫画和视差动画等场景，提升用户体验。渐进式加载先显示大致轮廓，再逐步变清晰，提升用户体验。
2024-07-04 11:24:10
255
原创 【超详细】从 0 到 1 打包你的 uni-app 应用：安卓篇打包指南
说明：如果在这个地方检测不到你的真机设备，说明手机和电脑通过 USB 未真正连接成功，通常的解决方案是下载一个 360 手机助手、豌豆荚、应用宝等第三方应用，这些应用会安装一些必备的驱动，从侧面解决你的连接调试问题。说到底是被 uniapp 卡脖子了，云打包确实会打包一些无用的插件，但是官方不解决，没有办法，其次你也可以使用离线打包试一下，但是效果不怎么理想。这个功能是我们接下来要使用的重点功能，主要用来打包 App 的配置项，包括 Android 配置和 iOS 配置，接下来会进行详细的说明。
2024-03-12 09:22:41
2721
原创 浏览器打印无法显示单选框选中效果
上面是原代码，我点击打印，出现打印页面，但单选框并未勾选中，我在外部放了一模一样的代码是能勾选上的，于是我对打印页的input单选框进行分析，发现他丢失了checked属性。然后通过gpt分析原因。得知了defaultChecked 这个属性，我再追问能否结合v-bind使用他说可以，于是修改后的代码变成下面这种，试验发现可行。
2024-01-15 17:53:20
551
原创 IntersectionObserver
root:null , //表示观察器观察的元素和 哪个 元素发生交叉，它需要去监控;它只能配置它的父元素或者父元素的父元素;querySelectorAll方法用于查找并返回与提供的CSS选择器匹配的所有元素的列表，在这种情况下是’img[data-src]'。rootMargin: 0,//对目标元素的观察范围进行扩散还是收缩,默认值为0，也可以不写。现在要做的是当图片跟视口有交叉的情况下，把data-src的图片路径替换给src属性。//第一个参数是 回调，第二个参数的 配置。//获取目标图片元素。
2024-01-13 13:49:07
428
原创 静态资源的动态访问
这种方式可行是可行，但是他会平白无故打包出很多js文件，而且这还是异步的，所以不是特别好。这时候有人会说通过style动态变量来实现，但是打包后运行发现他的路径是源代码下的路径，并不是打包后的路径，原因是 无论是vite还是webpack，他们要做的这种转换分析的是静态代码，你style写了个动态参数他得运行之后才能知道路径是什么的，vite和webpack需要的是运行之前的静态路径代码。但是这样是有弊端的，就是没有文件指纹信息了，一旦下次打包图片内容替换了，由于没有文件指纹，名字是不会变的。
2024-01-10 09:26:22
553
原创 base64图片如何显示
当后端返回了一堆base64格式的字符串时，我们将这段字符串赋值给img标签的src属性，为什么不能正常显示呢？原因是 在base64字符串之前还要拼接一段属性，如下展示。当然，如果后端已经做好拼接，那就直接展示就行。
2023-12-23 10:52:39
631
原创 数组高级技法之flatMap
我们知道数组的filter方法和map方法是会产生中间数组的，这在开发中往往会增加代码量。下面是执行结果，很明显，flatMap所花费的时间远小于上面的4.209 ms。如上图所示，filter和map 所花费的时间是4.209 ms。然后我们换上我们的flatMap方法。
2023-12-09 10:58:56
372
原创 前端并发多个请求并失败重发
它通过调用makeRequest来处理请求，并根据请求的成功或失败派发动作。如果请求失败且重试次数小于最大重试次数（MAX_RETRIES），则会递归调用processRequest进行自动重试。这段代码的作用是并行地处理多个异步请求，并在请求失败时自动进行重试，直到达到最大重试次数。成功的响应结果存储在successes数组中，失败的请求的错误信息存储在failures数组中。使用Promise.allSettled和map方法对每个URL进行请求处理，并将结果存储在相应的数组中。
2023-12-05 21:43:00
520
原创 什么是 Ajax，Ajax 都有哪些优点和缺点?
搜索引擎优化(SEO):由于Ajax动态加载内容，搜索引警难以索引这些内容，可能对网页的搜索排名产生影响。状态管理复杂:由于Aiax 支持并发请求，需要额外的状态管理来跟踪每个请求的进度和结果刘览器按钮问题:使用 Aiax后，浏览器的前进和后退按钮可能无法正确工作，因为URL没有。页面性能:Ajax能够局部更新页面，而不是整个页面，加快了页面加载速度，提高了响应性能。带宽利用:由于只传输数据而不是整个页面，Ajax 减少了网络流量，对带宽的利用更高效。Ajax是一种用于创建互动网页的技术。
2023-12-04 08:44:31
401
原创 通过两个css属性提升长列表渲染效率
content-visibility是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。
2023-12-03 06:30:00
533
原创 vue常见优化手段
why？过早优化的代价就是开发时间变长，开发成本增加，它会慢慢的让我们的代码变得不可阅读，难以维护；这些都是优化带来的代价。有句话是这样说的：命运馈赠的礼物，早已在暗中标好了价格。
2023-12-02 17:58:54
782
原创 前端如何下载后端传输的文件
msSaveBlob ： IE不支持a标签下载，用的是msSaveBlob方案。createObjectURL ：把blob对象的内存地址，以url形式给出。a标签的download属性 ： 表面该a标签的行为是下载，并说明文件名。//使用第三方库file-saver。前端下载后端传回的文件有三种方式。
2023-12-01 15:19:42
1358
原创 前端文件操作
base64这种比较简便，但是花费的时间会稍微长一些，毕竟转成64要花时间，后端解码也要时间。前端把文件上传给后端，一般有两种方案。
2023-12-01 14:23:59
875
原创 Uncaught Error: []: “getActivePinia()“ was called but there was no active Pinia. Did you forget to
这个报错的原因有很多个版本，我这个版本的原因是因为在使用pinia前没有实例化。
2023-12-01 08:53:32
713
原创 浏览器的渲染原理
reflow的本质就是重新计算layout树当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行统一计算。所以，改动属性造成的reflow是异步完成的。也同样因为如此，当JS获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器再反复权衡下，最终决定获取属性立即reflow。repaint的本质就是重新根据分层信息计算了绘制指令。
2023-11-30 21:17:28
1652
原创 更高效的图片预览方案
那这就会有一个问题，用户为什么要先网络上传上去再预览呢，我本地直接预览就好了呀，为何要多此一举呢，而且还浪费性能。如果这个图片很大的话，那网络上传的时间也会很长，这对用户体验是很不好的。还有一个场景是用户要上传头像，一般是先拿到预览图，然后对它进行裁剪，裁剪完成之后再进行网络上传。首先是用户选择一张图片，通过ajax上传到服务器，然后服务器返回一个访问url。然后给img标签的src属性设置这个访问url。传统的图片预览方式是什么样子的呢？
2023-11-28 16:48:51
521
1原创 ## 你说一下闭包是什么 #### 在红宝书里面是这样描述闭包的，闭包是有权访问另一个函数作用域中的变量的函数。 #### 在js中变量的作用域属于函数作用域，在函数执行完之后，作用域就不复存在，
## 你说一下闭包是什么#### 在红宝书里面是这样描述闭包的，闭包是有权访问另一个函数作用域中的变量的函数。#### 在js中变量的作用域属于函数作用域，在函数执行完之后，作用域就不复存在，内存也会随之被回收，但是由于闭包函数是建立在函数内部的子函数，它是可以访问上级作用域中的变量的，它们之间存在引用关系。所以即使上级函数执行完，作用域也不会随时销毁，这时子函数就形成了闭包，能够访问上级作用域中变量的权限，即使上级函数执行完后作用域内的值也不会被销毁。## 你说一下闭包是什么####
2023-02-09 17:16:24
87
原创 记住密码利用watch和localstorage 结合起来
记住密码利用watch和localstorage 结合起来。函数返回值 类型推导。RBAC权限设计方案。
2023-01-29 11:19:21
178
原创 安装ui库
vue里面有一个App的Ts类型 需要导入使用。自动按需引入 安装babel插件 自己导入。创建global文件夹index.ts文件。get请求 参数一般放 params里。post请求 参数一般放 data 里。33-axios的封装。安装完成之后进行引用。
2023-01-25 20:51:22
86
原创 coderwhy 31 1：11 项目搭建项目搭建过程
husky 在提交之前，检查代码是否符合规范，只有规范的才能提交上去。默认vscode是不会读取这个文件的，所以需要安装一个插件。.editorconfig 文件是为了保持代码的风格，coderwhy 31 1：11 项目搭建。
2023-01-24 14:42:23
92
原创 2023/1/23///////1
声明的地方没有函数体，（重载函数 先匹配到，然后再走 实现函数）多态的目的是为了写出更加具备通用性的代码。函数体用any来统一写。
2023-01-23 18:57:29
49
原创 2023/01/23////////
获取元素节点的时候，往往只能获取到大概的html节点，但是不能获取到具体的html节点，比如img。这时候就要用 as 类型 断言 ，给他 下一个定义。
2023-01-23 15:58:06
60
原创 2023/1/23...
推荐这种 const numes2 ：string[ ] = [ ] // 推荐这种const n1 ： null = null //null类型只有一个值 为null,不写也行，他会自己推断。
2023-01-23 12:50:32
51
原创 vue2的minxins和vue3的hook有什么区别
mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入minxins，就能实现一次写代码，多组件收益的效果。mixins中的生命周期会与引入minxins的组件的生命周期整合在一起调用，但是mixins的生命周期比组件快。组件的data/methods/filters会覆盖mixins里的同名data/methods/filters。hook是使用vue3的组合API封装的可复用的功能函数。开发中常常会遇到一些具有相同逻辑和功能的组件，变量和方法都是显示传入，解决了来源不明的问题。
2023-01-20 20:17:03
691
原创 事件循环笔试题
在做题的时候，在纸上写好main script 、 微任务、 宏任务 这三个区域，函数执行一步就在区域填写内容，主函数执行完就清空当前的微任务，再执行宏任务（执行宏任务前再次确保当前微任务队列为空！async、await修饰的函数与普通函数一样，但要注意await修饰的函数执行完毕后返回了一个resolve.then( )方法，意味着原函数await 后面的函数体会被假如到 微任务队列中。main script 优先执行，然后执行微任务，再而宏任务；执行宏任务之前必须确保当前微任务队列已为空。.....
2022-08-13 23:27:24
166
原创 【无标题】
在函数执行前 会先创建GO 全局对象，将变量 初始化但未赋值，都是underfinedGEC global exection context 全局执行上下文首先代码被解析，v8引擎内部会帮助我们创建一个对象（GlobalObject -> GO )然后在运行代码阶段，v8引擎内部会有一个执行上下文栈（Execution Context Stack，ECStack）（函数调用栈）因为我们执行的是全局代码，为了全局代码能够正常的执行，需要创建全局执行上下文（Global Execution Context）全局
2022-07-08 23:48:44
69
原创 【无标题】
平面转换–位移：transform:translate(x,y);水平居中left：50%；top：50%；transform：translate（-50%，-50%）；//取盒子自己宽高的一半
2022-03-05 22:10:53
125
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人