前端性能优化小结

2022-10-28 14:52:45 浏览数 (1)

从输入URL到页面加载完成，发生了什么，要进行肌肉记忆。

​

https://www.yuque.com/liugezhou/drrg7f/gav2aq

  • 前端性能优化主要是从网络层面和渲染层面两个大的维度来分析
  • 涉及到网络的：DNS解析、TCP链接、HTTP请求/响应其中DNS解析和TCP链接我们可以优化的地方很有限。

网络层面

1. HTTP请求/相应的链接

  1. 减少请求次数
  2. 减少单次请求所花费的时间

这两个请求的优化点我们从 资源的压缩和合并入手 以及打包构建工具的作用解决浏览器频发请求文件问题.

2. webpack的性能瓶颈

首先对webpack的基础有个了解：

https://cloud.tencent.com/developer/article/2143280

  1. webpack的构建过程太花时间
  2. webpack打包的结果体积太大

构建过程提速：(主要是针对CI/CD流程吧，手动打包不太在意构建过程速度)

  • 不要让loader做太多事情：- modules.rules中的exclude使用–排除更多无关代码
  • 开启缓存转译：loader: ‘babel-loader?cacheDirectory=true’
  • 第三方库- DIIPlugin:把第三方库单独打包到一个文件
  • 将loader由单线程转为多线程- 使用happypack这个库，使得webpack单独处理任务改为把任务分解成多个子任务并发执行。
  • 构建结果体积压缩- webpack-bundle-analyzer:通过这个库可以查看构建打包后的体积，有针对性优化。
  • 按需加载。
  • 删除冗余代码：Tree-shaking，webpack4自带了，包括UglifyJsPlugin中compress的设置去除日志打印、注释等等。
  • 开启gzip- 需要开启gzip，在request-headers中设置accept-encoding:gzip,Deflate

babel优化

为了应对低版本的ES6转ES5的js语言特性，使用了babel-polyfill后，打包体积会很大，这个时候可以根据业务代码，在loader的的options配置中加入useBuiltIns为usage。

3 图片优化

  • 应用广泛的Web图片格式有：JPEG/JPG、PNG、WebP、Base64、SVG- JPEG/JPG：有损压缩、体积小、加载快、不支持透明==》背景图、banner图适用
  • PNG：无损压缩、质量高、体积大、支持透明 ==》Logo等小图片
  • WebP：唯一的缺点是兼容性不太好，可以通过判断是否支持该格式，切换后缀。
  • SVG：体积更小、压缩性更强、图片放大不失真，但渲染成本较高。
  • Base64:小图标解决方案，Webpack的url-loader对此做了优化。

4. 缓存应用

缓存 本地存储

  • Local Storage ：持久化存储永不过期。5-10M数据，可以对图片、不经常更新的css、js静态存储。
  • Session Storage：会话存储
  • IndexedDB：运行在浏览器上的非关系型数据库，>250M.

5. CDN缓存

  • CDN的核心点分为缓存和回源
  • CDN往往被用来存放静态资源
  • 静态资源走CDN不应该是一个选择，而是一个规定
  • 业务服务器与静态资源CDN服务器的区分，对性能提高帮助很大(不用携带无用信息)

6.使用HTTP2

  • 多路复用、首部压缩

渲染层面

1. CSS样式表规则的优化

CSS选择符是从右到左进行匹配的。

  • 避免使用通配符，只对需要用到的元素进行选择
  • 少用标签选择器，多用类选择器。
  • CSS是阻塞渲染的资源，应尽快下载到客户端
  • 尽早==》header
  • 尽快==》CDN

2. JS的加载方式

  • 正常模式： 阻塞浏览器
  • async模式： 不会阻塞，加载是异步的
  • defer模式: 加载异步，推迟执行，在文档解析完成、DOMContentLoaded事件被触发时才开始依次执行。

3. 避免或减少回流操作

4. 图片懒加载

  • 关键一:当前可视区域的高度: window.innerHeight|| document.documentElement.clientHeight
  • 关键二:元素距离可视区域顶部的高度: getBoundingClientRect()
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy-load</title>
    <style>
      .img {
        width: 200px;
        height: 200px;
        background-color: gray;
      }
      .pic {
        border: 1px solid red;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 10个div -->
      <div class="img">
        <img class="pic" alt="加载中" data-src="./images/9.png" />
      </div>
    </div>
  </body>
  <script>
    const imgs = document.getElementsByTagName('img')
    const viewHeight =
      window.innerHeight || document.documentElement.clientHeight
    console.log(viewHeight)
    let num = 0
    function lazyLoad() {
      for (let i = 0; i < imgs.length; i  ) {
        let distance = viewHeight - imgs[i].getBoundingClientRect().top
        if (distance >= 0) {
          imgs[i].src = imgs[i].getAttribute('data-src')
          num = i   1
        }
      }
    }
    window.addEventListener('scroll', lazyLoad, true)
  </script>
</html>

5.防抖和节流

以 4 中的监听scroll为例。

  • throttle(事件节流)和debounce(事件防抖)
  • 这两个东西都以闭包的形式存在

事件节流-throttle、第一个说了算

在一段时间内无视后来产生的回调请求。

事件防抖-debounce、最后一个说了算

某段事件内，不管你触发了多少次回调，都只认最后一次。

6.性能检测

可视化工具Performance工具

  • 使用Perfomance工具最好在无痕模式下打开
  • 主要由概述面板、详情面板、Summary三部分构成
  • 概述面板：FPS、CPU(与Summary结合来看)、NET

Lighthouse–页面性能报告

  • Performance
  • Accessibility
  • Best Practices
  • SEO
代码语言：javascript复制
npm i -g lighthouse
lighthouse https://blog.liugezhou.online

我在使用此页面性能报告中，明显发现的性能指标有：图片推荐使用WebP、OSS资源推荐HTTP2、图片改为懒加载。

cdn 缓存 渲染 webpack 打包

0 人点赞