在浏览器中录制任意界面并实现导出、保存与管理

  两年前写过一篇文章利用现代浏览器所提供的强大 API 录制,回放并保存任意 web 界面中的用户操作实现了浏览器操作的录制、保存、回放、管理等功能。不过之前的实现是基于rrweb这个项目,限于浏览器本身对于API以及rrweb的限制并不能完美录制 (比如webgl 所有操作。

  作为周末项目没想到也收获了上百的star,期间还有很多人私信使用中的问题。正好今年过年因为疫情留守没回去家,所以把整个项目进行了重构,使用了更强大的API以及更完善的文档。核心APIMediaDevices.getDisplayMedia(),虽然状态是Working Draft,但是各大主流浏览器早就对其进行了实现(Chrome 72 2019-1 , Firefox 66 2019-3 , Safari 13 2019-9)

开始之前还是求一波star项目地址

阅读更多

SpaceX上的Javascript 这下面试造火箭没准真就去造火箭了

在上个月SpaceX 成功发射了载人火箭Dragon 2,其中的飞行界面就是由Chromium JavaScript进行构建的,当然只有图形界面是,系统的其他部分还是由c++来完成的。

Also, only the actual graphical display application uses Chromium/JS. The rest of the system is all C++. The display code has 100% test coverage, down to validation of graphical output (for example if you have a progress bar and you set it to X% the tests verify that it is actually drawn correctly).

不知道会不会出现氧气剩余 NaN%着陆地点undefined

undefined

火箭的操作界面估计是不会开源了,但是SpaceX-API 倒是在GitHub上开源了。

阿波罗登月的代码之后又参与了SpaceX-API review,以后面试问我参与过什么项目就可以说参与过阿波罗登月计划SpaceX 载人航天计划code review。感觉准备个PPT可以去融资了。

阅读更多

JavaScript实现Twitter雪花算法

使用SnowFlake的理由

按照时间自增,可排序。

并且整个分布式系统内不会产生ID碰撞(由数据中心ID和机器ID作区分)。

经测试 MacBook Pro (15-inch, 2018) 每秒可产生136万左右的ID。

Twitter_Snowflake

twitter开源的地址:twitter-archive/snowflake

SnowFlake的结构如下(共64bits,每部分用-分开):

0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000

| ———————-|———————- –|– –|– —–|——

1bit不用 41bit 时间戳 数据标识id 机器id 序列号id

  • 1位标识,二进制中最高位为1的都是负数,但是我们生成的id一般都使用整数,所以这个最高位固定是0
  • 41位时间戳,41位时间截不是存储当前时间的时间截,而是存储时间截的差值(当前时间截 - 开始时间截得到的值),这里的的开始时间截,一般是我们的id生成器开始使用的时间,由我们程序来指定的(如下下面程序IdWorker类的startTime属性)。41位的时间截,可以使用69年,年T = (1L << 41) / (1000L * 60 * 60 * 24 * 365) = 69
  • 10位的数据机器位,可以部署在1024个节点,包括5位dataCenterId和5位workerId
  • 12位序列,毫秒内的计数,12位的计数顺序号支持每个节点每毫秒(同一机器,同一时间截)产生4096个ID序号
  • 加起来刚好64位,为一个Long型。
阅读更多

10元成本抢到周杰伦演唱会门票

周杰伦从我小的时候火到我中年实在是太难了,前有粉丝黄牛抢、后有大麦不放票。年龄大了手速根本跟不上,所以只能靠脑子解决了。

抢票无非就三点

网速、手速和运气

现在就来解决这些问题。

阅读更多

利用人工智能预测双色球

google开发的tensorflow机器学习框架目前应该是人工智能开发的第一框架,不论从框架的设计,开源环境,还是商业化应用方面都是有着很好的体现.虽然前端暂时和人工智能没啥太大关系,不过科技发展这么快也没准.俗话说得好,梦想是要有的,万一实现了呢?

总的来说双色球的预测无非就是已经有了一堆数字(每一期的开奖结果)要找出一种规律然后计算出下一次的一组数字.这个规律由计算机去找,我们需要做的就是告诉电脑找规律的方向.

阅读更多

利用现代浏览器所提供的强大 API 录制,回放并保存任意 web 界面中的用户操作

在开发测试阶段作为开发人员你永远不知道你的测试和产品有什么沙雕操作,他们只会说 xxx 页面/功能有 bug。想要复现也很难。前段时间正好看到了rrweb这个项目,索性基于它实现了定时间隔录制、主动上报、存入数据库、统一查看等功能,可以再项目开发时引入,再也不怕 bug 复现了。

走过路过先来波 start

项目地址

示例

阅读更多

没有人会和你说的HTTP中GET与POST的区别

GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。

最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。

你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。

当你在面试中被问到这个问题,你的内心充满了自信和喜悦。

你轻轻松松的给出了一个“标准答案”:

阅读更多

利用函数的惰性载入提高javascript代码性能

假装有个需求

我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次

普通方法

1
2
3
4
5
6
var t;
function foo() {
if (t) return t;
t = new Date()
return t;
}

问题有两个,一是污染了全局变量,二是每次调用 foo 的时候都需要进行一次判断。

阅读更多