• 前端性能优化&&网站性能优化


    加载优化:1、合并css、JavaScript
         2、合并小图片,使用精灵图
         3、缓存一切可缓存的资源
         4、使用长cache
         5、使用外联式引用css、JavaScript
         6、压缩HTML、CSS、JavaScript
         7、使用Gzip压缩内容
         8、使用首屏加载
         9、使用按需加载
         10、使用滚屏加载
         11、通过Media Query加载
         12、增加loading进度条
         13、减少cookie
         14、避免重定向
         15、异步加载第三方资源
    图片优化:1、使用智图 http://zhitu.tencent.com/
         2、使用css3、svg、iconfont代替图片
         3、使用srcset
         4、webP优于jpg
         5、png8优于gif
         6、首次加载不超过1014kb(基于3秒联通平均网速所能达到值)
         7、图片不宽于640

    css优化:1、css写在头部,JavaScript写在尾部或异步
          2、不要让link、script、img、iframe等标签出现空的src和href
          3、尽量避免重设图片大小
          4、图片尽量避免使用dataUrl
          5、尽量避免写标签属性
          6、避免css表达式
          7、清除空的css
          8、正确使用display的属性
          9、不滥用float
          10、不滥用web字体
          11、不声明过多的font-size
          12、值为0的时候不需要任何单位
          13、标准化各种浏览器的前缀
          14、避免冗长的选择符

    脚本优化:1、减少重绘和回流
         2、缓存DOM选择与计算
         3、尽量使用事件代理,避免批量绑定事件
         4、尽量使用ID选择器
         5、使用touchstart、touchend代替click
         6、合理使用节流和防抖
         7、避免不必要的跳转,合理取消浏览器默认事件
         8、避免404
         9、配置ETags
         10、少用全局变量,尽量用局部变量
            11、多个变量或常量合并声明

    渲染优化:1、HTML使用viewport
            2、减少DOM节点
            3、尽量使用css3动画
         4、合理使用requestAnimationFrame动画代替setTimeout
         5、适当使用canvas动画
         6、Touchmove、Scroll事件会导致多次渲染
         7、使用css3 transitions、css3 3D transforms、Opacity、Canvas、WebGL、Video来触发GPU渲染

    总结一下:

      使用正确的盒子嵌套,避免空标签,空属性
      避免冗长的选择器
      标准化各种浏览器的前缀
      使用精灵图,减少与服务器请求
      避免使用标签属性
      值为0的时候不需要带单位
      尽量不要重设图片尺寸
      webP优于jpg,png8优于gif
      使用节流和防抖
      使用预加载和懒加载,异步加载第三方资源
      使用压缩工具,合并压缩HTML、css、JavaScript
      使用长连接
      减少cookie
      使用事件委托
      避免不必要的跳转,合理使用取消浏览器默认事件
      少用全局变量,多用局部变量,多个变量或常量可以合并声明
      合理使用requestAnimationFrame动画代替setTimeout

  • 相关阅读:
    mybatis的延时加载缓存机制
    mybatis03
    事务
    codeforces-200B
    codeforces-339B
    codeforces-492B
    codeforces-266B
    codeforces-110A
    codeforces-887B
    codeforces-69A
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11204634.html
Copyright © 2020-2023  润新知