zoukankan      html  css  js  c++  java
  • 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渲染

  • 相关阅读:
    redis 使用
    VS----id为xxxx的进程当前未运行 问题
    bootstrap--------bootstrap table显示行号
    js--------js获取当前时间,返回日期yyyy-MM-dd
    CLR via C#--------CLR的执行模式
    Python链表成对调换
    Python去除列表中的重复元素
    MySQL索引背后的数据结构及算法原理
    Python 垃圾回收机制
    Python 里的拷贝
  • 原文地址:https://www.cnblogs.com/rainheader/p/4581027.html
Copyright © 2011-2022 走看看