- 博客(51)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 前端性能优化2:结合HTTPS与最佳实践，全面优化你的网站性能
关于在请求文件上的性能优化优化网站性能是一项系统性、持续性的工作，它绝非一蹴而就，更像是一门需要不断打磨的技艺。通过**拥抱并充分利用 HTTPS 及其带来的 HTTP/2、TLS 1.3 等现代协议优势**，**像雕刻艺术品一样严格控制页面文件大小（力争首屏 < 500KB）**，**以百米冲刺的速度压缩页面加载时间（力争 LCP < 1.5s）**，**深入服务器内部优化 TTFB（力争 < 200ms）**，以及**精简到极致的 HTTP 请求管理**，你就能为用户打造出真正流畅、安全、值得信赖的
2025-04-29 16:25:48
1175
原创 前端现代化性能优化1：iframe、CSS 与图片的深度解析
在这个系列中，我将分享前沿的性能优化技巧,记录一些学到的性能优化技巧，并记录一些性能优化工具，以及性能优化工具的原理，并记录一些性能优化工具的实践。且涉及内容会更现代，更适合开箱即用的感觉的东西。
2025-04-27 16:53:11
767
原创 PowerToys：让你的windows拥有更丝滑的体验
Microsoft PowerToys 是一套免费、开源的实用工具集，轻量，旨在增强 Windows 的生产力和个性化体验。最初为 Windows 95 开发，PowerToys 在 Windows 10 和 11 上以现代化工具集的形式重生。无论你是开发者、设计师，还是希望优化工作流程的普通用户，PowerToys 都能提供一系列工具，让你的 Windows 环境更高效、更符合个人需求。本文将详细介绍 PowerToys 是什么、其核心功能以及如何使用它来提升生产力。
2025-04-24 18:29:04
629
原创 前端抽象化，打破框架枷锁:web的多端通讯抽象
本文介绍了一种面向多端通讯场景的模块化设计方案，该方案通过抽象化接口和统一数据结构，实现了不同通讯方式（如iframe、WebSocket、WebView等）的标准化处理。核心设计包含桥对象（Bridge）、桥监听器（BridgeListener）、桥数据对象（BridgeDTO）和桥工厂（BridgeFactory）四个主要组件，其中桥对象定义了通讯的基本接口，桥监听器统一了事件监听机制，桥数据对象规范了消息格式，而桥工厂则负责管理桥接实例的创建、缓存和销毁。相比适配器模式，该方案采用工厂模式的优势在于能
2025-04-24 10:12:37
1239
原创 前端性能优化：所有权转移
所有权转移通过的transfer参数，将对象所有权移交到目标上下文，原始上下文无法再访问该对象。性能：避免复制大型数据。独占性：确保单一上下文控制资源。内存：释放原始上下文内存。高兼容性：窗口间、Web Worker、WebView iframe、Canvas 位图数据处理，（Safari 15+ 需注意）。兼容性有限：Service Worker、WebRTC、离屏渲染，, 流对象，仅最新浏览器支持。建议：优先使用高兼容性场景，检测功能支持，提供降级方案，确保跨平台稳定性。
2025-04-21 18:07:13
832
原创 使用 inobounce 解决 iOS 皮筋效果导致的无法下拉刷新
iOS 设备的 Safari 浏览器（包括混合APP开发的webview情况）在页面滚动到顶部或底部时，会允许页面继续上下滑动一段距离，并伴随弹性回弹。下拉刷新功能被皮筋效果覆盖，用户无法触发刷新。页面整体滑动导致布局错位或内容被截断。内部滚动区域（如表格或列表）无法正常滑动。通过使用inobounce，我们可以轻松禁用 iOS 的皮筋效果，从而解决下拉刷新功能被干扰的问题。无论是通过 npm 安装还是 CDN 引入，inobounce都提供了简单易用的 API，适合各种 H5 项目。
2025-04-21 16:03:22
828
原创 ✨ 照片美学评分系统：对您的照片进行视觉、构图、质量三个维度进行评分
**照片评分模型**，利用深度学习技术，能够自动对照片进行评分，输出视觉吸引力（Visual Appeal）、构图（Composition）和质量（Quality）三个维度的分数（1-100 分）。
2025-04-15 21:53:02
956
原创 Windows通过WSL2释放AI训练的无限潜能：打造高效Linux开发环境
WSL2为Windows用户提供了一个高效、轻量级的Linux环境，非常适合AI学习和训练。通过与VSCode和Jupyter的集成，开发者可以在Windows系统中享受Linux生态的完整开发体验，同时利用GPU加速进行模型训练。无论是初学者还是专业开发者，WSL2都是一个值得尝试的工具。开始使用WSL2，开启你的AI开发之旅吧！
2025-04-15 10:51:20
778
原创 TypeScript：从类型工具到前端系统设计的跃迁
你是否曾觉得 TypeScript 只是给 JavaScript 加了个类型“紧身衣”？本文不聊基础的 JS vs TS 对决，而是带你走进一个更高层次的视角——如何用 TS 从“码农式写代码”转型为“工程师式设计系统”。通过两个简单例子，我将展示 TS 不仅是工具，更是思维方式的革命。
2025-04-08 15:54:37
1009
原创 前端抽象化，打破框架枷锁:Http请求也许该一样
发送请求的库，和方法，有几种常用的，axios、fetch、uni.request等通常我们会在一个文件中，写入大量长得几乎一模一样的函数，只是参数稍微改变，来储存大量请求函数但是一旦使用的库变化了，这些或多或少，会有微调，如今我们将其抽象出来，让我们的使用变统一，让其实现解耦合，达到更高的复用性和可维护性。
2025-03-31 11:25:29
476
原创 前端抽象化，打破框架枷锁:统一路由的设计
对于前端路由的高级抽象设计，最核心的理念是**抽象**与**解耦**。我希望路由导航的逻辑能够独立于具体的框架存在，这样一套代码就能适配各种环境，既减少重复开发，又方便未来的扩展。同时使用中间件，让路由导航的逻辑更加模块化，可插拔，可控。
2025-03-25 15:50:57
1000
原创 前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理。
2024-06-20 10:14:37
493
原创 仅展示类型页面的高效编写代码的思维模式与方法
本文档旨在记录前端开发过程中的一种特殊情况：在没有后端接口的情况下，前端可以自由定义字段进行业务开发。当后端接口完成后，使用适配器将后端数据结构和字段适配修改为前端需要的结构和字段，而不改变前端页面任何代码的情况下进行接口对接。
2024-06-20 10:09:50
336
原创 scopeinject vue3-vite-ts 插件
用于修复vue3引用外部 ts文件中的数据的一些问题，当然也可以用作其他自动化用途用于将指定文件夹下第一层的.ts结尾内容，直接注入指定位置。
2023-05-31 18:20:03
208
原创 关于创建vue3项目 vscode的vetur插件依然报错需要template有根标签解决方法
最简单方便的解决vscode的vetur报错The template root requires exactly one element. eslint-plugin-vue
2022-04-27 09:52:45
2102
原创 vue 库模式打包 批量
vue库模式 WebComponents 的批量打包方法 使用Nodejs进行批量打包使用nodejs执行cmd中的命令的方法
2022-03-01 14:45:00
701
原创 functionPlot.js 拿到y轴函数某个点的位置 以及各种接口
functionPlot.js 获取 y轴坐标 曲线某个点的位置 各种隐藏的api
2022-02-26 11:08:34
490
转载 2021-11-05 js 性能优化
Web篇之JS性能优化首先，性能优化分好几个方面，本章我们从js方面来优化。1：垃圾收集日常中的某些情况下垃圾收集器无法回收无用变量，导致的一个结果就是——内存使用率不断增高，以下为对应的情况以及处理方法。①对象相互引用会导致引用计数始终为2，所以用完对象后应将引用设为null，例子如下let element = document.getElementById("test");let myObject = new Object();myObject.element = element;ele
2021-11-05 10:44:25
203
原创 nuxt asyncData请求数据失败的问题 如何解决
失败原因折磨，折磨，asyncData请求数据，流程很离谱首先，asyncData只在页面级别的组件中才会执行其次，也是重点如果你看见这个了，那么，你就遇到问题了我通过process.client以及process.server发现第一次进入页面，asyncData里的请求，是在客户端请求。第二次进入页面，asyncData里的请求，是算服务端的。而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据遇到的问题然后，因为这两个奇怪的流程，就出现了：第一次不
2021-10-20 16:13:02
3552
2
原创 关于vue和nuxt的env配置。
VUEenv配置是为了前端能够根据不同的环境，在一些功能上有不同表现。如请求数据的接口。为了不用频繁修改这些配置，可以配置env来让程序中有一个很方便的判断环境的属性，或者是可以直接使用当前环境的特定配置的属性。首先在根目录放三个固定文件这三个文件，命名固定，不能乱改。.env：基础配置项，无论在哪个环境运行，都会加载里面的内容.env.development:开发环境会加载，而且相同的配置项会覆盖掉.env中的.env.production:生产环境会加载，而且相同的配置项会覆盖掉.env中
2021-10-07 12:19:18
3730
6
原创 nuxt asyncData应该注意的一个问题 asyncData不执行问题
asyncData只在页面组件级别会被调用，而页面组件的子组件级别，根本就不会执行！很简短，但是很重要。
2021-10-06 17:10:14
1867
1
原创 axios delete请求 携带request payload
最近遇到个需要在delete请求中，既要在路径中传参数，又要携带request payload参数的问题然后百思不得其解，不知道咋才能给delete带上request payload最后找了半天才知道，需要传递的数据，需要用对象保存，键名是data// 删除路径下的课程export function delWayClass(params) { return del(`/admin/course/path/deleteCourse?pathId=${params.pathId}`, { data
2021-09-28 14:49:24
958
原创 vue+element写后台管理系统时，表格和分页功能的一个注意事项（容易忽略的重要细节）
用vue+element 写后台管理系统，是很常见的项目。其中，element的table表格和分页功能，常常会配合使用。这里，有一个关于删除的重要细节如图示，在表格只有最后一条数据时候，删除的请求，如果只是把id上传去删除，然后做请求成功和失败的处理，就会出现删除后，重新获取所有列表的页码仍然是第二页。但实际上删除了这条数据，应该只剩下一页的数据数据了。导致页面出现暂无数据。如图中，删除后，重新请求所有数据的请求，页码是2，但实际上，页面只剩下1页了，所以请求不到数据。于是，我们应该在删除后，
2021-09-27 11:13:49
312
原创 跨域，为解决跨域的代理原理是什么？vue2中如何配置跨域
在js使用ajax请求后台接口的数据时，新人会遇到跨域问题，也许你已经通过百度，知道了怎么通过代理解决跨域问题，那么，原理是什么？当遇到跨域情况时，控制台会有以下类似的报错*Access to XMLHttpRequest at ‘xxxxxxxxxxxxxxxxx’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No‘Access-Control-Allow-Origin’ header is presen
2021-09-25 22:56:32
347
原创 vue+element的面包屑导航，动态实现（简单好用）2021-09-23
element的面包屑导航没有切换事件，没有各种动态绑定什么的，但是面包屑却需要随页面变化而层级变化这里，我采用watch监听加判断来搞定<template> <el-card> <!-- 面包屑 注意面包屑的点击方法，要加native，因为组件事件触发需要它 --> <el-breadcrumb class="bread" separator-class="el-icon-arrow-right"> <el-brea
2021-09-23 10:31:39
2109
原创 js-函数的call方法原理是怎样的
注意，这里只是去演示原理，实际上，这个call方法内部实现方式可能会有细微差别，但原理就是这个样子。 // 直接在Function的原型上添加 Function.prototype.callfunc = function (context) { // 按照js函数接收参数的规则，这个context就是第一个传入的参数 // 也就是传入的要作为this 的对象 不传入，就是window var content = context || window
2021-09-08 16:34:34
185
原创 关于javaScript中的防抖-debounce与节流-throttle
关于js中的防抖首先，什么是防抖？是用来解决什么问题的？防抖，是一种用来 优化性能 的技巧例子：一个用于搜索的input输入框，希望可以输入内容后，自动出现一个下拉列表，列表中是可能的搜索项，如果单单给input加入change、keyup等事件，其实会很浪费性能，一般来说，应该是用户输入完后再给出一些输入建议。这里给出代码和解释 //这里拿到input输入框 let searchInput = document.getElementById('input') //这里定义一个变量，来保存延
2021-09-06 23:43:15
135
原创 dart-运算符-条件表达式
运算符main(List<String> args) { // dart 包含其他语言也包含的加减乘除运算符 // 特别的 int a=13; int b = 5; print(a~/b);//取整 var c = a*b; print(c); // &&是并 ||是或 与js相同 //赋值运算符除了 = 还有个??= var d=null; d ??=23; //??= 就是变量的值为null的话，就把右边的值赋值给他
2021-07-20 19:50:11
125
原创 dart-数据类型
main(List<String> args) { // string 字符 支持三个单引号 支持换行 var str1="abc"; var str2='abc'; var str3=''' abc cba '''; // 类似于js 的 模板字符串 print("${str1} ${str2} ${str3}"); // 还能能简写 但是这种方式不是所有情况下都可以的,$后面跟个变量就可以 但是如果后面是个表达式，就要用${} print("$
2021-07-20 19:47:31
195
原创 dart-变量-常量
变量/* dart是强类型语言 变量需要明确类型 */ String name = 'what'; int age = 18; double height = 1.65; // 检测数据类型 print(name.runtimeType); // 类型推导 根据输入的内容，自动定义类型 但是不代表更改时候可以更改其他类型 var message = 'world '; 常量 // const / final 定义常量 main(Lis
2021-07-20 19:45:26
116
原创 dart-关于main函数体
// dart的入口函数是main函数// dart中打印内容使用print/* 1 简化main函数 main(){ print('你好 hello'); } */ /* 2 完整的main函数 函数的返回值类型 函数名称(参数列表){ 函数体 }*/// List 相当于 JS中的Array// 就如ts里的泛型，这里也有泛型void main(List<String> args){ print('hello flutter'); pr
2021-07-20 19:39:52
441
原创 nest 服务与cookie 2021/7/16
服务Nestjs 中的服务可以是 service 也可以 provider 他们都可以通过 constructor 注入依赖关系 服务本质上就是通过@Injectable() 装饰器注解的累 在 Nestjs 中服务相当于 MVC 的 Model在服务中，可以封装公共的功能或进行数据库操作nest g provider 或 service 都可以创建服务在服务中 可以去定义一个个方法 然后在控制器中去使用像这样，先引入 并进行以来注入import { ListService } from './
2021-07-16 14:28:30
301
原创 javascript检测是正常浏览器，还是微信2021-07-15
“共同性，共鸣” // 检测是否为微信端浏览器 const terminal=()=>{ let ua = window.navigator.userAgent if(ua.indexOf('MicroMessenger')!=-1){ return true; } else { return false; }}//是微信端浏览器就返回true，否则就返回false...
2021-07-15 18:48:34
107
vscode dart开发没有代码提升和报错波浪线，为什么？
2021-07-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人