背景介绍在使用 d3 绘制图谱的时候，由于 svg 无法像其他 html 元素一样静态布局，所有的元素都需要按照绝对定位计算位置，如果遇到比较复杂的元素就非常麻烦，往往需要计算大量的坐标，还特别容易计算错误（尤其会遗漏掉间距）。 其实可以通过一些小技巧来减轻计算的工作量，且让代码逻辑变得非常清晰。 案例说明举一个常见的例子说明： 这个节点由三个部分组成，分别是蓝色的边框，黑色的主文本和红色的副文

背景介绍今天在编写 gitlab-ci.yml 文件的时候发现配置的 variables 错误的问题，仔细研究后发现在一定 variables 时在特定情况下不支持表达式。 问题追踪错误的写法： 123456variables: CI_K8S_REGISTRY_IMAGE: registry.xxx.com/$CI_PROJECT_PATH// ...build_sit_job: variab

背景介绍今天在 review 代码的时候看到这么一行代码： 123// res为接口返回的数据state.activityItem.bottomImg = require(`../../routes/xxx/components/xxx/images/xxx_${res.xxx}.png`);// ... 原本以为 webpack 只能做“静态”资源的打包，这里的静态指的是文

背景介绍今天在阅读谷歌 web-vitals 源码的时候发现其中有使用到一个 Image.decode API，查阅 MDN 文档得到如下解释： HTMLImageElement.decode() HTMLImageElement 接口的 decode() 方法返回一个当图片解码后可安全用于附加到 DOM 上时 resolves 的 Promise 对象。 这可用于在将图片附加到一个 DOM 中

node-request 模块和我们平时用的 axios 的判定方式不通，所以特别记录一下。 示例代码: 1234567request("http://xxx/index.html", (err, response, body) => { if (err) { next(err); } else { res.send

背景描述假设我们现在需要实现一个函数，函数传入一个函数队列和一个初始参数，要求将初始参数依次传入队列中的每一个处理函数，函数的返回值为下一个函数接受的参数，最后一个函数的返回值作为最终的返回值。 这类问题有哪些解决思路呢？ 首先考虑如果函数队列全部都是同步的情况，这类问题相对比较简单，实现一个递归函数，递归调用即可。（具体实现方案大家也可以去试一试，这里不做深入讨论） 万一队列里的函数都是异步函数

场景复盘某天在发布项目的时候，发现服务启动后业务无法访问。检查日志也没有发现错误，检查服务状态发现服务也正常启动没有退出。初步怀疑 redis 配置有问题，但经过大量时间排查后发现 redis 配置没有问题，后来又怀疑是某个 npm 包更新导致，或者是因为 nodejs 升级导致。然后又去各种服务器上进行测试，发现运行都没有问题。而且服务在测试环境能够正常运行，但在预发布就无法运行。 经过大量时间

一、debugger类似于代码里的断点，浏览器在打开开发者工具时（对应于代码调试时的 debug 模式）检测到 debugger 标签（相当于是程序中的断点）的时候会暂停程序的执行： 此时需要点一下那个蓝色的“Resume script execution”程序才会继续执行，这中间会有一定的时间差，通过判断这个时间差大于一定的值就认为是打开了开发者工具。这个方法并不会误伤，当没有打开开发者工具时

本文记录关于 arms - 前端监控调研时发现的问题和思考。 关于日志公共字段一、关于 page 字段page 字段用于标识当前页面的 pageid。当未开启 SPA 自动解析时，page 字段均能够正常记录，然而当开启 spa 自动解析功能时，奇怪的现象发生了，第一个页面的日志的 page 字段无法正常获取而是被设置成默认值“[index]”（但是 pref 日志不会被影响），后续页面切换的日志

各指标参考范围： 模块 指标 含义 目的 建议值 参考文档 arms FPT 首次渲染耗时 感知加载速度 为了提供良好的用户体验，网站应努力使 First Contentful Paint 在加载页面的1 秒内发生。为确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第 75 个百分位是一个很好的衡量标准 。 https://help.aliyun.com/docu