如何编写像 Gmail 这样高效的移动网站?
我的网站有一个适合 iPhone/Android 设备的不同移动版本。然而,问题似乎出在网站的性能上。即使我没有加载任何图像,它确实又慢又重。
另一方面,当我使用 Gmail 或 YouTube 的移动版本时,它们的速度非常快,几乎像本地移动应用程序一样运行。
他们是怎么做到的?
非常感谢您的帮助:)
My web site has a different mobile version that's suited for iPhone/Android devices. The problem, however, seems to be in the site's performance. It's really slow and heavy, even though I'm not loading any images.
On the other hand, when I use Gmail's or YouTube's mobile version, they're so fast they almost perform like a native mobile application.
How do they do that?
Your help is much appreciated :)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
看我的评论。此外,如果您感觉到的缓慢是在与网站交互时,则可能是因为它缺乏接受触摸事件的能力。在移动网络上,如果您没有为 js 触摸事件连接 UI,那么体验会显得更慢,因为设备浏览器必须回退到标准单击和其他不是最佳的鼠标事件。 mootools 和 jquerymobile/jqtouch 等框架都内置了这些事件。看一下 mootools 解决方案,它写得很好: http://davidwalsh.name/mootools-touch
See my comment. Also, if the slowness you perceive is when interacting with the site it could be that it lacks the ability to accept touch events. On mobile web, if you have not wired up the UI for js touch events the experience will seem slower because the device browser has to fall back to standard click and other mouseevents which are not optimal. Frameworks such as mootools and jquerymobile/jqtouch have these events baked in. Take a look at the mootools solution which has quite a good write up: http://davidwalsh.name/mootools-touch
他们可能使用本地存储http://dev.w3.org/html5/webstorage/
您的页面太大吗?尝试使用 gzip 和/或减少输出
您的服务器的连接速度也可能是导致速度缓慢的原因
They probably making use of local storage http://dev.w3.org/html5/webstorage/
Are your pages too large? Try to use gzip and/or reduce output
Your server's connection speed may also be responsible of slowness
好吧,您不需要包含任何 JavaScript 框架来使其快速可点击。
通过实现一些 JavaScript,您可以实现这一目标。 Google 已为此发布了解决方案
https://developers.google.com/mobile/articles/fast_buttons< /a>
这将允许访问者以本机方式与应用程序交互。从 Android 4(据我记得)版本开始,通过设置视口元标记,浏览器将自动应用快速单击功能。
对于动画问题,请始终使用硬件加速动画,并回退到旧版移动浏览器。使用硬件加速动画将使您的应用程序如丝般流畅。
遵循此指南,您可以使您的应用程序像 gmail / youtube 移动版本一样快。
http://www.html5rocks.com/en/tutorials/speed/html5/
祝你好运。
Well, You don't need to include any javascript framework to make it fast clickable.
By implementing some JavaScript you can achieve that. Google has released a solution for that
https://developers.google.com/mobile/articles/fast_buttons
This will allow visitor to interact with application native way. From Android 4 (as far as I remember) version by setting viewport meta tag the browser will automatically apply the fast click functionality.
For the animation issue always use Hardware accelerated animation with a fall back for older mobile browser. Using hardware accelerated animation it will make your application smooth as silk.
Follow this guideline and you can make your application as fast as gmail / youtube mobile version.
http://www.html5rocks.com/en/tutorials/speed/html5/
Best of luck.
您的网络应用程序消耗了太多 RAM。不要使用太多的库,也不要附加太多的事件处理程序。
Your webapp is consuming too much RAM. Don't use so many libraries and don't attach so many event handlers.