- 博客(36)
- 收藏
- 关注
RSS订阅原创 Bundlephobia前端强大的包分析工具
是一个非常实用的在线工具，它可以帮助开发者分析和评估 JavaScript 库和包的大小，进而优化前端项目的性能。通过，你可以了解各种 npm 包的体积（包括 minified 和 gzip 后的大小）、依赖树、以及不同版本的比较，从而做出明智的选择，避免引入过大的库。
2025-01-14 21:34:12
610
原创 npm、yarn、pnpm包安装器差异性对比
选择 npm：如果你已经习惯了 npm 或是你在维护现有的项目，并且不需要极致的性能优化，npm 是一个稳定的选择，特别是它是 Node.js 默认的包管理工具。选择 yarn：如果你希望有更快的安装速度，尤其是当你需要更好的缓存管理和并行安装时，yarn 是一个不错的选择。它在稳定性和性能方面都表现出色。选择 pnpm：如果你关注性能、磁盘空间优化，或者管理多个项目（Monorepo）时，pnpm 是最优选择。它的安装速度和资源使用效率非常高，特别适合大规模项目或需要依赖共享的场景
2025-01-14 19:06:29
416
原创 利用Chrome浏览器使用Overrides调试线上代码
正常利用Chrome开发者工具断点调试功能调试修改代码，一刷新就什么都没有了，且只能调试JS代码，非常不方便，想刷新后，原来修改调试的的代码还在，且JSP、JS、CSS等能调试，可以使用浏览器的Overrides在本地进行线上代码调试。在Network中选择一个文件，右击 Override content 修改文件，并按ctrl+s保存，就会在本地生成对应页面的代码。优势：可以在本地随意修改代码的逻辑进行调试，比较方便，刷新也是加载本地的文件。点击允许访问文件夹，overrides生成刚才选择的文件夹。
2024-12-17 21:30:50
349
原创 structuredClone：新一代深拷贝神器，让JSON.parse和JSON.stringify黯然失色
是最现代化和强大的深拷贝方法，能够处理复杂类型。和JSON.parse是最简单的方法，但受限于 JSON 的数据类型支持。手动深拷贝提供了高度的定制性，但实现起来相对复杂，需要处理多种特殊情况。
2024-12-12 20:17:32
362
原创 非js脚本打开浏览器窗口的关闭解决方案
用户可能使用标签页在浏览一系列的搜索记录（搜索一下-打开，回退到搜索结果页面，再打开另一个，类似这种操作），如果某个搜索结果页面可以直接干掉自己和前面的搜索结果页，用户会非常苦恼。只是前端开发者会惊奇的发现，使用window.close() API,并不能每次成功关闭浏览器窗口，打开控制台发现会有一条警告信息。观点，如果一个浏览器页签可以随便关闭自己，对于一些恐吓软件或一些用户体验滥用（软件）来说，这个规则可能很有用。方法之前，我们先要明白为什么需要对它有限制。（在 IE 中，我们称之为。
2024-10-15 20:53:21
470
原创 前端常用的设计模式
工厂模式提供了一种创建对象的方式，而无需指定要创建的具体类。通过使用工厂模式，可以将对象的创建逻辑封装在一个工厂类中，而不是在客户端代码中直接实例化对象，这样可以提高代码的可维护性和可扩展性。每次增加一个产品时，都需要增加一个具体类和对应的工厂，使系统中类的数量成倍增加，增加了系统的复杂度和具体类的依赖。工厂模式（Factory Pattern）是 程序中最常用的设计模式之一，它提供了一种创建对象的方式，使得。一般使用在sdk的封装、原码中使用较多，例如vue中。创建对象的过程与使用对象的过程分离。
2024-09-19 20:05:39
473
原创 大文件切片上传-vue3.0
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
2024-09-12 21:11:58
1025
原创 VUE3.0为什么比VUE2要快
✨ 响应式系统的改进✨ 虚拟 DOM 的优化✨ 事件侦听器缓存✨ 引入 Composition API✨ 其他性能优化。
2024-09-11 21:10:21
862
原创 前端多线程之web worker在vue3中使用
Web Workers（包括Dedicated Workers和Shared Workers）是HTML5提供的一种API，允许在浏览器后台线程中执行JavaScript脚本，以提高网页的性能和响应速度。： 每个 Web Worker 都有自己独立的全局上下文，与主线程中的全局上下文是分离的。限制： 由于 Web Workers 在独立的线程中运行，因此它们不能直接访问主线程的变量和函数。：worker会占用一定的系统资源，在相关的功能执行完之后，一定要记得关闭worker。🌟 关键概念及注意事项。
2024-09-03 20:02:26
1195
原创 微服务框架乾坤沙箱机制实现的原理
proxy沙箱及快照沙箱二、proxy沙箱原理概述Proxy对象的使用：Qiankun使用JavaScript的Proxy对象来创建一个全局对象的代理。通过这个代理，可以拦截并控制子应用对全局对象的访问和修改。拦截与重定向：当子应用尝试读取或修改全局对象（如window对象）的属性时，Proxy会拦截这些操作，并根据需要进行重定向。读取操作时，如果属性存在于代理对象中，则直接返回该值；否则，从全局对象中读取并返回。修改操作时，将修改应用到代理对象上，而不是全局对象上。具体实现。
2024-07-16 11:16:40
646
原创 微前端：乾坤 、无界、single-spa、iframe对比
微前端框架是一种技术解决方案，旨在将大型前端应用拆分为多个小型、独立、可维护的微前端应用，每个微前端应用可以独立开发、测试、部署和运行，同时保持整体的协同工作和用户体验。这种架构类似于微服务架构，但专注于前端领域。
2024-07-10 17:03:57
3722
原创 微前端框架-无界
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。无界微前端框架通过引入Web Components和iframe技术，为开发者提供了一种高效、灵活的微前端解决方案。该框架旨在解决现有微前端方案在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite框架支持、应用共享等用户核心诉求上存在的问题。
2024-07-10 17:01:56
1289
原创 web RTC客户端架构
核心引擎层是WebRTC架构的核心部分，包括音频引擎、视频引擎和网络传输。音频引擎负责音频数据的采集、编解码和播放，包括NetEQ平滑处理、音频解码器、3A算法优化等。设备层需要与操作系统和硬件进行交互，实现音视频数据的采集和渲染，同时还需要处理网络数据的发送和接收。WebRTC的架构图大致可以分为四个层次：接口层、会话层、核心引擎层和设备层。接口层是WebRTC架构的最上层，主要包括Web的接口层和C++的接口层。网络传输则负责数据在网络中的传输，包括SRTP加密、多路复用、P2P等。
2024-07-09 10:41:09
381
原创 浏览器缓存的前世今生
2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；当强缓存未命中时，浏览器就会发送请求到服务器，服务器会验证协商缓存是否命中，如果协商缓存命中，请求返回的http状态为304，并会显示说明Not Modified，浏览器收到该返回后，就会从缓存中加载了。
2024-07-09 10:28:10
1057
原创 @microsoft/fetch-event-source EventSource 使用说明
【代码】@microsoft/fetch-event-source EventSource 使用说明。
2024-07-05 18:44:02
3377
原创 浅谈WebSocket协议在Web领域的应用
WebSocket是HTML5引入的一项技术，基于TCP协议，并在2011年被W3C（万维网联盟）定为标准。与传统的HTTP请求-响应模型不同，WebSocket通过一次握手就可以在客户端和服务器之间建立持久性的连接，实现全双工通信。这意味着双方都可以随时发送数据，而不需要等待对方的响应。
2024-07-04 19:49:08
1405
原创 告别UUID，拥抱ULID：更卓越的全局唯一标识符解决方案
ULID（Universally Unique Lexicographically Sortable Identifier）是一种新型的唯一标识符，由Alizain Feerasta在2016年提出。不同于传统的UUID，ULID设计时考虑了排序的需求。具体来说，一个ULID通常由26个字符组成，这些字符分为两部分：时间戳信息和随机序列。这样的结构不仅保证了标识符的全局唯一性，还赋予了它们天然的可排序属性。这意味着在需要按时间顺序组织数据的场景下，如日志文件或数据库记录，使用ULID可以带来额外的便利。
2024-07-03 11:23:47
2518
原创 服务端推送技术Server-Sent Events(sse)
服务器发送事件（Server-Sent Events，简称SSE）是一种允许服务器主动向客户端（如网页浏览器）发送数据的技术。这通常用于创建实时或近乎实时的通信功能，如实时通知、聊天应用、股票行情更新等。SSE 是一种基于 HTTP 的技术，它只支持文本消息（通过 UTF-8 编码的文本）
2024-07-02 19:15:34
453
原创 浅聊webpack和vite打包原理
Webpack和Vite都是现代前端开发中常用的构建工具，它们在原理上存在显著的区别。二、Webpack的原理静态模块打包：Webpack采用静态分析的方式对模块进行打包。在构建过程中，Webpack会分析项目中的所有资源（JavaScript、CSS、图片等），将它们视为模块，并构建出一个依赖图，根据这个依赖图，Webpack会将所有模块打包成一个或多个bundle.js文件。这意味着，在开发或生产环境中，用户需要加载整个bundle文件，即使只修改了其中一个模块。编译过程。
2024-07-02 10:32:50
458
原创 前端多线程之webworker
Web Workers提供了一种在后台线程中执行JavaScript脚本的机制，以避免阻塞主线程，从而提高网页的性能和响应速度。在使用Web Workers时，需要注意线程间的通信和同步问题，以确保数据的正确性和一致性。
2024-07-01 20:14:28
343
原创 跨浏览器窗口数据共享之SharedWorker
SharedWorker在Web开发中扮演着跨页面通信的重要角色，特别是在需要在多个浏览器窗口或标签页之间共享数据或执行后台任务时使用居多。
2024-07-01 20:01:01
1218
原创 tsx 新生代node-ts替代产品
tsx 代表 "TypeScript execute"，由 TypeScript 编写，内部使用由 Go 语言编写的 esbuild 核心二进制实现超快的 TypeScript 编译，旨在增强 Node.js 以无缝运行 TypeScript / ESM / CJS module 编写的脚本文件，成为node命令的直接替代品。
2024-06-18 16:49:09
521
原创 移动端调试、开发、抓包的几种方式
1.使用charles，具体使用方法自动百度2.使用chrome的chrome://inspect/#devices进行调试，缺点是只能调试安卓端，需要翻墙3.vconsole，fetch请求看不到，只支持ajax的请求4.whistle，使用方法如下 1） 安装 Node.js 方式一:brew install node 方式二:Node.js 下载地址:https://nodejs.org/en/ 直接下载然后安装，安装完成之后，可以在命令行工具输入 node -...
2021-09-17 21:31:21
378
原创 tcp的三次握手和四次挥手
TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义。TCP连接是通过三次握手来连接的。当客户端向服务器发起连接请求时，客户端会发送同步序列标号SYN到服务器，在这里我们设SYN为m，等待服务器确认，这时客户端的状态为SYN_SENT。
2021-08-11 16:37:03
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人