性能优化

提升页面性能的方法有哪些？

• 1.资源压缩合并，减少http请求（开启gzip压缩，减小传输过程中的资源文件大小）

• 2.图片优化

  • 雪碧图 图片压缩 svg base64

• 3.非核心代码异步加载

  • 1）异步加载的方式
    • 动态脚本加载(动态创建script标签)
    • defer
    • async
  • 2）异步加载的区别
    • defer 是在html解析完之后执行，如果是多个，按照加载顺序依次执行，defer如果加载完之后，html还没有解析完也不会执行
    • async 是在加载完之后立即执行，如果是多个，执行顺序与加载顺序无关，哪个先加载完，哪个先执行

• 3.利用浏览器缓存（提升浏览器性能最重要的一步）

  • 1）缓存的分类
    • 强缓存 Expires: 响应头中的 过期时间，绝对时间，从服务器下发的服务器的绝对时间，这个时间有可能与客户端的时间不一致， 判断客户端的时间是不是这个时间，所以会有偏差 Cache-control: 相对时间，秒， 以客户端相对时间为准
    • 协商缓存 Last-Modified If-Modified-Since Etag If-None-Match
  • 2）缓存的原理
  • 浏览器缓存机制全攻略 https://mp.weixin.qq.com/s/MqALe2790ucf-7U9RrRlMw
  • https://mp.weixin.qq.com/s/Oc-JBHO9Wux27pU9hWV8rw
  • 参考链接：https://www.jianshu.com/p/54cc04190252
  • 4.使用CDN（网络优化，用最快的时间把资源请求过来，让网络快速到达服务端，把资源下载下来，尤其是在页面第一次打开的时候，浏览器缓存起不了任何作用，这时使用CDN效果是非常明显的）
  • 5.预解析DNS
  • 6.尽量减少DOM操作
  • 7.减少css重绘和回流

  <meta http-equiv="x-dns-prefetch-control" content="on"> // 在很多高级浏览器中的a标签是默认打开dns预解析的，但如果协议是https，就会被关闭，这句就是强制打开a标签的dns预解析
  <link rel="dns-prefetch" href="//host_name_to_prefetch.com"> // 优化的点，去预解析dns，放入head中就可以做到预解析
  

  • 当页面中涉及多个域名时，dns预解析是非常有效果的，

• 以下均不是性能优化，只是一个执行效率的问题

  • while循环快还是for循环快？
  • |0是不是比Math.floor性能好？
  • if else与三元运算符哪个快？

性能分析

• 页面加载性能（加载的时间）如vue单页的加载需要多长时间，秒开率
• 动画与操作性能（是否流畅无卡顿）如在浏览一个网页时，它里面的动画运行是否流畅，它里面的按钮或着一些操坐，当我们去点击时，是否是没有卡顿的
• 内存，电量消耗（内存占用，耗电量）如做游戏时，如何减少它的耗电量

性能体系与性能指标

• 性能体系
  • 性能评估和建立指标 -> 技术方案 -> 执行 -> 结果分析
  • 加载太慢 -> cnd库 -> 搭建cdn -> 果然快了

技术方案

• 缓存（对于需要频繁从接口中获取的资源）
  • 客户端控制的强缓存策略
• 降低请求成本
  • HTTP DNS：由客户端控制，隔一段时间主动请求DNS获取请求域名IP，不走系统的DNS
  • TCP/TLS连接复用，服务端升级到HTTP2.0，尽量合并域名
• 减少请求数
  • JS，CSS打包到html
  • 用js控制图片异步加载和懒加载
  • 小型图片使用data URI
• 减少传输体积
  • 尽量使用SVG/gradient等代替图片
  • 根据机型和网络状况控制图片清晰度
  • 对低清晰度图片使用锐化来提升体验
  • 设计上避免大型背景图

性能优化点

• 防抖与截流

优化vue打包慢的问题

• 抽取公共组件
• UI组件的按需引入（elementUI),不要全局引入
• css，js抽取公共部分

#

• 图片
• 利用url判断图片格式
• 图片懒加载， 渐进式渲染，根据不同浏览器, 渲染不同图片格式，webp

首屏优化

• https://blog.csdn.net/weixin_41697143/article/details/81049804