R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

分类“开发”下的文章

一次对 Chromium 源码分析的经历

问题起因前几天,我们组的 Leader 在准备内部技术分享的 PPT,是关于 Chrome 底层的一些内容。然而在准备的过程中,发现了 Chrome 在某些情况下会重复请求服务器资源。这是明显不合理的设计,因为 Chrome 并不知道每个请求是否符合幂等性,代替开发者自动重新请求可能会导致不可预知的问题,于是 Leader 便开始寻找问题所在。刚好被我看到了,于是便过去帮一下忙(当了一个小时的小黄鸭),最终我们发现了问题所在。回家后,我觉得很有必要完全靠自己把这个问题仔细研究一下,毕竟我看...

对于地址库需求的优化

背景作为一个电商平台,我们需要有一个统一的地址库,对这个库的配置页面,就落到了我负责的运营平台中了。对于这个库来说,大概的几个需求如下:以 Entity 维度来区分,例如 Malaysia 和 Taiwan 的数据是不互通的;每个 Entity 中的数据都是一棵树,一共有四层,分别代表 State、City、District、Street;需要支持如下操作:给定一个点,需要能找到从它到根节点的所有点,例如粤海街道上面是南山区、深圳市、广东省;给定一个点,需要能找到它的所有子孙后代,例如广东...

Go 如何优雅的验证前端请求体

背景从开始写 Go 到现在也过了两个月了。我现在负责的是两个新系统的后端项目,很多功能还没有搭起来,例如对 Request Body 的合法性检验。目前的校验规则都是手动写在业务代码中的,既复杂又不容易扩展。我觉得,在我用过的前端的框架中,Element UI 的验证规则是最优雅的,于是就想在后端也实现这么一套验证规则。调研Element UI 的表单验证使用了 async-validator,随便举几个例子:{ name: [ { required: true, ...

从排查 Go CAT Client 的错误中学到的

背景一个月前,我们仓库的操作人员感觉系统的响应太慢,点击一个按钮需要等待十几秒才能出结果,于是给我们加了个前端监控的需求,也就是监控 API 的响应时间。我跟同事借用了漫威宇宙中的观察者 Uatu 的名字,给项目的前后端分别命名为 uatu-lib 和 uatu-service。后来项目经过几次修改,已经可以在前端监控 DNS、TCP、响应时间,还有前端的一些未被捕获的报错(包括 Vue 的报错,这里借用了 sentry 的部分代码)。我们公司其实已经用上了一套监控平台,是美团开源的 CA...

由于 gin-cors 而带来的 Bug

我最近在写一个管理系统的后端项目,用的是 Go,使用了 gin 来写服务器。跟前端本地联调的时候一直是没问题的,但直到有一天前后端部署到了 Test 环境开始测试,发现所有的 GET 请求都没问题,但所有的 POST 和 PUT 请求都 403 了。我再三检查了一下 Request Authorizor Middleware,确认了并没问题(不然前端本地访问也不会正常),而且如果确实因为权限问题而 403,是有错误信息的,但现在没有任何信息。于是我连上服务器开始看 Log,发现无论是 gi...

由于浏览器的优化导致的 Bug 们

按理说,随着时间的发展,浏览器会做各种各样的优化来提升网页浏览的性能,但不是所有优化都能起到积极的效果,有的优化甚至属于“智障”级别。下面我就分享三个我遇到或听说的、由于浏览器自身的优化导致的一些 Bug。Passive Event Listeners我之所以知道了这个东西,是因为昨天邻居向我抱怨的一个问题,他的移动端页面使用了一个日期选择器,但在上下滑动选择日期的时候,Console 里面会报一堆这样的错误:[Intervention] Unable to preventDefault ...

Babel 如何转换 async-await 至 ES5

背景中午吃饭的时候跟同事讨论起了 async-await,我认为 async-await 是 Promise 的语法糖,但同事认为更贴近 Generator。于是趁下午摸鱼的时间查了一下资料,并自己用简单的例子对比了一下转换前后的代码,大概有了一定的了解。讲真,在刚看到转换结果的时候我整个人是懵逼的(虽然很早以前就看过了,毕竟每次 async-await 函数报错的时候调试器都会断在一个奇怪的文件里),因为这两段代码几乎没有太多的相似之处,转换之后还多了一段奇怪的函数(WTF?!):// ...

从前端性能监控发现的 Chrome Bug:eval、onerror 与同源策略

背景最近在做公司的一个前端监控项目,有一个需求是需要捕获前端错误并上报。这个需求其实很简单,使用 window.onerror 或者 window.addEventListener('error', ...) 就可以捕获异常数据,MDN 的 这篇文章 讲述了具体的用法,AlloyTeam 的 这篇文章 也讲了一些例子,以及针对触发了同源策略的应对方案。但是当我开始写自己的库时,才发现这个需求并不是那么一帆风顺。我在我们的前端项目里引入了自己写的库,然后故意触发一个语法错误:new Erro...

雪碧图的应用场景 & 一种生成算法

CSS 雪碧图相信上古时期搞过前端的同学都知道,可以通过合并一些小图片、使用 CSS 控制 background-position 的方式来减少 HTTP 请求次数,从而优化网页加载时间,这就是 CSS 雪碧图(Spritesmith)。不过自从 HTTP/2 出来之后,这个用途就已经没什么意义了。当然,它也可以避免当正常状态与 hover 状态使用不同的图片时,首次 Hover 要现场加载图片的问题,所以雪碧图还是有一些用武之地的。CSS 雪碧图的优缺点以及其它资料网上太多,这儿就不写了...

对 CSS 变量的一点实践

什么是 CSS 变量之前我刚接触 CSS 预处理器的时候,被里面的变量功能给吸引了,你可以跟正常的编程语言一样定义变量,里面的值可以是各种各样的东西,例如 2rem 或者 #123456,甚至还可以对变量做一些运算,例如两个数值相加,或者把这个颜色变深 10%。后来无意间听说了 CSS 变量这个概念,于是上网查了一下,这儿的变量其实更相当于预定义的常量,因为 CSS 还不支持很多预处理器中的运算(calc 只能对数值进行运算)。用法其实很简单,例如我要写一套配色(这也是我网站目前的配色):...

代码高亮的可行方案

Update 20180704:负向零宽断言我手边只有 Chrome 支持,所以目前还是不可用的,还好 PrismJS 提供了一种 Hack 的方法可以支持这个特性的很有限的部分:当传入 lookbehind 属性时,会删掉 match 数组的第零项,这样第一个括号的内容就成了匹配到的东西……我已经给 PrismJS 提了 Pull Request(地址在 这里),但尚未被合并,仅供参考。背景作为一个强迫症,我对博客里的代码高亮一向是要求很高的,一个好的代码高亮库,需要满足如下几点:屏幕大...

编写状态驱动的业务代码

什么是状态驱动的业务代码别看概念似乎很高大上,其实是我胡扯出来的……简单来说,就是把业务按照一个个状态进行拆分,然后通过状态来计算当前要执行的操作(后端)或当前要展示的界面(前端)。虽然这个做法很早就有了,而且绝对有很多人实践过了,但似乎一直没有一个专门的名词(也可能是我不知道),于是我就将其描述为“状态驱动的业务代码”了。几个业务场景多个步骤的页面我们的一个业务场景是(部分逻辑已修改):提供一个拣货的页面,操作员首先扫描订单上的条形码,页面上显示这个订单所需的货物列表,然后操作员再依次扫...

这是我们共同度过的

第 1245 天