在基于 FastAdmin 或 ThinkPHP 框架的项目中，当单表数据量达到数千条甚至上万条时，后台管理页面往往会出现加载缓慢、浏览器卡死等性能瓶颈。本文将结合实际案例，从前端分页、后端逻辑及数据库索引三个维度提供完整的优化方案。

1. 问题背景

在“项目管理”模块中，单表数据量达到 7000+ 条。由于默认配置和业务逻辑未针对大数据量进行优化，导致以下问题：

•前端渲染压力大：默认 pageSize 过大（如 500 条），导致浏览器一次性渲染大量 DOM 节点（包含图标、复杂操作按钮），造成页面卡死。

•后端重复加载全量数据：控制器在初始化时，无论是否为 AJAX 请求，都会执行全量查询来构建树形结构，消耗大量内存和 CPU。

•数据库查询效率低：在 type、name、nickname 等常用搜索字段上缺少索引，导致模糊查询时全表扫描。

2. 优化方案实施

2.1 前端分页优化 (JavaScript)

将单页加载量调整到合理范围（如 15-50 条），显著降低浏览器渲染压力。

修改文件：public/assets/js/backend/category.js

修改内容：

var tableOptions = {
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    escape: false,
    pk: 'id',
    sortName: 'weigh',
    pagination: true,
    sidePagination: "server", // 确保开启服务端分页
    pageSize: 15,             // 将 500 修改为 15 或 25
    pageList: [15, 25, 50, 100],
    // ... 其他配置
};

2.2 后端逻辑优化 (PHP)

在控制器初始化方法中增加判断，避免在 AJAX 请求（仅需表格数据）时加载不必要的全量树形结构。

修改文件：application/admin/controller/Category.php

修改内容：

public function _initialize()
{
    parent::_initialize();
    $this->model = model('app\common\model\Category');
    
    // 核心优化：如果是 AJAX 请求，直接返回，跳过下方的全量 select() 查询
    if ($this->request->isAjax()) {
        return;
    }
    
    $tree = Tree::instance();
    // 只有在非 AJAX 页面加载（如首次进入页面或刷新）时才构建树形结构
    $tree->init(collection($this->model->order('weigh desc,id desc')->select())->toArray(), 'pid');
    $this->categorylist = $tree->getTreeList($tree->getTreeArray(0), 'name');
    // ... 后续逻辑
}

2.3 数据库索引优化 (SQL)

为常用搜索和过滤字段添加 B-Tree 索引，将全表扫描转为索引扫描。

执行 SQL 语句：

-- 为类型字段添加索引
ALTER TABLE `fa_category` ADD INDEX `idx_type` (`type`);

-- 为应用名称字段添加索引（优化模糊搜索）
ALTER TABLE `fa_category` ADD INDEX `idx_name` (`name`);

-- 为版本号字段添加索引
ALTER TABLE `fa_category` ADD INDEX `idx_nickname` (`nickname`);

-- 为软件说明字段添加索引
ALTER TABLE `fa_category` ADD INDEX `idx_keywords` (`keywords`);

3. 总结与建议

通过以上三步优化，系统在处理 7000+ 条数据时的响应速度将得到质的提升：

1.前端：通过减小 pageSize 解决了浏览器卡死问题。

2.后端：通过 AJAX 判断减少了不必要的数据库 IO 和内存占用。

3.数据库：通过索引优化将查询耗时从秒级降低到毫秒级。

特别提醒：修改 JS 文件后，由于浏览器缓存机制，请务必使用 Ctrl + F5 强制刷新页面以确保配置生效。