R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

追根究底:不打开 DevTools 时,console.log 会不会内存泄漏?

TL;DR:会。并且虽然 Chromium 有试图做限制,但因为方法不合适所以并没能解决问题。JavaScript 的内存泄漏原因有很多,例如 DOM、计时器、闭包、意外的全局变量,以及本文的主题:console.log。关于 console.log 会不会造成内存泄漏,掘金上面有大佬发过两篇文章:千万别让 console.log 上生产!用 Performance 和 Memory 告诉你为什么console.log 一定会导致内存泄漏?不打开 devtools 就不会这两篇文章的结论是...

多版本共存——巨型项目组件库升级的必经之路

组件库升级是一个令开发者头痛的事情,即使像 Ant Design 这种经历了多年发展的组件库,升级也不是一件容易的事情——轻则 API 不兼容,重则影响自定义样式和用户体验。(为什么 API 不兼容反而影响小呢?因为 Ant Design 提供了 codemod 工具辅助解决 API 的迁移,并且如果使用了 TypeScript,类型不匹配是不会编译成功的。)我们部门的项目,为了符合部门设计规范,用的是自己开发的组件库,而我是组件库的主负责人。在去年 Q3、Q4 我们做了大量的走查问题修复...

由 Use Zoom For DSF 导致的幽灵 Bug

在写项目时,我们都会产生一些 Bug。俗话说“解决 Bug 的第一步是先复现它”,但如果遇到了一个幽灵 Bug(无法稳定复现的 Bug)时,要如何解决呢?Bug 的现象我们有一个对外项目,其中一个页面里面展示了各类统计图表。当我们还在庆祝项目按时开发完成时,QA 小姐姐找了过来,说页面上有一个表格的行间分隔线消失了:但是我们经过多次调试后,发现攒了很久的一句话终于派上用场了:在我这儿是好的啊……见鬼了。没错,这是个幽灵 Bug,因为我发现:在同事的电脑上,只要刷新次数足够多,一定会有一两次...

JSON Diff Kit: A Combination of Several Simple Algorithms

BackgroundRecently, I received a requirement: display a diff with 2 JSON strings, which are basically an API's request and response data. Furthermore, we should show the diff in a Git-like style.Unfortunately, after a brief exploration, I found no...

Golang 内存泄漏排查之旅

“业务提了个线上问题,麻烦你看一下。”自从我开始写 Golang 后端之后,可能是能力有限,我的服务总是会在意想不到的情况下变得异常,而我要做的事情就是解决这个问题。这次出现的问题看起来是运营平台后端服务的内存泄漏,那就先从内存曲线开始看起吧。突然暴增的曲线Grafana 平台给出的曲线大概符合这样的特征:有 8 个突变点,每次突变都会让内存猛然上升接近 500 MB,上涨到逼近容器上限后,突然回落到 100 MB(因为容器崩溃重启了)。静态检查尝试失败结合突变的时间,我搜了一下审计日志,...

TypeScript 小技巧:校验 i18n 参数

最近我们的某个项目需要支持多语言了。作为一个从 Entry Task 开始就与多语言打过交道的人,我已经对这里面的套路很是熟悉。但是作为一个工程师,还是想着能不能做的更好一些。我们是怎么做国际化的对于大部分场景来说,国际化都相当简单:有若干语言包,每个语言包中是一堆 Key 和对应的文字模板,模板中可能会有占位符。一个语言包可能长这样:{ "user_setting.list.total_users": "共 {count} 个用户。", ...

从 Svelte 3 的编译器中得到的启示

前端的编译器,除了可以做转换,是否还有其它用途?由于现在国内“前端主流框架”的称号基本被 React、Vue、Angular 占领,前二者在渲染层的技术,本质上都是极为相似的:在内存中维护 Virtual DOM,通过某些方式获取到变量被修改,然后利用 DOM Diff 算法(以及一些优化)计算出需要对 DOM 做的操作,再 Patch 到真实的 DOM 上。相信大家(尤其是准备过面试的小伙伴)一定对这些内容比较了解。Angular 的最新版使用了一个叫 Ivy 的引擎。对于 Angula...

盲调试解决 Zebra 打印机吞纸问题的经历

本来我以为,前端的工作内容只需要跟浏览器打交道,最多再做一做客户端和后端;万万没想到,如标题所示,我居然需要解决打印机的问题。奇怪的需求我们有一个画面单的平台,关于这个平台,我之前已经写过几篇文章,这里就不多提了。一天,面单的产品突然把我拉到了一个群里,因为我们的业务 PM(BPM)接到了一个紧急需求:在我们开始跟某个卖家合作时,他们提出:我们在打印面单的时候,必须支持通过一个叫 Zebra 的打印机来打印,否则就不跟我们合作。由于那是一个大卖家,因此这似乎是一个无法拒绝的需求。虽然我们完...

使用 OpenResty 无痛优化图片体积(AVIF / WebP)

图片体积优化计划两年半之前,我第一次了解到 WebP 可以有效减少图片体积的时候,有一瞬间产生了“把网站中所有资源替换成 WebP”的冲动,但当我打开 caniuse 的时候,发现 Safari 迟迟不支持,况且网站中涉及到图片的地方实在是太多,修改代码不太现实。我当时搜了一些资料,是关于让 Nginx 针对浏览器提供的 Accept 头来分别提供不同格式的文件。这个方法确实有,然而我实在是太懒了,以至于写一段命令将所有图片转个格式都不想写,并且想到以后所有图片都要提供两个版本,实在是太麻...

当表格排版遇到了合并单元格

我负责的面单平台的需求复杂度已经越来越高了。自从寒假接了一个复杂表格排版的需求后,各类业务对于表格排版的使用场景也开始变多。毕竟,一个可以自动换页排版,并保持每一页都带有首部区域和尾部区域的表格,哪个业务不喜欢呢?(被打)表格的排版先回顾一下之前的需求:有一类专门的面单类型叫“拣货单”,用于给卖家拣货拣货单有三个部分:头部区域(展示 Logo、买家地址等)、表格(展示商品信息)、尾部区域(展示备注和页码)表格可能非常长,需要分页打印(纸张类型分为 A4、A5、A6 三种)第一页的表格之前一...

编写状态驱动的业务代码(2)

记得两年前的差不多这个时候,我曾经写了一篇文章 编写状态驱动的业务代码,讲了一下我使用状态来描述业务需求的一个经历。自那之后,我很少再接触步骤如此多的业务需求,直到前一段时间……一个复杂的页面运营平台有一个页面,是专门用来配置运费规则的,里面有最多 12 个步骤(12 个对话框),一个可能的步骤如下:基础信息配置,其中可以选择是否需要配置一些“可选费用”(例如燃油费等)地区配置如果地区配置为 XXX,则需要配置 YYY 费如果第一步中选择了燃油费,则配置燃油费如果第一步中选择了 XXX 费...

这是我们共同度过的

第 2747 天