• webapp前端性能优化规范


    加载优化
      合并css javascript
      合并小图片 使用雪碧图
      缓存一切可缓存的资源
      使用长的cache
      使用外链式引用css,javascript
      压缩HTML,CSS,JAVASCRPT
      启用GZip
      使用首屏加载
      使用按需加载
      使用滚屏加载
      通过Media Query加载
      增加Loading进度条
      减少cookie
      避免重定向
      异步加载第三方资源
    css优化
      css卸载头部,javascript写在尾部或者异步
      避免图片和iFrame等的空Src
      尽量避免重设图片大小
      图片尽量避免使用DataURL
      尽量避免写在HTML标签中写Style属性
      避免css表达式
      移除空的css规则
      正确使用Display的属性
      不滥用Float
      不刊用Web字体
      不声明过多的font-size
      值为0时不需要任何单位
      标准化浏览器前缀
      避免让选择符看起来像正则表达式
    图片优化
      使用智图 http://zhitu.tencent.com
      使用(css3,scg,IconFont)代替图片
      使用Srcset
      webP优于GIF
      PNG8优于GIF
      首次加载大不于1014KB
      图片不宽于640
      脚本优化
      减少重绘和回流
      缓存Dom选择与计算
      缓存列表
      尽量使用时间代理,避免批量绑定事件
      尽量使用ID选择器
      使用touchstart,touchend代替click
    渲染优化
      HTML使用Viewport
      减少Dom节点
      尽量使用css3动画
      合理使用requestAnmationFrame动画代替setTimeout
      适当使用Canvas动画
      Touchmove,Scroll事件会导致多次渲染
      使用(css3 transtions,css3 3D transforms,Opacity,Canvas,webGL,Video)来出发GPU渲染

  • 相关阅读:
    团队二阶段冲刺个人工作总结9
    团队二阶段冲刺个人工作总结8
    团队二阶段冲刺个人工作总结7
    团队二阶段冲刺个人工作总结6
    PSP总结报告
    第十三周例行报告
    对团队成员公开感谢博客
    附加作业 软件工程原则的应用实例分析
    第十二周例行报告
    第十一周例行报告
  • 原文地址:https://www.cnblogs.com/rainheader/p/4581027.html
Copyright © 2020-2023  润新知