网络过程的优化

2023-10-28 17:10:22

减少网络请求

浏览器缓存

本地存储

localStorage

localStorage是html5新增的本地存储API，在一般浏览器支持的存储容量是5M大小，它仅在浏览器中保存，不参与和服务器的通信。
存储在localStorage中的数据没有过期时间，只有手动清除。因为数据是保存在浏览器本地硬件设备中的，所以即使关闭浏览器，这部分数据依旧存在，下次打开浏览器访问网站时数据可继续使用。

localStorage使用起来非常简单，常用API包含setItem、getItem、removeItem、clear四个方法

//向localStorage添加或设置数据项
localStorage.setItem("username", "John")

//以键名的方式从localStorage获取数据
localStorage.getItem('username')

//从localStorage移除指定键名的数据项
localStorage.removeItem('username')

//清空localStorage中的所有数据
localStorage.clear()

值得注意的是，localStorage无法跨域，同源下才可读写；其次，localStorage中仅能存储字符串内容，所以当要存储对象、数组等数据时，可使用JSON.stringify先将其转化为字符串，取用时JSON.parse将其数据类型还原

sessionStorage

sessioStorage和localStorage在API使用上基本一致，它们的区别在于拥有不同的数据持久性。sessioStorage中存储的数据，只在当前会话可用，当关闭标签页结束会话时，数据也将被清除

应用场景

相比于sessioStorage，localStorage的应用更加广泛，由于localStorage中数据的持久性，所以可以用它来存储一些网站日常需要，又内容稳定的资源。
比如，淘宝的 localStorage 中存储了不少 Base64 格式的图片字符串（首屏各种小图标）
也可以用它来保存搜索历史记录，比如掘金
还可以保存一些网站的本地设置，比如阅读网站的白天/黑夜模式，字体大小、背景色等等

文件合并

文件的合并与拆分

可以借助webpack

雪碧图

雪碧图将多张小图标拼接成一张大图，在HTTP1.x环境下，雪碧图可以减少HTTP请求，加速网页的显示速度。
用于合成雪碧图的图标体积要小，较大的图片不建议拼接成雪碧图；同时要是网站静态图标，不是通过ajax请求动态获取的图标。所以通常是作为网站logo、icon之类的图片。
使用webpack构建时，可以借助postcss-sprites来自动合成雪碧图

Base64

