1. 为什么第5天要跳出语法聊工程与安全1.1 学完HTML/CSS/JS之后你真正缺的是这些如果你已经坚持到第5天说明前四天里至少把HTML的常用标签、CSS的布局套路、JavaScript的基本语法和DOM操作都过了一遍。到了这个阶段很多人会陷入一个误区觉得接下来就该学某个框架或者去刷复杂算法。我的看法不太一样。Day 5这个节点恰恰是补“工程常识”的最佳时机。为什么因为你在写静态页面和简单交互时根本不会遇到这些问题请求参数怎么传才规范、接口被人刷怎么办、上传几百MB文件怎么不卡死、写好的页面怎么免费上线、面试官问的安全问题怎么答。这些问题在真实项目里几乎天天碰到但大部分教程前5天不会告诉你。所以今天这篇文章就是把前端开发里那些“课本不教、面试常问、实战必用”的内容串起来。你不用一次性精通但至少要建立完整的概念地图知道每个问题属于什么领域需要用什么工具解决。1.2 今天的学习目标拿到一张前端避险地图我给自己定Day 5目标的方式从来不是“学完某章”而是“能回答以下五类问题”前端防爬虫、防查看源码的手段有哪些哪些手段是真的有用的前后端传参的方式有几种什么时候用query、什么时候用body、为什么要签名大文件上传为什么会导致页面卡死Web Worker在里面扮演什么角色现在前端圈子最常用的AI辅助开发插件、组件库、框架分别是什么纯静态项目怎么免费部署上线面试官最常问的安全和性能问题该怎么答把这五类问题过一遍你对前端开发的认知就从“写页面”升级到了“做项目”。这个转变比多背十个API有价值得多。2. 前端安全防爬虫、防源码窃取、防接口滥用2.1 防止查看源码坦白说这层防护只是门锁经常有新人问怎么防止别人右键查看源码、怎么禁止打开开发者工具。说实话浏览器上的源码防护基本都是心理安慰。你可以在页面上做三件事禁用右键菜单、禁止选中文本、监听F12按键。// 禁用右键和快捷键简单粗暴版 document.addEventListener(contextmenu, (e) e.preventDefault()); document.addEventListener(keydown, (e) { if (e.key F12 || (e.ctrlKey e.shiftKey e.key I)) { e.preventDefault(); } });/* 禁止用户选中文本 */ body { user-select: none; -webkit-user-select: none; }这几行代码的定位是什么是给普通用户设置的一道门槛防止误触和多选但防御水平约等于给自行车上锁——防君子不防小人。任何人用无头浏览器、curl、甚至一个简单的页面源码查看器都能绕过。我见过很多客户把源码保护当作核心需求但我每次都会先劝一句真正有价值的数据和业务逻辑不应该指望前端隐藏而应该放在服务端做权限控制。2.2 代码混淆与Source Map生产环境必须关掉的开关真正值得做的是代码层面的加固。前端代码发布前一般会经过压缩和混淆把变量名变成a、b、c删除注释和多余空格。构建工具如Vite和Webpack在生产模式默认就会压缩JS。这一点没什么额外成本。容易被忽略的是Source Map。开发环境下Source Map是你调试的救命稻草浏览器能直接把压缩后的代码映射回源码。但如果你把Source Map文件一起部署到了生产环境等于把源代码打包送给爬虫工程师。正确做法是生产环境关闭Source Map或者只对内网发布。在Vite里这样控制// vite.config.js export default defineConfig({ build: { sourcemap: process.env.NODE_ENV development // 生产环境不生成Source Map } });注意代码混淆不等于加密。混淆后的JS依然可以被逆向还原只是成本上升了。安全领域的核心思想从来不是“绝对无法破解”而是“让破解成本高于收益”。2.3 接口防爬真正要下功夫的地方页面内容爬取和接口爬取是两码事。很多网站把接口设计成裸奔状态随便一个爬虫工具就能循环调用这对服务器资源和数据安全的威胁远大于查看源码。接口层常见的防护手段有四个组合拳请求频率限制同一个IP或Token在单位时间内的请求次数做阈值控制。动态Token登录后颁发短期Token过期必须刷新。请求签名给参数加Timestamp、Nonce和Signature防止参数被篡改和重放。验证码与行为校验对高频异常请求弹出滑块或点选验证码。请求签名是前后端配合的典型做法大致流程是前端把参数按照字典序排列拼接时间戳、随机数和约定密钥计算哈希得到签名服务端用同样规则校验。下面是一个简化版实现import CryptoJS from crypto-js; function generateSign(params, secretKey) { const timestamp Date.now(); const nonce Math.random().toString(36).slice(2); const sortedKeys Object.keys(params).sort(); const queryStr sortedKeys .map((key) ${key}${encodeURIComponent(params[key])}) .join(); const rawString ${queryStr}timestamp${timestamp}nonce${nonce}secretKey${secretKey}; const sign CryptoJS.SHA256(rawString).toString(); return { ...params, timestamp, nonce, sign }; }这里要特别提醒secretKey绝不能硬编码在前端代码里否则抓包就能扒出来。实战中密钥一般由服务端下发或者用短期Token拼接用户的会话标识代替。前端的sign更多是防止“裸接口被批量调用”真正的深度防御必须依赖服务端的安全策略。另外爬虫检测通常在服务端做行为分析从访问频率、User-Agent、Cookie一致性、操作路径等维度判断这些就超出纯前端的范畴了。3. 前端传参规范别让请求裸奔3.1 传参的四种姿势各自有各自的场景前端和后端交互参数往哪儿放是有约定俗成规范的。很多新人容易把所有参数一股脑拼到URL问号后面这在参数少、非敏感的查询场景下没问题但滥用会引起一连串麻烦。Path参数/api/users/1024适合标识资源ID语义清晰。Query参数/api/users?page1pageSize20适合筛选、分页、排序。Body参数POST /api/users请求体里放JSON适合提交表单、创建或更新资源。Header参数Authorization: Bearer xxx适合放认证信息、客户端版本、设备标识等。选择逻辑很简单操作资源用POSTBody获取资源用GETQuery资源定位用Path认证信息不进URL。有一个细节要知道GET请求的Query参数会出现在浏览器历史记录、服务器日志和Referer里所以密码、Token这类敏感数据绝不能出现在URL中必须走Header或Body。3.2 前端校验的边界格式校验是礼貌语义校验是后端的事前端不要不传参也不能只传参不校验。一个合格的前端会在提交前做基础格式校验邮箱是否合法、手机号位数、必填项是否为空、密码长度是否达标。这层校验的意义是提升用户体验让用户当场改而不是等服务器报错。但千万别把前端校验当作安全防线。任何前端校验都能被绕过直接构造请求就能打到你后端。所以前端做“格式校验”后端做“业务校验和权限校验”这是铁律。比如金额大于0、库存是否充足、当前用户是否有权限操作这些只能相信后端。3.3 为什么参数需要签名防止中途动手脚和重放试想一个场景前端提交了订单信息参数包含商品ID和数量如果接口没做签名保护攻击者抓包后把数量从1改成100再重新发送后端如果没有足够的校验就可能被薅羊毛。这是“参数篡改”的典型风险。请求签名的作用就是让参数“绑死”任何一位改动都会导致哈希值变化服务端一比对就发现不匹配、直接拒掉请求。Timestamp防止请求被“重放”——过了一段时间的请求签名失效。Nonce让每个请求唯一同一请求第二次到达也会被拒绝。签名不是前端独有的要求但前端负责把签这个名字算对、传对。我给小型项目做接口对接时常用的签名规则是参与签名的参数包含所有业务字段、时间戳、随机串按key字母排序后拼接再用约定的算法生成摘要。前后端各写一份规则严格对齐。这类代码不复杂但规则文档必须写清楚免得联调时对不上。4. 纯前端上传大文件Web Worker与分片上传实战4.1 为什么上传大文件会卡死页面上传一个2GB的视频如果不做任何处理你会发现页面卡得几乎无法点击进度条一顿一顿。原因是主线程被占满了读取文件内容、计算文件哈希、把整个文件塞进一个超大请求里每一步都在消耗主线程资源而浏览器的主线程还要同时处理点击事件、渲染进度条、响应滚动。一个2GB的文件浏览器要先把整个文件读进内存再一次性发送中间还可能因为网络断开导致全部重来。这种体验显然不合格。解决思路有两个关键词分片和Worker。4.2 Web Worker把重体力活挪到后台线程Web Worker就是浏览器提供给你的“后台小工”它可以在独立的线程里执行脚本不占用主线程。特别适合做文件哈希计算、数据解析、图片处理这类CPU密集型任务。主线程和Worker之间通过postMessage通信传数据、收结果界面始终是流畅的。下面是一个用Worker计算文件哈希的示例。在Vite项目里推荐通过new URL方式创建Worker方便模块化处理// hash-worker.js self.onmessage async (event) { const { file, chunkSize 2 * 1024 * 1024 } event.data; const totalChunks Math.ceil(file.size / chunkSize); // 增量计算哈希避免一次性读完整文件 const spark new SparkMD5.ArrayBuffer(); for (let i 0; i totalChunks; i) { const start i * chunkSize; const end Math.min(start chunkSize, file.size); const buffer await file.slice(start, end).arrayBuffer(); spark.append(buffer); // 这里可以回报进度self.postMessage({ type: hash-progress, percent }) } const hash spark.end(); self.postMessage({ type: hash-complete, hash }); };// main.js const worker new Worker(new URL(./hash-worker.js, import.meta.url), { type: module }); worker.postMessage({ file }); worker.onmessage (event) { if (event.data.type hash-complete) { console.log(文件指纹, event.data.hash); // 下一步拿这个hash去问后端能不能秒传 } };有人会问为什么不直接用crypto.subtle.digest(SHA-256, file)因为Web Crypto API一次只能处理一个ArrayBuffer对超大文件你得先整块读进内存反而容易爆内存。而SparkMD5支持分片追加一个分片一个分片地喂进去内存占用非常稳定。如果你的项目不介意引入依赖这是大文件哈希的首选方案。4.3 分片上传断点续传的核心玩法哈希算完之后正式的流水分三块询问秒传、并发上传分片、通知合并。秒传逻辑是把文件的hash发给后端后端查一下是否已经存在相同内容的文件。如果存在直接返回“上传完成”连传都不用传。所有网盘的“秒传”本质就是这个。如果不存在就开始分片。切片大小一般选1MB到10MB我习惯用2MB。每个分片带上序号和文件hash后端按序存储。前端控制并发数量通常同时只发3到5个分片不会把网络连接打爆。const CHUNK_SIZE 2 * 1024 * 1024; const CONCURRENCY 4; async function uploadFile(file, hash) { const totalChunks Math.ceil(file.size / CHUNK_SIZE); const tasks Array.from({ length: totalChunks }, (_, i) i); let index 0; async function worker() { while (index tasks.length) { const chunkIndex index; const start chunkIndex * CHUNK_SIZE; const end Math.min(start CHUNK_SIZE, file.size); const chunk file.slice(start, end); const formData new FormData(); formData.append(hash, hash); formData.append(chunkIndex, chunkIndex); formData.append(totalChunks, totalChunks); formData.append(chunk, chunk); await fetch(/api/upload/chunk, { method: POST, body: formData }); } } const workers Array.from({ length: CONCURRENCY }, () worker()); await Promise.all(workers); await fetch(/api/upload/merge, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ hash, totalChunks }) }); }这段代码虽然精简但已经把关键流程走通了。断点续传就是在上传前先把“哪些分片已存在”问一遍跳过多余分片。失败重试就是给每个分片加失败次数超限后停止整个任务提示用户点击重试。这些细节我建议你自己实现一遍面试聊到大文件上传就会游刃有余。5. 现代前端开发工具链AI辅助、插件与框架选型5.1 AI前端开发从代码补全到对话式编程现在的前端开发已经离不开AI辅助工具。以Codex系列、GitHub Copilot、通义灵码为代表的AI编程插件已经能做到“根据注释生成代码”“根据报错自动修复”“描述需求直接产出组件”。我个人的体感日常开发中AI生成代码的占比可能达到四成尤其是重复性高的表格页、表单页、CSS样式AI写出来的质量相当稳定。但我要泼一盆冷水AI生成代码的效率建立在你会判断的基础上。AI很容易生成“看起来对但实际有坑”的代码——比如忘了处理边界条件、使用了不兼容的API、忽略了性能问题。所以我的习惯是让AI干“搬砖”的活把重复样板代码做完核心逻辑和架构决策一定自己把关。你在学习阶段更要这样哪怕AI已经把代码写好了也要逐行读懂再提交。5.2 前端开发常用插件清单工欲善其事必先利其器。下面是我电脑里前端开发必装的几类插件按用途整理成表格供参考分类推荐插件作用代码规范ESLint检查语法问题和潜在错误统一代码风格格式化Prettier保存时自动格式化代码框架调试Vue官方插件 / React Developer Tools组件树查看、状态调试、性能分析AI辅助通义灵码 / Codex / GitHub Copilot代码补全、问答、批量修改浏览器辅助Octotree、JSON Viewer查看GitHub文件树、格式化JSON响应不要一次装太多插件推荐从ESLint、Prettier和一款AI辅助工具开始这三者能覆盖大部分日常需求。我见过不少新手装了十几个插件结果光配置冲突就折腾半天反而干扰了学习节奏。5.3 框架与组件库最新动态怎么选不踩坑热词里出现了“前端开发最新框架”和“前端组件库”我顺便梳理一下当前的主流选择。框架层面Vue 3.5、React 19、Next.js、Nuxt、Astro是目前讨论度最高的几类。如果你做中后台管理系统Vue或React加一个成熟组件库是最稳的组合如果你做内容型网站Astro这类偏静态的工具能带来很好的性能体验。组件库的选型我目前比较推荐的几个Element PlusVue 3官方生态最成熟的组件库中后台首选。Ant DesignReact生态最全的组件库适合复杂企业级应用。Arco Design字节跳动开源颜值高、交互细腻值得关注。Naive UI基于TypeScript主题定制能力很强适合对样式要求高的团队。有个热词叫“hzero前端开发”它属于企业级开发框架层面的东西主要用在中后台定制化开发场景能接触到它的前端工程师通常都在做大型企业系统。你现阶段不必深究知道存在这类更重的解决方案即可。选型建议就一句话先用一个覆盖度最广的组件库撑起开发速度等业务复杂了再考虑定制。6. 纯前端项目的免费部署与面试自检6.1 静态托管的本质构建产物扔上去纯前端项目部署这件事很多人觉得神秘其实本质就是“在服务器上放一个静态文件目录让浏览器能访问到”。你写的Vue或React项目经过构建会生成一个dist目录里面是HTML、CSS、JS文件。把这个目录传到任意静态托管平台项目就上线了。免费部署的渠道不少我实际用过比较顺手的Gitee Pages国内访问速度快适合个人项目展示操作简单实名认证后就能用。腾讯云CloudBase静态托管提供静态网站托管能力免费额度对个人足够部署流程自动化程度高。GitHub Pages老牌免费托管适合开源项目主页首次使用需要了解一些仓库配置。选择时建议优先考虑国内访问友好的平台不然项目部署完了自己访问都费劲调试心态会很崩。这个“坑”我踩过好几次分享给你避免同类问题。6.2 部署实操以Gitee Pages为例下面是一套可以“抄作业”的部署流程适合Vite构建的纯前端项目在Gitee上新建一个仓库把代码推送上去。本地执行npm run build确认dist目录生成。在仓库页面的“服务”菜单里找到“Gitee Pages”选择部署目录为dist点击启动。第一次使用需要先完成实名认证部署成功后平台会给你一个专项域名打开即是线上项目。这里有一个高频坑前端路由用了history模式后刷新页面就会404。解决方法是让平台支持配置SPA回退把未匹配路径重定向到index.html如果平台不支持就改用hash模式路由代价是URL里多个#但对静态托管最友好。这份经验也经常出现在面试的场景题里。6.3 Day 5自测题面试官可能这样问结合热词里的“前端面试题”我整理了几道Day 5阶段你应该能答上来的问题参考答案要点放在括号中前端能完全防止别人查看源码吗不能浏览器环境决定源码必须下发到客户端只能增加难度。防接口爬虫有哪些手段频率限制、动态Token、请求签名、验证码、行为分析。GET和POST传参的区别语义上GET适合查询、POST适合提交URL传参会进日志和Referer敏感信息必须走Body或Header。为什么大文件上传要分片避免一次性读取占满内存、减少断线重传成本、支持并发提速和断点续传。Web Worker能解决什么问题把计算密集型任务移到独立线程避免阻塞主线程渲染。生产环境需要Source Map吗不需要部署Source Map等于公开源码只留给开发调试用。选组件库时考虑哪些维度团队技术栈、覆盖业务场景、可定制性、维护活跃度、文档质量。静态部署后刷新404是为什么history模式路由需要服务器回退配置纯静态托管下可改hash路由。如果你能不看答案说出八成以上今天的知识吸收就算及格了。剩下两成大概率是你还没实际写过不要焦虑照着前面的代码敲一遍立即就通了。6.4 把今天的内容沉淀成一个迷你项目最后给一个学习动作建议不要只看不动手。找一个作业比如拆解热词里提到的“黑马程序员前端vue项目《ihrm人力资源后台管理》”这类中后台项目思路做一个简化版包含一个带登录Token的请求封装、一份防爬设计和实施说明、一个基于Worker分片上传的组件、部署到免费平台。这个小项目的价值在于所有知识点都是被“用”了一遍而不是“看”了一遍。做完之后你对前端开发的整体理解会和第4天完全不一样。就我个人经验入门阶段的瓶颈往往不是语法学得不够多而是不知道知识点之间怎么串起来。第5天到第10天最重要的任务就是把“点”连成“线”把“线”织成“面”。我没有给你堆大量新API而是选择把安全、传参、性能、工具链、部署这五件真实项目里躲不开的事讲透就是因为这五件事能帮你建立对前端工程师日常工作的真实认知。下次再遇到好看的网站你会下意识看一眼接口怎么调、资源怎么加载、部署在哪个平台——这时候你就不再是只会写页面的初学者了。