preconnect & more

Resource Hints

preconnect 出现在 w3 组织 16 年制订 《Resource Hints》

《Resource Hints》是一套预加载机制的 w3 标准化产物,在没有标准化之前,我们常用诸如 XMLHttpRequest 等手段来预加载我们未来会使用到的资源。

《Resource Hints》文档通过 <link> 标签,定义了4个新的属性值。

PreConnect

文档一定定义了4个新属性值,今天由于某个案例,我们只讨论 preconnect。

The user agent should attempt to initiate a preconnect and perform the full connection handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins) whenever possible, but is allowed to elect to perform a partial handshake (DNS only for HTTP, and DNS or DNS+TCP for HTTPS origins), or skip it entirely, due to resource constraints or other reasons.

The optimal number of connections per origin is dependent on the negotiated protocol, users current connectivity profile, available device resources, global connection limits, and other context specific variables. As a result, the decision for how many connections should be opened is deferred to the user agent.

preconnect 用于客户端与目标资源服务器,在请求资源前,预先完成 DNS 查询 + TCP 握手(如果是 HTTPS,会把 TLS 握手也预先完成),当客户端需要请求目标资源的时候,下一个 TCP 首包就可以直接发送 HTTP 的有效载荷,省去握手耗时。

需要注意规范仅仅是一个建议行为,具体处理细节由浏览器根据当时环境决定。

Caniuse

qq20161206-02x

恩,Chrome、Firefox、Android 5.x 开始支持这个特性。 继续阅读preconnect & more

来聊聊 DOM 中的Node、Element、Text

Node

Node 是整个 DOM 的主要数据类型。

常见的 NodeType :

  • 1 – ELEMENT_NODE 表示 element 元素
  • 2 – ATTRIBUTE_NODE 表示属性
  • 3 – TEXT_NODE 表示元素或属性中的文本内容
  • 4 – CDATA_SECTION_NODE 表示文档中的 CDATA 区段(文本不会被解析器解析)
  • 8 – COMENT_NODE 表示注释
  • 9 – DOCUMENT_NODE 表示整个文档(DOM 树的根节点)
  • 11 – DOCUMENT_FRAGMENT_NODE 表示轻量级的 Document 对象

1所表示的ELEMENT_NODE 很常见,我们平时用的 div 等标签,其类型都是 ELEMENT_NODE。

3有一个很经典的案例,在旧版的 React 中,如果一段文本模板存在变量,你会发现最终输出的字符串,在可变部分是被套了一层 span 标签的。但新版的 React 不需要了,这是因为新版 React 把每一个可变的文本,单独用一个TEXT_NODE 来存放。这里果真记错了,React v15是改用 COMENT_NODE 来包裹连续文本中的可变文本。为什么要包裹而不直接保留一份 TextNode 的引用呢?React v15 CHANGELOG

11也有一个经典案例,Vue.js 的1.x 版本就是使用的 documentFragment 来做 virtualDOM。documentFragment 支持完整的 DOM 操作,但由于本身不在文档流中,频繁操作不会导致浏览器频繁执行 parseHTML。

Element

这个没什么好说的,平常用得最多的了。

我们平常习惯在 jQuery 选择器后面加索引,操作的就是元素节点。

Text

Text 节点表示 HTML 或者 XML 文档中的一系列纯文本。

Text 节点没有子节点,不可再分。

那怕是简单的 Element 节点,其文案内容,都是在 Text 节点上。

结语

富文本编辑器真是前端界里面的深坑,后续还有 Range 和 Selection 相关内容。

参考

git cherry-pick

QQ20160707-1

有一个 hotfix分支,merge 到 master 后,忘了 merge 回 develop就被删掉了,咋办

这个时候可以祭出 git 的 cherry-pick 功能,将某个分支上面指定的几条 commit,提交到另外一条分支上

QQ20160707-2

恩,本来有用 git-flow 脚本的,但是遇到过几次命令执行失败后,还是老老实实自己去切分支 merge 了

ckeditor 从入门到放弃

真心复杂

有一个 CKEDITOR 的全局空间,

有一个 CKEDITOR.instances的全局实例引用

有 Classic 编辑和 Inline 编辑两种模式

有 Plugin 也有 Widget

有自成一体的编译打包工具,与 AMD\CMD\UMD社区不兼容

官方兼容性

  • Desktop environments:Internet Explorer:
    • 8.0 and 9.0 – close to full support,
    • 10 and 11 – full support,
    • 9.0 Quirks Mode and 9.0 Compatibility Mode – limited support.
    • Firefox, Chrome, Safari, Microsoft Edge, Opera (Latest stable release) – full support.
  • Mobile environments:
    • Safari (iOS 6+) – close to full support,
    • Chrome (Android) – close to full support,
    • Internet Explorer Mobile (Windows Phone 8.1+) – support under evaluation.

继续阅读ckeditor 从入门到放弃

通过ipv6绕开网页认证

在一个需要Web认证的WiFi网络下,无意中nettop发现有一条tcp6的链接是Established状态,搜一下发现大部分Web认证,都仅仅拦截ipv4的流量。

6.47.46

正常情况,如果没用通过Web认证,打开任意网页,都会被302重定向去登录页。

QQ20160504-0@2x

对比已经很明显了,基本上这个网络已经可以随意使用了。

新版SS同时监听ipv4和ipv6的配置改了,变成如下格式

给uglify配置drop_console来避免IE8及以下版本console未定义

console方法是IE9开始才支持的方法,低版本IE会提示undefined。

如果开发的时候习惯性用console.log来协助定位问题,就需要发布工具来规避忘了删console导致IE报错。

https://github.com/mishoo/UglifyJS2#compressor-options

愉快的和Gist玩耍

github.com树大招风,国内时不时就不能访问,连里面的Gist也有问题。

WordPress有一个Gist的embed插件,但是这个插件是直接引入Gist的script,这个script是通过document.write()阻塞方式,在当前DOM位置插入Gist定制的内容。

所以,国内访问我博客,如果谋篇文章引用了Gist上面的内容,访问就会被拦掉了。

研究了下Nginx反向代理,用了一个子域名来承载各种代理资源,用一级目录来区分反向代理站点,世界一下子安静了。

整个优化改造过程没WordPress什么事,用Nginx的ngx_http_proxy_module模块做目标站点反向代理,用Nginx的ngx_http_sub_module模块来替换页面中gist.github.com关键字。

折腾一番,Nginx能力又提升了,哈哈。

现在打开还是有点慢,因为代理每次都要重新请求,由于Gist的资源是会更新的,不能直接暴力缓存,还得想想怎么去缓存这种动态数据。

诡异的iOS keep-alive bug

https://bugs.webkit.org/show_bug.cgi?id=155632

去年12月发现,偶发性,各种Charles抓包、rvictl流量复制等方式来定位分析,还恶补了TCP协议,都没找到原因,只是看上去觉得iOS这边处理HTTP请求的方式怪怪的。

终于尘埃落定,服务端根据UA识别出iOS,关掉HTTP的Keep-Alive功能来规避。

keep-alive是HTTP协议里面的

keepalive是TCP协议里面的

HTTP协议通过头部的 connection: keep-alive 来通知两端TCP建立一个keepalive链接,在keepalive有效期内,不需要重复3次握手动作,不需要重新慢启动