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

  • 相关阅读:
    icmp_ping学习笔记
    学习笔记
    解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)
    基础算法之插入排序Insertion Sort
    基础算法之选择排序Selection Sort
    基础算法之快速排序Quick Sort
    基础算法之冒泡排序Bubble Sort
    for语句嵌套循坏性能的剖析
    2014——>2015,我的薪资依然是4.5
    C# 反射浅析
  • 原文地址:https://www.cnblogs.com/rainheader/p/4581027.html
Copyright © 2011-2022 走看看