一图搞懂 Unit8Array ImageData Blob
在做一个工具内截图的功能时发现的问题，Unit8Array 类型的数据转换成 blob 二进制数据然后上传到后端时出现错误。这里记录一下解决方法 Uint8Array 和 ImageData 的关系 Uint8Array 是一个存储 8 位无符号整数的数组，常用于表示二进制数据（如图像的像素数据）。 ImageData 是浏览器提供的一个专门用于表示图像数据的对象，通常用于 &...
Leon Yi
逆天!纯CSS实现获取窗口大小
先看看效果 看看代码是怎么样的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
包体积超限问题
背景 某日发布节点后，监控平台发现包体积超限，增长很多，于是拉了各个业务方进行排查 排查 我这边用 webpack-bundle-analyzer 发现增长的体积和懒加载的代码体积刚好对得上，怀疑是不是懒加载代码加载的时间提前了，代码有循环引用之类的，导致应该懒加载的代码，提前加载进来了。但是逐一查看改动代码，没有发现循环引用的情况。 又看了下监控的数据，发现统计的数据是不稳定的，在这之...
如何实现全局图片监控
为什么要做这个？ 图片过大占用 CDN 资源 拖慢加载速度，体验不好 要怎么做？ PerformanceObserver 可以获取已缓存图片的 entry 信息，多个相同请求 entry 只会报告一次，能够拿到 decodedBodySize。但在跨域且未使用 Timing-Allow-Origin HTTP 相应标头情况下，这个值为 0 。 主要拿到图片的原始宽高和图...
浅谈SOLID原则在前端的使用
简介 SOLID 原则是由 Robert C. Martin 在 2000 年提出的一套软件开发准则，最初用于面向对象编程（OOP），旨在解决软件开发中的复杂性和维护问题。随着时间推移，它不仅在传统 OOP 语言中广泛应用，也被引入到 JavaScript 和 TypeScript 等现代编程语言和框架中，如 React 和 Angular。 SOLID 原则包括以下五个方面： ...
如果一个npm包不满足需求，如何修改其部分功能
一、使用 Fork Fork 源代码，通过在 GitHub 上或其他托管平台上 Fork 第三方包的源代码库。对其源代码进行修改，修改完成后将修改后的包发布到 npm 上。如果你不希望它是公开的，那么你可以搭建一个 npm 的私有包。直接将项目中的包切换我们自己发布的包。 二、提交 PR 如果你认为你的修改对其他用户也有帮助，可以向原始包的维护者提交 Pull Request（PR）...
浏览器底层运行原理
内存管理 垃圾回收算法被分为两种，一个是 Major GC，主要使用了 Mark-Sweep & Mark-Compact 算法，针对的是堆内存中的老生代进行垃圾回收；另外一个是 Minor GC，主要使用了 Scavenger 算法，针对于堆内存中的新生代进行垃圾回收。V8 引擎的新生代内存大小^（ 网传主流说法，没有找到具体的源码，仅做参考。）^ 32MB(64 位)、16MB...
如何缩小js代码
写在前面 相较于简写形式带来的代码体积减小，易于理解的代码书写方式能显著提升可维护性，因此在选择简写方案时需谨慎。 Arguments setInterval(function () { console.log("z"); }, 100); // before setInterval('console.log("z")', 100); // after Variables va...
前端路由
URL 是由几个部分组成： protocol: // hostname:port / pathname ? query # hash 路由模块需要实现的功能就是 —— 解析 URL 中的 pathname，根据不同的路径将请求分配给相应的模块去处理。 一个简单的路由是一个类，它的方法能够返回不同的拦截切面，这样的类叫做 HTTP 服务中间件（Middleware）。具体实现代码如下： ...
前端调试通关
各类调试工具原理 Chrome DevTools 原理 Chrome DevTools 分为两部分，backend 和 frontend： backend 和 Chrome 集成，负责把 Chrome 的网页运行时状态通过调试协议暴露出来。 frontend 是独立的，负责对接调试协议，做 UI 的展示和交互。 两者之间的调试协议叫做 Chrome DevTools Pr...