Twitter的UI如何在其HTML5 iPhone移动网站上如此迅速地响应？

Question

Twitter的iPhone上新的HTML5移动网站在移动浏览器中的速度非常快。他们使用什么技术为他们的网站创建近乎原生的体验？

Answer 1

它非常快，并且有很多技术用于实现这一目标。我们来介绍一些：

最小化HTTP请求

因此，开始简单并查看源代码，你会发现一大堆......一切。他们正在做一些服务器端的功能，在HTML页面上包含所有CSS和Javascript。这样做的好处是，单个请求可以获得所有初始布局代码。这就是为什么页面在首次加载时是黑色的。最小化HTTP请求是提高站点性能的最佳方法之一，并且有许多与之相关的技术（CSS压缩，Javascript压缩，创建spritemap ......）

这将我们带到：

创建精灵地图。

看一下网络流量中包含的sprite.png。它有所有的图标。一个单独的列表可以很好地解释这是如何工作的：

http://www.alistapart.com/articles/sprites

简单的解释是你有一个大图形，并使用CSS创建一个窗口，只查看其中的一个特定部分。再次使用单个图形可以最大限度地减少HTTP请求。

使用CSS3

特别感兴趣，您可以使用twitter bootstrap进一步研究这些按钮。按钮不是图形;它们是CSS3渐变（顶部有图形图标）。为此页面提供服务的任何设备都应支持CSS3渐变，因此创建一个漂亮的界面是一种安全而轻松的方式。

延迟加载

背景图片需要一秒钟才能显示，因为它是在事后通过Javascript请求的。这是最后的幻想 - 任何像大图像一样重的东西只有在页面可以使用时才会被要求。

希望这有帮助，如果你有任何问题，请提出问题！