正文 

当前位置： 首页 > 程序 > java教程

前端性能优化之请求优化(代码片段)

南城FE 南城FE     2022-11-29     617

关键词：

前言

在这互联网高速发展的时代，人们对于网页打开的速度要求越来越高。加载时间过长，兼容处理不够全面等很容易造成用户流失。作为一名前端开发，优化用户体验是一件永无止境的事情，没有最优，只有更优。前端性能优化方向有很多，今天主要讲解在网络请求上的优化。因涉及的优化方向较多，对于具体细节不再赘述。

总体按以下三个方向优化:

  • 请求数据控制
  • 请求体积减少
  • 请求尽其所能

请求之数量减少

减少DNS查询

DNS查询首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存，再不存在则访问本地DNS服务器，在这期间浏览器是无法下载其他任何内容资源，这是一笔不小的开销。所以理想的方法是将静态资源尽可能的放在同一个域下，这样就只会发生一次DNS查找，但这也会引发另一个问题，浏览器的并行下载数量是有限制的，不同的浏览器有所差异，超出限制就会排队等待，建议一个站点使用2-4个域请求资源，不要太分散，也不要太集中。

请求合并

一个网页加载完成所需要的请求数量少则几十，多则上百。这里面包括XHR，JS，CSS，Img，Font，Doc等等。不同的浏览器对请求的并发数量都是有限制的，如果你已升级HTTP2.0，那么这个优先级可以放后。
针对同类型资源排查是否有合并请求的可能性，合并的前提也要考虑业务场景及合并后的体积是否会过大。图片资源小图标考虑雪碧图(CSS Sprites) 配合 background-position 使用。过小的图片可转换为Base64，可在webpack中的url-loader配置。除开针对静态资源的合并处理，在不影响接口性能的前提下，和后端的接口交互也可以视情况做合并处理。

按需加载

排查每一个请求是否都是当前页面必要存在的，尽可能做到按需加载，避免不必要的资源占用，这样不仅可以提升网页打开速度节省用户流量资源，也能减少服务器流量请求。Vue中可开启路由懒加载，页面JS&CSS只会在页面加载时才触发请求。图片开启懒加载可以让一些不可视区域的图片不去加载，避免一次性加载过多的图片导致请求阻塞，提高网站的加载速度，提高用户体验。

重复请求处理

用户频繁切换Tab栏数据；表单提交频繁点击；路由切换时还有未完成的请求。这些都会产生无效请求，对服务器和用户体验来说都是不好的。
重复请求可在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成的清除存储标记，Axios 中提供了 CancelToken 函数，该函数的作用就是用来取消接口请求；Vue中当路由切换页面的时候，可在router的beforeEach钩子函数中取消当前正在进行中的所有请求。

添加到请求记录：

const addPendingXHR = (config) => 
  if (!cancelDuplicated) 
    return
  
  const duplicatedKey = JSON.stringify(
    duplicatedKey: duplicatedKeyFn(config),
    type: REQUEST_TYPE.DUPLICATED_REQUEST
  )
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => 
    if (duplicatedKey && !pendingXHRMap.has(duplicatedKey)) 
      pendingXHRMap.set(duplicatedKey, cancel)
    
  )

取消请求并删除请求记录：

const removePendingXHR = (config) => 
  if (!cancelDuplicated) 
    return
  
  const duplicatedKey = JSON.stringify(
    duplicatedKey: duplicatedKeyFn(config),
    type: REQUEST_TYPE.DUPLICATED_REQUEST
  )
  if (duplicatedKey && pendingXHRMap.has(duplicatedKey)) 
    const cancel = pendingXHRMap.get(duplicatedKey)
    cancel(duplicatedKey)
    pendingXHRMap.delete(duplicatedKey)

axios中使用：

// 请求拦截处理
axios.interceptors.request.use(config => 
    removePendingXHR(config)
    addPendingXHR(config)
    ...
    return config
)

