- 博客(89)
- 收藏
- 关注
RSS订阅原创 Partytown调研说明
Partytown 是一个主要用于前端性能优化的工具，它通过将第三方脚本放入web worker中运行，来将主线程与第三方脚本的执行隔离开，从而加速页面加载和交互。参考文档。
2024-07-14 21:20:30
562
原创 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
357
原创 Node端使用工作线程来解决日志开销-处理IO密集型任务
在Node.js中，实现不同线程或进程间的资源共享和上锁，通常需要针对场景选择合适的机制。提供了共享内存和原子操作，而cluster和主要依靠消息传递和外部存储解决资源共享问题。记住多线程和多进程编程都需要考虑同步和竞态条件等问题，合理设计代码以确保线程安全和数据的一臀性。
2024-07-02 00:18:52
760
原创 PWA和serviceWorker 监听请求与缓存资源
相比起（一）做一些webApp配置，缓存与拦截请求这一块才是我最想了解的。参考的仍然是（一）的文章，还有一些别的：mdn-Service Worker API预缓存方案PWA学习手册Service Worker简易教程-推荐看web应用能做到离线可用，主要就是看serviceWorker在有网的时候先缓存资源，离线后再利用缓存里的资源显示给用户。可以把Service Worker简单理解为一个独立于前端页面，在后台运行的进程。因此，它不会阻塞浏览器脚本的运行，同时也无法直接访问浏览器相关的API
2024-05-27 14:30:46
1267
原创 Service Worker的生命周期和全局对象和API
当我们注册了Service Worker后，它会经历生命周期的各个阶段，同时会触发相应的事件。整个生命周期包括了：installing --> installed --> activating --> activated --> redundant。当Service Worker安装（installed）完毕后，会触发install事件；而激活（activated）后，则会触发activate事件。serviceWorker中，进程的全局对象（类似于window）叫做。
2024-05-14 17:17:44
899
原创 读后笔记，看看大公司的优化经验-《规模化场景下的 Twitter Lite 与高性能 React 渐进式 Web 应用》
一直在苦恼项目的优化指标的问题。。。啊啊啊，然后看到下面这篇文章瞬间觉得写得好好，好有启发啊，记下来一下~
2024-03-28 23:41:09
1067
原创 优化CLS指标方法和NEXT的SSR实践处理
累积布局偏移（Cumulative Layout Shift，CLS），衡量页面上元素位置发生变化的频率和程度。具体来说，CLS是页面上所有意外布局移动实例的累计得分，每个实例的得分是影响的视口分数和移动距离的乘积。作为访问该网站的用户，我们可能无法确定页面何时完成加载。我们可能会尝试点击一个新闻故事，结果页面布局发生了巨大变化。这样一来，我们就会进入错误的页面，不得不浪费时间返回。根据页面的不同，这种情况可能会发生多次。如果频繁发生这种情况，我们就会失去对该页面继续访问的兴趣，导致用户留存度下降。
2024-03-28 00:00:38
896
原创 Wasm初上手
总之也是为了扩宽技术面吧。。。我也不知道为什么就想试试了，就酱。参考阅读：极客时间《WebAssembly入门课》安装wasm的编译器Emscripten。Emscripten 是一个“源到源”语言编译器工具集，这个工具集可以将 C/C++ 代码编译成对应 JavaScript 代码。
2024-03-27 23:45:24
949
原创 Nginx负载均衡和反向代理
假如现在是一个访问高峰期，一个服务器顶不住了，你不得不多买了一些服务器来部署自己的项目，（其实就相当于一个集群）接下来怎么让访问流量映射到这些服务器呢？其实Nginx的负载均衡原理很简单，上一篇我在自己写的Nginx部署的博文里把Nginx做了一些简单配置之后，对“负载均衡”的概念就很好理解了。参考文档：https://zhuanlan.zhihu.com/p/416911252。配置权重和服务器路径，这样访问来的请求就会被“负载均衡”了。如下代码示例，访问请求全部被拦截到集群配置里，由。
2024-03-13 23:32:51
389
原创 Node服务器性能分析调优debug
使用这个工具我们可以分析自己的Node项目调用堆栈里耗时较长的任务，对应去做缓存或者异步调用优化；还可以打断点debug我们的项目。本文就是来介绍一下怎么使用Chrome devtool的性能分析工具的。为了使优化和测试效果更加明显，建议可以先安装一个apache提供的压测工具：ab。这样可以在大量请求下看到调用情况。注意是每个平台都有不同的版本，看自己的操作系统寻找安装教程即可。windows安装ab压测：https://www.jianshu.com/p/2d0a068396cd。
2024-03-01 23:47:19
912
原创 结合Next项目实际认识webpack.splitChunks
webpack5出于“开箱即用”的目的，将大部分曾经要使用插件的功能集成到了config配置中，因此用户只需要了解如何配置，即可达到优化目的，其中最常使用接触的配置是：webpack.optimization.splitChunks。
2024-02-12 23:43:04
1789
原创 webpack实际实践优化项目
本文只专注于性能优化的这个部分。总体来说分为两个方面：第一是开发环境中主要优化打包速度，第二是线上环境中主要优化分包大小。
2024-02-12 23:41:43
1523
原创 什么是vite，如何使用
Vite在启动时会先做一些准备工作，比如对第三方模块进行预编译处理，然后在本地启动一个开发服务器dev server，在中间件中对请求的文件进行处理，大概处理流程如下：加载源文件、转化翻译成ESM可解析的文件，比如ts -> js, less -> css 等，分析源文件依赖，然后返回请求的js文件。vite利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，vite在启动的时候不需要打包，不需要分析模块的依赖和编译，因此启动速度快。模块解析、增加中间件、启动服务器。
2024-02-12 23:34:12
1956
原创 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
1890
原创 阿里云构建流程错误记录
一般看到这里边上是NodeNodeJS构建中的问题，基本上很多都是代码问题。（此次错误原因在于构建时需要运行一个信息获取接口，但是那个接口必须是内网调用，所以信息获取失败），但是必须注意window电脑设置运行环境变量命令为set，mac设置用export（一开始在这个问题上吃大亏，还以为这个配置不管用）import ESM 模块失败，解决方法是：pakage.json中锁一下当前依赖版本（修改Node构建版本没有用）Node构建版本问题，解决方法在流程编辑中修改构建的Node环境为16.4即可。
2024-02-12 23:31:23
424
原创 prettier-eslint 失效
一般来说建议本地统一用eslint或者prettier-eslint，其实本地怎么格式化可以凭喜好即可。然后设置husky在提交前自动格式化的钩子，就可以保证提交到远端的代码格式化规则相同。不会存在不同浏览器的问题。
2024-02-12 23:31:09
670
原创 Docker部署前端项目
参考1:Dockerfile参考2(写得更通俗易懂):Dockerfile** 推荐阅读：DockerFile详解 **如果有一天我们想要制作一个反复使用的镜像，每一次使用都要重新安装环境和配置很麻烦，但是使用Dockerfile就可以达到一次制作反复clone的效果了。只需要把步骤都写进一个文件里，然后让docker自己去实现就好了。Dockerfile其中的每一条指令都会构建出一层镜像，因此每一条指令就是用于描述该镜像如何构建。
2024-02-08 15:46:53
1197
原创 video / image上传操作-校验、截取首帧和正方形预览图等
上文中已经截取到了base64格式的视频首帧，因此预览图从封面中截取，此处截取的规则如下：图片自适应在封面（设置为200*200）大小，短的那一条边和200px等宽，全部取用，而更长的那一条边取居中长度裁剪。将绘画对象花在画布上，首先从绘画对象的(x,y)坐标开始，横着沿x轴画一条imageSizeX这么长的线，然后再纵向沿着y轴画一条imageSizeY这么长的线，我们就在【原图】上画了一个长方形。在裁剪之前简单介绍一下canvas裁剪的函数，其实还是靠最基本的drawImage。
2024-02-08 15:45:13
446
原创 video标签
HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放；HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放；加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
2024-02-08 14:11:54
1058
原创 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
463
原创 初识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
786
原创 不系统学习NodeJs之进程线程
从工作期间断断续续接触Node，从去年的3月份、10月份、又到今年的3月份，终于又决定要再仔细看看Node的相关。不系统学习的各种时期笔记&参考记录于此。线下书：深入浅出node.js 著-朴灵。
2024-02-08 14:09:54
801
原创 前端动效讲解与实战
这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。Canvas只占用一个DOM节点，在做一些烟花、飘雪等运动元素很多的动画时，会比CSS/SVG性能好。一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
2024-02-08 14:09:38
803
原创 JS中的设计模式
门面模式（facade）是一种经常可以在 jQuery 等 JavaScript 库中看到的结构，它的特点是把很多的解决复杂的兼容性问题的实现隐藏在背后，只通过“门面”将对外的接口抽象提供给使用者。它结合了对象组合和对象增强各自的优点，我们既不需要手动的去 delegate 所有的方法，也不会改变主体对象，保持了主体对象的不变性。比如我们常用的 jQuery 的 $() 查询器做的就是把很多复杂的用来接收和解析多种类型的查询功能在后端通过 Sizzle 引擎处理，呈现给开发者的是一套更加简便的选择器。
2024-02-08 14:09:22
893
原创 JS进阶（一）
编译中：V8 会混合使用编译器和解释器技术的双轮驱动设计实时编译（JIT Just in Time），这个双轮的一个轮子是直接执行，另一个发现热点代码会优化成机器码再执行，这样做的目的是为了性能的权衡和提升。另外一点值得注意的是，如我们在前一讲所说，函数提升的只是声明式函数，而表达式函数则和变量赋值一样，不会被提升。JS的作用域分成静态作用域（词法作用域）和动态作用域（变量作用域），静态作用域在编译时已经分析完毕，此时会做一些变量提升、函数声明提升的处理，而动态作用域会在执行前进行生成，也是语法解析。
2024-02-08 14:09:02
850
原创 JavaScript相关（四）——事件循环
这主要和js的用途有关,js是作为浏览器的脚本语言,主要是实现用户与浏览器的交互,以及操作dom;这决定了它只能是单线程,否则会带来很复杂的同步问题。举个例子:如果js被设计了多线程,如果有一个线程要修改一个dom元素,另一个线程要删除这个dom元素,此时浏览器就会一脸茫然,不知所措，如果要对使用的资源上锁的话可能又会加重操作开销。所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。
2024-02-08 14:08:36
355
原创 JavaScript相关（三）——this
其实这是同一个逻辑链，函数调用，生成执行上下文，得到一个this属性指向当前函数的变量环境，而如果当前变量环境找不到变量，则需要顺着作用域链去寻找外部的变量环境，而外部的作用域链是代码定义时就规定的。
2024-02-08 14:08:16
335
原创 跳表&散列表
假设我们要查找的数据是 x，在第 k 级索引中，我们遍历到 y 结点之后，发现 x 大于 y，小于后面的结点 z，所以我们通过 y 的 down 指针，从第 k 级索引下降到第 k-1 级索引。可以通过一个随机函数，来决定将这个结点插入到哪几级索引中，比如随机函数生成了值 K，那我们就将这个结点添加到最底级到第 K 级的索引中。在实际的软件开发中，原始链表中存储的有可能是很大的对象，而索引结点只需要存储关键值和几个指针，并不需要存储对象，所以当对象比索引结点大很多时，那索引占用的额外空间就可以忽略了。
2024-02-08 14:07:43
964
原创 链表算法练习
稳定性在多重排序中具有一定作用，比如要对数据进行金额升序、金额相同的时间升序的排序，首先部分人可能会考虑先金额升序再对每个金额相同的小区间排序，但是其实可以考虑更加效率的方式：首先对数据进行时间升序排序、再对金额进行稳定性的排序升序，这样两遍排序之后就是符合要求的了。可以像快排那样，选取中点，将数组分成大小不同的两堆，如果中点下标=k-1，那它就是第k大的，如果不是，就看比它大还是小,如果 k>p+1, 说明第 k 大元素出现在 A(p+1…r)区间，小于同理，在前后进行分区然后再判断。
2024-02-08 14:01:10
728
原创 前端代码评审规范
项目中的z-index书写不能太随心所欲，本文规范中以使用的公共组件antd中规定弹窗的z-index:1002为准，如果当前组件层级需要高于页面中的弹窗展示，则可以取大于1002的值，否则，应取值小于1002。大部分情况下我们更关注JS代码中的注释，但是CSS文件中也存在一些需要书写注释的地方，比如公用样式、复杂的CSS组合，LESS函数样式等，CSS中书写注释有利于划分CSS的层级组合、样式嵌套、维护复用等。并非所有的CSS选择器都会影响性能，关键是关注 右侧 关键选择器匹配范围广泛的CSS选择器。
2024-02-07 22:41:57
1813
原创 浏览器historyAPI和Next路由掉坑记录
Url可以传入一个对象，而不是简单的字符串，UrlObject的参数常用的有：hash、pathname、search、query。
2024-02-07 22:37:11
1060
原创 图片&视频上传压缩的考察
能否在上传时就限制图片的张数？移动端不能使图库变成禁止状态，用户点击完成之后才能进行校验。能否限制上传的文件格式？可以限制，PC端能够完美限制，移动端只能部分限制，限制上传图片，IOS会将txt等文件禁用，但是安卓机不会，仍然能上传txt，手机上传中会无属性。选择之后必须再进行校验提示。可考虑做移动 / PC端不同配置。实现方式采用实现，不限制格式。参考https://tinypng.com/。安卓机上表现：可以选择相册、照片、文件，但是外层一次只能选择一张，进入图库内层可以选择多张。
2024-02-07 22:36:13
1785
原创 为自己的项目媒体资源添加固定高度
需注意：因为固定高度的span包裹在lazyload里面，所以它仍然会用户下滑到某个距离才显示出内部内容 以及 高度，但是span \ padding-bottom的加载速度极快，比媒体资源快很多，所以可以达到下滑时看到固定高度的效果。于是不得已之下必须还是得选择固定高度的方案，翻找了一下网上的建议，最后找到了一个比较快捷的方式如下，只需要设定好每个媒体资源的宽高比例，以及宽度，即可自动设定好高度。直到这个季度有一个自上而下（不可抗力）的push。一个需求需要在懒加载的情况下跳转到底部的一个坐标。
2024-02-07 22:33:55
1460
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人