浏览器前进/后退缓存(BF Cache)

Chrome Firefox JavaScript DOM XHR 缓存

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

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

国内主要视频网站的嵌入方式

Flash iframe 视频 HTML5

来一篇水文,整理一下国内各大视频网站的视频嵌入方式,或许有一点用处。 爱奇艺、优酷、搜狐视频、腾讯视频、酷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 可用性调研

ShadowDOM CustomElement 组件化 HTML5

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

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

在 Vim 中执行 Shell 命令

Vim-Practice Shell Tmux Vim 进程 快捷键

刚开始使用终端和 Vim 工作时,桌面上总是铺满了执行各种任务的终端窗口,任务切换极其困难。 尤其在使用 Vim 编辑文件时每次想执行一些 Shell 命令就会新开一个窗口。 虽然搭建终端工作环境的终极方式是终端复用,但有一些更加轻巧的办法可以在 Vim 中快速执行 Shell 命令。

比如 :!cmd Vim 命令和 :sh Vim 命令,以及 Ctrl+Z Shell 快捷键。 除此之外还可以使用 benmills/vimux 来在 Vim 中操作 Tmux, 这可以达到类似 IDE 的效果:按下编译快捷键打开命令窗格并开始编译, 编译过程中 Vim 不会失去焦点,编译成功后自动关闭命令窗格。

Vim 中的变量赋值、引用与作用域

Vim-Practice Vim 作用域 寄存器 环境变量 变量

使用 let 进行变量赋值,echo 打印变量的值, unlet 销毁变量。 对于 Vim 选项还可用 set 来更方便地操作,比如 set {option}, set no{option}, set {option}?。 普通变量可以直接引用,环境变量要加前缀 $、寄存器变量要加前缀 @、Vim 选项要加前缀 &。 变量默认作用域取决于定义的位置,函数内则为函数作用域,外部则为全局变量。 赋值和引用变量时可以使用 b:,g:,l:,t: 等前缀来指定要操作哪个作用域的变量。

获取 DOM 内容的 API 接口

DOM HTML jQuery innerHTML textContent 重排

Web 开发者可能会使用 jQuery .html().text() 方法来设置 DOM 内容,但他们的实现仍然依赖于 DOM API。 本文来梳理一下这些用来获取 DOM 内容的 DOM 属性(attribute), 比较它们的区别:innerHTML, outerHTML, innerText, outerText, text, textContent, 以及 jQuery 中.html().text()的实现。

PWA 初探:基本特性与标准现状

Android Chrome PWA 缓存 Service-Worker

PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的“软件开发方法”)。 Harttle 能找到的关于 PWA 最早的一篇文章是 2015年6月 Alex Russell 的一篇博客: Progressive apps escaping tabs without losing our soul让 Web App 从标签页跳出来,同时保持 Web 的灵魂。

如 Alex 所述,PWA 意图让 Web 在保留其本质(开放平台、易于访问、可索引)的同时, 在离线、交互、通知等方面达到类似 App 的用户体验。按 Google 官方的解释 PWA 具有这些特性:Reliable, Fast, Engaging。

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment. – Google PWA Tutorials

上一页 下一页