利用 Plex 和 Syncthing 搭建媒体中心

Plex Syncthing Archlinux SSH systemd

因为软件都是朋友介绍的,这篇文章本来是不打算写的。 但由于在坑上浪费不少时间还是写出来或许对新接触 NAS 的人有所帮助。 本文记录如何利用 PlexSyncthing (可以用FTP替代)搭建家用 NAS,具体地实现了这些功能:

  • P2P 的文件备份。
  • DLNA 媒体服务。
  • 随时上传媒体文件。

笔者的设备:Acer 笔记本(Archlinux),小米 TV(Android)。 可能和您的设备有所区别,但原理类似。我了解到即使对 Windows 版本,用户和权限等策略都是一样的。 或者你可以 安装一个 Arch

继续阅读

浏览器的 16ms 渲染帧

DOM JavaScript 异步 性能 重绘

由于现在广泛使用的屏幕都有固定的刷新率(比如最新的一般在 60Hz), 在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能。 浏览器会利用这个间隔 16ms(1000ms/60)适当地对绘制进行节流, 因此 16ms 就成为页面渲染优化的一个关键时间。 尤其在异步渲染中,要利用 流式渲染 就必须考虑到这个渲染帧间隔。

TL;DR

为方便查阅源码和相关资料,本文以 Chromium 的 Blink 引擎为例分析。如下是一些分析结论:

  • 一个渲染帧内 commit 的多次 DOM 改动会被合并渲染;
  • 耗时 JS 会造成丢帧;
  • 渲染帧间隔为 16ms 左右;
  • 避免耗时脚本、交错读写样式以保证流畅的渲染。
继续阅读

注意那些 Promise 反模式

JavaScript Promise 异步 回调函数 设计模式

JavaScript 作为天生的客户端脚本,编写异步逻辑有着天然的优势, 比如嵌套函数(很自然的闭包机制),事件模型(多数宿主都有提供),回调函数(函数是一等公民)。 Promise 用来更好地组织异步代码, 与其他设计模式类似,未能理解其设计意图之前容易误用和滥用。本文列举其中常见的反模式。

读者有更精彩的反模式例子,欢迎评论或者邮件。本文中的代码仅用于示例,未必存在这样的接口。

继续阅读

Promise 回调的执行

JavaScript Promise 异步

Promise 是 JavaScript 中处理异步的一种模式, 可以大幅简化异步代码和增加可读性,基于 Promise 的单元测试 也更加可读。 本文参考了 Promises/A+ECMA 2015 等文档, 测试了 Bluebird, Chrome 58.0.3029.110,Node.js 6.9.2 等环境,给出 Promise 异步行为。

TL; DR

  • Promise.prototype.then 传入的回调会在 NextTick(异步)执行
  • 构造 Promise 时传入的 executor 会立即执行
  • Promise 的各种实现表现一致
继续阅读

百分号编码与 encodeURIComponent

encodeURIComponent UTF-8 URI URL GB2312

百分号编码、encodeURIComponent、URL encode 其实都是指在 URL 参数中转义任意字符。 在百分号编码中,每个字符被编码成3个字符,包括第一个起始的 %, 以及接着的两个字符表示 16 进制的一个字节。 比如空格字符(00100000)编码后的结果为 %20

TL;DR

  • URL 是 URI 的一种形式。
  • URI 的合法字符包括18个保留字符和66个非保留字符
  • application/x-www-form-urlencoded 中空格编码为 +
  • decodeURIComponent() 对非 UTF-8 的源会抛出 URIError: URI malformed
继续阅读

内联和外链脚本的性能实验

Chrome DNS HTTP JavaScript inline 性能 缓存

HTML 中引入 CSS 和 Script 是为了分离内容、样式和脚本。但有时出于性能考虑可能会内联(一部分)脚本和样式。内联可以减少请求,但外链可以更好地利用HTTP 缓存。 本文通过实验来验证这两种脚本引入方式的渲染性能差别,同时考虑文件数目、网络耗时的影响。

TL;DR

推荐总是使用外链脚本并尽可能利用 HTTP 缓存。除了整体性能较高外,外链脚本符合关注点分离的原则维护性更好。为减小没有缓存时的请求数量,可按更新频率合并脚本文件。 以下是实验结论:

  • 不考虑网络耗时的情况下,内联脚本的 HTML 解析和渲染时间更长,达到可交互状态也需要更长的时间。
  • 无缓存的情况下文件数目的增多会急剧增加渲染时间,但只要合适地使用缓存,即使文件数目非常多也不会影响渲染性能。
  • 在各种网络情况下即使没有缓存,少量的外链和内联脚本的渲染性能表现非常相近。
继续阅读