zoukankan      html  css  js  c++  java
  • h5移动端前端性能优化

    1.脚本优化

    (1)减少重绘和回流

    (2)缓存Dom选择与计算

    (3)缓存列表length

    (4)尽量使用事件代码,避免批量绑定事件

    (5)尽量使用ID选择器

    (6)使用touchstart、touchend代替click

     

    2.加载优化:

    (1)合并css、javaScript

    (2)合并小图片,使用雪碧图

    (3)缓存一切可缓存的资源

    (4)使用外联式引用css、javascript

    (5)使用首屏加载、使用按需加载、使用滚屏加载

    (6)减少Cookie

    (7)避免重定向

    (8)异步加载第三方资源

    3.渲染优化

    (1)html使用viewport

    (2)减少Dom节点

    (3)适当使用Canvas动画

    (4)Touchmove、Scrollg事件会导致多次渲染

    (5)使用(css3 transitions、css3 3D transforms、Opacity、Canvas、Video)来触发GPU渲染。

    4.css优化

    (1)css写在头部,JavaScript写在尾部或异步

    (2)图片尽量避免使用DataURL

    (3)尽量避免在HTML标签中写Style属性

    (4)避免css表达式

    (5)避免css规则

    (6)正确使用Display的属性

    (7)值为0时不需要任何单位

    (8)不声明过多的font-size

    (9)不要滥用web字体

    (10)标准化各种浏览器前缀

    (11)避免让选择符看起来正则表达式

     

    5.图片优化

    (1)图片不宽于640

    (2)首次加载不大于1014KB

    (3)使用css3、SVG、Iconfont代替图片

    (4)webP优于JPG、PNG8优于GIF

    总结:pc优化手段在mobile同样适用

  • 相关阅读:
    java反编译工具
    javascript
    微信小程序
    微信小程序
    微信小程序
    微信小程序
    微信小程序
    微信小程序
    微信小程序
    微信小程序
  • 原文地址:https://www.cnblogs.com/sun927/p/5611337.html
Copyright © 2011-2022 走看看