Twitter的UI如何在其HTML5 iPhone手机网站上如此快速地响应？

Twitter的新HTML5手机网站在手机浏览器中的速度非常快。他们使用什么技术为他们的网站创建近乎本地的体验？Twitter的UI如何在其HTML5 iPhone手机网站上如此快速地响应？

2012-04-24 acconrad

不错的尝试，Twitter开发者！ – 2012-04-24 02:01:59

@Mike Robinson Ha，我希望。如果您查看我的个人资料，您可以看到我不为他们工作，但我想模仿他们在移动浏览器中获得的原生感觉。 – acconrad 2012-04-24 02:03:27

我会写一个完整的文章，但简单的方法是探索自己。您可以通过在Safari中打开开发工具，将您的用户代理切换到iPhone，然后使用控制台来检查网络流量，资源等来实现此目的。寻找诸如延迟加载，精灵表，使用高级CSS以及良好的压缩等。 – 2012-04-24 02:10:33

它速度非常快，并且有很多技术可以用来实现这一点。让我们来介绍其中的一部分：

尽量减少HTTP请求

于是开始了简单的查看源代码，你的......一切巨大的混乱。他们正在做一些服务器端的幻想，在HTML页面中包含所有的CSS和Javascript。这样做的好处是单个请求可以获得所有初始布局代码。这就是为什么在第一次加载时该页面是黑色的。尽量减少HTTP请求是改善网站性能的最佳途径之一，并有相关的技术，它主机（CSS压缩，使用Javascript压缩，创建spritemap ..）

这给我们带来：

创建一个精灵图。

查看网络流量中包含的sprite.png。它具有所有的图标。列表除了很好地解释它是如何工作的一个不错的工作：

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

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

使用CSS3

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

延迟加载

背景图像需要一秒钟出现，因为它是通过JavaScript要求在事后。这是最后的幻想 - 任何像大图像一样重的东西只有在页面准备好使用后才会被请求。

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

来源

2012-04-24 02:26:53

谢谢迈克！您对用户代理欺骗的评论是非常有用的，我在Chrome中尝试了它，并且它完全呈现了我正在寻找的内容，所以我可以开始在桌面上探索他们的秘密酱油:) – acconrad 2012-04-24 02:28:22

没问题，挖掘起来很有趣。我可能实际上偷了他们的一些技巧... – 2012-04-24 02:29:17

Twitter的UI如何在其HTML5 iPhone手机网站上如此快速地响应？

回答

相关问题