网络过程的优化

网络过程的优化
网络过程的优化

减少网络请求

浏览器缓存


本地存储

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

上一篇:正则表达式


下一篇:正则表达式