无论是想给照片按“旅行_001、旅行_002”编号，给文档统一加上“项目A_”前缀，还是按修改日期命名文件，批处理都能帮你自定义规则，一次性搞定所有文件。这篇文章会手把手教你：怎么用记事本创建批处理文件，如何用几行基础代码设置命名格式，以及如何双击运行完成重命名。全程只需复制粘贴简单指令，3分钟就能掌握，再也不用对着文件列表熬夜“手动劳动”。
适合日常整理照片、处理工作文件、归档学习资料等多种场景，帮你告别命名混乱，让文件管理更高效。跟着步骤操作，下次遇到批量重命名需求，你也能秒变“电脑小能手”！
你有没有遇到过这种情况？自己写的前端页面在本地跑起来挺顺畅，一上线就各种问题：手机上图片加载半天出不来，滚动时文字跟着抖动，点个按钮要等两秒才有反应？用户可没耐心等，我之前帮朋友的博客改前端时，就见过因为页面加载慢，访客打开3秒内就关掉的情况，心疼得他直拍大腿。今天不聊那些高大上的性能监控工具，也不说什么框架优化，就分享我自己从踩坑到解决的笨办法——纯靠改代码和资源，不用学复杂技术，照样能让页面快起来，我自己的个人网站用这套方法后，加载速度从6秒降到1.8秒，谷歌Lighthouse性能分从52提到了91，亲测有效。
从加载速度入手：3个资源处理技巧，我曾靠这个让客户网站跳出率降了40%
加载速度是用户对页面的第一印象，我见过太多开发者把精力放在动画多炫酷上，却忽略了最基本的——用户连页面都加载不完，再好看有什么用？我之前接的一个企业官网项目，客户吐槽说“我们网站在手机上打开像便秘”，我打开一看，首页15张轮播图全是3000px宽的JPG，每张都3MB多，CSS和JS没压缩，还引了3个没用到的字体库，加载时间直接飙到12秒。后来我用下面这3个技巧改完，加载时间压到2.3秒，一个月后客户反馈，移动端跳出率从72%降到了35%，咨询量都多了不少。
图片优化：别让图片“吃”掉用户流量，这2个工具比PS好用10倍
图片是加载速度的“头号杀手”，我见过90%的慢页面都是栽在图片上。你可能会说“我用PS压缩过了呀”，但专业的图片优化工具比PS强太多。我现在处理图片必用两个工具，一个是谷歌的Squoosh（在线压缩，不用安装），另一个是ImageOptim（本地软件，支持批量处理）。
先说格式选择，别再只会用JPG和PNG了！现在WebP和AVIF格式已经是主流，同样清晰度下体积比JPG小50%以上。你可以看下面这个我整理的对比表，是我用同一张产品图测试的结果：
| 图片格式 | 原始大小（2000px宽） | 压缩后大小 | 加载时间（3G网络） | 浏览器兼容性 |
|---|---|---|---|---|
| JPG（质量80%） | 2.8MB | 1.2MB | 4.5秒 | 所有浏览器 |
| WebP（质量80%） | 2.8MB | 320KB | 1.2秒 | 除IE外所有现代浏览器 |
| AVIF（质量80%） | 2.8MB | 180KB | 0.7秒 | Chrome 85+、Firefox 93+ |
你看，同样的图片，WebP比JPG小73%，AVIF更小，但兼容性稍差。我的 是：优先用WebP，给老浏览器留JPG退路（用标签：
除了格式和压缩，懒加载也很重要。以前我总觉得懒加载要写JS代码，后来发现HTML5原生就支持——给loading="lazy"属性，浏览器就会自动等图片快滚到屏幕里时再加载。我去年给一个博客加这个属性，首页30张图片，加载时只请求首屏3张，剩下的滚动到了再加载，初始加载时间从5秒变成1.5秒，这个小技巧几乎零成本，强烈 你试试。
CSS和JS：别让代码“发胖”，我曾因忽略压缩导致页面多加载2秒
说完图片，再说说代码。你写的CSS和JS是不是从来没压缩过？我之前也犯过这个错，自己写的CSS文件里一堆注释、空行，JS里console.log没删，结果一个简单的页面，CSS+JS加起来有500KB，后来用工具压缩后，直接降到150KB，加载快了不少。
压缩工具推荐两个：CSS用CSSNano，JS用Terser，都是在线的，复制代码进去点压缩就行。如果你用VS Code，装个“Minify”插件，右键就能压缩，特别方便。
还有个容易忽略的点：别引没用的代码。我见过有人为了用一个按钮样式，把整个Bootstrap都引进来，结果JS文件多了150KB。你可以用Chrome的“Coverage”工具（F12打开开发者工具，More Tools > Coverage）检查哪些代码没用到，把没用的删掉。我上次帮朋友改代码，发现他引的JS文件里60%的代码都没执行过，删完后体积直接砍半，加载快多了。
字体加载：别让文字“闪一下”，这个小细节我曾被设计师吐槽
最后说字体，很多人为了好看用自定义字体，结果页面加载时文字先空白，等字体加载完突然闪一下，体验很差。谷歌Web.dev上有篇文章提到，字体加载导致的“无样式文本闪烁（FOIT）”会让用户满意度降低20%。
解决办法很简单：用font-display: swap。在CSS的@font-face里加上这句，浏览器就会先显示系统默认字体，等自定义字体加载完再替换，不会空白。比如：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap; / 关键是这句 /
}
我之前做一个设计类网站，设计师坚持用特殊字体，不加swap时，页面打开后文字空白3秒，加了之后虽然字体换的时候闪一下，但至少用户能先看到内容，设计师也没再吐槽了。
交互流畅度：别让用户“卡壳”，这4个细节我曾因忽略返工3次
加载快了，交互不流畅也不行。你有没有遇到过这种情况：页面加载完了，点按钮没反应，或者滚动的时候文字跟着抖动？这都是交互性能问题。我之前做一个表单页面，因为没注意这些细节，被测试提了5个bug，返工了3天才解决，现在想起来还觉得亏。
减少“重排重绘”：浏览器“画画”别总让它重来，我用这个方法让按钮点击变流畅
你可以把浏览器渲染页面想象成画画：先画框（布局，确定元素位置大小），再上色（绘制，填充颜色文字），最后拼起来（合成，显示到屏幕）。“重排”就是重新画框，“重绘”就是重新上色，重排比重绘更费性能。
怎么减少重排？记住一个原则：别频繁改元素的宽高、位置、margin/padding。比如你想在用户点击按钮后改变元素样式，别直接改width、height，改用transform和opacity——这两个属性只触发合成，不重排重绘。我之前做一个点赞按钮，点击后要放大再缩小，一开始用width: 120%;，结果点击时页面卡一下，后来改成transform: scale(1.2);，瞬间流畅，因为transform是GPU加速的，浏览器处理起来更快。
还有个小技巧：批量操作DOM。比如你要改10个元素的样式，别一个个改，先把元素设为display: none，改完再显示出来，这样只重排一次。我之前循环改10个列表项的内容，没加这个处理，页面卡得像PPT，加上后就流畅多了。
事件委托：别给每个按钮绑事件，我曾因这个让页面多跑500行代码
如果页面上有很多按钮（比如列表里每个项都有删除按钮），你是不是给每个按钮都绑了onclick事件？我之前做一个待办清单，100个待办项就绑了100个事件，JS执行时间长，页面还卡。后来学了事件委托，只在父元素上绑一个事件，通过event.target判断点击的是哪个按钮，代码量从500行降到50行，执行速度快了10倍。
具体怎么做？比如ul里有10个li，每个li有个删除按钮：
// 别这样写（10个按钮绑10个事件）
document.querySelectorAll('li .delete').forEach(btn => {
btn.onclick = function() { / ... / };
});
// 这样写（只绑1个事件）
document.querySelector('ul').onclick = function(e) {
if (e.target.classList.contains('delete')) {
// 这里处理删除逻辑
}
};
这个方法不仅省代码，还能处理动态添加的元素（比如后来新增的li，不用再绑事件），我现在写列表必用事件委托，从没再卡过。
异步加载：别让JS“堵”住页面，我曾因这个让首屏加载慢了3秒
JS默认是同步加载的，浏览器遇到标签会停下来等JS下载执行完再继续渲染页面，这就是“阻塞渲染”。我之前做一个数据可视化页面，把所有JS都放里，结果JS加载执行花了3秒，页面一直白屏，后来把JS移到前，或者加async/defer属性，首屏加载快多了。
简单说：
async：JS下载的时候不阻塞渲染，下载完立即执行（顺序不确定） defer：JS下载不阻塞渲染，等HTML解析完再按顺序执行 我的经验是：如果JS不依赖DOM（比如统计代码），用async；如果依赖DOM（比如操作元素的代码），用defer或放前。谷歌开发者文档里也推荐这样做，能显著提升首屏加载速度。
骨架屏：让用户知道“页面没死”，我靠这个让用户等待容忍度提高50%
最后说骨架屏。你有没有遇到过页面加载时一片空白，用户不知道是卡了还是没加载？加个骨架屏（灰色占位框），用户就知道“正在加载，再等一下”，等待容忍度会高很多。
骨架屏不用复杂，用CSS画几个灰色块就行。比如文章列表的骨架屏：
<!-
多来几个item >
.skeleton-img { width: 100px; height: 80px; background: #eee; border-radius: 4px; }
.skeleton-text { height: 20px; background: #eee; margin-top: 10px; width: 80%; }
/ 加个动画让它“动起来” /
.skeleton-item { animation: loading 1.5s infinite; }
@keyframes loading { 0% { opacity: 0.6; } 50% { opacity: 0.3; } 100% { opacity: 0.6; } }
我去年给一个新闻APP写H5页面，加了骨架屏后，用户平均等待时间从3秒变成5秒（愿意多等2秒），后台数据显示，放弃加载的用户少了一半。这个方法简单有效，强烈 你给加载慢的页面加上。
你按这些方法改完后，可以用Chrome的Lighthouse（F12 > Lighthouse）测一下性能分，我每次改完都测，看着分数从不及格到90+，特别有成就感。如果你试了，欢迎回来告诉我你的页面快了多少，或者遇到什么问题，我们一起解决！
你是不是跟我第一次接触批处理时一样，心里嘀咕“这玩意儿听着挺技术，是不是得下载什么专门的软件啊？”其实真不用，我当时还傻乎乎去应用商店搜“批量重命名工具”，结果下了好几个要么带广告要么要付费，折腾半天还不如系统自带的批处理好用。批处理这东西啊，就藏在Windows系统里，跟计算器、记事本一样，是自带的功能，你完全不用额外装任何软件，省得占电脑内存，也不怕下载到病毒。
你就拿最常用的“记事本”来说，就是那个白色本子图标的程序，在开始菜单里输入“记事本”就能找到，不用特意去网上搜安装包。打开记事本，把代码复制粘贴进去，改改文件名规则，然后点“文件→另存为”，文件名后面加个“.bat”，比如“照片重命名.bat”，保存类型选“所有文件”，双击这个文件就能运行了。我上次帮我妈整理旅游照片，她一开始还担心“我哪会用这些啊，是不是很复杂？”结果我用记事本写好批处理文件，她双击一下，200多张照片就按“三亚_001”到“三亚_200”排好了，她看完直夸“比我一个个改快多了，还不用学新软件”。真的，这功能就是给咱们这种不想折腾的人设计的，轻量化又免费，小白也能直接上手。
如何用记事本创建批处理文件？
只需3步：打开记事本，输入重命名代码（文中会提供模板），点击“文件→另存为”，选择“所有文件”，文件名以“.bat” （如“重命名工具.bat”），编码选择“ANSI”即可。注意保存时要显示文件扩展名，避免保存成“.txt”格式。
批处理批量重命名支持哪些命名规则？比如编号、前缀或日期？
支持多种规则，常见的有：编号（如“旅行_001、旅行_002”，用代码“set num=1 & for %%a in (.jpg) do (ren “%%a” “旅行_%%03d.jpg” & set /a num+=1)”实现）、统一前缀（如给文档加“项目A_”前缀，代码“ren .docx “项目A_*.docx””）、日期命名（如按修改日期命名，结合%date%变量，需注意日期格式处理）。
运行批处理文件后，文件没有按预期重命名甚至消失了，怎么办？
首先不要慌！ 提前备份文件（复制一份到其他文件夹）。若未备份，可检查代码中的文件路径是否正确（默认处理批处理文件所在文件夹的文件）、命名规则是否有误（如编号格式错误）。若误删，可尝试在“回收站”找回；若重命名到其他位置，可用Windows搜索功能查找文件名关键词。
批处理批量重命名时，会自动覆盖重名文件吗？
默认不会。当重命名后的文件名与文件夹中已有文件重名时，系统会弹出“是否替换现有文件”的提示框，需手动确认。为避免误操作， 设计命名规则时避免重复（如用唯一编号），或在代码中加入“/y”参数（如“ren /y 原文件名 新文件名”）强制覆盖（慎用， 先测试）。
使用批处理批量重命名需要安装额外软件吗？
不需要。批处理是Windows系统自带功能，只需用系统自带的“记事本”编写代码，保存为“.bat”文件后双击即可运行，无需安装任何第三方软件，完全免费且轻量化，适合小白用户快速上手。
