Chrome加载Script标签较Firefox更慢，如何优化本地大数据加载？

针对你遇到的300MiB数据加载慢的问题，从JS解析优化和更优本地加载方案两方面给出具体解决方法：

一、加快Chrome/Firefox的JS文件解析速度 #

如果必须保留JS文件存储的方式，可以尝试以下优化：

1. 移除Base64编码
   Base64会让数据体积膨胀约33%，且浏览器解析超长Base64字符串需要额外计算开销。直接存储原始二进制数据（如转成数组而非Base64字符串），能大幅降低文件大小和解析时间。

2. 拆分大JS文件为多个小模块
   Chrome的V8引擎支持并行解析多个小脚本文件，将300MiB的大文件拆分为多个30-50MiB的小文件，通过动态import并行加载合并：

   async function loadSplitData() {
     const dataParts = [];
     // 假设拆分为10个文件：data-part-1.js 到 data-part-10.js
     for (let i = 1; i <= 10; i++) {
       const { partData } = await import(`data-part-${i}.js`);
       dataParts.push(partData);
     }
     const fullData = dataParts.flat(); // 如果是数组数据
     globalFunction(fullData);
   }
   loadSplitData();
   

   每个小文件的内容改为导出数据片段：

   // data-part-1.js
   export const partData = [/* 数据片段 */];
   

3. 避免即时全局变量初始化
   当前JS文件加载后立刻初始化超大全局变量并调用函数，会阻塞主线程解析。改为封装成函数，延迟到需要时执行：

   // localDataFile.js
   export function getBase64Data() {
     return "..."; // Base64字符串
   }
   

   然后在主页面按需调用：

   import { getBase64Data } from './localDataFile.js';
   // 等待页面空闲时执行
   requestIdleCallback(() => {
     globalFunction(getBase64Data());
   });
   

二、无Web服务器时的更优本地数据加载方案 #

放弃JS文件存储的方式，改用以下更高效的方案：

1. Fetch加载二进制文件（需Chrome启动参数）
   直接存储原始二进制文件（如localData.bin），用fetch加载ArrayBuffer，跳过JS解析步骤，速度提升明显：

   async function loadBinaryData() {
     try {
       const response = await fetch('localData.bin');
       const arrayBuffer = await response.arrayBuffer();
       // 转换为需要的数据格式，比如Uint8Array
       const data = new Uint8Array(arrayBuffer);
       globalFunction(data);
     } catch (err) {
       console.error('加载失败:', err);
     }
   }
   loadBinaryData();
   

   注意：Chrome默认禁止file://协议下的跨域请求，需启动时添加参数：

   chrome.exe --allow-file-access-from-files
   

   Firefox默认允许本地fetch，无需额外设置。

2. FileReader API（用户手动选择文件）
   如果允许用户通过文件选择器选择本地数据文件，这种方式无跨域限制，且读取效率最高：

   <input type="file" id="dataFilePicker" accept=".bin">
   <script>
     document.getElementById('dataFilePicker').addEventListener('change', async (e) => {
       const file = e.target.files[0];
       if (!file) return;
       const arrayBuffer = await file.arrayBuffer();
       globalFunction(new Uint8Array(arrayBuffer));
     });
   </script>
   

3. IndexedDB预加载缓存
   若需要多次加载数据，第一次加载后将数据存入IndexedDB，后续直接从缓存读取，几乎零等待：

   // 初始化IndexedDB
   function openDB() {
     return new Promise((resolve, reject) => {
       const request = indexedDB.open('LocalDataDB', 1);
       request.onupgradeneeded = (e) => {
         const db = e.target.result;
         db.createObjectStore('dataStore');
       };
       request.onsuccess = () => resolve(request.result);
       request.onerror = () => reject(request.error);
     });
   }
   
   async function loadData() {
     const db = await openDB();
     const transaction = db.transaction('dataStore', 'readonly');
     const store = transaction.objectStore('dataStore');
     const cachedData = await store.get('fullData');
   
     if (cachedData) {
       globalFunction(cachedData);
       return;
     }
   
     // 缓存不存在则加载文件
     const response = await fetch('localData.bin');
     const arrayBuffer = await response.arrayBuffer();
     const data = new Uint8Array(arrayBuffer);
   
     // 存入缓存
     const writeTx = db.transaction('dataStore', 'readwrite');
     await writeTx.objectStore('dataStore').put(data, 'fullData');
     await writeTx.done;
   
     globalFunction(data);
   }
   
   loadData();
   

内容的提问来源于stack exchange，提问作者pthomaid