NEWS
【响应式建站-移动端HTML5页面优化】 广州网站设计www.3gonet.net.cn三行网络公司为您详细介绍 - 请往下阅读》
响应式建站-移动端HTML5页面优化
得益于智能手机的普及和各行各业互联网+的运用,移动端的市场占比疯狂增长。移动端+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渲染。
此文《响应式建站-移动端HTML5页面优化》由三行网络公司原创,转载请保留原文链接,谢谢! 关键词标签:响应式建站-移动端HTML5页面优化 (PC+手机)响应式网站建设
匠心打造精品,用心成就经典!携手客户共创双赢!
© Copyright 广州三行网络科技有限公司
粤ICP备案号:09210325