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渲染

  • 相关阅读:
    CF 538 D. Flood Fill 递归 区间DP
    P3355 骑士共存问题 二分建图 + 当前弧优化dinic
    P1726 上白泽慧音 tarjan 模板
    P1073 最优贸易 建立分层图 + spfa
    P2774 方格取数问题 网络最大流 割
    P2157 [SDOI2009]学校食堂 状压DP
    P1357 花园 状压 矩阵快速幂
    P3084 [USACO13OPEN]照片Photo dp
    CF_EDU51 E. Vasya and Big Integers
    搜索:DLX算法
  • 原文地址:https://www.cnblogs.com/rainheader/p/4581027.html
Copyright © 2011-2022 走看看