前端使用a链接下载内容增加loading效果

1. 
   
2. 问题描述：最近工作中出现一个需求，纯前端下载 Excel 数据，并且有的下载内容很多，这时需要给下载增加一个 loading 效果。
   
3. 代码如下：
   

// utils.js
const XLSX = require('xlsx')
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
export const sheet2blob = (sheet, sheetName) => {

  sheetName = sheetName || 'sheet1'
var workbook = {
SheetNames: [sheetName],
Sheets: {}

  }

  workbook.Sheets[sheetName] = sheet
// 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'

  }
var wbout = XLSX.write(workbook, wopts)
var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
// 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length)
var view = new Uint8Array(buf)
for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
return buf

  }
return blob

}

/**

 * 通用的打开下载对话框方法，没有测试过具体兼容性

 * @param url 下载地址，也可以是一个blob对象，必选

 * @param saveName 保存文件名，可选

 */
export const openDownloadDialog = (url, saveName) => {
if (typeof url === 'object' && url instanceof Blob) {

    url = URL.createObjectURL(url) // 创建blob地址

  }
var aLink = document.createElement('a')

  aLink.href = url

  aLink.download = saveName + '.xlsx' || '1.xlsx' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event
if (window.MouseEvent) event = new MouseEvent('click')
else {

    event = document.createEvent('MouseEvents')

    event.initMouseEvent(
'click',
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null

    )

  }

  aLink.dispatchEvent(event)

}


<el-button

  @click="clickExportBtn"

>
<i class="el-icon-download"></i>下载数据

</el-button>
<div class="mongolia" v-if="loadingSummaryData">
<el-icon class="el-icon-loading loading-icon">
<Loading />
</el-icon>
<p>loading...</p>
</div>

clickExportBtn: _.throttle(async function() {
const downloadDatas = []
const summaryDataForDownloads = this.optimizeHPPCDownload(this.summaryDataForDownloads)

  summaryDataForDownloads.map(summaryItem =>

    downloadDatas.push(this.parseSummaryDataToBlobData(summaryItem))

  )
//  donwloadDatas 数组是一个三维数组，而 json2sheet 需要的数据是一个二维数组
this.loadingSummaryData = true
const downloadBlob = aoa2sheet(downloadDatas.flat(1))
openDownloadDialog(downloadBlob, `${this.testItem}报告数据`)
this.loadingSummaryData = false

}, 2000),

// css

.mongolia {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

  background-color: rgba(0, 0, 0, 0.9);
display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.5rem;
color: #409eff;

  z-index: 9999;

}

.loading-icon {
color: #409eff;

  font-size: 32px;

}

3. 
   
4. 解决方案探究：
   

• 
  
• 
  

  在尝试了使用 $nextTick、将 openDownloadDialog 改写成 Promise 异步函数，或者使用 async/await、在 openDownloadDialog 中添加 loadingSummaryData 逻辑，发现依旧无法解决问题，因此怀疑是 document 添加新元素与 vue 的 v-if 渲染产生冲突，即 document 添加新元素会阻塞 v-if 的执性。查阅资料发现，问题可能有以下几种：

  
  
  • 
    
  • openDownloadDialog 在执行过程中执行了较为耗时的同步操作，阻塞了主线程，导致了页面渲染的停滞。
    
  • openDownloadDialog 的 click 事件出发逻辑存在问题，阻塞了事件循环（Event Loop）。
    
  • 浏览器在执行 openDownloadDialog 时，将其脚本任务的优先级设置得较高，导致占用主线程时间片，推迟了其他渲染任务。
    
  • Vue 的批量更新策略导致了 v-if 内容的显示被延迟。
    
  
  
  
