DaraW

Code is Poetry

React 应用性能优化一例

背景

在我们的应用中有一个存储在 Redux 中的全局状态机,保存着整个应用的核心状态,其类型大概如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
enum FSMStatus {
Unknown = 0,
Active = 1,
Inactive = 2,
}

interface FSM {
global_id: number; // 状态机实例的全局唯一 ID
timestamp: number; // 当前时间,每隔一秒会变化
fsm_status: FSMStatus; // 整个状态机的状态
x_mod_status: FSMStatus; // x 模块的状态
x_mod_data: any; // x 模块的核心数据
y_mod_status: FSMStatus; // y 模块的状态
y_mod_data: any; // y 模块的核心数据
}

还有一些 React 组件,其中 Main 组件包含了 Inner 组件,Inner 组件中使用了 rc-tooltip 实现了弹窗效果。弹窗中有一个列表,列表中有一条带有特殊样式的处于激活状态的数据,且可以通过按键操作切换处于激活状态的数据项。

某天突然用户报告说操作弹窗列表时感到卡顿,而且在弹窗开着的时候其他模块会明显感觉比较卡。

Thrift RPC Mock 方案探索

背景分析

在传统前后端分离开发的场景下,前端和后端一般定好 HTTP API 接口后就各自进行开发,前端开发中使用 EasyMock、webpack-api-mock 等平台/工具进行接口的 mock,后端通过 Postman / curl 等工具进行接口的自测。

在微服务场景下,各服务之间通过 IDL 定义好 RPC 接口。但是接口调用方依然有 mock 接口的需求,接口提供方也有着自测接口的需求。公司内的服务化平台已经提供了较为完善的接口测试工具,自己实现一个相对也比较容易,但目前却没有一个比较完善的 RPC Mock 方案。

在新项目启动后,前端、API 层和依赖的 Service 往往同步开始开发,只要依赖的 Service 未提供,API 和前端的开发、自测都会被阻塞,在侧重数据展示类需求的项目中这种问题更加严重。

所以,有必要尝试探索一套 RPC Mock 的方案,在保证开发者使用体验的前提下,解决上述问题。

前端视频质量监控

背景

业务中使用到视频播放后,一些不确定的因素例如用户端网络异常、CDN 异常等等,导致视频加载缓慢和发生卡顿,这些质量问题会给用户体验带来较大的伤害,也会影响产品的留存转化率。因此对线上视频进行质量监控意义很大,可以让我们明确知道用户端的异常发生概率,以便做进一步的优化。

多说一句再见

因公司业务调整,非常遗憾的向大家宣布多说项目即将关闭。 我们将于2017年6月1日正式关停服务,在此之前您可以通过后台的数据导出功能导出自己站点的评论数据。 对此给您造成的不便,我们深表歉意,感谢您的一路相伴。

从博客搭建好以来一直使用着多说作为评论系统,虽然多说有着不少的黑点,比如上了HTTPS后失去地址栏绿锁,也听说过多说有各种各样的bug,服务器故障导致评论框不出现更是没少见过,不过以后再也不能黑多说了。

《你不知道的JS上卷》阅读小记之setTimeout的this指向问题

这几天翻看了下被传的神乎其神的《你不知道的JS》这本书,其实以前就看过一次,不过当时的level并不高,而且感觉这本书讲的有点绕,所以看了一点就没坚持下去。
这次翻看感觉还是比较轻松的,有些地方写的很好,有的地方还是感觉讲的有点绕(可能是翻译的问题),但总的来说这本书还是很不错的,基本都是JS中有坑、新手难以理解的点,简直就是《JS:The Bad Parts》(哈,开个玩笑~)。
这个小记不是打算记录书中内容的笔记,而是想补充纠正书中的讲的不完善的地方。

ES6实现内部类的写法

最近在把 JIris 移植到JS平台 Iris.js 的过程中不断的在Java和JS两种语言之间切换,ES6的 Class 某种程度来说可以写出更加优雅的代码,而不用去管背后的原型实现。但是不得不说有一个遗憾就是 ES6 虽然支持了静态方法,但是还不支持静态属性和静态类,于是仔细观察了下发现了几种ES6实现静态类的相对优雅的写法。

node-thunkify源码阅读笔记

Node7发布后已经可以通过添加--harmony-async-await的参数调用来直接支持async/await语法了,据说Node8还会进一步推进其发展,于是研究了一下JS的异步流程控制和下一代Node Web框架Koa2

关于generator async/await的发展史已有一大堆文章讲过了,这里不再赘述。
tj的coKoa2上个大版本Koa1的核心,在没有async/await的时候一般会借助co来做自动流程控制。关于co的源码分析文章也有很多,代码不长值得一读,参考了一些分析文章也算是了解了其逻辑和思路。

co中出现了一个thunkToPromise的函数,一些文章都跳过了这个并表示thunk函数已经没什么意义了,但本着好奇心读了阮一峰的Thunk 函数的含义和用法,文中一个地方一时没有搞懂,故写此文记录一下。

如何监听JS变量的变化

如何监听 js 中变量的变化?
我现在有这样一个需求,需要监控js的某个变量的改变,如果该变量发生变化,则触发一些事件,不能使用timeinterval之类的定时去监控的方法,不知道有比较好的解决方案么?

这个问题问的很好。

流行的MVVM的JS库/框架都有共同的特点就是数据绑定,在数据变更后响应式的自动进行相关计算并变更DOM展现。所以这个问题也可以理解为如何实现MVVM库/框架的数据绑定

常见的数据绑定的实现有脏值检测,基于ES5的gettersetter,以及ES已被废弃的Object.observe,和ES6中添加的Proxy

Proudly powered by Hexo and Theme by Hacker
© 2019 DaraW