移动端的性能优化

在这里插入移动端的优化，尤其是对于图片的优化，至关重要
 能不用图片的就不用图片

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

 2、动态资源图片 ajax请求后台的数据返回的图片
   1)图片延迟加载
   首先背景是一张默认的背景图,当数据加载展示完毕后，我们动态创建img，然后把我们的图片插入到页面中就可以了
   默认我们只处理第一屏幕的图片，当用户手动下滑的时候，我们再把下面的加载
-->
<!--
关于html页面优化的问题：
1、代码的优化：
1)标签语义化
2)避免冗余代码、降低代码的耦合度(把常用的单独的写了,统一用的时候调用,不要写重复的)
3)js尽量少使用同步请求
4)避免js内存泄露
5)少使用闭包
6)少使用DOM动态操作的方法
7)文档碎片
8)移动端用css3动画替换我们的js动画
2、数据优化
1)数据缓存
2)数据异步加载(页面中开始先加载第一屏内容，然后慢慢的在把其他屏的内容进行加载)
3)图片延迟加载
3、请求资源数量的优化
1)css或者js都合并成一个文件
2)图片css sprite技术，图片的合并压缩，只加载一次大图，然后通过background-position定位查找图片
3)如果页面中有影音文件，没有特殊的需求，这类文件都等页面渲染完毕后稍后加载
4、请求资源大小的控制(尤其是移动端)
1)别滥用框架(插件)，小页面能不用就不用，移动端项目较大的话，不建议使用jQuery系列的，使用zepto替换jQuery、使用amazeUI代替jQuery Mobile
2)和设计师商量，移动端少用图片，需要用的话，能用代码写出来的不用图片
3)图片base64技术解决

5、服务器端优化
服务器做一下gzip压缩，后台也跟着优化一下
做一下服务器分布式集群
cdn代码片

原文链接：https://www.jianshu.com/p/1297d8ffcc55