// 响应拦截处理
axios.interceptors.response.use(response => 
    removePendingXHR(response.config)
    ...
, error => 
    // 如果是取消请求类型则忽略异常处理
    let isDuplicatedType;
    try 
      const errorType = (JSON.parse(error.message) || ).type
      isDuplicatedType = errorType === REQUEST_TYPE.DUPLICATED_REQUEST;
     catch (error) 
      isDuplicatedType = false
    
    if (!isDuplicatedType) 
        // 其他异常处理
    
)

Vue中当路由切换页面的时候，将上一个页面的所有请求取消：

router.beforeEach((to, from, next) => 
    pendingXHRMap.forEach((cancel) => 
        cancel();
    );
    pendingXHRMap.clear()
)

缓存接口数据

减少数据的交互就意味着减少了网络带宽的压力，能够提供更大并发量的服务，减少网络传输的时间，也大大的减小了服务器的开销。
解决：首次请求数据后缓存在前端本地，后续数据来源均从缓存获取数据解析使用，从中取出页面操作所需要的信息然后再进行展现，有效减少请求后台服务器的次数，缓存格式可以是 Map 或是 JSON 。需设置相应缓存策略，定期清除历史数据，如接口数据是变动较为频繁，可从缓存获取后再触发一次接口数据覆盖页面内容。

CORS OPTIONS预检请求

当前端使用脚本请求一个跨域资源时，如果是非简单请求，浏览器会自动先发出一个OPTIONS查询请求，称为预检(cors-preflight-request)，作用是询问服务器当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段；只有得到肯定答复，浏览器才会发出正式的跨域请求。那么如何节省掉OPTIONS请求来提升性能呢？

  1. 发出简单请求；
  2. 服务端设置Access-Control-Max-Age字段缓存该OPTIONS预检请求的响应结果，该缓存只针对这一个请求 URL 和相同的 header，无法针对整个域或者模糊匹配 URL 做缓存。

请求之体积减小

资源压缩

部署上线的代码开启压缩，并可在编译阶段去除代码中的 console 和注释 ，进一步减小文件的体积。UI切图文件需检查是否体积过大，对于过大图片类型资源可压缩后再使用，压缩可使用 tinypng。

HTTP压缩

gzip是使用最为普遍，支持的浏览器最多的数据压缩方式。浏览器请求头发送 Accept-Encoding 字段，表明所支持的压缩算法，以及各自的优先级，服务器则从中选择一种压缩方式，并且返回响应头 Content-Encoding 字段来告知浏览器选择的哪一种算法。下图可见开启gzip压缩后原始资源182kb压缩后只有75kb，节省了约60%的数据传输。对于接口请求不管是发送数据还是接收数据，不需要的字段尽可能的不传，这一点需要多和服务端同学沟通，避免过多的数据影响请求的传输的速度。
HTTP压缩能大大减小网络传输的数据量，提升页面显示的速度，但是压缩的过程也会给服务器带来一定的开销。

使用WebP

webp格式是谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。使用webp不仅能节省用户流量资源，也可以降低服务器流量资源。
缺点是还有部分浏览器还不支持webp格式，使用的时候需要注意兼容性的处理。首先检测当前浏览器是否支持webp，检测的方式可通过canvas或JS加载1像素的webp图片，如支持webp可在根节点添加 webp 标识 class 来处理图片是否可以加载webp格式的文件。目前各大cdn服务都支持webp格式输出，如还有未接入cdn服务，需要生成webp格式的图片，可在前端编译过程中生成，也可以在nginx层做转换。

检测是否支持webp

// 使用 canvas 的 toDataURL 进行判断
function isSupportWebp() 
  try 
    return document.createElement(canvas).toDataURL(image/webp, 0.5).indexOf(data:image/webp) === 0;
   catch(err) 
    return false;
  


// 通过加载一张 webp 图片判断
function checkWebpFeature(feature, callback) 
    var kTestImages = 
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    ;
    var img = new Image();
    img.onload = function () 
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    ;
    img.onerror = function () 
        callback(feature, false);
    ;
    img.src = "data:image/webp;base64," + kTestImages[feature];

CSS中sass写法

@mixin webpbg($url) 
    background-image: url($url);
    @at-root .webpa & 
        background-image: url($url+.webp);
    


@include webpbg(../image/header.jpg);

HTML中img检测使用

