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表达式。

C、正确使用Display的属性,Display属性会影响页面的渲染,因此大家一定要合理的使用哦!

D、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。

7、无阻塞

写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部。

其实,html5的出现,的确给很多的企业的发展带去了帮助,帮助很多的开发站长更好的完成工作,不过,天津app开发觉得评价一款产品的好坏不能只看便面,内在的东西同样非常的重要,内外兼优的产品才是最好的,您觉得呐?


声明:文章"HTML5移动页面,代码优化技巧"为文率科技APP开发公司原创文章,转载请注明出处,谢谢合作!

Html5/微信/网站开发资讯文章推荐阅读