JavaScript DOM操作优化笔记

原代码的问题分析

原代码：

.then(response=>{
    let sdsd = document.getElementById('dsfds')
    let sdsd1=document.getElementById('sdfjslkdA')
    sdsd1.innerHTML=response.status
    let sdsd2=document.getElementById('dfsf')
    let sdsd3=document.getElementById('dssdsd')
    sdsd.style="display:block"
    response.data.forEach(element => {
        console.log(element)
        sdsd3.innerHTML=sdsd3.innerHTML+`<tr><td>${element.id}</td><td>${element.consignee}</td><td>${element.create_time}</td><td>${element.province_name}</td><td>${element.trade_body}</td></tr>`
    });
})

主要问题

1. 变量命名不清晰

// 原代码 - 难以理解
let sdsd = document.getElementById('dsfds')
let sdsd1=document.getElementById('sdfjslkdA')
let sdsd3=document.getElementById('dssdsd')

// 优化后 - 一目了然
const tableContainer = document.getElementById('dsfds')
const statusElement = document.getElementById('sdfjslkdA')
const tableBody = document.getElementById('dssdsd')

问题原因：sdsd、sdsd1、sdsd3这些名称无法表达元素的用途，维护困难。

2. 重复的DOM操作导致性能问题

// 原代码 - 每次循环都更新innerHTML，性能差
response.data.forEach(element => {
    sdsd3.innerHTML = sdsd3.innerHTML + `<tr>...</tr>`
});

// 优化后 - 一次性更新，性能好
const rowsHTML = response.data.map(element => {
    return `<tr>...</tr>`
}).join('');
tableBody.innerHTML = rowsHTML;

问题原因：

• 每次循环都重新设置 innerHTML会导致浏览器重复渲染
• 数据量大时性能明显下降

3. 未清空原有内容

// 原代码问题：多次执行会重复添加数据
sdsd3.innerHTML = sdsd3.innerHTML + `<tr>...</tr>`

// 优化方案：先清空再添加
tableBody.innerHTML = ''; // 清空原有内容
tableBody.innerHTML = rowsHTML; // 添加新内容

4. 未使用的变量

// 原代码中定义了但未使用
let sdsd2=document.getElementById('dfsf') // 这个变量完全没用

5. 安全性问题

// 原代码：innerHTML用于纯文本
sdsd1.innerHTML=response.status

// 优化：纯文本使用textContent更安全
statusElement.textContent = response.status

原因：innerHTML会解析HTML标签，如果 response.status包含 <script>标签会被执行，存在XSS风险。

完整优化方案

方案一：逐步优化

.then(response => {
    // 1. 使用有意义的变量名
    const tableContainer = document.getElementById('dsfds');
    const statusElement = document.getElementById('sdfjslkdA');
    const tableBody = document.getElementById('dssdsd');
  
    // 2. 安全地设置状态文本
    statusElement.textContent = response.status;
  
    // 3. 显示表格容器
    tableContainer.style.display = 'block';
  
    // 4. 清空表格原有内容
    tableBody.innerHTML = '';
  
    // 5. 使用文档片段或一次性更新
    response.data.forEach(element => {
        console.log(element);
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${element.id}</td>
            <td>${element.consignee}</td>
            <td>${element.create_time}</td>
            <td>${element.province_name}</td>
            <td>${element.trade_body}</td>
        `;
        tableBody.appendChild(row);
    });
})

方案二：最佳实践（推荐）

.then(response => {
    // 集中管理DOM元素
    const elements = {
        tableContainer: document.getElementById('dsfds'),
        statusElement: document.getElementById('sdfjslkdA'),
        tableBody: document.getElementById('dssdsd')
    };
  
    // 更新状态和显示
    elements.statusElement.textContent = response.status;
    elements.tableContainer.style.display = 'block';
  
    // 一次性构建所有行HTML
    const rowsHTML = response.data.map(element => {
        console.log(element);
        // 对数据进行安全转义（实际项目中建议使用专门的转义函数）
        return `
            <tr>
                <td>${element.id}</td>
                <td>${element.consignee}</td>
                <td>${element.create_time}</td>
                <td>${element.province_name}</td>
                <td>${element.trade_body}</td>
            </tr>
        `;
    }).join('');
  
    // 一次性更新DOM
    elements.tableBody.innerHTML = rowsHTML;
})
.catch(error => {
    console.error('数据加载失败:', error);
});

性能对比

总结要点

1. 命名要有意义 - 提高代码可读性
2. 减少DOM操作 - 提高性能
3. 清空旧内容 - 避免数据重复
4. 区分innerHTML和textContent - 提高安全性
5. 移除无用代码 - 保持代码整洁
6. 添加错误处理 - 提高健壮性

你的代码之所以"不行"，可能是因为性能问题（数据多时卡顿）或数据重复显示问题，通过以上优化可以解决这些问题。