const changeToWebp = (url) => 
    if (isSupportWebp()) 
        return `$url$url.indexOf(?) > 0 ? & : ?x-oss-process=image/format,webp`
     else 
        return url

前后对比

Cookie 传输优化

  • 合理使用Cookie字段，除去不必要的Cookie，避免Cookie数据过大。
  • 使用Cookie跨域操作时注意在适应级别的域名上设置Cookie（domain）以便使子域名不受其影响。
  • 设置合理Cookie的过期时间，合理地Expire时间和不要过早去清除Cookie，浏览器对存储大小和数量都是有限制的，要避免存满浏览器可用空间。
  • 静态资源使用使用独立域名访问策略，避免请求静态资源时发送Cookie，减少http的请求体积。

请求之尽其所能

开启CDN加速

CDN的全称是Content Delivery Network，即内容分发网络. 当用户向该业务内容发起请求时，请求会被调度至最接近用户的服务节点，直接由服务节点快速响应，有效降低用户访问延迟，提升可用性。除了常见的对静态资源 JS & CSS & IMG 等开启cdn，对一些数据不常变化的接口请求也可开启cdn加速。

开启HTTP缓存

HTTP缓存主要用在对一些实时性要求不高的静态文件进行的缓存，缓存在浏览器端，防止这些“多余”的请求重复的访问服务器，对服务器造成压力，直接从浏览器缓存获取资源，从而提高网站的性能。缓存分为强制缓存和协商缓存两种。

强制缓存指服务端返回缓存时间给到浏览器，在下次请求前只要还在缓存时间内，则不发起请求，直接使用缓存。超过缓存时间，则发起请求获取文件。响应header中会有两个字段来标明失效规则（Expires/Cache-Control）。

协商缓存指通过查询文件对比上次请求是否修改来决定是否使用缓存。浏览器第一次请求数据时，服务端会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。
再次请求数据时，客户端将备份的缓存标识发送给服务端，服务端根据缓存标识进行判断，判断缓存有效后，返回304状态码，通知客户端使用缓存数据。缓存标识区分两种方式：

文件最后修改时间标识：

  • Response：Last-Modified
  • Request：If-Modified-Since

文件内容标识：

  • Response：E-tag
  • Request：If-None-Match

尽可能去避免304请求，因为会多发出一次请求，让浏览器直接从缓存读取文件，减少带宽消耗和服务器的负载。

升级HTTP 2.0

在 HTTP/1.1 协议中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。HTTP2.0主要有以下新特性：

  • 多路复用允许同时通过单一的http/2.0连接发起多重的请求，所有的请求都是通过一个TCP 连接并发完成，真正做到了并行传输。
  • HTTP/1.x 每次请求，都会携带大量冗余头信息，浪费了很多带宽资源，http/2.0的头部压缩，减少了数据传输量，能够节省消息头占用的网络的流量。
  • Server Push 能够更快的把资源推送给客户端。例如服务端可以主动把 JS 和 CSS 文件推送给客户端，而不需要客户端解析 HTML 再发送这些请求。当客户端需要的时候，资源已经在客户端了。

预加载

DNS Prefetch 是一种DNS 预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你从当前网页中跳转新的连接时就无需进行DNS 的解析，减少用户等待时间，提高用户体验。

<link rel="dns-prefetch" href="//img.cdn.com">

浏览器要建立一个连接，首先需要经过DNS查找，TCP三次握手和TLS协商（https），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求。

<link rel="preconnect" href="//example.com">

让浏览器预加载一个资源（HTML，JS，CSS或者图片等），可以让用户跳转到其他页面时，响应速度更快。

<link rel="prefetch" href="prefetch.js">

总结

前端页面使用场景多变，受外界因素影响较多，网络环境，用户设备，浏览器内核等都会影响性能体验。所以针对每一个请求都要想想是否有优化的空间，是否有省去的可能，让每发起一个请求都尽其所能，达到请求的极致。前端性能优化是一件永无止境的事情，也是一件严肃的事情，一定要对优化的方向有系统的理解，不能盲目优化，否则会得不偿失。

