Typecho 主题 JS 文件过多导致加载慢，最推荐的处理方向是识别非首屏必需脚本并实施条件加载或异步加载。适用场景为主题在首页加载了仅在文章页或特定功能页使用的 JavaScript 库。风险边界在于修改主题文件可能导致交互功能失效，操作前需备份原文件。
先说结论：通过浏览器开发者工具定位非关键 JS，利用 defer 属性或 PHP 条件判断实现按需加载，可显著减少首屏阻塞。
- 先定位：使用 Chrome Network 面板筛选 JS 文件，找出体积大且非首屏必需的脚本。
- 先做：为独立脚本添加 defer 属性，或在 footer.php 中通过 PHP 条件判断加载特定页面脚本。
- 再验证：刷新页面观察 Network 面板请求变化，确保控制台无报错且功能正常。
快速处理思路
对于大多数 Typecho 主题，无需构建工具即可通过修改模板文件实现优化。优先给非关键 script 标签添加 defer 属性，使 JS 在 HTML 解析完成后执行。对于仅在特定页面使用的库，在主题 footer.php 中使用 PHP 条件语句包裹加载代码。若主题使用构建工具，可配置代码分割将第三方库分离。
为什么会这样
浏览器默认同步加载 JS 文件会阻塞 HTML 解析，导致页面渲染延迟。过多的小文件会增加 HTTP 请求次数，即使服务器返回 304 缓存命中，依然会产生请求延迟。未区分页面场景加载全量脚本，会导致首页携带了文章页才需要的图表库或编辑器代码，造成带宽浪费。
分步处理
1. 识别冗余脚本：打开浏览器开发者工具 Network 面板，刷新首页，筛选 JS 文件。记录加载时间长或体积大但首页不用的文件路径。
2. 添加 defer 属性：在主题 header.php 或 footer.php 中找到 script 标签，添加 defer 属性。例如将<script src="...">改为<script src="..." defer>。此操作适用于无依赖关系的独立脚本。
3. 实施条件加载：编辑主题 footer.php 文件，使用 Typecho 内置判断函数包裹特定脚本。例如仅在文章页加载评论脚本：<?php if ($this->is('post')): ?><script src="..."></script><?php endif; ?>。
4. 合并与压缩：若 JS 文件过多，可使用构建工具合并文件减少请求数。或在 PHP 层面使用压缩函数减小文件体积，但需注意调试难度增加。
怎么验证是否生效
刷新页面后再次打开 Network 面板，观察首屏加载期间请求的 JS 文件数量是否减少。检查 Performance 面板，确认 Main 线程阻塞时间缩短。访问不同页面类型，确认特定脚本仅在需要的页面加载。打开控制台 Console 面板，确保没有因加载顺序变化导致的 JavaScript 报错。
常见坑
1. 依赖顺序错误：添加 defer 后脚本执行顺序可能变化，若脚本间有依赖关系，需确保被依赖文件先加载或移除 defer。
2. jQuery timing 问题：若脚本依赖 jQuery，确保 jQuery 在之前加载完毕，或使用 document.ready 包裹代码。
3. HTTPS 混合内容：若站点开启 HTTPS，确保 JS 资源链接使用 https 或相对路径，避免被浏览器拦截。
4. 缓存未更新：修改文件后浏览器可能加载旧缓存，需强制刷新或清除缓存验证。
常见问题
按需加载会影响 SEO 吗？
不会影响，只要页面核心内容不依赖 JS 渲染，搜索引擎仍可抓取 HTML 内容。
修改后页面功能失效怎么办？
检查浏览器控制台是否有报错，确认是否因脚本加载顺序改变导致依赖丢失，必要时恢复同步加载。
所有 JS 文件都能加 defer 吗？
不能，若脚本需要在 HTML 解析过程中立即执行或修改文档结构，添加 defer 可能导致功能异常。
参考来源
- 如何实现 typed.js 动画模块的按需加载：提升网页性能的完整指南
- 前端项目加载慢？这 3 个优化手段先试试
- 前端文件加载耗时过长解决方案
- 如何使用 PHP 和 Typecho 优化网站的响应速度
- Typecho 开启 Gzip 提升网页整体加载速度