Generator异步隐藏测试

直接贴代码

贴个结果

嗯,结果有点超乎我的意料,我以为Generator函数这么特别,会卡住流程。

这样有没有Generator感觉都是一样的,只不过把异步的包在一个函数里面,对外没有暴露出来而已

嗯,一次失败的研究,继续找找其他应用场景。

微信WebView会话时长

主要想测试下微信里面的会话cookie的实际作用时间是多久。

一般浏览器的会话cookie,是当浏览器退出后,会话cookie即失效。

猜想微信的会话cookie,应该是退出网页后失效。

但实际测试结果,却并非如此,微信会一直保留这个会话cookie,直到微信进程退出。

从WebView返回微信主界面 cookie不失效
返回手机系统主界面 cookie不失效
后台关闭微信进程 cookie失效
微信切换账号 cookie失效

测试设备:

  • iOS9 – 微信6.3.6
  • Android 4.4.2 – 微信6.3.5

当然,估计还和手机内存有关,内存小的机型,这部分临时存储就会被系统释放掉。

附:测试地址

深入Sever-Sent Events

Server-Sent Events(SSE)实现了服务器向浏览器单向推送消息的能力,前面文章有提到过,今天这里来详细讲解下。

SSE是什么

SSE设计了两个新东西

  • EventSource接口
  • “事件流”数据格式

EventSource接口详解

整个SSE在浏览器端的API,就如上5个,非常简单,但是为我们实现了大量的细节功能。

例如连接意外断开后,浏览器会自动重连,并发送上一次的消息ID,便于服务端重传丢失的消息和恢复数据流。

“事件流”协议

下面是一个SSE事件流的HTTP报文

里面有几个关键点:

  • 请求头
    • 带上Accept: text/event-stream
  • 响应头
    • 带上Content-type: text/events-stream
    • 带上Transfer-Encoding: chunked
  • 响应内容
    • retry 连接意外断开后,浏览器重新发起连接的时间间隔
    • data 消息的有效载荷,可以是普通字符串类型,或者是JSON对象
    • event 事件类型
    • id 可以用来标记消息序号,便于重连后能恢复数据流,重连时会带上Last-Event-ID来帮助恢复事件流
    • \n\n 用来分割每条消息边界

SSE额外注意事项

SSE所定义的“事件流”格式,让不支持的SSE的浏览器,可以通过XHR模拟来优雅降级。

SSE的数据为UTF-8数据,不支持二进制流,但是支持使用服务端的Gzip进行体积压缩。

SSE的“事件流”格式,已经定义了id作为消息序号,不需要业务在消息的内容中再次定义。

SSE使用场景

例如各种Dashboard的实时采集量反馈

例如实时投票结果等

JS常用库解密-FastClick

众所周知,移动端在处理点击事件的时候,会有300毫秒的延迟。恰恰是这300毫秒的延迟,会让人有一种卡顿的体验。

这300毫秒的原因,在于早期浏览器的实现中,浏览器不知道用户触摸后,到底想做什么,所以故意等待300毫秒,再触发click事件。

既然我们已经知道了原因了,怎么解决呢?

方案1-粗暴治标法

因为浏览器对click事件的处理,有300ms的延迟,而touchstart几乎是立即执行的,估将所有click事件的监听,改为touchstart事件的监听,即可消除这300ms的延迟。

但这样副作用也很大,移动端的交互体验全靠触摸,touchstart将会干扰其他交互行为的处理,例如滚动、拖拽等。

方案2-模拟修复法

既然浏览器有这300ms的延迟,那么我们来代替浏览器判断,手动触发click事件,这也是fastClick的解决方案。

fastClick的核心代码

这里可以看到,FastClick在touchEnd的时候,在符合条件的情况下,主动触发了click事件,这样避免了浏览器默认的300毫秒等待判断。为了防止原生的click被触发,这里还通过event.preventDefault()屏蔽了原生的click事件。

我们来看看他是怎么模拟click事件的

我们在网上搜索fastClick,大部分都在说他解决了zepto的点击穿透问题,他是怎么解决的呢?就是上面最后一句,他模拟的click事件是在touchEnd获取的真实元素上触发的,而不是通过坐标计算出来的元素。

最后,原理虽简单,但还是建议大家直接用FastClick而不是自己再实现一个。因为,你看他源码里面的注释,有很多特殊情况的补丁的,自己实现一个精简版难免会漏这漏那。

手札《nginx – A Practical Guide to High Performance》

今晚无意发现Nginx官方出了一本Guide to Hight Performance的书,翻了一下,有一些蛮有意思的点。

Virtualhosts 虚拟主机

这段配置,支持用一个server块来配置所有虚拟主机的作用。

只要有域名绑定到该主机上,Nginx就会查找该域名对于的root目录。

跑多个虚拟主机的话很方便,一次定义即可,每次添加新的虚拟主机,只要开目录,配置DNS指向即可,省去了服务器端的解析配置工作。

IE下面阻止selectstart事件的默认行为来阻止用户选中

Chrome、Firfox等高级浏览器,可以通过一句简单的CSS,来阻止用户选中文本。

而这段CSS在低版本IE是不生效的,IE有自己私有的selectstart事件,且该事件支持冒泡。

当我们需要禁止用户选中内容的时候,可以通过阻止selectstart的默认事件来实施。

当需要恢复选中的时候,解除事件绑定即可。

什么场景下面使用呢?比如拖拽的时候。

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

  • 这一个JS原生方法
  • 这是一个从IE私有API演变过来的标准API
  • 这个方法可以获取矩形目标元素四条边相对于文档视图(DocumentView)左上角的距离

也就是说,可以很简单的通过这个方法,获取元素相对于浏览器的坐标、元素自身宽高尺寸等

参考:

离线安装PM2

蛋疼的公司网络,搞专网专用,开发环境没法联通外网,npm install直接就废掉了,只能离线安装。

(其实公司有人在公司架了npm的代理,但是,那个代理服务器在腾讯云啊,也是公网啊,开发环境还是访问不了)。

PM2是什么鬼

回归正题,PM2是一个Node.js的进程管理软件,支持负载均衡、后台持久在线、文件更新自动重启等特性。

如何离线安装

这里对于PM2的功能,不做展开,有需要的可以自己去官网查阅。

要离线安装PM2,首选得在一台已经装好的电脑上面,copy整个PM2目录。

将PM2目录,通过各种方式,传输到无法联通互联网的服务器上。

将PM2,放入该服务node目录的lib/node_modules/目录下面。

然后,进入node_modules目录,执行

随后,lib/node_modules/pm2/bin目录下面,就产生了pm2的可执行程序。

将bin下面的pm2程序,软连一份到系统环境,/usr/local/bin/下面。

总结

  1. 要在一台可以联网的机器上面,执行一次 npm install pm2 -g ,不能直接从github上面下载,因为github上面的缺少依赖文件。
  2. 将装好的pm2目录,整个copy到代安装的服务器上。
  3. 执行 npm build pm2 -g 进行重新编译。
  4. 将bin下面的pm2可执行文件,软链一份到系统环境。