性能优化琐碎事

捌玖ki
257 阅读4分钟

图片优化

计算图片大小

对于一张100 * 100像素的图片来说，图像上有10000个像素点，如果每个像素的值是RGBA存储的话，那么也就说每个像素有4个通道，每个通道字节（8位 = 1个字节），所以该图片大小大概位39KB（10000 * 1 * 4 / 1024）。
但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。

优化图片的方式：

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

图片加载优化

  1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用CSS代替
  2. 对于移动端来说，屏幕宽度就那么一点，完全没有必要去加载原图浪费带宽，一般图片都用CDN加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
  3. 小图时使用base64格式
  4. 将多个图片文件整合到一个图片中（雪碧图）
  5. 选择正确的图片格式
  • 对于能够现实WebP格式的浏览器尽量使用WebP格式。因为WebP格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好。
  • 小图使用PNG，其实对于大部分图标这类图片，完全可以使用SVG代替
  • 照片使用JPEG

DNS预解析

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

<link rel="dns-prefetch" href="https://baidu.com"></link>

节流

当滚动时间中发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起一次，对于这种情况我们就可以使用节流。

const throttle = (callback, wait = 50) => {
    let lastTime = 0;
    return function(...arg) {
        let now = +new Date();
        if(now - lastTime > wait) {
            lastTime = now;
            callback.apply(this, args);
        }
    }
}
setTnterval(
    throttle(() => {console.log(1)}, 500)
    , 1
 )

防抖

一个按钮点击会触发网络请求，但时我们并不希望每次点击都发起网络请求，而是当用户点击按钮一段时间后没有再次点击的情况才发起网络请求，对于这种情况我们就可以使用防抖。

const debounce = (callback, wait = 50) => {
    let timer = null;
    return function(...arg) {
        if(timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            callback.apply(this, arg);
        }, wait);
    }
}

预加载

在开发过程中，经常会遇到，有些资源不需要马上用到，但是希望尽早获取，着时候就可以使用预加载。
预加载器是声明式的fetch，强制浏览器请求资源，并且不会阻塞onlaod事件，如下

<link rel="preload" href="https://baidu.com">

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

预渲染

预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染

<link rel="prerender" href="https://baidu.com">

预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用户在之后打开，否则就是浪费资源去做渲染。

懒执行

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

懒加载

懒加载就是将不关键的资源延后加载。
懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的src属性位一张展位图，将真实的图片资源地址放入一个自定义属性中，当进入可是区域时，将自定义属性替换为src属性，这样图片就会去下载资源，实现图片的懒加载。
懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可是区域才开始播放视频等。

CDN

CDN的原理是尽可能的在各个地方分布机房缓存数据，这样即使我们的根服务器远在国外，在国内的用户也可以通过国内的机房迅速加载资源。
因此，我们可以将静态资源尽量使用CDN加载，由于浏览器对于单个域名有并发请求上线，可以考虑使用多个CDN域名。并且对CDN加载资源需要注意CDN域名要与主站不同，否则每次请求都会带上主站的Cookie，造成流量的浪费。

avatar
文章
阅读
粉丝