• 
  

  查阅资料后找到了如下几种方案：

  
  
  • 
    
  • 
    
    1. 
       
    2. 使用 setTimeout 使 openDownloadDialog 异步执行
       
    
    

    clickExport() {
    this.loadingSummaryData = true;
    
    setTimeout(() => {
    openDownloadDialog(downloadBlob, `${this.testItem}报告数据`);
    
    this.loadingSummaryData = false;
    
      });
    
    }
    

    
    
    
  • 
    
    2. 
       
    3. 对 openDownloadDialog 内部进行优化
       
    
    
    • 
      
    • 避免大循环或递归逻辑
      
    • 将计算工作分批进行
      
    • 使用 Web Worker 隔离耗时任务
      
      • 
        
      • 
        

        在编写 downloadWorker.js 中的代码时，要明确这部分代码是运行在一个独立的 Worker 线程内部，而不是主线程中。

        
        
        • 
          
        • 
          
          1. 
             
          2. 不要直接依赖或者访问主线程的全局对象,比如 window、document 等。这些在 Worker 内都无法直接使用。
             
          
          
          
        • 
          
          2. 
             
          3. 不要依赖 DOM 操作,比如获取某个 DOM 元素。Worker 线程无法访问页面的 DOM。
             
          
          
          
        • 
          
          3. 
             
          4. 代码执行的入口是 onmessage 回调函数,在其中编写业务逻辑。
             
          
          
          
        • 
          
          4. 
             
          5. 和主线程的通信只能通过 postMessage 和 onmessage 发送消息事件。
             
          
          
          
        • 
          
          5. 
             
          6. 代码应该是自包含的,不依赖外部变量或状态。
             
          
          
          
        • 
          
          6. 
             
          7. 可以导入其他脚本依赖,比如用 import 引入工具函数等。
             
          
          
          
        • 
          
          7. 
             
          8. 避免修改或依赖全局作用域,比如定义全局变量等。
             
          
          
          
        
        
        
      • 
        

        总之，编写 downloadWorker.js 时要注意它执行在一个独立环境中，只能通过消息事件与主线程通信。

        
        

        // 创建 Worker
        
        const worker = new Worker('downloadWorker.js'); 
        
        
        // 点击下载时向 Worker 发送消息
        
        function clickDownload() {
        
        
          showLoading();
        
        
          worker.postMessage({
        
            url: fileURL,
        
            filename: 'report.xlsx'
        
          });
        
        worker.onmessage = function(e) {
        
            // 收到下载完成的消息
        
            hideLoading();
        
          }
        
        
        }
        
        
        // 显示 loading
        
        function showLoading() {
        loading.style.display = 'block'; 
        
        }
        
        
        // 隐藏 loading
        
        function hideLoading() {
        loading.style.display = 'none';
        
        }
        
        
        // downloadWorker.js
        
        onmessage = function(e) {
        
          const url = e.data.url;
        
          const filename = e.data.filename;
        
        
          // 创建并点击链接触发下载
        
          const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        
          a.click();
        
        
          postMessage('下载完成');
        
        }
        
        
        <div id="loading" style="display:none;">
        
          Downloading...
        
        </div>
        
        
        <button onclick="clickDownload()">
        
          Download
        
        </button>
        
        
        <script src="downloadWorker.js"></script>
        

        
        
        
      
      
      
    
    
    
  • 
    
    3. 
       
    4. 使用 requestIdleCallback 进行调度
       
    
    

    clickExport() {
    this.loadingSummaryData = true;
    
    
      requestIdleCallback(() => {
    
        openDownloadDialog(downloadBlob, `${this.testItem}报告数据`);
    
    this.loadingSummaryData = false; 
    
      });
    
    }
    

    
    
    
  • 
    

    当使用上述方案时发现里面的内容变得异常的慢，于是去问GPT后，得到以下答案：

    
    

    使用 requestIdleCallback 来执行 openDownloadDialog 确实可能会需要更多时间。

    
    

    因为 requestIdleCallback 会在主线程空闲时才执行回调函数,所以不像 setTimeout 可以直接按指定时间异步执行。

    
    

    requestIdleCallback 的优先级较低,只在主线程空闲时才会执行,所以 download 的速度会比 setTimeout 慢一些。

    
    

    但使用 requestIdleCallback 的优点是它不会占用主线程时间,可以避免阻塞页面渲染。

    
    

    所以需要权衡执行速度和避免阻塞之间的关系:

    
    
    • 
      
    • 
      

      如果下载速度是优先考虑的因素,可以继续使用 setTimeout 异步执行。

      
      
      
    • 
      

      如果避免阻塞渲染更重要,则 requestIdleCallback 是更好的选择。

      
      
      
    
    

    偶尔下载任务被延迟不是大问题,但频繁的下载任务阻塞会严重影响页面体验。

    
    

    此外,可以结合两者试试:

    
    

    clickExport() {
    
    this.loadingSummaryData = true;
    
    setTimeout(() => {
    
    requestIdleCallback(() => {
    openDownloadDialog(downloadBlob);
    
        });
    
    this.loadingSummaryData = false;
    
    
      }, 200);
    
    
    }
    

    
    

    setTimeout 先异步调度,然后在回调中使用 requestIdleCallback 避免阻塞。这样就可以兼顾下载速度和避免渲染阻塞了。

    
    
    
  • 
    
    4. 
       
    5. 分析线程模型，找到具体的阻塞点
       
    
    
    • 
      
    • 使用 Performance 工具分析线程
      
    • debugger 及 console.log 打印关键函数的执行时间
      
    • 检查是否有非主线程的任务阻塞了主线程
      
    
    
    
  • 
    
    5. 
       
    6. 调整 vue 的批量更新策略
       
    
    

    new Vue({
    
      config: { 
    // 修改批量更新的队列长度
    
        batchUpdateDuration: 100 
    
      }
    
    })
    

    
    
    
    作者：李卫泽
    来源：juejin.cn/post/7268050036474609683
    i>