标签 知识 下的文章

一次 Chrome 缓存锁的有趣探索

昨天同事问我关于 Node Event Loop 的问题,代码如下:

const Koa = require('koa')
const app = new Koa()
const logger = require('koa-logger')

let index = 0

const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))

app.use(logger())

app.use(async ctx => {
  await sleep(500)
  ctx.body = index++
})

app.listen(3000)

- 阅读剩余部分 -

ECMAScript 标准的十万个为什么 - Symbol 的隐式转换

今天苏老师发了一篇:Symbol Polyfill 填坑之旅,文章中提到 Symbol 隐式转换的问题,作为一个只在文章中看过 Symbol 的萌豚,我也想知道究竟为什么 Symbol 可以有 toString() 方法,却不能进行 '' + Symbol('word') 的操作。

标准

MDN - Symbol 中有一些规则,它告诉我们当 Symbol 尝试隐式类型转换时会报错,但是为什么会这样,底层是是怎么实现的,我们还是不太清楚。

- 阅读剩余部分 -

Node.js 异步原理

写文章写得实在生无可恋,依旧看起了书——《深入浅出 Node.js》,觉得自己确实有错,之后如果有人问我 Node.js 入门怎么入门我可能还是会推荐他网上的教程,但是说到推荐书,这确实是一本很棒的书。

——安利完毕,之后进入正题。

在面试时可能真的会遇到这样的情况,面试官问:请问一下异步是怎么实现的。

之前在听小伙伴说到这个问题的时候一脸黑人问号,毕竟仿佛是一知半解,不得其意,今天总算可以好好聊一聊异步了,也算是一个章节的笔记。不过掌握的还不是很透彻,如果有错误请指出。

- 阅读剩余部分 -

CSS 文字描边效果的研究

前一阵在做 Chrome 插件研究了一波文字前景色的问题,最终我们还是把思路望向了描边,又正好最近看了一波《CSS 揭秘》,里面正好讲到了描边的问题。

最快捷的方法:text-stroke

有个神奇的 text-stroke 属性,如同名字所描述的那样,就是用于文字描边的。

缺点是,它的描边是内描边,占用了字体本身的空间,其二,兼容性太差,这并不是一个标准的属性,目前只支持很少的浏览器,关于它可以阅读:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

- 阅读剩余部分 -

一个比价系统的构建

在毕设答辩前后,终于可以说说我的毕设内容了。

首先,我做的实际上是一个比价系统,当然,是那种没有用任何 API 的系统。

换言之,我们要做的事情就是从爬虫开始收集数据,处理数据并且通过搜索展示,其中我的论文题目是「数据融合的研究以及应用」,也就是说需要对同样的商品进行聚合(融合)操作。

这篇文章大致提供一个思路,具体的代码因为写的太辣鸡就不开源了。

- 阅读剩余部分 -

CSS 文字反色的研究

在之前我们使用 Canvas 去计算颜色和反色,之后经过大佬提醒,原来 CSS 本身也是能根据背景色取反显示的。在这里,我们会学习一个新的特征:mix-blend-mode

引用 MDN 的介绍:

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

- 阅读剩余部分 -

Canvas 优化指南

Canvas 性能是一个非常值得关注的问题,这次用 Canvas 也同样遇到了需要性能优化的点:我们在之前使用 Canvas 实现了 background: cover 的效果,但是这导致了 resize 的反复绘制,CPU 使用率飙升。

使用离屏渲染

对于这种场景,MDN 中的解释是「在离屏canvas上预渲染相似的图形或重复的对象」。

- 阅读剩余部分 -

JavaScript 优化拖移效果

上次我们在 Canvas 实现根据背景色更改前景色中使用了一个拖动效果,刚开始非常智障的用 Drag & Drop,后来由于我们更关注一个即时的反馈,所以用 mousedown / mousemove / mouseup

最初我们绑定 mousemove 在待拖动的 element 中,结果在移动中如果速度过快,会导致 mousemove 离开 element,于是我们把 mousemove 改绑到 document 中。

这样的效果其实仍然有些卡,或者说移动的延迟,尽管最终会到达鼠标所在的位置,高速移动时却不时刻在鼠标下面。之后我们用捕获来代替默认 addEventListener 的冒泡阶段触发:

14948373753035.png

之后,如果需要在移动时取消所有鼠标的响应时间,可以通过调整 pointer-events 样式来修改,在变更拖动状态时修改 body 的 style 即可。

- 阅读剩余部分 -

聊聊 MongoDB 数据库的设计

自从正式使用了 MongoDB 之后,不止一次吐槽过 MongoDB 的各种垃圾设定,包括但不仅限于:

  • 没有事务
  • 没有表连接(新版支持了,但估摸着性能堪忧)

也就是说,同样的操作,在 SQL 下通过 JOIN 控制原子性的,通过 MongoDB 可能就不得不去查个两次,而且原子性不可保证——MongoDB 官方也是非常实诚,人家在选型的时候就说了,如果贵系统对并发性(Concurrency)有强要求,那么 MongoDB 可能就不是你的菜了。

- 阅读剩余部分 -