Twitter 在 iPhone 上的新 HTML5 移动网站在移动浏览器中的速度非常快。他们使用什么技术为他们的网站创造接近原生的体验？
问问题
209 次
1 回答
3
它的速度非常快，并且有很多技术可以实现这一目标。让我们介绍其中的一些：
最小化 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-24T02:26:53.657 回答