如何用Node.js和Electron从URL读取文件（含JSON）

问题背景 #

需要通过Node.js从服务器URL读取JSON文件，此前使用FTP下载效率极低，当前本地读取并渲染的方案运行速度慢，需优化下载与渲染流程。现有本地读取JSON并渲染表格的代码如下：

let project_db;
fs.readFile('public/db/db.json', 'utf8', function (err, data) {
    if (err) throw err;
    project_db = JSON.parse(data);
    console.log(project_db.projects.length);
    for(let i = 0; i < project_db.projects.length; i++) {
        $('#projectTable tbody').append(`
            <tr class="rowT">
                <th scope="row" class="scope border-bottom-0">${project_db.projects[i].name}</th>
                <td class="border-bottom-0">${project_db.projects[i].date}</td>
                <td class="border-bottom-0">${(project_db.projects[i].project_constructii == true) ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${(project_db.projects[i].project_hvac == true) ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${(project_db.projects[i].project_instalatii_sanitare == true) ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${(project_db.projects[i].project_instalatii_electrice == true) ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${(project_db.projects[i].project_instalatii_incendiu == true) ? "DA" : "NU"}</td>
                <td class="border-bottom-0"><a href="#" class="btn btn-success">Vezi oferte</a></td>
            </tr>
        `);
    }
});

优化方案 #

1. 替换FTP，用HTTP/HTTPS直接获取远程JSON #

FTP传输效率远低于HTTP/HTTPS，尤其在支持gzip压缩的场景下差距更明显。推荐使用Node.js内置的https模块或axios库发起请求，同时开启请求压缩以减少传输体积。

示例（使用axios）：

const axios = require('axios'); // 需先安装：npm install axios

axios.get('https://你的服务器地址/db.json', {
    headers: { 'Accept-Encoding': 'gzip, deflate' },
    responseType: 'json'
})
.then(response => {
    const project_db = response.data;
    renderTable(project_db.projects);
})
.catch(err => {
    console.error('获取数据失败:', err);
});

2. 优化表格渲染性能 #

原代码循环中每次调用append会触发多次DOM重排，导致渲染缓慢。改为先拼接完整的HTML字符串，再一次性插入DOM，大幅减少重排次数。

封装渲染函数：

function renderTable(projects) {
    let html = '';
    projects.forEach(project => {
        html += `
            <tr class="rowT">
                <th scope="row" class="scope border-bottom-0">${project.name}</th>
                <td class="border-bottom-0">${project.date}</td>
                <td class="border-bottom-0">${project.project_constructii ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_hvac ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_instalatii_sanitare ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_instalatii_electrice ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_instalatii_incendiu ? "DA" : "NU"}</td>
                <td class="border-bottom-0"><a href="#" class="btn btn-success">Vezi oferte</a></td>
            </tr>
        `;
    });
    // 一次性插入DOM
    $('#projectTable tbody').html(html);
}

3. 额外优化建议 #

• 缓存机制：如果JSON数据更新不频繁，可将获取到的数据缓存到本地文件或内存中，避免重复发起请求。
• 分页加载：若数据量极大，可实现分页加载，每次只渲染部分数据，提升首屏加载速度。
• 增强错误处理：添加请求超时、重试逻辑，避免单次请求失败导致功能完全不可用。

完整整合代码 #

const axios = require('axios');

// 渲染表格函数
function renderTable(projects) {
    let html = '';
    projects.forEach(project => {
        html += `
            <tr class="rowT">
                <th scope="row" class="scope border-bottom-0">${project.name}</th>
                <td class="border-bottom-0">${project.date}</td>
                <td class="border-bottom-0">${project.project_constructii ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_hvac ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_instalatii_sanitare ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_instalatii_electrice ? "DA" : "NU"}</td>
                <td class="border-bottom-0">${project.project_instalatii_incendiu ? "DA" : "NU"}</td>
                <td class="border-bottom-0"><a href="#" class="btn btn-success">Vezi oferte</a></td>
            </tr>
        `;
    });
    $('#projectTable tbody').html(html);
}

// 远程获取JSON并渲染
axios.get('https://你的服务器地址/db.json', {
    headers: { 'Accept-Encoding': 'gzip, deflate' },
    timeout: 5000 // 设置5秒超时
})
.then(response => {
    renderTable(response.data.projects);
})
.catch(err => {
    console.error('加载数据出错:', err.message);
    // 可选：加载本地缓存作为降级方案
    // fs.readFile('public/db/db.json', 'utf8', (err, data) => {
    //     if (!err) renderTable(JSON.parse(data).projects);
    // });
});

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