C#中添加多个UserControl时FlowLayoutPanel的UI性能优化问题

问题背景 #

我为桌面应用创建了员工管理UI：包含一个集成FlowLayoutPanel的DataGridView用户控件，以及EmployeeCard员工卡片控件。但从数据库获取5-10条记录并生成对应卡片时，UI出现明显卡顿，尝试用Task和异步方法未解决，求优化方案。

核心优化点 #

• 异步化数据库操作：避免同步查询阻塞UI线程，确保UI在数据加载期间保持响应
• 批量控件添加+暂停布局：减少FlowLayoutPanel的重绘次数，避免循环添加时的频繁刷新
• 优化卡片加载逻辑：跳过控件Load事件延迟，直接在实例化后绑定数据

修改后的代码示例 #

异步数据库查询方法 #

public async Task<DataTable> Get_All_EmployeesAsync()
{
    DataTable dt = new DataTable();
    // 使用using自动释放连接，避免资源泄漏
    using (SqlConnection conn = new SqlConnection(SQL_Connection.SQL_Link.ConnectionString))
    {
        await conn.OpenAsync();
        SqlCommand cmd = new SqlCommand(@"Select E.Employee_id, E.Employee_Name, E_S.Status_Ar_Name, 
                                           E.Employee_Sex, E.Phone_Number, J.JobTital, E.Employee_Salary 
                                           from Employees E
                                           join Jobs J on E.JobID = J.JobID
                                           join Employees_Statuses E_S on E.EmployeeStatus_ID = E_S.EmployeeStatus_ID 
                                           Order By Employee_id;", conn);
        using (SqlDataReader reader = await cmd.ExecuteReaderAsync())
        {
            await dt.LoadAsync(reader);
        }
    }
    return dt;
}

批量生成并添加员工卡片 #

public async Task GetEmpCardsAsync()
{
    var Emp_dgv = empDataGridView1;
    // 异步获取数据，不阻塞UI线程
    DataTable dt = await Get_All_EmployeesAsync();
    
    if (dt.Rows.Count > 0)
    {
        Emp_dgv.flowLayoutPanel1.Controls.Clear();
        // 暂停布局，避免循环添加时的多次重绘
        Emp_dgv.flowLayoutPanel1.SuspendLayout();
        
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            EmpDataCard empDataCard = new EmpDataCard()
            {
                ID = Convert.ToInt32(dt.Rows[i][0]),
                EmpName = dt.Rows[i][1].ToString(),
                EmpSatatues = dt.Rows[i][2].ToString(),
                EmpGender = dt.Rows[i][3].ToString(),
                EmpPhone = dt.Rows[i][4].ToString(),
                EmpJob = dt.Rows[i][5].ToString(),
                EmpSalary = dt.Rows[i][6].ToString()
            };
            // 直接绑定数据，无需等待Load事件
            empDataCard.ShowData();
            Emp_dgv.flowLayoutPanel1.Controls.Add(empDataCard);
        }
        
        // 恢复布局，一次性完成重绘
        Emp_dgv.flowLayoutPanel1.ResumeLayout(true);
    }
}

优化EmployeeCard控件 #

public int ID { get; set; }
public string EmpName { get; set; }
public string EmpSatatues { get; set; }
public string EmpGender { get; set; }
public string EmpPhone { get; set; }
public string EmpJob { get; set; }
public string EmpSalary { get; set; }

// 改为公开方法，方便外部直接调用
public void ShowData()
{
    EmpName_lbl.Text = EmpName;
    EmpStatues_lbl.Text = EmpSatatues;
    EmpGender_lbl.Text = EmpGender;
    EmpPhone_lbl.Text = EmpPhone;
    EmpJob_lbl.Text = EmpJob;
    EmpSalary_lbl.Text = EmpSalary;
}

// 移除Load事件绑定，消除加载延迟
// private void EmpDataCard_Load(object sender, EventArgs e)
// {
//     ShowData();
// }

额外优化建议 #

• 避免使用全局数据库连接，始终用using块创建连接，防止连接池耗尽
• 若后续数据量增大，可实现虚拟滚动或分页加载，只渲染可见区域的卡片
• 对样式固定的EmployeeCard可做实例缓存，减少重复实例化的开销

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