在去年，我发现一些开发者通过使用两个巧妙的技巧，将一个使用起来缓慢阻塞的 web app 变得非常灵活和优雅。
我相信这些技术足够重要到需要一个名字来表示：响应式 web 设计。
总的来说，响应式 web 设计是这样一种建站技术的集合：用户访问网站时始终觉得交互很快和舒适，尽管是在网络缓慢或者是有延迟的情况下。
作为 web 开发者和架构师，为了改善 web 上的用户体验和性能表现，我相信找到方法使我们做的东西默认达到这样的模式，是比较重要的。
方案1：优先加载页面的骨架
使用得当的话，这项技术几乎不会被注意到，但是它却可以大大地改善一个网站的性能表现。
有趣的是，这项技术被几乎所有的原生 app 使用，使得用户感觉非常舒适即使是在网络条件恶劣的情况下。但是这项技术却几乎没有使用在 web 开发上！
机会来了！💡
简单来说，展示页面骨架确保无论何时用户点击了哪一个按钮或者是链接，页面都能够立即响应将用户带到新的页面。并且页面会处于加载中直到页面上的内容可以访问。
Facebook 使用优先展示页面骨架技术，去改善第一次打开应用的性能表现。
展示页面骨架是一项关键的改善性能表现的技术，它能够使得应用感觉很快，并且能够显著减少用户产生以下的疑问：
正在发生什么？它是否正在加载？我操作正确了吗？ 🤔
Flipkart.com 是一个稀有的使用该技术的网站例子。因此不管是浏览分类或者是点击查看产品详情，都感觉非常的快，尽管实际的结果需要等待几秒钟的加载时间：
这是一张 flipkart.com 在安卓手机上，单独从主屏幕启动的屏幕截图。
这项技术运用地更好的例子是，已经准备好的内容比如缩略图或者是文章标题可以被重用，来进一步改善性能表现，使得加载迅速可见。
app.jalantikus.com 在页面过渡中，优先展示页面骨架并且重用了文章标题和缩略图。
测试使用页面骨架技术的网站
测试使用这项技术的网站表现是简单的：只需要使用 Chrome 浏览器的网络仿真功能去使得网速尽可能地慢，然后再在网站里进行各种操作。如果网站较好地使用这项技术的话，你在网站里的交互依旧会流畅和反应敏捷。
Chrome 浏览器网络仿真支持的最慢网速
方案2：通过预先确定网站元素尺寸的“稳定加载”
你明白那种你将要使用的网站，页面却跳来跳去的感觉吗？就是那种你正要阅读的一篇文章文字却一直在移动？这就是所谓的“不稳定加载”，我们需要将它们消灭。
slate.com 在页面加载时内容抖动的特别严重。你所处的网络越慢，页面抖动的时间越长。
不稳定加载使得网站很难去交互，而且使得它们非常地不稳定！
浏览一个不稳定的网站经常使我联想到在地震中走来走去的那种感觉
不稳定加载是由不包含任何尺寸信息的图片和广告嵌入到页面中引起的。浏览器默认只知道那些它们已经加载的内容的尺寸，所以一旦图片加载完成，咚！，整个页面就滑下去了。
为了防止这样的情况，页面中所有的标签都必须主动地包括它们即将要包含的图片的尺寸信息。
大部分情况下，特定页面使用的图片都是相同的尺寸，因此这些尺寸信息可以包括在 HTML 模板里面。但是有些情况下，这些图片的尺寸是动态地。因此它们的尺寸需要在加载完成之后计算得来，创建完成之后再嵌入到 HTML 里面。
<!-- Always include sizes on images to prevent unstable loads -->
<img src='/thumbnail.png' style='width: 100px; height: 84px'>
同样的方法适用于广告，它通常是不稳定加载的罪魁祸首。在任何可能出现广告的地方，创建一个即将包含广告的 div 标签。然后尽可能地猜出这个广告会多大，将该尺寸信息设置到你的模板里面。
需要注意的是，在网速慢的情况下，不稳定加载处于最坏的模式。在你刚要准备阅读的时候，页面会突然地抖动，并且你不能完全确定处于安全模式中。
放在一起比较
我在 reactive.surge.sh 上面做了一个小的示例，来演示传统 web 和 响应式 web 设计之间的区别。
传统的内容加载
页面跳动使人感觉缓慢和烦躁。有趣的是，我发现在移动设备上点击屏幕并且看不见反应时的情况下，会更加使人觉得烦躁。
响应式 web 设计的内容加载
在响应式 web 设计下，加载会很迅速并且在多次点击返回按钮和文章标题的情况下，网站依旧能够响应。
结语
在页面切换受阻并且页面进行多次跳动的情况下，网速越慢，用户体验越差。
即使是在网络很慢和令人不快的情况下，通过响应式 web 设计(“响应式设计”这个名字已经被使用了！)，我们都能够使得用户的体验更加轻快和响应式的。
我想听听社区中关于譬如参与度和收入等KPI中产生实际影响的数据。
除此之外，我鼓励框架和库的作者考虑将优先展示页面骨架和稳定加载技术变成默认，就和pit of success一样。
如果你对此有想法，请在推特上给我留言 @owencm，并且喜欢的话就请给我点赞！
P.s. 确保已经在移动设备上查看过示例网站 reactive.surge.sh，这是它莫大的荣幸！