参考

  1. HTTP/2 相比 1.0 有哪些重大改进？
  2. dns-prefetch对网站速度能提升有多少？
  3. HTTP 缓存详解
  4. 对CORS OPTIONS预检请求的一些思考

前端性能优化(代码片段)

gitbook完整版集合文章目录gitbook完整版集合性能优化初始阶段（加载优化）首页加载优化1、首页加载图片过多1、总结：2、首页请求过多2、总结（首页请求量过多，可以通过一些手段来减少资源的请求量）... 查看详情

前端性能优化分类(代码片段)

介绍　　本文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化 减少请求数量【合并】　　如果不进行文件合并，有如下... 查看详情

前端性能优化策略(代码片段)

一、网络加载类1、减少HTTP资源请求次数　　合并静态资源图片、JavaScript或CSS代码，减少页面请求数和资源请求消耗　　避免重复的资源，防止增加多余请求2、减小HTTP请求大小　　减少没必要的图片、JavaScript、CSS及HTML代码　... 查看详情

从页面加载到数据请求，前端页面性能优化实践分享(代码片段)

背景做过前端开发都知道前端的工作内容是很多的，对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能，我们需要对各种资源内容进行不同方面的优化。对用户而言，优化可以让应用的响应速度加快... 查看详情

前端性能优化之gzip(代码片段)

背景如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。压缩压缩方式前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩... 查看详情

前端项目性能优化记录~(代码片段)

前端性能优化总结原因：最近公司一个项目即将上线,作为它的主要构建者之一(亲爸爸)一直在思考如何能给它更好的性能优化于是博主开始了网上大量的学习,集百家之所长,试图把这些骚操作应用在自己的项目中,完事之后记... 查看详情

前端性能优化之重排和重绘(代码片段)

前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。 一.重排&重绘有经验的大佬对这个概... 查看详情

前端性能优化之----静态文件客户端离线缓存_20191110(代码片段)

前端性能优化之----静态文件客户端离线缓存1.前言上次的文章给大家分享了怎么在webpack打包阶段去将自己的项目优化到极致。文章链接：将webpack打包优化到极致_201806192.探究业务的瓶颈H5页面的性能瓶颈，网络因素几乎... 查看详情

前端性能优化之重排和重绘(代码片段)

前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。一.重排&重绘有经验的大佬对这个概念一定不... 查看详情

前端性能优化之重排和重绘(代码片段)

...《从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！》切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，与此同时还 查看详情

从页面加载到数据请求，前端页面性能优化实践分享(代码片段)

...开发工具、解决方案和服务，赋能开发者。背景做过前端开发都知道前端的工作内容是很多的，对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能，我们需要对各种资源内容进行不同方面... 查看详情

前端性能优化--图片懒加载(lazyloadimage)(代码片段)

...前头：上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化... 查看详情

前端性能优化(代码片段)

前言性能优化，一直作为前端的一个热点问题，作为一个优秀的前端开发人员，性能优化时必备技能。本文将从减少http请求次数、减少单次请求资源大小、渲染优化、资源加载优化等四个大方向，下分诸多小方向，全面总结常... 查看详情

前端总结--性能优化(代码片段)

...析的结果展示给用户1.2性能优化思维导图2.网络篇(http)2.1前端能做的网络优化输入URL到显示页面这个过程中，涉及到网络层面的，有三个主要过程：DNS解析TCP连接HTTP请求/响应对于DNS解析和TCP连接两个步骤，我们前端可以做的努... 查看详情

前端性能优化：配置etag(代码片段)

什么是ETag？　　实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。条件GET请求　　浏览器下载组件的时候，会将它们... 查看详情

前端性能优化23条建议(代码片段)

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文... 查看详情

前端性能优化：桌面浏览器前端优化策略(代码片段)

摘要:前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，... 查看详情

前端性能优化垃圾回收，闭包，跨域(代码片段)

目录前端性能优化减少HTTP请求使用服务器端渲染将CSS放在文件头部，JavaScript文件放在底部 更多使用异步编程ES6新特性let，const，var的区别以及箭头函数解构赋值模板字符串map()和reduce()方法class（类）的基本... 查看详情