联享懂营销的专业网站设计制作公司

400-665-9980 | 15920999917（客户专线）
< prev next > 返回

H5页面前端性能优化技巧

2022-05-30• 围观热度 818•技术推荐
    得益于智能手机的普及和各行各业互联网+的运用，移动端的市场占比疯狂增长。移动端+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渲染。
图片

联享科技 长沙联享 东莞联享 深圳联享 佛山联享 54云 巨牛网络 晴网 拓客多 鑫分销 沃景供应链 守合同重信用网
  • 7x24

    全国售后支持123

  • 14年

    14年行业服务经验

  • 26家

    全国售后支持

  • 200名

    超百人设计、研发团队

  • 2万

    服务企业客户2万家

  • 9年

    连续9年守合同重信用企业

关于我们
广州联享信息科技有限公司成立于2011年，是成熟的企业互联网解决方案服务商。致力于帮助每个企业实现互联网智能经营。截止目前，联享科技在全国设有26家分公司，拥有员工200余人，总公司现设有客服事业部、运营事业部、网络事业部、行政事业部四大职能部门...
快捷导航
网站建设 域名注册 小程序开发 虚拟主机 分销商城 企业邮箱 微信开发 400电话办理
联享科技已覆盖互联网主要城市
目前总部设立于广州，并在深圳、上海、北京、杭州、长沙、武汉、郑州、石家庄等全国26座城市设有分公司及30余家核心城市代理，更多城市正在筹建中，敬请期待
首页 公司简介 人才招聘 营销城市 同行案例欣赏 常见问题 联系我们 网站地图

全国统一热线：400-665-9980 粤ICP备11058496号

Copyright © 2007-2022 联享信息科技有限公司（a020.cn）版权所有

常年法律顾问：广东梵意律师事务所 周乙飞律师（主任）