Base64不是一种图像格式，是一种将任意二进制转换成文本字符串的编码方法，我们用Base64编码图像时，就是将图像的二进制数据转换成字符串
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAA...
```
将Base64编码直接作为<img>标签的src属性值，浏览器会自动解析Base64编码，不会再一次发起图片请求。
每次建立http请求都会消耗一定的时间，对于网站频繁使用的各种小图标来说，建立http请求的时间都可能超过下载图片本身的时间，这种情况下，就可以用Base64编码小图来减少http请求。
由于Base64编码的原理，Base64编码后比原图要大3/4左右，如果把大图片编码到 html/css 中，会造成后者体积明显增加，明显影响网页的打开速度。因此，通常建议只对小图作Base64编码转换。
webpack中的 url-loader 可以自动根据文件大小决定要不要进行Base64编码

减小资源体积

除了减少网络请求之外，减小资源体积是另一个重要的优化点，也是我们开发过程中必不可少的环节

构建工具优化

使用构建工具进行资源的合并压缩，是工程实践中最普遍的操作。时下最主流的构建工具无疑是webpack，我们也主要探讨利用webpack进行资源体积的优化

选择合适的图片格式

如果可以，尽量使用CSS效果（渐变，阴影，圆角等）代替图像
当必须使用图像资源时，选择合适的图片格式非常重要，因为同样的视觉效果，不同格式的图片大小不同。
- jpg：有损压缩，体积较小。适用于呈现色彩丰富的大图，如背景图、轮播图、Banner图等。
- png：无损压缩，体积较大，支持透明度。适用于小的 Logo、颜色简单且对比强烈的图片等。
- webp：2010由Google推出，使用更优的图像数据压缩算法，图片体积更小，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、支持透明度以及动画的特性。但在兼容性方面，IE和Safari浏览器不支持。
- svg：矢量图，图片可无限放大而不失真，体积小。适用于各种icon、logo

首屏资源加载优化

对于首屏之外的内容，如果一次性全部加载完，会影响首屏的渲染速度；而且，如果页面很长，就算整个页面全部加载完成，用户也不一定会滚动屏幕浏览全部内容。
所以，一个很重要的优化点就是，打开网站时，尽量只加载首屏内容所包含的资源，而首屏之外的资源，等需要用到的时候再去加载。从而使页面首屏内容更快地渲染出来。

懒加载

路由懒加载

单页面应用中，如果所有组件都打包到一起，js包会变得非常大，在首次加载时影响页面的加载速度。使用路由懒加载，我们就能把不同路由的组件分割成不同的代码块，当路由被访问时才会加载对应的组件
使用动态import，很容易实现路由懒加载

图片懒加载

浏览器是否发起请求图片根据的是<img>的src属性，懒加载的原理就是，不直接给<img>的src属性赋值，而是在<img>进入可视区域时，再给src赋于图片URL
对于每一个需要懒加载的<img>标签，设置一个data-src属性，用于存储图片URL，当元素进入可视区域时，获取到这个data-src的值，然后赋值给<img>的src属性。
那么，怎样判断<img>是否进入可视区域呢？这里使用 getBoundingClientRect 来获取元素顶部与浏览器视口顶部的距离top，通过window.innerHeight获取浏览器视口的高度viewHeight，当viewHeight - top的值大于等于0，表示元素已进入可视区域。

下面我们就来实现一个简单的懒加载。

<!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>Document</title>
  <style>
    .lazy{
      height: 150px;
      width: 200px;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div>
    <img class="lazy" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3176859023,1719957347&fm=26&gp=0.jpg">
  </div>
  <div>
    <img class="lazy" data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2413205756,2857128339&fm=26&gp=0.jpg">
  </div>
  <div>
    <img class="lazy" data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2356708534,2525790159&fm=26&gp=0.jpg">
  </div>
  <div>
    <img class="lazy" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1332858679,869019665&fm=26&gp=0.jpg">
  </div>
  <div>
    <img class="lazy" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2450079006,3171044776&fm=26&gp=0.jpg">
  </div>
  <div>
    <img class="lazy" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1181825476,2174805292&fm=26&gp=0.jpg">
  </div>
</body>
<script>
  const imgs = document.querySelectorAll('.lazy')   // 需要懒加载的图片标签
  const viewHeight = window.innerHeight         // 可视区域高度
  // num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否进入可视区域
  let num = 0
  function lazyload(){
    for(let i=num; i<imgs.length; i++) {
      // 用浏览器视口高度 减去 元素顶部与浏览器视口顶部的距离
      let distance = viewHeight - imgs[i].getBoundingClientRect().top
      // 若distance大于等于0，说明元素进入可视区域
      if(distance >= 0 ){
        // 获取到data-src属性中存储的图片URL，赋值给src属性
        imgs[i].src = imgs[i].getAttribute('data-src')
        // 前i张图片已经加载完毕，下次从第i+1张开始检查是否进入可视区域
        num = i + 1
      }
    }
  }
  lazyload()   //加载首屏需要显示的图片
  window.addEventListener('scroll', lazyload, false)   // 监听scroll事件
</script>
</html>

服务端渲染

Vue、React等框架让开发变得简单高效，但也让页面需要加载的资源变多，除了业务代码，还要等框架代码加载完成才能进行页面的渲染。对于首屏的呈现速度有较高要求的网站，可以考虑服务端渲染。它不仅能提高首屏的呈现速度，还有助于SEO。服务端渲染的实践往往与前端框架（如 Vue，React等）紧密结合。

基础的网络优化

DNS

DNS 负责将域名转换为 IP 地址。对 DNS 的优化主要有以下两点：
减少 DNS 查询
DNS 的查询结果有客户端本地缓存，所以首次查询从域名服务器获取对应IP后，下一次再访问就直接从本地拿到IP地址。因此，避免将静态资源分散在多个域名下，减少需要借助域名服务器的 DNS 查询。
预加载
当浏览网页时，浏览器会在加载网页时，在后台对网页中的域名进行解析缓存，这样在访问当前网页中的连接时就无需再进行DNS的解析
可以控制对当前页面中所有连接进行预解析，或对特定连接进行预解析，在head标签中进行配置
```
//对当前页面中所有连接进行预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
```
```
//对特定连接进行预解析
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="dns-prefetch" href="//baidu.com">
```

CDN

使用CDN存放 JS、CSS、图片等静态资源，静态资源本身具有访问频率高、承接流量大的特点，CDN 是静态资源提速的重要手段。CDN原理和细节参考【前端词典】CDN 带来这些性能优化

转自 https://juejin.cn/post/6958694686689067038

码农公寓

减少网络请求

浏览器缓存

本地存储

localStorage

sessionStorage

应用场景

文件合并

文件的合并与拆分

雪碧图

Base64

减小资源体积

构建工具优化

选择合适的图片格式

首屏资源加载优化

懒加载

路由懒加载

图片懒加载

服务端渲染

基础的网络优化

DNS

CDN

相关文章