- 博客(100)
- 收藏
- 关注
RSS订阅原创 项目图标组件处理
我们如何复用项目里的图标，如何维护和引用图标？我们希望达到的目的其实综上所述，现在我们的图标有几种方案：1. 字体图标。2. 纯css图标（unocss）。3. svg图标（svgr，unplugin-icons）最后经过综合考虑，我们使用的是unocss的方案，因为不涉及到内部路径的变动或者复杂交互，只需要简单的基础图标库使用，用unocss确实会方便很多。
2025-05-13 21:41:53
668
原创 INP指标
INP是一项稳定的 Core Web Vitals 指标，通过统计用户访问期间所有符合条件的互动约定时间，评估网页对用户操作的总体响应能力。最终值：取观察到的最长互动时间（可能忽略高群值）。用户体验目标INP 应 ≤ 200 毫秒，建议以P75（按设备类型细分）作为达标基准。
2025-05-03 23:55:19
353
原创 项目复杂业务的数据流解耦处理方案整理
Model-View-Controller（模型-视图-控制器） 模式，这种模式可以理解为：Controller负责将Model的数据用View显示出来。它是一种单向数据流管理。Model-ViewModel-View模式，MVC的进阶版，ViewModel在其中起到了双向绑定的作用，解耦了View层直接读取Model层，并且ViewModel实现了View和Model的自动同步，使开发者不必再去关心交互时的同步问题，或者直接操作DOM节点，更专注于数据逻辑的处理。
2025-04-05 13:03:37
1082
原创 TS开发的问题记录和类型记录
每一个html元素都有它专属的节点类型：HTMLDivElement、HTMLButtonElement等等。一些真的很常用的type / interface / 并集、交集就不介绍了，本章的重点在“实用类型”。表示对象键的类型（必须是 string | number | symbol 或其子类型）另外我们在typing.d.ts定义了一些其他的实用类型。：用于定义一个对象类型，具有天然的约束性。：用于获取函数类型的返回值类型。
2025-01-26 16:44:40
683
原创 记录Next项目低版本浏览器代码兼容polyfill处理问题
今天发现一个的API在低版本浏览器中无法兼容的问题。考虑了如下解决方案，一个个说。
2024-12-25 00:22:19
1455
2
原创 降低Mobx技术债问题-React前端数据流方案调研整理
我们现在主要是使用Mobx，但是Mobx的易于上手和灵活度也带来了很多预期以外的问题，随着项目的增长我们的代码技术债变得愈加沉重，不同的模块杂糅一起、单一store无限膨胀。为此我们的调研是希望能找到一个更好的state配置、数据流的约定方案。
2024-12-22 00:01:29
963
原创 本地调试技巧：用Caddy搭建简易服务器反向代理
如果是bug调试什么的使用vscode的调试功能就好，但是有一些第三方服务有安全限制非要在https的正式域名下面才能触发，这样想调试第三方服务的代码就会很烦，因为本地没有办法知道上线效果。因此考虑在本地使用caddy搭建简易服务器做反向代理到正式环境的域名。这样访问正式环境时候实际上访问到我们的本地。本教程适用Mac。
2024-12-21 20:27:10
1429
原创 nextJS项目内引入TS的基础设施+使用ts书写express服务端
Next本来就内置了ts的webpack配置、babel配置，想要引入的成本很低。还有最痛苦的问题就是不知道express怎么写ts啊啊啊，我原本的文件都是用CJS导入导出的，但是根本不支持导出type，导致我写个type到处都是报错😭总之把一些步骤和解决措施放在下面。
2024-10-06 20:02:52
1198
原创 React重学笔记
React v16 引入的 Fiber 协调引擎，比起老版本来说，为了提高协调效率，减少页面交互卡顿，React 的 Fiber引擎把协调从同步过程改进成了异步过程。
2024-08-13 00:04:22
757
原创 优化Next的webpack配置
众所周知，next的webpack打包实际上分成了两个部分，一个是服务器端、一个是客户端，我们这里的配置主要是针对客户端的配置。目的在于降低_app.js包大小，合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。
2024-08-11 15:36:50
1497
原创 Partytown调研说明
Partytown 是一个主要用于前端性能优化的工具，它通过将第三方脚本放入web worker中运行，来将主线程与第三方脚本的执行隔离开，从而加速页面加载和交互。参考文档。
2024-07-14 21:20:30
726
原创 Failed to execute ‘removeChild‘ on ‘Node‘: The node to be removed is not a child of this node.
不知道大家见到过这个removeChild报错没有，去年项目设置了错误崩溃的兜底后，发现上线后页面瞬间疯狂报错页面崩溃，而且根本找不到头绪，报错原因就是这个removeChild找不到节点，真的要碎了。本地根本没有办法复现，根据报错的UA分析，更是所有机型都存在，如果遇上用户反馈，我们只能建议他们换个浏览器试试。
2024-07-14 20:54:37
2601
2
原创 Node端使用工作线程来解决日志开销-处理IO密集型任务
在Node.js中，实现不同线程或进程间的资源共享和上锁，通常需要针对场景选择合适的机制。提供了共享内存和原子操作，而cluster和主要依靠消息传递和外部存储解决资源共享问题。记住多线程和多进程编程都需要考虑同步和竞态条件等问题，合理设计代码以确保线程安全和数据的一臀性。
2024-07-02 00:18:52
899
原创 PWA和serviceWorker 监听请求与缓存资源
相比起（一）做一些webApp配置，缓存与拦截请求这一块才是我最想了解的。参考的仍然是（一）的文章，还有一些别的：mdn-Service Worker API预缓存方案PWA学习手册Service Worker简易教程-推荐看web应用能做到离线可用，主要就是看serviceWorker在有网的时候先缓存资源，离线后再利用缓存里的资源显示给用户。可以把Service Worker简单理解为一个独立于前端页面，在后台运行的进程。因此，它不会阻塞浏览器脚本的运行，同时也无法直接访问浏览器相关的API
2024-05-27 14:30:46
1688
原创 Service Worker的生命周期和全局对象和API
当我们注册了Service Worker后，它会经历生命周期的各个阶段，同时会触发相应的事件。整个生命周期包括了：installing --> installed --> activating --> activated --> redundant。当Service Worker安装（installed）完毕后，会触发install事件；而激活（activated）后，则会触发activate事件。serviceWorker中，进程的全局对象（类似于window）叫做。
2024-05-14 17:17:44
1178
1
原创 读后笔记，看看大公司的优化经验-《规模化场景下的 Twitter Lite 与高性能 React 渐进式 Web 应用》
一直在苦恼项目的优化指标的问题。。。啊啊啊，然后看到下面这篇文章瞬间觉得写得好好，好有启发啊，记下来一下~
2024-03-28 23:41:09
1155
原创 优化CLS指标方法和NEXT的SSR实践处理
累积布局偏移（Cumulative Layout Shift，CLS），衡量页面上元素位置发生变化的频率和程度。具体来说，CLS是页面上所有意外布局移动实例的累计得分，每个实例的得分是影响的视口分数和移动距离的乘积。作为访问该网站的用户，我们可能无法确定页面何时完成加载。我们可能会尝试点击一个新闻故事，结果页面布局发生了巨大变化。这样一来，我们就会进入错误的页面，不得不浪费时间返回。根据页面的不同，这种情况可能会发生多次。如果频繁发生这种情况，我们就会失去对该页面继续访问的兴趣，导致用户留存度下降。
2024-03-28 00:00:38
1170
原创 Wasm初上手
总之也是为了扩宽技术面吧。。。我也不知道为什么就想试试了，就酱。参考阅读：极客时间《WebAssembly入门课》安装wasm的编译器Emscripten。Emscripten 是一个“源到源”语言编译器工具集，这个工具集可以将 C/C++ 代码编译成对应 JavaScript 代码。
2024-03-27 23:45:24
1095
原创 Nginx负载均衡和反向代理
假如现在是一个访问高峰期，一个服务器顶不住了，你不得不多买了一些服务器来部署自己的项目，（其实就相当于一个集群）接下来怎么让访问流量映射到这些服务器呢？其实Nginx的负载均衡原理很简单，上一篇我在自己写的Nginx部署的博文里把Nginx做了一些简单配置之后，对“负载均衡”的概念就很好理解了。参考文档：https://zhuanlan.zhihu.com/p/416911252。配置权重和服务器路径，这样访问来的请求就会被“负载均衡”了。如下代码示例，访问请求全部被拦截到集群配置里，由。
2024-03-13 23:32:51
469
原创 Node服务器性能分析调优debug
使用这个工具我们可以分析自己的Node项目调用堆栈里耗时较长的任务，对应去做缓存或者异步调用优化；还可以打断点debug我们的项目。本文就是来介绍一下怎么使用Chrome devtool的性能分析工具的。为了使优化和测试效果更加明显，建议可以先安装一个apache提供的压测工具：ab。这样可以在大量请求下看到调用情况。注意是每个平台都有不同的版本，看自己的操作系统寻找安装教程即可。windows安装ab压测：https://www.jianshu.com/p/2d0a068396cd。
2024-03-01 23:47:19
1064
原创 结合Next项目实际认识webpack.splitChunks
webpack5出于“开箱即用”的目的，将大部分曾经要使用插件的功能集成到了config配置中，因此用户只需要了解如何配置，即可达到优化目的，其中最常使用接触的配置是：webpack.optimization.splitChunks。
2024-02-12 23:43:04
2229
原创 webpack实际实践优化项目
本文只专注于性能优化的这个部分。总体来说分为两个方面：第一是开发环境中主要优化打包速度，第二是线上环境中主要优化分包大小。
2024-02-12 23:41:43
1640
原创 什么是vite，如何使用
Vite在启动时会先做一些准备工作，比如对第三方模块进行预编译处理，然后在本地启动一个开发服务器dev server，在中间件中对请求的文件进行处理，大概处理流程如下：加载源文件、转化翻译成ESM可解析的文件，比如ts -> js, less -> css 等，分析源文件依赖，然后返回请求的js文件。vite利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，vite在启动的时候不需要打包，不需要分析模块的依赖和编译，因此启动速度快。模块解析、增加中间件、启动服务器。
2024-02-12 23:34:12
2275
原创 webpack面试解析
由于webpack 本身只能打包commonjs规范的js文件，对css，图片等格式的文件没法打包，因此引入了Loader来帮助打包，Loader可以看作是一个各种类型的模块翻译器，将非js模块转化为webpack能识别的js模块，比如css-loader会把css文件最后打包成css.js。是一个包含了webpack环境的所有配置信息的对象，可以理解为webpack的实例，是全局唯一的，它内部包括options / loader / plugin的信息和 webpack 整个生命周期相关的钩子。
2024-02-12 23:33:22
2000
原创 阿里云构建流程错误记录
一般看到这里边上是NodeNodeJS构建中的问题，基本上很多都是代码问题。（此次错误原因在于构建时需要运行一个信息获取接口，但是那个接口必须是内网调用，所以信息获取失败），但是必须注意window电脑设置运行环境变量命令为set，mac设置用export（一开始在这个问题上吃大亏，还以为这个配置不管用）import ESM 模块失败，解决方法是：pakage.json中锁一下当前依赖版本（修改Node构建版本没有用）Node构建版本问题，解决方法在流程编辑中修改构建的Node环境为16.4即可。
2024-02-12 23:31:23
513
原创 prettier-eslint 失效
一般来说建议本地统一用eslint或者prettier-eslint，其实本地怎么格式化可以凭喜好即可。然后设置husky在提交前自动格式化的钩子，就可以保证提交到远端的代码格式化规则相同。不会存在不同浏览器的问题。
2024-02-12 23:31:09
1027
原创 Docker部署前端项目
参考1:Dockerfile参考2(写得更通俗易懂):Dockerfile** 推荐阅读：DockerFile详解 **如果有一天我们想要制作一个反复使用的镜像，每一次使用都要重新安装环境和配置很麻烦，但是使用Dockerfile就可以达到一次制作反复clone的效果了。只需要把步骤都写进一个文件里，然后让docker自己去实现就好了。Dockerfile其中的每一条指令都会构建出一层镜像，因此每一条指令就是用于描述该镜像如何构建。
2024-02-08 15:46:53
1413
原创 video / image上传操作-校验、截取首帧和正方形预览图等
上文中已经截取到了base64格式的视频首帧，因此预览图从封面中截取，此处截取的规则如下：图片自适应在封面（设置为200*200）大小，短的那一条边和200px等宽，全部取用，而更长的那一条边取居中长度裁剪。将绘画对象花在画布上，首先从绘画对象的(x,y)坐标开始，横着沿x轴画一条imageSizeX这么长的线，然后再纵向沿着y轴画一条imageSizeY这么长的线，我们就在【原图】上画了一个长方形。在裁剪之前简单介绍一下canvas裁剪的函数，其实还是靠最基本的drawImage。
2024-02-08 15:45:13
569
原创 video标签
HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放；HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放；加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
2024-02-08 14:11:54
1320
原创 MVC模式&Nodejs+express+Mysql开发后台
想给自己的博客做个后台，一开始考虑的是java开发，然后把idea和一堆东西勤勤恳恳安装完了之后，心里一想，算了，咱就nodejs不方便多了，于是开始Nodejs开发后台。Java和idea环境安装Spring MVC简介基于java的实现MVC设计模式的请求驱动类型的轻量级Web框架，通过注解，无需实现任何接口，处理请求，支持restful。三层结构：表现层、业务层、持久层设计模式：Model（模型）、View(视图)、Controller（控制器）
2024-02-08 14:10:45
548
原创 初识NodeJS
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。在Chrome里写NodeJS和在NodeJS里写JS有区别吗？几乎没有区别，因为都是用V8引擎编译和解释，唯一的区别在于：NodeJS中没有浏览器API，没有浏览器环境变量window、document等等，却多了NodeJS API，比如文件系统、进程管理等。
2024-02-08 14:10:23
853
原创 不系统学习NodeJs之进程线程
从工作期间断断续续接触Node，从去年的3月份、10月份、又到今年的3月份，终于又决定要再仔细看看Node的相关。不系统学习的各种时期笔记&参考记录于此。线下书：深入浅出node.js 著-朴灵。
2024-02-08 14:09:54
853
原创 前端动效讲解与实战
这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。Canvas只占用一个DOM节点，在做一些烟花、飘雪等运动元素很多的动画时，会比CSS/SVG性能好。一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
2024-02-08 14:09:38
931
原创 JS中的设计模式
门面模式（facade）是一种经常可以在 jQuery 等 JavaScript 库中看到的结构，它的特点是把很多的解决复杂的兼容性问题的实现隐藏在背后，只通过“门面”将对外的接口抽象提供给使用者。它结合了对象组合和对象增强各自的优点，我们既不需要手动的去 delegate 所有的方法，也不会改变主体对象，保持了主体对象的不变性。比如我们常用的 jQuery 的 $() 查询器做的就是把很多复杂的用来接收和解析多种类型的查询功能在后端通过 Sizzle 引擎处理，呈现给开发者的是一套更加简便的选择器。
2024-02-08 14:09:22
937
原创 JS进阶（一）
编译中：V8 会混合使用编译器和解释器技术的双轮驱动设计实时编译（JIT Just in Time），这个双轮的一个轮子是直接执行，另一个发现热点代码会优化成机器码再执行，这样做的目的是为了性能的权衡和提升。另外一点值得注意的是，如我们在前一讲所说，函数提升的只是声明式函数，而表达式函数则和变量赋值一样，不会被提升。JS的作用域分成静态作用域（词法作用域）和动态作用域（变量作用域），静态作用域在编译时已经分析完毕，此时会做一些变量提升、函数声明提升的处理，而动态作用域会在执行前进行生成，也是语法解析。
2024-02-08 14:09:02
909
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人