整个 Web 系统架构在 HTTP 协议 之上， 利用 HTTP 的缓存机制不仅可以极大地减少服务器负载， 更重要的是加速页面的载入，以及减少用户的流量消耗。 快速到达和易于访问是 Web 与生俱来的特性， 其缓存机制也早已被服务器和浏览器厂商广泛地实现， 我们作为 Web 内容的作者何乐而不为呢？

Web 服务器（比如 Tomcat、Apache、Virgo）或服务器端框架（比如 Django、Express.js） 都会实现 HTTP 缓存机制，但本文不借助这些框架， 而是直接以基本的 Node.js 程序与 Chrome 浏览器来描述 HTTP 中最基本的缓存机制， 涉及到的 HTTP 头字段 包括 Cache-Control, Last-Modified, If-Modified-Since, Etag, If-None-Match 等。

HTTP 缓存 使用 HTTP 缓存：Etag, Last-Modified 与 Cache-Control 一文对 HTTP 协议的缓存机制进行了简单的讨论，本文集中讨论实际操作中的最佳实践。

TL;DR

• 谨慎地使用过期时间，最好配合 MD5 一起使用。
• 总是启用条件请求，比如 Etag 或 Last-Modified。
• 文件服务采用 Last-Modified，动态内容采用 Etag。
• 分离经常变化的部分，也会提高缓存的命中率。

TL;DR

Shell 中的变量只作用于当前进程。如需在子进程中创建副本可使用 export 内建命令。 有时使用临时变量语法可以非常方便。

eslint 是一款可配置的插件式架构的代码风格检查工具。可配置不足为奇，但插件式的架构却能带来很多方便。 例如在单元测试代码中，引入 mocha 插件便可自动引入一系列额外的语法规则。

打造前端开发的 Vim 环境 一文中提到了使用 Syntastic 对代码进行代码风格检查。 但同时我们需要按照同样一份规则（就是下文的 eslintrc）来进行代码格式化。 本文详细介绍如何在 Vim 中引入 eslint，以及用 eslint 规则来格式化代码。

浏览器前进/后退缓存（Backward/Forward Cache，BF Cache）是指浏览器在前进后退过程中， 会应用更强的缓存策略，表现为 DOM、window、甚至 JavaScript 对象被缓存，以及同步 XHR 也被缓存。 这一现象在移动端浏览器尤为常见，除 Chrome for Android、Android Browser 之外的浏览器基本都会触发。

BF Cache 本来是一项浏览器优化，但在某些情况下（比如前端路由的 Web App）会引起困惑。 本文主要讨论 BF Cache 的行为、如何检测 BF Cache 缓存、以及如何 workaround。

来一篇水文，整理一下国内各大视频网站的视频嵌入方式，或许有一点用处。 爱奇艺、优酷、搜狐视频、腾讯视频、酷6、土豆、乐视。 这些视频站绝大多数都采用 Flash 的方式播放，很多也提供了 iframe 的播放方式。

根据最新标准应当使用 <object>，可以添加 <embed> 作为Fallback。

但目前正在逐步地支持 HTML5 的原生 <video> 标签，这需要大量的开发工作。 因为 <video> 会被绝大多数国内手机浏览器劫持产生各种出乎意料的渲染结果， 只有 iOS 可以完美地使用 <video>。

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript. – App Store Review Guidelines

Web Components 是 WHATWG 和 W3C 正在尝试的 Web 组件化方案，为组件化的 Web 前端开发提供浏览器级别的支持。

Web Components 是一系列 Web 技术的集合，主要包括 Shadow DOM、Custom Elements、HTML Import、HTML Template。 这些技术标准大多处于草案阶段，下文中会给出具体的兼容性现状， 以及现有的一些替代方案。