性能优化

ava鱼
90 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

性能优化的指标和工具

性能优化

代码优化

  • javascript优化
  • css优化
  • html优化

优化 CSSOM

首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。

然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

优化js

当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。

  • async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
  • defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
  • 当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
  • 预加载 —— preload & prefetch 。
  • DNS 预解析 —— dns-prefetch 。

图片优化

  1. 图片延迟加载: 在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片。
// 首先可以将图片这样设置，在页面不可见时图片不会加载
<img data-src="https://avatars0.githubusercontent.com/u/22117876?s=460&u=7bd8f32788df6988833da6bd155c3cfbebc68006&v=4">
// 等页面可见时，使用 JS 加载图片
const img = document.querySelector('img')
img.src = img.dataset.src
  1. 响应式图片: 浏览器能够根据屏幕大小自动加载合适的图片,通过picture or media实现
<picture>
   <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
   <source srcset="banner_w800.jpg" media="(max-width: 800px)">
   <img src="banner_w800.jpg" alt="">
</picture>

@media (min-width: 769px) {
    .bg {
        background-image: url(bg1080.jpg);
    }
}
@media (max-width: 768px) {
    .bg {
        background-image: url(bg768.jpg);
    }
}

  1. 调整图片大小

    一开始，只加载缩略图，当用户悬停在图片上时，才加载大图。 还有一种办法，即对大图进行延迟加载，在所有元素都加载完成后手动更改大图的 src 进行下载。

  2. 降低图片质量 image-webpack-loader

npm i -D image-webpack-loader

webpack 配置

{
  test: /.(png|jpe?g|gif|svg)(?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000, /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    /*对图片进行压缩*/
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

  1. 尽可能利用 CSS3 效果代替图片

  2. 使用 webp 格式的图片

    WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

优化

  • 将 CSS 放在文件头部，JavaScript 文件放在底部

  • 使用字体图标 iconfont 代替图片图标

  • 压缩文件

渲染优化

  • 现代浏览器渲染原理
  • 可优化的渲染环节和方法

资源优化

  • 压缩+合并
  • 图片格式
  • 图片加载
  • 字体优化

构建优化

  • webpack的优化配置
  • 代码拆分
  • 代码压缩
  • 持久化缓存
  • 监测与分析
  • 按需加载

传输加载优化

  • gzip
  • keepAlive
  • http缓存
  • Service Worker
  • http/2
  • ssr
  • nginx

更多流行优化技术

  • svg优化图标
  • flexbox布局
  • 预加载
  • 预渲染
  • 窗口化提高列表性能
  • 骨架屏组件
avatar
文章
阅读
粉丝