如何测试本地ExtJS站点localhost:8080/XXXXXXXX的页面加载速度？

刚好我之前处理过不少ExtJS应用的性能问题，给你分享几个本地就能用的测试手段，直接上手排查：

一、浏览器开发者工具（最直观，零额外工具） #

几乎所有现代浏览器的DevTools都是免费且强大的性能分析工具，针对ExtJS这类重前端框架特别有用：

• Performance面板
  打开F12切换到Performance，点击「Record」后刷新页面，停止记录后就能看到完整的加载时间线：

  • 重点看主线程的长任务（Long Tasks），ExtJS组件渲染、store数据处理、模板编译这些操作很容易阻塞主线程；
  • 关注「Loading」「Scripting」「Rendering」阶段的时间占比，哪个阶段耗时高就是优化重点；
  • 可以勾选「Memory」选项，同步监控内存变化，排查内存泄漏导致的加载缓慢。

• Network面板
  刷新页面后，这里会列出所有请求的资源：

  • 查看大体积资源（比如未压缩的ExtJS库、超大JSON数据），注意看Size和Time列；
  • 检查资源的加载顺序，有没有不必要的同步请求阻塞后续资源加载；
  • 切换到「Waterfall」视图，能清晰看到资源加载的时间重叠情况，判断是否有并行加载的空间；
  • 勾选「Disable cache」，模拟首次访问的加载状态，更真实反映用户体验。

• Lighthouse面板
  很多人不知道Lighthouse可以本地运行，切换到Lighthouse面板，勾选「Performance」，点击「Generate report」，会生成结构化的性能报告：

  • 里面会给出具体的性能指标（如LCP、FID），还有针对性的优化建议；
  • 针对ExtJS，通常会指出未压缩JS、未优化图片、缓存策略缺失这些问题。

二、ExtJS专属调试工具 #

ExtJS本身提供了不少性能监控工具，能更精准定位框架内部的性能瓶颈：

• Ext.performance API
  在代码中手动添加性能打点，监控特定组件或操作的耗时：

  // 记录开始时间
  Ext.performance.mark('grid-render-start');
  
  // 你的组件渲染代码
  Ext.create('Ext.grid.Panel', {
    // ...配置项
    renderTo: Ext.getBody()
  });
  
  // 计算耗时并打印
  Ext.performance.measure('grid-render-time', 'grid-render-start');
  console.log('Grid渲染耗时:', Ext.performance.getMeasure('grid-render-time') + 'ms');
  

  这种方式能精准定位到某个组件或数据处理逻辑的耗时。

• Ext DevTools插件
  安装浏览器的Ext DevTools插件（Chrome、Firefox都有），它专门针对ExtJS应用：

  • 能查看组件树的初始化顺序和耗时；
  • 监控store的加载、数据处理时间；
  • 检查组件的布局重排次数（ExtJS的布局系统是性能热点）。

• Ext.Loader日志
  如果你的ExtJS应用使用动态加载（Ext.Loader），可以开启日志模式：

  Ext.Loader.setConfig({
    enabled: true,
    debug: true
  });
  

  控制台会输出每个JS文件的加载时间，排查是否有大量小文件导致的请求瀑布。

三、命令行工具（适合自动化测试或批量排查） #

如果需要定期测试或在无界面环境下运行，可以用这些命令行工具：

• Lighthouse CLI
  先通过npm安装：npm install -g lighthouse，然后运行：

  lighthouse http://localhost:8080/XXXXXXXX --view
  

  会生成性能报告并自动打开，适合集成到CI/CD流程中做性能监控。

• Chrome Headless模式
  用无界面Chrome模拟加载，获取性能数据：

  chrome --headless --disable-gpu --dump-dom --enable-logging --v=1 http://localhost:8080/XXXXXXXX
  

  日志中会包含加载过程中的各个阶段耗时，适合排查一些在有界面环境下难以重现的性能问题。

• cURL
  快速测试页面的基础响应时间，适合排查服务器端或网络层面的问题：

  curl -w "总耗时: %{time_total}s\nDNS解析: %{time_namelookup}s\n连接耗时: %{time_connect}s\n响应耗时: %{time_starttransfer}s\n" -o /dev/null -s http://localhost:8080/XXXXXXXX
  

  能快速判断是前端渲染慢还是后端响应慢。

四、针对性排查ExtJS常见性能坑 #

测试之后，记得重点排查这些ExtJS特有的性能问题：

• 检查store是否一次性加载了大量数据（比如上万条），是否做了分页或虚拟滚动；
• 查看组件嵌套层级，过深的组件树会大幅增加渲染时间；
• 确认是否使用了未优化的模板（比如XTemplate中包含复杂逻辑）；
• 检查ExtJS库是否开启了压缩和混淆（生产环境一定要用ext-all.js而非ext-all-debug.js）；
• 查看是否有重复的store请求或不必要的组件重新渲染。

这些方法结合起来，应该能快速定位到页面加载慢的根源，一步步优化就行。

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