移动端优化

移动端的优化,尤其是对于图片的优化,至关重要
 能不用图片的就不用图片

 1、我们静态资源图片
   1)所有的小图我们用css sprite技术(雪碧图),把所有的小图合并到一张大图上,然后样式中通过图片background-position来实现定位展示(减少服务器的资源请求次数)
   2)对于大一点的图片(banner、背景图),我们采取图片延迟加载,默认给一张较小的默认图,让默认图平铺整个背景,当页面加载完成后(一般我们控制100或者500ms后,在开始加载我们的真实图片) --保证刚开始加载的速度快一些
   3)发请求--服务器返回--接收--浏览器渲染(转换成码值进行显示) 直接采用我们的base64编码技术来实现 (虽然解决了快的问题,但是代码量太大了,所以这个技术只有在你想了一切办法都无法解决的情况下用它)
   http://tool.css-js.com/base64.html
   把所有的小图标合并成大图,然后给大图做base64

 2、动态资源图片 ajax请求后台的数据返回的图片
   1)图片延迟加载
   首先背景是一张默认的背景图,当数据加载展示完毕后,我们动态创建img,然后把我们的图片插入到页面中就可以了
   默认我们只处理第一屏幕的图片,当用户手动下滑的时候,我们再把下面的加载
-->

                    

你可能感兴趣的:(移动端优化)