HTML5移动页面，代码优化技巧

目前，很多的企业对html5开发都不陌生，毕竟它的出现个移动端造的影响还是挺大的，html5框架有助于提升网页访问速度，通过前端适当的代码优化，缩短响应的时间，使用户等待时间更短。所以，我们在开发html5移动页面的时候，一定要熟悉掌握一些方式方法，这样对于提供页面开发效率的帮助还是很大的，并且也能防止疏忽缺漏。

1、画雪碧图

一般来说，只要是涉及到动画的部分，使用的元素都比较的多，所以请务必使用雪碧图，在互联网中有很多的工具可以帮你生成雪碧图，如：CssGaga，GoPng......，若觉得单张雪碧图面积太大，可将其拆分成2-4张雪碧图；若觉得资源实在太多，可考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片，加载比一张图片慢慢加载要很多，当然，这还是要依据具体情况衡量。

2、多终端兼容

毋庸置疑，多终端兼容是一切的根基，大则414×736，小则320×416。据天津app开发所知，之前有一种派系为320派系，也就是大部分页面都是320宽度，因此干脆直接用320的容器来包一切页面，并且这样不管是对设计，还是对技术人员来说都非常的简单，然而IPHOEN6和IPHONE6p的出现彻底毁灭了这个派系。

3、压缩HTML、CSS、JavaScript

一般情况下，减少资源的大小对于提升网页显示速度有很多的帮助，所以开发站长需要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。1）压缩，如，多余的空格、换行符和缩进......；2）启用GZip。

4、图片压缩

如果说在对代码优化的过程中较站流量的资源是什么？答案一定是图片，因为要尽可能的避免使用它，若非要使用的话，要选择较合理的合适，合适的大小，然后通过互联网中的一些图片压缩工具，如：智图，TinyPNG，JPEGmini等等，对齐进行压缩，同时在代码中用Srcset来按需显示。除了依靠工具意外，如下的这几种方式也有助于图片优化：

A、尽可能的避免使用png24，若对图片色彩要求不是很高，不妨使用png8；

B、采用新的格式，随着WEBP和BPG等新格式的到来，在不需考虑兼容的情况下大胆的去尝试；

C、用SVG和ICONFONT代替简单的图标；用FUFU的字蛛来代替艺术字体切图。

提示：过度压缩图片大小影响图片显示效果

5、缓存

通常来说，使用缓存能够有效的减少服务器请求的次数，节省加载的时间，所以所有静态资源都要在服务器端设置缓存，并尽可能的使用长Cache。

A、缓存一切可缓存的资源

B、使用长Cache（使用时间戳更新Cache）

C、使用外联式引用CSS、JavaScript

6、CSS优化

A、尽可能的避免在HTML标签中写Style属性。

B、避免CSS表达式，CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。