得益于智能手机的普及和各行各业互联网+的运用，移动端的市场占比疯狂增长。移动端+HTML5，这个组合对前端工程师来说是个不小的挑战，如何让开发的页面能有更好的体验？这就是我们今天讨论的话题：移动端HTML5页面前端性能优化。
如何优化HTML5在移动设置上的性能表现，首先需要明确以下几个原则：
1、PC优化手段在Mobile端同样适用。
2、在Mobile端我们提出三秒种渲染完成首屏指标。
3、基于第二点，首屏加载3秒完成或使用Loading。
4、Mobile端因手机配置原因，除加载外渲染速度也是优化重点。
5、基于第四点，要合理处理代码减少渲染损耗。
6、基于第二、第四点，所有影响首屏加载和渲染的代码应在处理逻辑中后置。
7、加载完成后用户交互使用时也需注意性能。
HTML5优化具体可在以下几个方面入手：
加载优化：合并CSS、JavaScript、小图片，缓存一切可缓存的资源，使用长Cache和外联式引用CSS、JavaScript，压缩HTML、CSS、JavaScript，启用GZip8使用首屏加载、按需加载、浪屏加载，通过Media Query加载，增加Loading进度条，减少Cookie，避免重定向，异步加载第三方资源。
图片优化：使用智图，尽可能用（CSS3、SVG,IconFont)代替图片，使用Srcset,web图优于JPG,PNG优于GIF,图片不宽于640。
脚本优化：减少重绘和回流级存Dom选择与计算，缓存列表length，尽量使用事件代理避免批量绑定事件，尽量使用ID选择器使用touchstart、touchend代替click。
Css优化：CSS写在头部，JavaScript写在尾部或异步;避免图片和iFrame等空的Src;尽量避免重设图片大小;正确使用Display的属性;不滥用Float，不滥用Web字体，不声明过多的Font-size，值为0时不需要任何单位;标准化各种测览器前缀，避免让选择符看起来像正则表达式。
渲染优化：HTML使用Viewport，减少Dom节点，尽量使用CSS3动画合理使requestAnimationFrame动画代替setTimeout;适当使用Canvas动通画;使用（CSS3 transitions,CSS3 3Dtransforms. Opacity. Canvas, WebGL.Video)来触发GPU渲染。
相关推荐
-
世界十大钢笔排行榜（世界十大钢笔排行榜前十名）
世界十大钢笔排行，果然不出意料这个国家上榜次数最多！你觉得有遗漏吗？ 1.Mont Blanc万宝龙(德国) 2.Pelikan百利金(德国) 3.Senator胜奈德（德国） 4.LAMY凌美(德国) 5.Duke公爵（德国） 6.PARKER派克(美国) 7.CRO...
-
电脑太过于卡顿怎么解决（电脑经常性卡顿怎么办）
最近有许多小伙伴抱怨自己的电脑经常卡顿，严重影响了正常的使用需求，那是因为你的电脑没有开启“加速”设置，今天就来给大家分享几个能减少电脑卡顿的有效设置，让电脑性能瞬间翻倍！ 一、调整电脑处理器性能 首先，...
-
感谢好朋友的暖心唯美句子（感谢朋友的语录暖心的话）
2022年的进度条，只剩最后几天。回首这一年，经历过悲伤也感受过快乐，遇到过挫折也收获过成功。身边的人来来去去，而亲爱的朋友，谢谢你一直陪伴左右，和我一起经历了这一年的酸甜苦辣。 1.亲爱的朋友，人生最大的...
-
tcp udp socket 调试工具（抓包工具tcpdump）
1、wireshark 这个工具是抓包的神器，我不知道有没有在以前的文章里提及，总之，他是好评如潮，谁用谁知道，我就不班门弄斧的多做蹩脚的介绍了,只说一点，他会自作聪明的按照端口号来解码协议，有的时候被他弄的一塌...
-
京八件都有哪八件（京八件的由来和介绍）
不管是去哪里旅游，现代人都会带一些这个地方的特产。北京很有名的就有京八件，那么，京八件哪八件东西?今天就给大家介绍一下，下一次去北京旅游，要带的特产就选它吧! 京八件是哪八件东西 “京八件”是一种老北京的点...
-
只愿君心似我心,定不负相思意什么意思（大白话告诉你）
卜算子·我住长江头 李之仪 我住长江头，君住长江尾。 日日思君不见君，共饮长江水。 此水几时休，此恨何时已。 只愿君心似我心，定不负相思意。 诗君解读： 这首小令明白晓畅，直抒爱意，仿佛民歌唱出来一般，使人读...