如何优化页面在手机显示

做好的 一个手机网页 在真机上 加载会很慢 有些 用到 css3动画的 还会出现 页面卡卡的问题
关于图片大小是否有要求 机子自身的网路配置是否有要求 html+css3 是否写的也有问题呢 还是别的原因

已邀请:

ddsoftdjg

赞同来自:

这个情况很复杂啊,手机太多了,有配置高的,有配置低的。需要有一个大概的兼容性,例如现在还考虑去兼容android1.x android2.x,现在都已经很少了。在移动端设备更新换代很快,对应的用户的机器配置更新很快,可以看看现在智能机系统分布情况:http://en.wikipedia.org/wiki/Android_(operating_system) http://umindex.com/devices/android_os https://developer.apple.com/support/appstore/ https://developer.android.com/about/dashboards/index.html。所以在做的时候,对于兼容这块要考虑好。

而对于你说的CSS3动画卡的问题,有可能是没有启用硬件加速的问题,还有就是优先于用translate这样的属性去做动画,而不用left top

可以参照一些吧:
* https://github.com/jtyjty99999/mobileTech
* http://www.cnblogs.com/yexiaochai/p/3759959.html
* http://alloyteam.github.io/Spirit/modules/Standard/index.html

njmarked

赞同来自:

移动端动画用CSS3中的translate3D启动设备的硬件加速,不过也不能保证安卓机上有问题,页面卡顿通常是很多因素影响的,需要慢慢调试。
如果页面数据量很大,内容很多,html节点层级过多也会对页面的性能有影响,需要优化节点的层级,优化CSS。电脑上的效果永远是极好的,问题只会在手机上暴露出来。
手机兼容性的问题太多太多了,遍地是坑,慢慢积累吧。

关于图片,当然越大加载越慢,需要压缩到文件大小最小并保持图片尺寸和画质不变,网上有这样的工具,如TinyPNG。
如果是不需要其缩放的图片,用CSS Sprites,把各个小图片合在一张大图片里,用background-position进行定位。这样的好处是减少图片请求数,如果请求多,网页加载很慢。

要回复问题请先登录注册