原文：http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

作者：Addy Osmani

译者按：在突如其来的移动热潮下，web 开发者似乎回到了早期兼容或 hack 各种浏览器的暗黑时代。唯一不同的是，现在不是兼容浏览器而是兼容设备，这比起在同一台 PC 上兼容不同浏览器要痛苦得多，另外由于终端尺寸的差异，涉及的兼容性问题会显得更加复杂。因此，跨终端的同步化测试工具是急切需要的，这意味着工作效率的成倍提升！感谢 Addy 大神的文章，给出了这个领域的多个选择，希望对大家有所帮助，遇到问题可以微博交流（@碧青_Kwok）~最后，与往常一样，转载请注明出处: )

做为一个刚吃过肉的人，看过大海，思考过人生，决定还是要静下心做点总结。

最近在做 Web 工具，做为一个在 Web 中运行的工具，想要做强大的事情，在不依赖于 Server 端的支持、不依赖插件下，还要完成这些事情，有时候想想，确实是一件很难的事情。取决于

浏览器是服务端的代码运行于客户端，出于安全性的考虑，做了很多限制。浏览器是一个相对封闭的环境，说白了，能力有限。

====索引=====

【Web 缓存机制系列】1 – Web 缓存的作用与类型

【Web 缓存机制系列】2 – Web 浏览器的缓存机制 

【Web 缓存机制系列】3 – 如何构建可缓存站点

【Web 缓存机制系列】4 – HTML5 时代的 Web 缓存机制

【Web 缓存机制系列】5 – Web App 时代的缓存机制新思路

【Web 缓存机制系列】6 - 进击的 Hybrid App，量身定做缓存机制

============

前言

前面的文章分别简述了 Web 缓存、相关机制、以及 html5 和 Web App 时代我们可以选择的缓存思路。转眼过了很长时间，这期间移动互联网成为大家讨论和学习的焦点，部门也有很多同学陆续接触 Mobile Native App 和 Mobile Web App 的开发。同时，还有部分同学专注 QQ 内嵌 Webkit + Client 这种 Hybrid App 模式的开发，继续推动 QQ 客户端 Web 化的进程。

引用张图，简单粗俗的解释下 Native App、Web App 和 Hybrid App

你是否关注过浏览、点击图片这个微妙的过程，不同的图片展现、交互方式各带来什么样的观感？本文聚焦于图片浏览这个过程以及如何使用 CSS3 和第三方库来提升体验。

先看下 Pinterest、Flickr等时下热门图片分享类网站。

Pinterest

用户实施了 pin这一动作后，图片信息以board形式集合，每个board里的图片呈现规矩的网格布局，这种布局适合于有限集合的排列。

让我们停下想想，为了 “分散” 的注意力而采用了瀑布流式，那么究竟每张图片用多大尺寸合适，能够降低用户面对满屏图片时的不适感？不同尺寸图片如何排放？在移动端又需要采用什么布局？怎么解决多张图片加载的性能问题？这些问题留待思考。

Pinterest 每张图的宽度是固定的，高度也可获取，这样在渲染页面的时候就可以先确定位置而不是等加载到图片资源。

基本介绍

mocha 是一个 javascript 的测试框架，chai 是一个断言库，两者搭配使用更佳，所以合称 “抹茶”（其实 mocha 是咖啡）。“抹茶” 特点是： 简单，Hour 级学习成本，node 和浏览器都可运行，有趣。

关于吹水，充字数的内容我放到了 blog 最后，因为 “抹茶” 上手非常的简单，看完 blog 再阅览一下官网就可以实际动手敲代码了，不足一个小时就可以基本掌握他们了。

作为一名开发者，应该对编辑器之神 Vim 与神之编辑器 Emacs 有所耳闻吧。编辑器之战的具体细节有兴趣的童鞋可以 google 之。

Vim 最大的特点是打开速度快，功能强大，一旦掌握了其中的命令，编程过程双手就不需要离开键盘了。

用习惯了 Vim 的另一个好处是在 linux 下可以很轻松地用 vi 来处理文件，当然 emacs 也可以做默认编辑器，但是不是每台机器都有安装 Emacs。

今天主要给大家介绍 Vim 在前端领域的一些常用插件：

最近在更新 JX.Animate 的 Demo，我想让首页的美女图动起来。用的是 Canvas 实现的，过几天大家就可以看到一边移动一边缩放的效果了。

在切换图片的时候，过场动画是用 m×n 个 div 的 CSS3 动画实现的。此时 div 上显示的图片必须要和 Canvas 大图上的一致。

之前是用图片 url 设置 div 背景的方式实现的。于是很自然的想到可以通过 Canvas.toDataURL() 获得一个 DataImageURL，然后沿用原来的逻辑就行了。

现实永远是骨感的。

DataImageURL 字符串必然是一个巨长无比的字符串，用这么长的字符串进行 m×n 次的 DOM 操作，结果就是一场灾难。

在使用 canvas 制作动画时，最传统的方式是对 canvas update -> clear -> draw 的过程

但是对于同一个 view 里的不同的动画，需要的更新频率可能并不一样，所以对于不同类型的动画，我们可以放在不同的 canvas 层上进行渲染，使用多层 canvas 分别渲染取代单个 canvas

上集入口

那些兄妹

这些都可以做调试输出，区别是：

1. 样式不同
2. 我们可以通过调试器底部筛选出不同的输出项

console.log，作为一个前端开发者，可能每天都会用它来分析调试，但这个简单函数背后不简单那一面，你未必知道……