阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      WEB前端有哪些性能优化

      问题

      WEB前端有哪些性能优化

      总的来说性能优化这个领域的很多内容都很碎⽚化,这⼀章节我们将来学习这 些碎⽚化的内容。

      1 图⽚优化

      计算图⽚⼤⼩

      对于⼀张 100 * 100 像素的图⽚来说,图像上有 10000 个像素点,如果 每个像素的值是 RGBA 存储的话,那么也就是说每个像素有 4 个通道,每 个通道 1 个字节( 8 位 = 1 个字节),所以该图⽚⼤⼩⼤概为 39KB ( 10000 * 1 * 4 / 1024 )。

      但是在实际项⽬中,⼀张图⽚可能并不需要使⽤那么多颜⾊去显示,我们可以通过减少每 个像素的调⾊板来相应缩⼩图⽚的⼤⼩。

      了解了如何计算图⽚⼤⼩的知识,那么对于如何优化图⽚,想必⼤家已经有 2 个思路了:

      1. 减少像素点
      2. 减少每个像素点能够显示的颜⾊

      2 图⽚加载优化

      不⽤图⽚。很多时候会使⽤到很多修饰类图⽚,其实这类修饰图⽚完全可以⽤ CSS 去代 替。

      对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。⼀般图⽚都⽤ CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图⽚。

      ⼩图使⽤ base64 格式

      将多个图标⽂件整合到⼀张图⽚中(雪碧图)

      选择正确的图⽚格式:

      • 对于能够显示 WebP 格式的浏览器尽量使⽤ WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更⼩的图⽚体积,⽽且拥有⾁眼识别⽆差异的图像质量,缺点就是兼容性并不好

      • ⼩图使⽤ PNG ,其实对于⼤部分图标这类图⽚,完全可以使⽤ SVG 代替

      • 照⽚使⽤ JPEG

      3 DNS 预解析

      DNS 解析也是需要时间的,可以通过预解析的⽅式来预先获得域名所对应的 IP 。

      <link rel="dns-prefetch" href="//blog.poetries.top">
      

      4 节流

      考虑⼀个场景,滚动事件中会发起⽹络请求,但是我们并不希望⽤户在滚动过 程中⼀直发起请求,⽽是隔⼀段时间发起⼀次,对于这种情况我们就可以使⽤ 节流。

      理解了节流的⽤途,我们就来实现下这个函数

      // func是⽤户传⼊需要防抖的函数
      // wait是等待时间
      const throttle = (func, wait = 50) => {
          // 上⼀次执⾏该函数的时间
          let lastTime = 0
          return function(...args) {
              // 当前时间
              let now = +new Date()
              // 将当前时间和上⼀次执⾏函数时间对⽐
              // 如果差值⼤于设置的等待时间就执⾏函数
              if (now - lastTime > wait) {
                  lastTime = now
                  func.apply(this, args)
              }
          }
      }
      setInterval(
          throttle(() => {
              console.log(1)
          }, 500),
          1
      )
      

      5 防抖

      考虑⼀个场景,有⼀个按钮点击会触发⽹络请求,但是我们并不希望每次点击 都发起⽹络请求,⽽是当⽤户点击按钮⼀段时间后没有再次点击的情况才去发 起⽹络请求,对于这种情况我们就可以使⽤防抖。

      理解了防抖的⽤途,我们就来实现下这个函数

      // func是⽤户传⼊需要防抖的函数
      // wait是等待时间
      const debounce = (func, wait = 50) => {
          // 缓存⼀个定时器id
          let timer = 0
          // 这⾥返回的函数是每次⽤户实际调⽤的防抖函数
          // 如果已经设定过定时器了就清空上⼀次的定时器
          // 开始⼀个新的定时器,延迟执⾏⽤户传⼊的⽅法
          return function(...args) {
              if (timer) clearTimeout(timer)
              timer = setTimeout(() => {
                  func.apply(this, args)
              }, wait)
          }
      }
      

      6 预加载

      在开发中,可能会遇到这样的情况。有些资源不需要⻢上⽤到,但是希望尽早获取,这时 候就可以使⽤预加载。

      预加载其实是声明式的 fetch ,强制浏览器请求资源,并且不会阻塞 onload 事件, 可以使⽤以下代码开启预加载

      <link rel="preload" href="http://blog.poetries.top">
      

      预加载可以⼀定程度上降低⾸屏的加载时间,因为可以将⼀些不影响⾸屏但重 要的⽂件延后加载,唯⼀缺点就是兼容性不好。

      7 预渲染

      可以通过预渲染将下载的⽂件预先在后台渲染,可以使⽤以下代码开启预渲染

      <link rel="prerender" href="http://blog.poetries.top">
      

      预渲染虽然可以提⾼⻚⾯的加载速度,但是要确保该⻚⾯⼤概率会被⽤户在之后打开,否则就是⽩⽩浪费资源去渲染。

      8 懒执⾏

      懒执⾏就是将某些逻辑延迟到使⽤时再计算。该技术可以⽤于⾸屏优化,对于 某些耗时逻辑并不需要在⾸屏就使⽤的,就可以使⽤懒执⾏。懒执⾏需要唤 醒,⼀般可以通过定时器或者事件的调⽤来唤醒。

      9 懒加载

      懒加载就是将不关键的资源延后加载。

      懒加载的原理就是只加载⾃定义区域(通常是可视区域,但也可以是即将进⼊可视区域) 内需要加载的东⻄。对于图⽚来说,先设置图⽚标签的 src 属性为⼀张占位图,将真实 的图⽚资源放⼊⼀个⾃定义属性中,当进⼊⾃定义区域时,就将⾃定义属性替换为 src 属性,这样图⽚就会去下载资源,实现了图⽚懒加载。

      懒加载不仅可以⽤于图⽚,也可以使⽤在别的资源上。⽐如进⼊可视区域才开始播放视频 等等。

      10 CDN

      CDN 的原理是尽可能的在各个地⽅分布机房缓存数据,这样即使我们的根服 务器远在国外,在国内的⽤户也可以通过国内的机房迅速加载资源。

      因此,我们可以将静态资源尽量使⽤ CDN 加载,由于浏览器对于单个域名有 并发请求上限,可以考虑使⽤多个 CDN 域名。并且对于 CDN 加载静态资源 需要注意 CDN 域名要与主站不同,否则每次请求都会带上主站的 Cookie ,平⽩消耗流量

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录