莱特摩比的一面之缘(前端经验)

合集 - 有意思的(104)

1.使用递归的方式实现数组、对象的深拷贝2023-08-302.js获取url的参数2023-09-043.弹框组件el-tree+vue3必坑指南2023-09-044.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-055.浏览器解析html2023-09-056.浏览器渲染HTML2023-09-057.Object.entries()2023-09-058.vue实现虚拟dom转换成真是dom的原理2023-09-059.全局封装组件处理并发请求不连续的loading2023-09-0610.为什么vue数组下标修改监听不到2023-09-0711.vue里表单验证的v-model.number的坑2023-09-0812.有意思的css2023-09-0913.js原生语音转文字2023-09-0914.js手写一个call2023-10-1415.js手写一个apply2023-10-1416. 手写一个 bind 方法2023-10-1417.js寄生组合式继承2023-10-1418.react中的useState修改状态获取最新状态值2023-10-1519.函数柯里化js2023-10-2020.axios请求中断_下载中断和下载进度2023-10-2021.axios请求重试_核心原理2023-10-2022.axios请求重试_axios-retry插件2023-10-2023.虚拟列表-渲染 10 万条数据2023-10-2124.vue-office 组件2023-10-2125.threejs2023-10-2226.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-2427.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-2428.threejs基本函数2023-10-2529.二分查找算法2023-10-2630.js判断字符串是否连贯2023-10-2631.世界坐标系和模型坐标系2023-10-2832.设置车模型中每个小物体 castShadow = true2023-11-0433.Vue3 echarts 组件化使用 resizeObserver2023-11-0534.网页验证码的作用 *网页中几种常见验证码2023-11-0735.多个装饰器一起es6装饰器2023-11-0736.flex属性2023-11-0737.移动端兼容问题2023-11-0738.那什么是URL、URI、URN？2023-11-0739.threejs的坐标渲染和着色2023-11-1040.着色器2023-11-1041.基于 three.js 加载器分别加载模型2023-11-1042.echarts自适应大屏方案 亲测有用2023-11-1643.有趣的工具2023-11-1744.关于threejs中鼠标左右移动，左动看右边，右动看左边2023-11-1745.有趣的知识点threejs2023-11-1846.uniapp底层跨端原理2023-11-2247.防止XSS（跨站脚本攻击）漏洞2023-11-2248.启动vite和electron项目配置多个主进程2023-11-2349.margin-bottom:-1px无效的问题2023-11-2450.九宫格css2023-11-2451.css伪类选择器2023-11-2452.uniapp关于uni.getUserProfile的使用2023-11-3053.uniapp获取用户信息2023-12-0454.在项目中使用UEditor碰到的几个问题2023-12-0455.一维数组转二位数组2023-12-1056.使用此函数对数组进行分块，并在最后一组添加特定的值2023-12-1057.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1158.阅读时间缓存（快应用）2023-12-2859.uniapp中OnShow获取缓存2024-01-1060.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-1161.width:100%与width:auto区别2024-01-1562.leetcode1047字符串反复去重（栈）2024-01-1563.由于在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea></span><time class="current-collection-publish-date" title="2024年01月21日 18:52" datetime="2024-01-21 18:52">2024-01-21</time></a><a class="current-collection-item current-collection-link clickable" data-serial="64" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17980127"><span class="current-collection-item-serial">64.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="记录一次uniapp使用scrollview">记录一次uniapp使用scrollview</span><time class="current-collection-publish-date" title="2024年01月22日 15:17" datetime="2024-01-22 15:17">2024-01-22</time></a><a class="current-collection-item current-collection-link clickable" data-serial="65" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17980619"><span class="current-collection-item-serial">65.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="微前端(矩阵项目)代码将单个文件合并到指定分支">微前端(矩阵项目)代码将单个文件合并到指定分支</span><time class="current-collection-publish-date" title="2024年01月22日 17:50" datetime="2024-01-22 17:50">2024-01-22</time></a><a class="current-collection-item current-collection-link clickable" data-serial="66" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17985130"><span class="current-collection-item-serial">66.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="推荐一个炫酷爆炸例子">推荐一个炫酷爆炸例子</span><time class="current-collection-publish-date" title="2024年01月24日 17:20" datetime="2024-01-24 17:20">2024-01-24</time></a><a class="current-collection-item current-collection-link clickable" data-serial="67" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17985173"><span class="current-collection-item-serial">67.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="思维导图推荐包">思维导图推荐包</span><time class="current-collection-publish-date" title="2024年01月24日 17:26" datetime="2024-01-24 17:26">2024-01-24</time></a><a class="current-collection-item current-collection-link clickable" data-serial="68" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17985194"><span class="current-collection-item-serial">68.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="自适应高度的过渡">自适应高度的过渡</span><time class="current-collection-publish-date" title="2024年01月24日 17:31" datetime="2024-01-24 17:31">2024-01-24</time></a><a class="current-collection-item current-collection-link clickable" data-serial="69" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17992683"><span class="current-collection-item-serial">69.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="自定义滚动条边角">自定义滚动条边角</span><time class="current-collection-publish-date" title="2024年01月28日 11:53" datetime="2024-01-28 11:53">2024-01-28</time></a><a class="current-collection-item current-collection-link clickable" data-serial="70" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17994745"><span class="current-collection-item-serial">70.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="实现下划线动画">实现下划线动画</span><time class="current-collection-publish-date" title="2024年01月29日 16:03" datetime="2024-01-29 16:03">2024-01-29</time></a><a class="current-collection-item current-collection-link clickable" data-serial="71" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/17999499"><span class="current-collection-item-serial">71.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="js不同类型比较">js不同类型比较</span><time class="current-collection-publish-date" title="2024年01月31日 16:12" datetime="2024-01-31 16:12">2024-01-31</time></a><a class="current-collection-item current-collection-link clickable" data-serial="72" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18003466"><span class="current-collection-item-serial">72.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="css">css</span><time class="current-collection-publish-date" title="2024年02月02日 16:52" datetime="2024-02-02 16:52">2024-02-02</time></a><a class="current-collection-item current-collection-link clickable" data-serial="73" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18019064"><span class="current-collection-item-serial">73.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="sse">sse</span><time class="current-collection-publish-date" title="2024年02月18日 12:00" datetime="2024-02-18 12:00">2024-02-18</time></a><a class="current-collection-item current-collection-link clickable" data-serial="74" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18020677"><span class="current-collection-item-serial">74.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。">ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。</span><time class="current-collection-publish-date" title="2024年02月19日 11:08" datetime="2024-02-19 11:08">2024-02-19</time></a><a class="current-collection-item current-collection-link clickable" data-serial="75" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18020954"><span class="current-collection-item-serial">75.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="前端scale负数表示翻转">前端scale负数表示翻转</span><time class="current-collection-publish-date" title="2024年02月19日 14:02" datetime="2024-02-19 14:02">2024-02-19</time></a><a class="current-collection-item current-collection-link clickable" data-serial="76" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18020972"><span class="current-collection-item-serial">76.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="关于小说阅读前端翻页插件推荐turn.js">关于小说阅读前端翻页插件推荐turn.js</span><time class="current-collection-publish-date" title="2024年02月19日 14:08" datetime="2024-02-19 14:08">2024-02-19</time></a><a class="current-collection-item current-collection-link clickable" data-serial="77" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18021412"><span class="current-collection-item-serial">77.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="数组扁平化">数组扁平化</span><time class="current-collection-publish-date" title="2024年02月19日 16:29" datetime="2024-02-19 16:29">2024-02-19</time></a><a class="current-collection-item current-collection-link clickable" data-serial="78" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18022540"><span class="current-collection-item-serial">78.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="Vue-Plugin-HiPrint">Vue-Plugin-HiPrint</span><time class="current-collection-publish-date" title="2024年02月20日 10:32" datetime="2024-02-20 10:32">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="79" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18022554"><span class="current-collection-item-serial">79.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="好玩的vue组件">好玩的vue组件</span><time class="current-collection-publish-date" title="2024年02月20日 10:37" datetime="2024-02-20 10:37">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="80" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18022917"><span class="current-collection-item-serial">80.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="DOMRect对象">DOMRect对象</span><time class="current-collection-publish-date" title="2024年02月20日 13:44" datetime="2024-02-20 13:44">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="81" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18023183"><span class="current-collection-item-serial">81.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="js中关于return和if条件处理">js中关于return和if条件处理</span><time class="current-collection-publish-date" title="2024年02月20日 15:14" datetime="2024-02-20 15:14">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="82" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18023465"><span class="current-collection-item-serial">82.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="关于文心一言不能打开F12开发者工具">关于文心一言不能打开F12开发者工具</span><time class="current-collection-publish-date" title="2024年02月20日 16:38" datetime="2024-02-20 16:38">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="83" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18023518"><span class="current-collection-item-serial">83.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="js文字处理两端展示中间省略号">js文字处理两端展示中间省略号</span><time class="current-collection-publish-date" title="2024年02月20日 16:52" datetime="2024-02-20 16:52">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="84" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18023555"><span class="current-collection-item-serial">84.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="[popover, select] el-popover内有select的时候在选择后会自动关闭">[popover, select] el-popover内有select的时候在选择后会自动关闭</span><time class="current-collection-publish-date" title="2024年02月20日 17:03" datetime="2024-02-20 17:03">2024-02-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="85" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18034236"><span class="current-collection-item-serial">85.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="说一下flex的属性">说一下flex的属性</span><time class="current-collection-publish-date" title="2024年02月26日 14:17" datetime="2024-02-26 14:17">2024-02-26</time></a><a class="current-collection-item current-collection-link clickable" data-serial="86" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18034728"><span class="current-collection-item-serial">86.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="vue3中404路由匹配规则">vue3中404路由匹配规则</span><time class="current-collection-publish-date" title="2024年02月26日 16:59" datetime="2024-02-26 16:59">2024-02-26</time></a><a class="current-collection-item current-collection-link clickable" data-serial="87" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18037395"><span class="current-collection-item-serial">87.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="shape-outside">shape-outside</span><time class="current-collection-publish-date" title="2024年02月27日 17:42" datetime="2024-02-27 17:42">2024-02-27</time></a><a class="current-collection-item current-collection-link clickable" data-serial="88" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18040121"><span class="current-collection-item-serial">88.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="createRange表示文档中的一个范围——用于js判断文字添加省略号情况">createRange表示文档中的一个范围——用于js判断文字添加省略号情况</span><time class="current-collection-publish-date" title="2024年02月28日 13:43" datetime="2024-02-28 13:43">2024-02-28</time></a><a class="current-collection-item current-collection-link clickable" data-serial="89" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/articles/18066417"><span class="current-collection-item-serial">89.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="uniapp+vue3 使用list触底+下拉">uniapp+vue3 使用list触底+下拉</span><time class="current-collection-publish-date" title="2024年03月11日 16:19" datetime="2024-03-11 16:19">2024-03-11</time></a><a class="current-collection-item current-collection-link clickable" data-serial="90" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/articles/18067913"><span class="current-collection-item-serial">90.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="diff算法vue">diff算法vue</span><time class="current-collection-publish-date" title="2024年03月12日 11:22" datetime="2024-03-12 11:22">2024-03-12</time></a><a class="current-collection-item current-collection-link clickable" data-serial="91" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18080653"><span class="current-collection-item-serial">91.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="动态修改manifest.json">动态修改manifest.json</span><time class="current-collection-publish-date" title="2024年03月18日 16:12" datetime="2024-03-18 16:12">2024-03-18</time></a><a class="current-collection-item current-collection-link clickable" data-serial="92" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18084928"><span class="current-collection-item-serial">92.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="记录一下大小写导致的问题">记录一下大小写导致的问题</span><time class="current-collection-publish-date" title="2024年03月20日 12:00" datetime="2024-03-20 12:00">2024-03-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="93" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18104016"><span class="current-collection-item-serial">93.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="微信小程序关于小说类使用官方阅读器">微信小程序关于小说类使用官方阅读器</span><time class="current-collection-publish-date" title="2024年03月29日 15:54" datetime="2024-03-29 15:54">2024-03-29</time></a><a class="current-collection-item current-collection-link clickable" data-serial="94" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18131069"><span class="current-collection-item-serial">94.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="VS Code侧边栏的“资源管理器”丢了">VS Code侧边栏的“资源管理器”丢了</span><time class="current-collection-publish-date" title="2024年04月12日 14:05" datetime="2024-04-12 14:05">2024-04-12</time></a><a class="current-collection-item current-collection-link clickable" data-serial="95" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/18342056"><span class="current-collection-item-serial">95.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="nestjs中服务引入控制器和模块的作用">nestjs中服务引入控制器和模块的作用</span><time class="current-collection-publish-date" title="2024年08月04日 18:25" datetime="2024-08-04 18:25">2024-08-04</time></a><a class="current-collection-item current-collection-link clickable" data-serial="96" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/19895312"><span class="current-collection-item-serial">96.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="「分包异步化」+「分包预下载」">「分包异步化」+「分包预下载」</span><time class="current-collection-publish-date" title="2026年04月20日 15:15" datetime="2026-04-20 15:15">04-20</time></a><a class="current-collection-item current-collection-link clickable" data-serial="97" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/19999595"><span class="current-collection-item-serial">97.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="Opacity 与 RGBA 的本质区别">Opacity 与 RGBA 的本质区别</span><time class="current-collection-publish-date" title="2026年05月09日 09:45" datetime="2026-05-09 09:45">05-09</time></a><a class="current-collection-item current-collection-link clickable" data-serial="98" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/20001660"><span class="current-collection-item-serial">98.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="VS Code 里 I18n Ally 突然不显示中文的排查记录">VS Code 里 I18n Ally 突然不显示中文的排查记录</span><time class="current-collection-publish-date" title="2026年05月09日 14:02" datetime="2026-05-09 14:02">05-09</time></a><a class="current-collection-item current-collection-link clickable" data-serial="99" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/20003123"><span class="current-collection-item-serial">99.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="node_modules删除快得多的方案">node_modules删除快得多的方案</span><time class="current-collection-publish-date" title="2026年05月09日 16:06" datetime="2026-05-09 16:06">05-09</time></a><a class="current-collection-item current-collection-link clickable" data-serial="100" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/20032257"><span class="current-collection-item-serial">100.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="时间轴排班看板组件-思路">时间轴排班看板组件-思路</span><time class="current-collection-publish-date" title="2026年05月13日 14:56" datetime="2026-05-13 14:56">05-13</time></a><div class="current-collection-item current" data-serial="101" aria-roledescription="listitem"><span class="current-collection-item-serial">101.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="莱特摩比的一面之缘(前端经验)">莱特摩比的一面之缘(前端经验)</span><time class="current-collection-publish-date" title="2026年05月16日 23:20" datetime="2026-05-16 23:20">05-16</time></div><a class="current-collection-item current-collection-link clickable" data-serial="102" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/21037575"><span class="current-collection-item-serial">102.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="浏览器通知是怎么做到的？前端实现桌面消息提醒">浏览器通知是怎么做到的？前端实现桌面消息提醒</span><time class="current-collection-publish-date" title="2026年07月02日 14:18" datetime="2026-07-02 14:18">07-02</time></a><a class="current-collection-item current-collection-link clickable" data-serial="103" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/21426420"><span class="current-collection-item-serial">103.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="Flutter Android 收款语音播报">Flutter Android 收款语音播报</span><time class="current-collection-publish-date" title="2026年07月13日 19:39" datetime="2026-07-13 19:39">07-13</time></a><a class="current-collection-item current-collection-link clickable" data-serial="104" aria-roledescription="listitem" href="https://www.cnblogs.com/zsnhweb/p/21776892"><span class="current-collection-item-serial">104.</span><span class="current-collection-item-title-prefix"></span><span class="current-collection-item-title " title="Flutter iOS 发布全流程指南：Windows+安卓开发者也能看懂的AppStore上架实战">Flutter iOS 发布全流程指南：Windows+安卓开发者也能看懂的AppStore上架实战</span><time class="current-collection-publish-date" title="2026年07月22日 14:24" datetime="2026-07-22 14:24">07-22</time></a></div><div class="current-collection-footer current-collection-collapse-button-wrapper"><div class="current-collection-collapse-button clickable"><span>收起</span><div class="current-collection-arrow icon-arrow"></div></div></div></div> <blockquote> <p>这篇不是“面试题答案合集”，而是一次高级前端面试复盘。</p> <p>如果只把这些问题背下来，下一场面试换个问法还是会慌；但如果能看懂它们背后的能力模型，你会发现：CSS、请求、Nginx、Docker、Linux、安全、产品判断、算法题，其实都在问同一件事：你是不是已经从“能写页面的人”，成长为“能把前端系统负责到底的人”。</p> </blockquote> <h2 id="tid-nMYnpF" tid="tid-nMYnpF">0. 先说结论：五年前端高级岗到底在考什么？<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>这次问题看起来很散：</p> <ul> <li>CSS 动画、渐变、三角形、新视口单位；</li> <li>Fetch、Axios、XMLHttpRequest；</li> <li>Nginx、Docker、Linux 命令；</li> <li>注册流程里是否应该强制用户上传头像；</li> <li>CSRF、XSS、点击劫持；</li> <li>假进度条算法；</li> <li>为什么前端会被问后端和部署。</li> </ul> <p>但这些题不是随机的。它们背后对应的是一个五年前端高级工程师的能力地图。</p> <div class="table-wrapper"><table> <thead> <tr> <th>能力</th> <th>面试题表象</th> <th>真正考察</th> </tr> </thead> <tbody> <tr> <td>页面能力</td> <td>CSS 动画、渐变、三角形、视口单位</td> <td>你是否理解 CSS 的渲染、布局和移动端坑点</td> </tr> <tr> <td>网络能力</td> <td>Fetch、Axios、XHR</td> <td>你是否理解浏览器请求、错误处理、跨域、凭证</td> </tr> <tr> <td>工程交付</td> <td>Nginx、Docker、Linux</td> <td>你是否能把项目从本地开发送到线上</td> </tr> <tr> <td>后端协作</td> <td>鉴权、BFF、接口流程</td> <td>你是否理解数据从页面到服务端再回到页面的完整链路</td> </tr> <tr> <td>安全意识</td> <td>CSRF、XSS、Clickjacking</td> <td>你是否知道前端写法会不会给系统埋雷</td> </tr> <tr> <td>产品判断</td> <td>注册时强制上传头像</td> <td>你是否能从转化率、体验和业务目标之间做取舍</td> </tr> <tr> <td>算法建模</td> <td>虚假进度条</td> <td>你是否能把一个体验问题抽象成一个可控模型</td> </tr> </tbody> </table></div> <p>所以，真正的高级前端不是“所有题都背过”，而是能在每个问题后面回答三层：</p> <ol> <li><strong>这个问题的原理是什么？</strong></li> <li><strong>真实项目里会怎么落地？</strong></li> <li><strong>它有哪些风险、边界和取舍？</strong></li> </ol> <p>下面就按这个思路重新梳理。</p> <h2 id="tid-QbTajx" tid="tid-QbTajx">1. CSS：不是背属性，而是理解“浏览器怎么画”<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>CSS 面试题很容易被误解为“考记忆”。比如问动画属性，很多人会马上开始背：</p> <code-box id="code-rwtdfr"><button boxid="code-rwtdfr" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-rwtdfr pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-rwtdfr" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">animation-name</span> <span class="hljs-attribute">animation-duration</span> <span class="hljs-attribute">animation-timing-function</span> <span class="hljs-attribute">animation-delay</span> ... </code></pre></code-box> <p>这当然要知道，但高级一点的回答不能只停在“有哪些属性”。你要把 CSS 看成浏览器绘制页面的语言：一个元素从初始样式到最终样式，中间怎么插值、怎么铺背景、怎么裁剪、怎么适配移动端视口，这些才是核心。</p> <h3 id="tid-QZyYzd" tid="tid-QZyYzd">1.1 CSS 动画：记住一条时间线<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>CSS 动画由两部分组成：</p> <ul> <li><code>@keyframes</code>：定义动画过程中有哪些关键状态；</li> <li><code>animation-*</code>：把这段关键帧动画挂到某个元素上，并告诉浏览器怎么播放。</li> </ul> <p>一个最小例子：</p> <code-box id="code-sRGCks"><button boxid="code-sRGCks" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-sRGCks pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-sRGCks" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">@keyframes</span> slideIn { <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(-<span class="hljs-number">24px</span>); <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-tag">to</span> { <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">0</span>); <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>; } } <span class="hljs-selector-class">.toast</span> { <span class="hljs-attribute">animation</span>: slideIn <span class="hljs-number">240ms</span> ease-out both; } </code></pre></code-box> <p>这段代码里真正发生的是：</p> <ol> <li>浏览器看到 <code>.toast</code> 要播放 <code>slideIn</code>；</li> <li>动画总时长是 <code>240ms</code>；</li> <li>速度曲线是 <code>ease-out</code>，也就是开始快、结束慢；</li> <li><code>both</code> 表示动画前后都保留关键帧对样式的影响。</li> </ol> <p>可以用一句话记住 <code>animation</code>：</p> <blockquote> <p>谁动、动多久、怎么动、等多久、动几次、往哪动、结束后留不留、现在跑不跑。</p> </blockquote> <p>对应属性如下：</p> <div class="table-wrapper"><table> <thead> <tr> <th>属性</th> <th>作用</th> <th>常见值</th> </tr> </thead> <tbody> <tr> <td><code>animation-name</code></td> <td>使用哪个 <code>@keyframes</code></td> <td><code>slideIn</code>、<code>none</code></td> </tr> <tr> <td><code>animation-duration</code></td> <td>一个周期多久</td> <td><code>200ms</code>、<code>2s</code></td> </tr> <tr> <td><code>animation-timing-function</code></td> <td>速度曲线</td> <td><code>linear</code>、<code>ease</code>、<code>ease-in-out</code>、<code>cubic-bezier()</code>、<code>steps()</code></td> </tr> <tr> <td><code>animation-delay</code></td> <td>延迟多久开始</td> <td><code>0s</code>、<code>300ms</code></td> </tr> <tr> <td><code>animation-iteration-count</code></td> <td>播放次数</td> <td><code>1</code>、<code>3</code>、<code>infinite</code></td> </tr> <tr> <td><code>animation-direction</code></td> <td>播放方向</td> <td><code>normal</code>、<code>reverse</code>、<code>alternate</code>、<code>alternate-reverse</code></td> </tr> <tr> <td><code>animation-fill-mode</code></td> <td>动画前后是否保留关键帧样式</td> <td><code>none</code>、<code>forwards</code>、<code>backwards</code>、<code>both</code></td> </tr> <tr> <td><code>animation-play-state</code></td> <td>播放或暂停</td> <td><code>running</code>、<code>paused</code></td> </tr> <tr> <td><code>animation-timeline</code></td> <td>动画进度由什么时间线驱动</td> <td><code>auto</code>、<code>scroll()</code>、<code>view()</code></td> </tr> </tbody> </table></div> <p>很多旧资料会漏掉 <code>animation-timeline</code>。这是近几年 CSS 滚动驱动动画里会遇到的属性。它允许动画不再只跟“时间”走，而是跟滚动进度或元素进入视口的进度走。</p> <p>普通时间动画：</p> <code-box id="code-kZMPfS"><button boxid="code-kZMPfS" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-kZMPfS pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-kZMPfS" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.card</span> { <span class="hljs-attribute">animation</span>: fadeIn <span class="hljs-number">300ms</span> ease-out both; } </code></pre></code-box> <p>滚动驱动动画的思路：</p> <code-box id="code-CR85NN"><button boxid="code-CR85NN" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-CR85NN pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-CR85NN" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.progress-bar</span> { <span class="hljs-attribute">transform-origin</span>: left center; <span class="hljs-attribute">animation</span>: grow linear both; <span class="hljs-attribute">animation</span>-timeline: <span class="hljs-built_in">scroll</span>(); } <span class="hljs-keyword">@keyframes</span> grow { <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scaleX</span>(<span class="hljs-number">0</span>); } <span class="hljs-selector-tag">to</span> { <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scaleX</span>(<span class="hljs-number">1</span>); } } </code></pre></code-box> <p>面试回答可以这样说：</p> <blockquote> <p>CSS 动画本质是浏览器在一段时间线里，根据 <code>@keyframes</code> 和 timing function 对样式做插值。传统动画默认跟文档时间线走，现代 CSS 还可以通过 <code>animation-timeline</code> 让动画跟滚动进度走。项目里我会优先动画 <code>transform</code> 和 <code>opacity</code>，因为它们更容易走合成层，避免频繁触发布局。</p> </blockquote> <p>这里有两个加分点：</p> <ul> <li>不要只说属性，要说“时间线”和“插值”；</li> <li>不要随便动画 <code>width</code>、<code>height</code>、<code>top</code>、<code>left</code>，复杂页面里容易触发布局计算。</li> </ul> <h3 id="tid-wBjjkh" tid="tid-wBjjkh">1.2 CSS 渐变：背景是图片，文字和边框只是裁剪方式不同<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>CSS 渐变的记忆点很简单：</p> <blockquote> <p>渐变不是颜色，渐变在 CSS 里更像一张由浏览器生成的图片。</p> </blockquote> <p>所以你经常会看到它出现在 <code>background</code>、<code>background-image</code>、<code>border-image</code> 里。</p> <h4 id="背景渐变" tid="tid-D62nQH">背景渐变<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>线性渐变：</p> <code-box id="code-jW85Tz"><button boxid="code-jW85Tz" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-jW85Tz pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-jW85Tz" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.banner</span> { <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">90deg</span>, <span class="hljs-number">#0ea5e9</span>, <span class="hljs-number">#22c55e</span>); } </code></pre></code-box> <p>径向渐变：</p> <code-box id="code-fXxpeJ"><button boxid="code-fXxpeJ" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-fXxpeJ pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-fXxpeJ" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.spotlight</span> { <span class="hljs-attribute">background</span>: <span class="hljs-built_in">radial-gradient</span>(circle at center, <span class="hljs-number">#f97316</span>, <span class="hljs-number">#111827</span>); } </code></pre></code-box> <p>线性渐变像“从一个方向刷过去”，径向渐变像“从一个点向外扩散”。</p> <h4 id="文字渐变" tid="tid-xyA4Yc">文字渐变<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>文字渐变的关键不是“给文字设置渐变色”，而是：</p> <ol> <li>给元素设置渐变背景；</li> <li>把背景裁剪到文字形状上；</li> <li>让文字自身颜色透明。</li> </ol> <code-box id="code-eQSF5j"><button boxid="code-eQSF5j" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-eQSF5j pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-eQSF5j" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.gradient-text</span> { <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">90deg</span>, <span class="hljs-number">#0ea5e9</span>, <span class="hljs-number">#22c55e</span>); <span class="hljs-attribute">background-clip</span>: text; -webkit-<span class="hljs-attribute">background-clip</span>: text; <span class="hljs-attribute">color</span>: transparent; } </code></pre></code-box> <p>记忆方式：</p> <blockquote> <p>字本身没颜色，真正有颜色的是背后的背景；文字只是变成了一块“镂空模板”。</p> </blockquote> <h4 id="渐变边框" tid="tid-M7Q3MW">渐变边框<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>最直接的方式是 <code>border-image</code>：</p> <code-box id="code-FXFwFj"><button boxid="code-FXFwFj" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-FXFwFj pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-FXFwFj" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.panel</span> { <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid transparent; <span class="hljs-attribute">border-image</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">90deg</span>, <span class="hljs-number">#0ea5e9</span>, <span class="hljs-number">#22c55e</span>) <span class="hljs-number">1</span>; } </code></pre></code-box> <p>但它有一个常见坑：<code>border-image</code> 和圆角配合不理想，<code>border-radius</code> 不会像普通边框那样自然裁切边框图片。</p> <p>实际项目里更常用的是“双背景 + 裁剪”：</p> <code-box id="code-8ytexs"><button boxid="code-8ytexs" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-8ytexs pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-8ytexs" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.gradient-border</span> { <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid transparent; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">12px</span>; <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">#ffffff</span>, <span class="hljs-number">#ffffff</span>) padding-box, <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">90deg</span>, <span class="hljs-number">#0ea5e9</span>, <span class="hljs-number">#22c55e</span>) border-box; } </code></pre></code-box> <p>这段代码的含义是：</p> <ul> <li>第一层白色背景只铺到 <code>padding-box</code>，也就是内容和内边距区域；</li> <li>第二层渐变背景铺到 <code>border-box</code>；</li> <li>边框本身透明，于是露出第二层渐变。</li> </ul> <p>也可以用伪元素实现：</p> <code-box id="code-35PneP"><button boxid="code-35PneP" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-35PneP pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-35PneP" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.gradient-border</span> { <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">12px</span>; <span class="hljs-attribute">background</span>: <span class="hljs-number">#ffffff</span>; } <span class="hljs-selector-class">.gradient-border</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>; <span class="hljs-attribute">position</span>: absolute; inset: -<span class="hljs-number">2px</span>; <span class="hljs-attribute">z-index</span>: -<span class="hljs-number">1</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">14px</span>; <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">90deg</span>, <span class="hljs-number">#0ea5e9</span>, <span class="hljs-number">#22c55e</span>); } </code></pre></code-box> <p>面试回答可以这样说：</p> <blockquote> <p>渐变本质上是 CSS 生成的图片。背景渐变直接放在 <code>background-image</code>；文字渐变靠 <code>background-clip: text</code>；边框渐变可以用 <code>border-image</code>，但圆角场景我更倾向用双背景裁剪或者伪元素，因为可控性更好。</p> </blockquote> <h3 id="tid-fyM28J" tid="tid-fyM28J">1.3 纯 CSS 倒三角：利用边框交界处的斜切<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>CSS 三角形不是玄学。它来自一个很简单的事实：</p> <blockquote> <p>元素宽高为 0 时，四个方向的边框会挤在一起，边框交界处天然形成斜线。</p> </blockquote> <p>倒三角：</p> <code-box id="code-EsNxcc"><button boxid="code-EsNxcc" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-EsNxcc pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-EsNxcc" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.triangle-down</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">border-left</span>: <span class="hljs-number">8px</span> solid transparent; <span class="hljs-attribute">border-right</span>: <span class="hljs-number">8px</span> solid transparent; <span class="hljs-attribute">border-top</span>: <span class="hljs-number">8px</span> solid <span class="hljs-number">#111827</span>; } </code></pre></code-box> <p>如果要画向上的三角形，就让 <code>border-bottom</code> 有颜色：</p> <code-box id="code-Ry5rxK"><button boxid="code-Ry5rxK" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Ry5rxK pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-Ry5rxK" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.triangle-up</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">border-left</span>: <span class="hljs-number">8px</span> solid transparent; <span class="hljs-attribute">border-right</span>: <span class="hljs-number">8px</span> solid transparent; <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">8px</span> solid <span class="hljs-number">#111827</span>; } </code></pre></code-box> <p>记忆方法：</p> <blockquote> <p>想让箭头指向哪里，就给相反方向的 border 上色。</p> </blockquote> <p>向下指，用 <code>border-top</code> 上色；向上指，用 <code>border-bottom</code> 上色；向左指，用 <code>border-right</code> 上色；向右指，用 <code>border-left</code> 上色。</p> <p>真实项目里，CSS 三角形常见于：</p> <ul> <li>tooltip 箭头；</li> <li>下拉菜单小尖角；</li> <li>气泡组件；</li> <li>select 或 popover 的装饰箭头。</li> </ul> <p>不过现在如果项目里已经有图标库，简单箭头不一定要用 CSS 三角形。能用图标时，用图标往往更直观、可维护。</p> <h3 id="tid-mXyerf" tid="tid-mXyerf">1.4 新视口单位：<code>vh</code> 的坑，<code>svh/lvh/dvh</code> 的答案<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>移动端全屏布局里，<code>100vh</code> 是一个经典坑。</p> <p>很多人以为：</p> <code-box id="code-nthhWk"><button boxid="code-nthhWk" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-nthhWk pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-nthhWk" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.page</span> { <span class="hljs-attribute">height</span>: <span class="hljs-number">100vh</span>; } </code></pre></code-box> <p>就等于“占满当前可见屏幕”。但在移动端浏览器里，地址栏和底部工具栏会动态展开、收起。老的 <code>vh</code> 往往更接近“大视口”的高度，也就是浏览器工具栏收起后的高度。于是工具栏展开时，<code>100vh</code> 的内容可能被遮住，或者页面出现意外滚动。</p> <p>为了解这个问题，现代 CSS 增加了几组视口单位：</p> <div class="table-wrapper"><table> <thead> <tr> <th>单位</th> <th>含义</th> <th>可以怎么记</th> </tr> </thead> <tbody> <tr> <td><code>svh</code> / <code>svw</code></td> <td>small viewport，工具栏展开时的小视口</td> <td>最保守，不会被工具栏遮住</td> </tr> <tr> <td><code>lvh</code> / <code>lvw</code></td> <td>large viewport，工具栏收起时的大视口</td> <td>最大高度，接近传统 <code>vh</code> 的移动端表现</td> </tr> <tr> <td><code>dvh</code> / <code>dvw</code></td> <td>dynamic viewport，当前动态视口</td> <td>随工具栏展开/收起变化</td> </tr> </tbody> </table></div> <p>更形象一点：</p> <ul> <li><code>100svh</code>：浏览器 UI 最占地方时，还能看到的高度；</li> <li><code>100lvh</code>：浏览器 UI 最少时，页面能用到的最大高度；</li> <li><code>100dvh</code>：现在这一刻，用户真实可见的高度。</li> </ul> <p>实战建议：</p> <code-box id="code-ZCCXNi"><button boxid="code-ZCCXNi" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-ZCCXNi pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-css" highlighted="true" boxid="code-ZCCXNi" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-css highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-selector-class">.fullscreen</span> { <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100vh</span>; <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100</span>dvh; } </code></pre></code-box> <p>为什么先写 <code>100vh</code> 再写 <code>100dvh</code>？</p> <p>因为旧浏览器不认识 <code>dvh</code> 时，会保留前面的 <code>vh</code>；现代浏览器认识 <code>dvh</code>，后面的声明覆盖前面的声明。</p> <p>但不要把 <code>dvh</code> 当成无脑万能药。它会随着浏览器 UI 变化而变，某些复杂页面在滚动过程中可能发生高度重新计算。大多数 H5 首屏、全屏弹窗、移动端页面可以优先用 <code>dvh</code>，但如果你希望高度稳定、不跟着工具栏变化，<code>svh</code> 可能更合适。</p> <p>面试回答可以这样说：</p> <blockquote> <p>移动端 <code>100vh</code> 的问题是它不一定等于当前可见区域，地址栏和工具栏动态变化会导致遮挡或滚动。现在可以用 <code>svh/lvh/dvh</code> 区分小视口、大视口和动态视口。全屏弹窗我一般用 <code>100dvh</code>，如果元素绝对不能被工具栏遮挡，可以考虑 <code>100svh</code>。</p> </blockquote> <h2 id="tid-pD7XMm" tid="tid-pD7XMm">2. 请求：Fetch、Axios、XHR 不是谁高级，而是谁替你做了什么<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>很多面试会问：</p> <blockquote> <p>Fetch、Axios、XMLHttpRequest 有什么区别？</p> </blockquote> <p>如果只答“Fetch 是 Promise，XHR 是回调，Axios 是第三方库”，只能算入门。高级一点要说清楚：浏览器原生能力、错误语义、数据转换、取消、超时、拦截器、跨域凭证。</p> <h3 id="tid-6zFdR3" tid="tid-6zFdR3">2.1 XMLHttpRequest：老，但仍然是很多库的底层<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p><code>XMLHttpRequest</code> 是早期浏览器里的请求对象。它可以发请求、监听状态变化、上传下载进度，但 API 风格偏底层。</p> <p>一个简化版：</p> <code-box id="code-NTEGGW"><button boxid="code-NTEGGW" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-NTEGGW pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-NTEGGW" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">const</span> xhr = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>(); xhr.<span class="hljs-title function_">open</span>(<span class="hljs-string">"GET"</span>, <span class="hljs-string">"/api/user"</span>); xhr.<span class="hljs-property">onreadystatechange</span> = <span class="hljs-function">() =></span> { <span class="hljs-keyword">if</span> (xhr.<span class="hljs-property">readyState</span> !== <span class="hljs-title class_">XMLHttpRequest</span>.<span class="hljs-property">DONE</span>) <span class="hljs-keyword">return</span>; <span class="hljs-keyword">if</span> (xhr.<span class="hljs-property">status</span> >= <span class="hljs-number">200</span> && xhr.<span class="hljs-property">status</span> < <span class="hljs-number">300</span>) { <span class="hljs-keyword">const</span> data = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(xhr.<span class="hljs-property">responseText</span>); <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data); } <span class="hljs-keyword">else</span> { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">"Request failed:"</span>, xhr.<span class="hljs-property">status</span>); } }; xhr.<span class="hljs-title function_">send</span>(); </code></pre></code-box> <p>它的问题不是不能用，而是：</p> <ul> <li>回调式 API 写复杂流程不够舒服；</li> <li>JSON 解析要自己做；</li> <li>错误处理要自己封装；</li> <li>拦截器、统一错误提示、Token 注入等都要再包一层。</li> </ul> <h3 id="tid-b5DpfZ" tid="tid-b5DpfZ">2.2 Fetch：现代、原生、但不等于“自动好用”<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p><code>fetch</code> 是浏览器原生的 Promise API。</p> <code-box id="code-sEj4p5"><button boxid="code-sEj4p5" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-sEj4p5 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-sEj4p5" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">requestJSON</span>(<span class="hljs-params">url, options = {}</span>) { <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(url, options); <span class="hljs-keyword">if</span> (!response.<span class="hljs-property">ok</span>) { <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`HTTP <span class="hljs-subst">${response.status}</span>`</span>); } <span class="hljs-keyword">return</span> response.<span class="hljs-title function_">json</span>(); } </code></pre></code-box> <p>这里最关键的点是：</p> <blockquote> <p><code>fetch</code> 只会在网络错误、请求被取消、URL scheme 不合法等场景 reject；服务器返回 <code>404</code>、<code>500</code> 时，Promise 仍然会 resolve，只是 <code>response.ok</code> 是 <code>false</code>。</p> </blockquote> <p>也就是说，下面这段代码并不会因为接口返回 <code>500</code> 自动进入 <code>catch</code>：</p> <code-box id="code-FbFrBN"><button boxid="code-FbFrBN" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-FbFrBN pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-FbFrBN" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">try</span> { <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">"/api/user"</span>); <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>(); } <span class="hljs-keyword">catch</span> (error) { <span class="hljs-comment">// 只有网络层错误等才会到这里</span> } </code></pre></code-box> <p>更稳妥的写法是：</p> <code-box id="code-66BirH"><button boxid="code-66BirH" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-66BirH pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-66BirH" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">http</span>(<span class="hljs-params">url, options = {}</span>) { <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(url, { <span class="hljs-attr">headers</span>: { <span class="hljs-string">"Content-Type"</span>: <span class="hljs-string">"application/json"</span>, ...options.<span class="hljs-property">headers</span>, }, ...options, }); <span class="hljs-keyword">const</span> contentType = response.<span class="hljs-property">headers</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">"content-type"</span>) || <span class="hljs-string">""</span>; <span class="hljs-keyword">const</span> isJSON = contentType.<span class="hljs-title function_">includes</span>(<span class="hljs-string">"application/json"</span>); <span class="hljs-keyword">const</span> body = isJSON ? <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>() : <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">text</span>(); <span class="hljs-keyword">if</span> (!response.<span class="hljs-property">ok</span>) { <span class="hljs-keyword">const</span> message = <span class="hljs-keyword">typeof</span> body === <span class="hljs-string">"object"</span> && body?.<span class="hljs-property">message</span> ? body.<span class="hljs-property">message</span> : <span class="hljs-string">`HTTP <span class="hljs-subst">${response.status}</span>`</span>; <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(message); } <span class="hljs-keyword">return</span> body; } </code></pre></code-box> <p>如果要支持超时，可以用 <code>AbortController</code>：</p> <code-box id="code-br3Mrn"><button boxid="code-br3Mrn" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-br3Mrn pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-br3Mrn" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">fetchWithTimeout</span>(<span class="hljs-params">url, options = {}, timeout = <span class="hljs-number">10000</span></span>) { <span class="hljs-keyword">const</span> controller = <span class="hljs-keyword">new</span> <span class="hljs-title class_">AbortController</span>(); <span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> controller.<span class="hljs-title function_">abort</span>(), timeout); <span class="hljs-keyword">try</span> { <span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(url, { ...options, <span class="hljs-attr">signal</span>: controller.<span class="hljs-property">signal</span>, }); } <span class="hljs-keyword">finally</span> { <span class="hljs-built_in">clearTimeout</span>(timer); } } </code></pre></code-box> <p>面试时最好点出：</p> <ul> <li>Fetch 是原生 Promise API；</li> <li>HTTP 错误状态不会自动 reject；</li> <li>JSON 要手动 <code>response.json()</code>；</li> <li>超时和取消要借助 <code>AbortController</code>；</li> <li>拦截器、统一错误处理需要自己封装。</li> </ul> <h3 id="tid-jM2ZGR" tid="tid-jM2ZGR">2.3 Axios：不是“更高级”，而是工程封装更完整<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>Axios 的价值在于它把工程里高频需求封装好了：</p> <ul> <li>默认按 2xx 判断成功，非 2xx 进入错误分支；</li> <li>自动转换 JSON 响应；</li> <li>支持请求/响应拦截器；</li> <li>支持 <code>timeout</code>；</li> <li>支持 <code>AbortController</code> 取消；</li> <li>支持浏览器和 Node.js 环境；</li> <li>浏览器里常见底层适配器可以是 XHR，也支持 fetch adapter。</li> </ul> <p>典型封装：</p> <code-box id="code-QJSxAa"><button boxid="code-QJSxAa" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-QJSxAa pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-QJSxAa" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">"axios"</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> client = axios.<span class="hljs-title function_">create</span>({ <span class="hljs-attr">baseURL</span>: <span class="hljs-string">"/api"</span>, <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span>, <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>, }); client.<span class="hljs-property">interceptors</span>.<span class="hljs-property">request</span>.<span class="hljs-title function_">use</span>(<span class="hljs-function">(<span class="hljs-params">config</span>) =></span> { <span class="hljs-keyword">const</span> token = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">"token"</span>); <span class="hljs-keyword">if</span> (token) { config.<span class="hljs-property">headers</span>.<span class="hljs-property">Authorization</span> = <span class="hljs-string">`Bearer <span class="hljs-subst">${token}</span>`</span>; } <span class="hljs-keyword">return</span> config; }); client.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>( <span class="hljs-function">(<span class="hljs-params">response</span>) =></span> response.<span class="hljs-property">data</span>, <span class="hljs-function">(<span class="hljs-params">error</span>) =></span> { <span class="hljs-keyword">if</span> (error.<span class="hljs-property">response</span>?.<span class="hljs-property">status</span> === <span class="hljs-number">401</span>) { <span class="hljs-comment">// 跳登录、刷新 token、清本地状态等</span> } <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error); } ); </code></pre></code-box> <p>但是“Axios 一定是首选”这个说法不够严谨。</p> <p>更准确的说法是：</p> <ul> <li>项目简单、追求零依赖：Fetch 足够；</li> <li>中大型业务系统、需要拦截器、统一错误处理、超时、取消、跨端一致性：Axios 很省心；</li> <li>框架已有请求层，例如 React Query、SWR、Nuxt、Next、内部 SDK：优先遵守项目约定。</li> </ul> <h3 id="tid-bKSeY3" tid="tid-bKSeY3">2.4 三者对比<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <div class="table-wrapper"><table> <thead> <tr> <th>对比点</th> <th>XMLHttpRequest</th> <th>Fetch</th> <th>Axios</th> </tr> </thead> <tbody> <tr> <td>类型</td> <td>浏览器原生对象</td> <td>浏览器原生 API</td> <td>第三方库</td> </tr> <tr> <td>异步模型</td> <td>回调</td> <td>Promise</td> <td>Promise</td> </tr> <tr> <td>4xx/5xx</td> <td>不会自动当异常</td> <td>不会自动 reject</td> <td>默认 reject</td> </tr> <tr> <td>JSON</td> <td>手动 <code>JSON.parse</code></td> <td>手动 <code>response.json()</code></td> <td>默认转换</td> </tr> <tr> <td>超时</td> <td>可设置 <code>timeout</code></td> <td>需自己配 <code>AbortController</code></td> <td>内置 <code>timeout</code></td> </tr> <tr> <td>取消</td> <td><code>abort()</code></td> <td><code>AbortController</code></td> <td><code>AbortController</code></td> </tr> <tr> <td>拦截器</td> <td>无，需封装</td> <td>无，需封装</td> <td>内置</td> </tr> <tr> <td>上传进度</td> <td>支持</td> <td>标准 Fetch 上传进度支持有限</td> <td>浏览器环境支持进度回调</td> </tr> <tr> <td>Node 环境</td> <td>不适用</td> <td>Node 新版本可用</td> <td>支持</td> </tr> </tbody> </table></div> <p>面试回答可以这样说：</p> <blockquote> <p>XHR 是底层原生对象，能力完整但 API 老；Fetch 是现代原生 Promise API，但 HTTP 错误不会自动 reject，JSON、超时、拦截器都要自己封装；Axios 是第三方工程封装，默认错误语义、JSON 转换、拦截器、超时和取消更适合业务项目。选型不是谁高级，而是看项目是否需要统一请求层。</p> </blockquote> <h3 id="tid-Y6cC23" tid="tid-Y6cC23">2.5 跨域、Cookie、SameSite：请求题最容易追问到这里<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>如果接口需要 Cookie 鉴权，跨域请求不是前端单方面写一个 <code>withCredentials</code> 就完事了。</p> <p>Fetch 写法：</p> <code-box id="code-hpXW8y"><button boxid="code-hpXW8y" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-hpXW8y pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-hpXW8y" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-title function_">fetch</span>(<span class="hljs-string">"https://api.example.com/user"</span>, { <span class="hljs-attr">credentials</span>: <span class="hljs-string">"include"</span>, }); </code></pre></code-box> <p>Axios 写法：</p> <code-box id="code-kS2Ebf"><button boxid="code-kS2Ebf" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-kS2Ebf pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-kS2Ebf" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">axios.<span class="hljs-title function_">get</span>(<span class="hljs-string">"https://api.example.com/user"</span>, { <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>, }); </code></pre></code-box> <p>但后端也必须配合：</p> <code-box id="code-mTZkMk"><button boxid="code-mTZkMk" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-mTZkMk pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-mTZkMk" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Access-Control-Allow-Origin</span><span class="hljs-punctuation">: </span>https://www.example.com <span class="hljs-attribute">Access-Control-Allow-Credentials</span><span class="hljs-punctuation">: </span>true </code></pre></code-box> <p>注意：带凭证的 CORS 响应不能用：</p> <code-box id="code-yAWdik"><button boxid="code-yAWdik" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-yAWdik pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-yAWdik" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Access-Control-Allow-Origin</span><span class="hljs-punctuation">: </span>* </code></pre></code-box> <p>否则浏览器会拦截响应。</p> <p>Cookie 侧还要看属性：</p> <code-box id="code-C563bE"><button boxid="code-C563bE" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-C563bE pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-C563bE" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Set-Cookie</span><span class="hljs-punctuation">: </span>session=abc; Path=/; HttpOnly; Secure; SameSite=None </code></pre></code-box> <p>几个属性的含义：</p> <div class="table-wrapper"><table> <thead> <tr> <th>属性</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td><code>HttpOnly</code></td> <td>禁止 JavaScript 通过 <code>document.cookie</code> 读取，降低 XSS 偷 Cookie 的风险</td> </tr> <tr> <td><code>Secure</code></td> <td>只在 HTTPS 下发送 Cookie，本地 localhost 例外处理由浏览器决定</td> </tr> <tr> <td><code>SameSite=Lax</code></td> <td>大多数跨站子请求不带 Cookie，顶级导航 GET 仍可能携带</td> </tr> <tr> <td><code>SameSite=Strict</code></td> <td>更严格，跨站场景基本不带</td> </tr> <tr> <td><code>SameSite=None; Secure</code></td> <td>明确允许跨站发送，但必须配 <code>Secure</code></td> </tr> </tbody> </table></div> <p>面试里一句话总结：</p> <blockquote> <p>跨域带 Cookie 要三方都同意：前端设置 <code>credentials/include</code> 或 <code>withCredentials</code>，后端设置明确 Origin 和 <code>Access-Control-Allow-Credentials: true</code>，Cookie 自己的 <code>SameSite</code>、<code>Secure</code> 策略也不能拦。</p> </blockquote> <h2 id="tid-jQ8FEP" tid="tid-jQ8FEP">3. Nginx、Docker、Linux：前端上线不是把 dist 扔上去<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>高级前端被问 Nginx、Docker、Linux，并不是面试官“不讲武德”。因为前端项目最终不是停在 <code>npm run dev</code>，而是要上线、回滚、排障、缓存、代理、处理刷新 404。</p> <p>一条常见前端上线链路是：</p> <code-box id="code-78w8jZ"><button boxid="code-78w8jZ" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-78w8jZ pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-78w8jZ" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">代码提交 -> CI 安装依赖 -> npm run build -> 生成 dist -> Docker 构建镜像 -> Nginx 托管静态资源 -> 反向代理 API -> 部署到服务器/K8s -> 日志排障 </code></pre></code-box> <h3 id="tid-XYAGhG" tid="tid-XYAGhG">3.1 Nginx 配置：先理解三层结构<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>Nginx 配置通常是三层：</p> <code-box id="code-GbJTbh"><button boxid="code-GbJTbh" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-GbJTbh pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-GbJTbh" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">http</span> { <span class="hljs-section">server</span> { <span class="hljs-section">location</span> / { <span class="hljs-comment"># ...</span> } } } </code></pre></code-box> <ul> <li><code>http</code>：HTTP 服务整体配置；</li> <li><code>server</code>：一个虚拟主机，可以理解为一个站点；</li> <li><code>location</code>：匹配具体路径，并决定怎么处理请求。</li> </ul> <p>一个前端 SPA 项目常见配置：</p> <code-box id="code-32Ccw8"><button boxid="code-32Ccw8" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-32Ccw8 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-32Ccw8" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">server</span> { <span class="hljs-attribute">listen</span> <span class="hljs-number">80</span>; <span class="hljs-attribute">server_name</span> example.com; <span class="hljs-attribute">root</span> /usr/share/nginx/html; <span class="hljs-attribute">index</span> index.html; <span class="hljs-section">location</span> / { <span class="hljs-attribute">try_files</span> <span class="hljs-variable">$uri</span> <span class="hljs-variable">$uri</span>/ /index.html; } <span class="hljs-section">location</span> /api/ { <span class="hljs-attribute">proxy_pass</span> http://backend:8080/; <span class="hljs-attribute">proxy_set_header</span> Host <span class="hljs-variable">$host</span>; <span class="hljs-attribute">proxy_set_header</span> X-Real-IP <span class="hljs-variable">$remote_addr</span>; <span class="hljs-attribute">proxy_set_header</span> X-Forwarded-For <span class="hljs-variable">$proxy_add_x_forwarded_for</span>; <span class="hljs-attribute">proxy_set_header</span> X-Forwarded-Proto <span class="hljs-variable">$scheme</span>; } } </code></pre></code-box> <p>这里最重要的是 <code>try_files</code>：</p> <code-box id="code-XZ8zBF"><button boxid="code-XZ8zBF" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-XZ8zBF pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-XZ8zBF" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">try_files</span> <span class="hljs-variable">$uri</span> <span class="hljs-variable">$uri</span>/ /index.html; </code></pre></code-box> <p>含义是：</p> <ol> <li>先找请求路径对应的真实文件；</li> <li>再找对应目录；</li> <li>都找不到时，内部转发到 <code>/index.html</code>。</li> </ol> <p>为什么 SPA 需要它？</p> <p>因为 Vue Router / React Router 的很多路由其实是前端路由。比如用户刷新：</p> <code-box id="code-HkHB2E"><button boxid="code-HkHB2E" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-HkHB2E pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-HkHB2E" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">https://example.com/user/profile </code></pre></code-box> <p>服务器上未必真的有 <code>/user/profile</code> 这个文件。如果 Nginx 不回退到 <code>index.html</code>，就会 404。回到 <code>index.html</code> 后，前端路由接管页面渲染。</p> <h3 id="tid-C2ap6C" tid="tid-C2ap6C">3.2 <code>proxy_pass</code> 的尾斜杠是高频坑<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>很多人会写：</p> <code-box id="code-Dy3mSt"><button boxid="code-Dy3mSt" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Dy3mSt pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-Dy3mSt" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">location</span> /api/ { <span class="hljs-attribute">proxy_pass</span> http://backend:8080/; } </code></pre></code-box> <p>也有人写：</p> <code-box id="code-Gf4w32"><button boxid="code-Gf4w32" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Gf4w32 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-Gf4w32" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">location</span> /api/ { <span class="hljs-attribute">proxy_pass</span> http://backend:8080; } </code></pre></code-box> <p>这两个不完全一样。</p> <p>根据 Nginx 的规则：如果 <code>proxy_pass</code> 后面带 URI，那么匹配到的 <code>location</code> 部分会被替换掉；如果不带 URI，则原始请求 URI 通常会原样传给上游。</p> <p>举例：</p> <code-box id="code-2N3nJk"><button boxid="code-2N3nJk" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-2N3nJk pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-2N3nJk" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">location</span> /api/ { <span class="hljs-attribute">proxy_pass</span> http://backend:8080/; } </code></pre></code-box> <p>请求：</p> <code-box id="code-B7zCsY"><button boxid="code-B7zCsY" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-B7zCsY pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-B7zCsY" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">/api/users </code></pre></code-box> <p>转发给后端时通常变成：</p> <code-box id="code-eSZ77c"><button boxid="code-eSZ77c" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-eSZ77c pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-eSZ77c" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">/users </code></pre></code-box> <p>而：</p> <code-box id="code-BM3isz"><button boxid="code-BM3isz" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-BM3isz pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-BM3isz" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">location</span> /api/ { <span class="hljs-attribute">proxy_pass</span> http://backend:8080; } </code></pre></code-box> <p>请求：</p> <code-box id="code-KKs657"><button boxid="code-KKs657" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-KKs657 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-KKs657" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">/api/users </code></pre></code-box> <p>转发给后端通常仍是：</p> <code-box id="code-8EAC66"><button boxid="code-8EAC66" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-8EAC66 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-8EAC66" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">/api/users </code></pre></code-box> <p>所以面试时可以说：</p> <blockquote> <p><code>proxy_pass</code> 最容易踩坑的是尾部 URI。带 <code>/</code> 常常意味着把 <code>location</code> 匹配部分替换掉，不带 URI 则更接近原样转发。前后端联调时要跟后端确认接口实际路径，避免本地代理和线上代理行为不一致。</p> </blockquote> <h3 id="tid-c6Hd87" tid="tid-c6Hd87">3.3 静态资源缓存：入口不缓存，带 hash 的资源强缓存<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>前端打包后的文件常见这样：</p> <code-box id="code-XPW7Et"><button boxid="code-XPW7Et" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-XPW7Et pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-XPW7Et" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">dist/ index.html assets/ index.8f3a1c2.js style.7b91e4d.css </code></pre></code-box> <p><code>index.html</code> 是入口，它引用具体的 JS/CSS 文件。上线后如果旧的 <code>index.html</code> 被浏览器强缓存，用户可能一直加载旧资源。</p> <p>所以一般策略是：</p> <ul> <li><code>index.html</code> 不强缓存或短缓存；</li> <li>带内容 hash 的 JS/CSS/图片可以长缓存。</li> </ul> <p>示例：</p> <code-box id="code-s6j3nt"><button boxid="code-s6j3nt" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-s6j3nt pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-nginx" highlighted="true" boxid="code-s6j3nt" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-nginx highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-section">location</span> = /index.html { <span class="hljs-attribute">add_header</span> Cache-Control <span class="hljs-string">"no-cache"</span>; } <span class="hljs-section">location</span> /assets/ { <span class="hljs-attribute">expires</span> <span class="hljs-number">1y</span>; <span class="hljs-attribute">add_header</span> Cache-Control <span class="hljs-string">"public, immutable"</span>; } </code></pre></code-box> <p>面试时能说出这点，会明显比“我会配 Nginx”更像做过上线。</p> <h3 id="tid-Ge5AGe" tid="tid-Ge5AGe">3.4 Docker：前端项目常见多阶段构建<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>前端容器化常见做法：</p> <ol> <li>用 Node 镜像安装依赖并构建；</li> <li>用 Nginx 镜像承载构建产物；</li> <li>最终镜像不带完整 Node 依赖，体积更小。</li> </ol> <p>示例：</p> <code-box id="code-625W4Z"><button boxid="code-625W4Z" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-625W4Z pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-dockerfile" highlighted="true" boxid="code-625W4Z" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-dockerfile highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">FROM</span> node:<span class="hljs-number">20</span>-alpine AS build <span class="hljs-keyword">WORKDIR</span><span class="language-bash"> /app</span> <span class="hljs-keyword">COPY</span><span class="language-bash"> package*.json ./</span> <span class="hljs-keyword">RUN</span><span class="language-bash"> npm ci</span> <span class="hljs-keyword">COPY</span><span class="language-bash"> . .</span> <span class="hljs-keyword">RUN</span><span class="language-bash"> npm run build</span> <span class="hljs-keyword">FROM</span> nginx:<span class="hljs-number">1.27</span>-alpine <span class="hljs-keyword">COPY</span><span class="language-bash"> nginx.conf /etc/nginx/conf.d/default.conf</span> <span class="hljs-keyword">COPY</span><span class="language-bash"> --from=build /app/dist /usr/share/nginx/html</span> <span class="hljs-keyword">EXPOSE</span> <span class="hljs-number">80</span> </code></pre></code-box> <p>这里的关键点：</p> <ul> <li><code>npm ci</code> 更适合 CI 环境，依赖安装更可复现；</li> <li><code>dist</code> 是构建产物；</li> <li>Nginx 官方镜像默认静态目录常见是 <code>/usr/share/nginx/html</code>；</li> <li>多阶段构建能把构建环境和运行环境分开。</li> </ul> <p>面试回答可以这样说：</p> <blockquote> <p>前端 Dockerfile 一般用多阶段构建。第一阶段用 Node 安装依赖并执行 build，第二阶段用 Nginx 托管静态文件，只把 dist 和 Nginx 配置复制进去。这样镜像更小，运行环境也更干净。</p> </blockquote> <h3 id="tid-tindP7" tid="tid-tindP7">3.5 Linux 命令：别背全，按排障场景记<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>Linux 命令体系很大，面试时更重要的是能说出“排查问题时我怎么用”。</p> <h4 id="看目录和文件" tid="tid-nFhWyG">看目录和文件<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-65YT6b"><button boxid="code-65YT6b" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-65YT6b pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-bash" highlighted="true" boxid="code-65YT6b" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-bash highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-built_in">pwd</span> <span class="hljs-built_in">ls</span> -la <span class="hljs-built_in">cd</span> /path/to/project <span class="hljs-built_in">mkdir</span> -p logs/nginx <span class="hljs-built_in">cp</span> <span class="hljs-built_in">source</span> target <span class="hljs-built_in">mv</span> old-name new-name </code></pre></code-box> <p><code>rm -rf</code> 要格外谨慎。线上机器里，删除前最好先 <code>pwd</code>、<code>ls</code>、确认路径，不要在疲劳状态下执行危险命令。</p> <h4 id="看日志" tid="tid-W8DPEk">看日志<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-B34c8C"><button boxid="code-B34c8C" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-B34c8C pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-bash" highlighted="true" boxid="code-B34c8C" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-bash highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-built_in">tail</span> -n 100 app.log <span class="hljs-built_in">tail</span> -f app.log grep -i <span class="hljs-string">"error"</span> app.log </code></pre></code-box> <p>排查线上问题时经常是：</p> <code-box id="code-Ai2hTw"><button boxid="code-Ai2hTw" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Ai2hTw pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-bash" highlighted="true" boxid="code-Ai2hTw" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-bash highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-built_in">tail</span> -f /var/log/nginx/error.log </code></pre></code-box> <p>看 Nginx 是不是配置错、路径错、后端不可达。</p> <h4 id="看进程和端口" tid="tid-2z2zt4">看进程和端口<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-AYcri8"><button boxid="code-AYcri8" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-AYcri8 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-bash" highlighted="true" boxid="code-AYcri8" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-bash highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">ps aux | grep nginx top ss -tulnp </code></pre></code-box> <p><code>netstat</code> 很多老系统还在用，但新一些的 Linux 更推荐 <code>ss</code>。</p> <h4 id="看磁盘和内存" tid="tid-daWPXa">看磁盘和内存<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-eGcyPk"><button boxid="code-eGcyPk" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-eGcyPk pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-bash" highlighted="true" boxid="code-eGcyPk" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-bash highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-built_in">df</span> -h free -m </code></pre></code-box> <p>前端上线也可能被磁盘打爆，比如：</p> <ul> <li>日志没有滚动；</li> <li>Docker 镜像太多；</li> <li>构建缓存太大；</li> <li>静态资源历史版本没有清。</li> </ul> <h4 id="测接口" tid="tid-fHjaBH">测接口<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-GiACB5"><button boxid="code-GiACB5" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-GiACB5 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-bash" highlighted="true" boxid="code-GiACB5" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-bash highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">curl -I https://example.com curl https://example.com/api/health </code></pre></code-box> <p><code>curl -I</code> 只看响应头，常用于确认：</p> <ul> <li>状态码；</li> <li>缓存头；</li> <li>CORS 头；</li> <li>Nginx 是否命中预期配置。</li> </ul> <p>面试回答可以这样说：</p> <blockquote> <p>Linux 命令我不会按字母表背，而是按排障链路用：先 <code>curl</code> 看请求是否通，再 <code>ss</code> 看端口是否监听，再 <code>ps</code> 看进程，再 <code>tail -f</code> 看日志，再 <code>df/free</code> 看资源。这样能把命令和真实问题对应起来。</p> </blockquote> <h2 id="tid-DABsjX" tid="tid-DABsjX">4. 后端知识：前端不一定写后端，但必须懂链路<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>高级前端被问后端，通常不是要求你转岗后端，而是考你是否能理解系统边界。</p> <h3 id="tid-MMnPcW" tid="tid-MMnPcW">4.1 BFF：为什么前端会写一层 Node 服务？<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>BFF 是 Backend For Frontend，意思是“面向前端的后端”。</p> <p>它常见职责：</p> <ul> <li>聚合多个后端接口；</li> <li>裁剪字段，减少前端处理成本；</li> <li>做 SSR 或服务端渲染；</li> <li>做登录态透传；</li> <li>做接口兼容层；</li> <li>给不同端提供不同数据形态。</li> </ul> <p>比如页面要展示用户首页，需要：</p> <code-box id="code-rMNCr2"><button boxid="code-rMNCr2" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-rMNCr2 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-rMNCr2" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">GET /user GET /orders/recent GET /coupon/list GET /recommendations </code></pre></code-box> <p>如果前端直接调四个接口，会有：</p> <ul> <li>首屏请求多；</li> <li>错误处理分散；</li> <li>数据拼装都在客户端；</li> <li>弱网下体验差。</li> </ul> <p>BFF 可以提供：</p> <code-box id="code-6ne4NK"><button boxid="code-6ne4NK" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-6ne4NK pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-6ne4NK" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">GET /bff/home </code></pre></code-box> <p>由 Node 服务去聚合后端，再返回页面需要的数据。</p> <p>面试回答：</p> <blockquote> <p>BFF 不是为了炫技写 Node，而是把“前端页面需要的数据形态”和“后端领域服务的数据形态”解耦。它适合聚合接口、SSR、权限透传和多端差异化，但也会增加服务维护成本，所以不是所有项目都需要。</p> </blockquote> <h3 id="tid-StYFFt" tid="tid-StYFFt">4.2 鉴权：Cookie、Session、JWT 不要混着说<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>前端常见鉴权方式：</p> <h4 id="cookie--session" tid="tid-5cKktb">Cookie + Session<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>流程：</p> <ol> <li>用户登录；</li> <li>服务端创建 session；</li> <li>服务端通过 <code>Set-Cookie</code> 下发 session id；</li> <li>浏览器后续请求自动带 Cookie；</li> <li>服务端根据 session id 找用户身份。</li> </ol> <p>优点：</p> <ul> <li>前端不用手动保存 token；</li> <li>配合 <code>HttpOnly</code> 可以避免 JS 读取敏感 Cookie；</li> <li>服务端可以主动让 session 失效。</li> </ul> <p>缺点：</p> <ul> <li>依赖 Cookie；</li> <li>跨域、SameSite、CORS 配置更复杂；</li> <li>服务端要存 session 或使用共享存储。</li> </ul> <h4 id="jwt" tid="tid-4j6f8S">JWT<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>流程：</p> <ol> <li>用户登录；</li> <li>服务端签发 token；</li> <li>前端保存 token；</li> <li>请求时放到 <code>Authorization</code> Header；</li> <li>服务端验证签名和过期时间。</li> </ol> <code-box id="code-7xdaez"><button boxid="code-7xdaez" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-7xdaez pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-7xdaez" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Authorization</span><span class="hljs-punctuation">: </span>Bearer <token> </code></pre></code-box> <p>优点：</p> <ul> <li>服务端可以无状态校验；</li> <li>更适合跨端、开放 API；</li> <li>不强依赖浏览器 Cookie。</li> </ul> <p>缺点：</p> <ul> <li>token 一旦泄漏，在过期前可能被滥用；</li> <li>主动失效要额外做黑名单或版本号；</li> <li>放在 <code>localStorage</code> 会受到 XSS 风险影响。</li> </ul> <p>实际项目里没有绝对答案。很多系统会用：</p> <ul> <li>短期 access token；</li> <li>长期 refresh token；</li> <li>refresh token 放 <code>HttpOnly Cookie</code>；</li> <li>access token 放内存；</li> <li>配合刷新机制和服务端失效机制。</li> </ul> <p>面试回答：</p> <blockquote> <p>Cookie + Session 更偏服务端状态管理，浏览器自动携带 Cookie，但跨域和 CSRF 要注意；JWT 更偏无状态 token，适合跨端，但要考虑泄漏、过期和主动失效。前端不能只问“token 存哪里”，还要结合 XSS、CSRF、刷新机制和业务安全等级。</p> </blockquote> <h2 id="tid-TrQMJm" tid="tid-TrQMJm">5. 产品题：注册时强制上传头像并跳首页，合理吗？<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>这个问题非常像真实工作。</p> <p>需求是：</p> <blockquote> <p>用户注册时除了填写账号密码，还需要上传头像；注册完成后直接跳转到首页。</p> </blockquote> <p>初级回答可能是：</p> <blockquote> <p>做一个上传组件，注册接口带头像 URL，成功后 <code>router.push('/home')</code>。</p> </blockquote> <p>这只回答了“怎么做”，没有回答“该不该这么做”。</p> <h3 id="tid-Akb4nF" tid="tid-Akb4nF">5.1 先判断业务目标<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>注册流程的核心目标通常是降低转化漏斗损耗。</p> <p>每多一个必填项，就多一个流失点：</p> <code-box id="code-s4c3tM"><button boxid="code-s4c3tM" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-s4c3tM pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-s4c3tM" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">打开注册页 -> 填手机号/邮箱 -> 填验证码/密码 -> 上传头像 -> 等上传完成 -> 点注册 -> 进入首页 </code></pre></code-box> <p>如果头像不是业务强必要，强制上传会带来：</p> <ul> <li>用户没有准备头像；</li> <li>移动端相册权限弹窗增加阻力；</li> <li>上传失败导致注册失败；</li> <li>弱网下等待时间变长；</li> <li>用户还没体验产品价值，就先被要求完善资料。</li> </ul> <p>所以更合理的产品方案通常是：</p> <blockquote> <p>注册只收集最小必要信息，成功后进入首页，再通过新手引导、资料完善卡片、任务体系或个人中心提醒用户上传头像。</p> </blockquote> <h3 id="tid-chMXfD" tid="tid-chMXfD">5.2 如果业务强制要上传，前端怎么兜底？<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>如果业务就是要求头像必须有，那也要降低成本：</p> <ul> <li>提供默认头像；</li> <li>上传头像可裁剪但不强制复杂编辑；</li> <li>上传失败允许重试；</li> <li>注册按钮状态清楚；</li> <li>弱网下有进度反馈；</li> <li>后端接口要支持头像 URL；</li> <li>注册成功返回 token 和用户信息；</li> <li>首页首屏能立即显示用户头像。</li> </ul> <p>更稳的流程是：</p> <code-box id="code-yAcdAd"><button boxid="code-yAcdAd" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-yAcdAd pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-yAcdAd" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">选择头像 -> 前端本地校验文件类型/大小 -> 展示本地预览 -> 上传到文件服务 -> 得到 avatarUrl -> 提交注册信息 -> 保存登录态和用户信息 -> 跳转首页 </code></pre></code-box> <p>为什么建议“头像上传”和“注册提交”拆开？</p> <p>因为文件上传往往更慢、更容易失败。如果把文件和注册表单混在一个接口里：</p> <ul> <li>注册接口压力更大；</li> <li>失败原因不清楚；</li> <li>前端重试成本更高；</li> <li>后端职责不清晰。</li> </ul> <p>前端伪代码：</p> <code-box id="code-7xTAsQ"><button boxid="code-7xTAsQ" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-7xTAsQ pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-7xTAsQ" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleAvatarChange</span>(<span class="hljs-params">file</span>) { <span class="hljs-title function_">validateAvatar</span>(file); avatarPreview.<span class="hljs-property">value</span> = <span class="hljs-variable constant_">URL</span>.<span class="hljs-title function_">createObjectURL</span>(file); uploading.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>; <span class="hljs-keyword">try</span> { <span class="hljs-keyword">const</span> { url } = <span class="hljs-keyword">await</span> <span class="hljs-title function_">uploadAvatar</span>(file); form.<span class="hljs-property">avatarUrl</span> = url; } <span class="hljs-keyword">finally</span> { uploading.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>; } } <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleRegister</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">if</span> (uploading.<span class="hljs-property">value</span>) { <span class="hljs-title function_">showToast</span>(<span class="hljs-string">"头像仍在上传，请稍候"</span>); <span class="hljs-keyword">return</span>; } <span class="hljs-keyword">if</span> (!form.<span class="hljs-property">avatarUrl</span>) { form.<span class="hljs-property">avatarUrl</span> = <span class="hljs-variable constant_">DEFAULT_AVATAR_URL</span>; } <span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> <span class="hljs-title function_">register</span>({ <span class="hljs-attr">account</span>: form.<span class="hljs-property">account</span>, <span class="hljs-attr">password</span>: form.<span class="hljs-property">password</span>, <span class="hljs-attr">avatarUrl</span>: form.<span class="hljs-property">avatarUrl</span>, }); authStore.<span class="hljs-title function_">setToken</span>(result.<span class="hljs-property">token</span>); userStore.<span class="hljs-title function_">setUser</span>(result.<span class="hljs-property">user</span>); router.<span class="hljs-title function_">replace</span>(<span class="hljs-string">"/home"</span>); } </code></pre></code-box> <h3 id="tid-c57mtt" tid="tid-c57mtt">5.3 这个题的高级回答模板<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>可以这样答：</p> <blockquote> <p>我会先确认头像是否是注册成功的强必要条件。一般从转化率角度，不建议注册阶段强制上传头像，因为会增加漏斗流失，更好的方案是注册后进入首页再渐进式引导完善资料。如果业务强制要求，我会提供默认头像，并把上传流程做轻：本地校验、预览、独立上传、失败重试、注册时提交头像 URL。注册成功后保存 token 和用户信息，使用 <code>replace</code> 跳首页，避免用户返回注册页。</p> </blockquote> <p>这就是产品判断 + 工程落地 + 异常处理。</p> <h2 id="tid-eEnWSM" tid="tid-eEnWSM">6. Web 安全：高级前端必须能守住基本盘<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>Web 安全题不要答成“背概念”。你要围绕三件事说：</p> <ol> <li>攻击利用了浏览器什么机制？</li> <li>攻击流程是什么？</li> <li>前后端分别怎么防？</li> </ol> <p>这一节只讲原理和防御，不写可直接滥用的攻击载荷。</p> <h3 id="tid-sj6daW" tid="tid-sj6daW">6.1 XSS：攻击者让你的页面执行了不该执行的脚本<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>XSS，全称 Cross-Site Scripting，跨站脚本攻击。</p> <p>核心是：</p> <blockquote> <p>用户输入的数据，被当成可执行脚本插进页面里执行了。</p> </blockquote> <p>常见类型：</p> <div class="table-wrapper"><table> <thead> <tr> <th>类型</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td>存储型 XSS</td> <td>恶意内容被存到数据库，其他用户访问页面时触发</td> </tr> <tr> <td>反射型 XSS</td> <td>恶意内容从 URL 或请求参数进入响应页面</td> </tr> <tr> <td>DOM 型 XSS</td> <td>前端 JS 直接把不可信数据写入 DOM 导致执行</td> </tr> </tbody> </table></div> <p>典型风险：</p> <ul> <li>读取非 <code>HttpOnly</code> Cookie；</li> <li>读取本地存储 token；</li> <li>冒充用户发请求；</li> <li>修改页面内容诱导操作；</li> <li>劫持前端路由或表单。</li> </ul> <p>防御核心：</p> <h4 id="tid-SQehzG" tid="tid-SQehzG">1. 输出编码，而不是只做输入过滤<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>用户输入可以存，但输出到不同上下文时必须按上下文编码：</p> <ul> <li>HTML 文本节点：转义 <code><</code>、<code>></code>、<code>&</code> 等；</li> <li>HTML 属性：转义引号等；</li> <li>URL：校验协议，只允许 <code>http:</code>、<code>https:</code> 等安全协议；</li> <li>JavaScript 上下文：尽量避免把用户内容拼进脚本。</li> </ul> <p>在 Vue/React 里，默认插值一般会转义：</p> <code-box id="code-ffeJAs"><button boxid="code-ffeJAs" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-ffeJAs pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-jsx" highlighted="true" boxid="code-ffeJAs" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-jsx highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">function</span> <span class="hljs-title function_">Comment</span>(<span class="hljs-params">{ content }</span>) { <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>{content}<span class="hljs-tag"></<span class="hljs-name">p</span>></span></span>; } </code></pre></code-box> <p>但危险 API 要小心：</p> <code-box id="code-pdY5TC"><button boxid="code-pdY5TC" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-pdY5TC pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-jsx" highlighted="true" boxid="code-pdY5TC" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-jsx highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">function</span> <span class="hljs-title function_">Comment</span>(<span class="hljs-params">{ html }</span>) { <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">dangerouslySetInnerHTML</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">__html:</span> <span class="hljs-attr">html</span> }} /></span></span>; } </code></pre></code-box> <p>如果确实要渲染富文本，应该使用成熟的 HTML Sanitizer，并配置白名单标签和属性，而不是自己用正则过滤。</p> <h4 id="tid-r7ixSF" tid="tid-r7ixSF">2. Cookie 设置 <code>HttpOnly</code><button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-6xN2QG"><button boxid="code-6xN2QG" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-6xN2QG pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-6xN2QG" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Set-Cookie</span><span class="hljs-punctuation">: </span>session=abc; HttpOnly; Secure; SameSite=Lax </code></pre></code-box> <p><code>HttpOnly</code> 不能阻止 XSS 执行，但能降低 Cookie 被 JS 直接读取的风险。</p> <p>注意这句话很重要：</p> <blockquote> <p><code>HttpOnly</code> 防的是“读 Cookie”，不是防 XSS 本身。</p> </blockquote> <p>如果页面已经有 XSS，攻击脚本仍然可能以用户身份发请求。所以根源上还要做输出编码和 CSP。</p> <h4 id="tid-wbjRAs" tid="tid-wbjRAs">3. CSP 内容安全策略<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>CSP 可以限制页面能加载和执行哪些资源。</p> <p>示例：</p> <code-box id="code-EQjdT2"><button boxid="code-EQjdT2" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-EQjdT2 pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-EQjdT2" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Content-Security-Policy</span><span class="hljs-punctuation">: </span>default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self' </code></pre></code-box> <p>CSP 是防线之一，不是替代编码。</p> <p>面试回答：</p> <blockquote> <p>XSS 的本质是不可信数据进入页面后被浏览器当成脚本执行。防御上不能只靠输入过滤，关键是按输出上下文编码；富文本要用可靠 sanitizer；敏感 Cookie 设置 <code>HttpOnly</code>；再用 CSP 限制脚本来源。React/Vue 默认插值相对安全，但 <code>v-html</code>、<code>dangerouslySetInnerHTML</code> 这类能力必须谨慎。</p> </blockquote> <h3 id="tid-asYMJx" tid="tid-asYMJx">6.2 CSRF：攻击者借浏览器自动带 Cookie 的机制发请求<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>CSRF，全称 Cross-Site Request Forgery，跨站请求伪造。</p> <p>它利用的是：</p> <blockquote> <p>浏览器向某个站点发请求时，会自动带上该站点的 Cookie。</p> </blockquote> <p>流程可以这样理解：</p> <ol> <li>用户登录了网站 A；</li> <li>网站 A 通过 Cookie 识别用户；</li> <li>用户在未退出 A 的情况下访问了恶意网站 B；</li> <li>B 诱导浏览器向 A 发起某个操作请求；</li> <li>浏览器自动带上 A 的 Cookie；</li> <li>A 如果只看 Cookie，就可能误以为这是用户本人主动操作。</li> </ol> <p>CSRF 的关键不是“偷 Cookie”，而是“借 Cookie”。</p> <p>防御手段：</p> <h4 id="tid-p5Taai" tid="tid-p5Taai">1. 不要用 GET 做有副作用的操作<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>比如删除、转账、修改资料都不应该用 GET。</p> <code-box id="code-SfayWa"><button boxid="code-SfayWa" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-SfayWa pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-SfayWa" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">GET /delete?id=1 </code></pre></code-box> <p>这是很危险的设计。GET 应该尽量保持只读。</p> <h4 id="tid-Ha6J6Z" tid="tid-Ha6J6Z">2. CSRF Token<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>服务端生成随机 token，前端提交敏感请求时带上：</p> <code-box id="code-Cn3kSc"><button boxid="code-Cn3kSc" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Cn3kSc pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-Cn3kSc" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">X-CSRF-Token</span><span class="hljs-punctuation">: </span><token> </code></pre></code-box> <p>恶意第三方页面即使能让浏览器带 Cookie，也拿不到这个 token。</p> <h4 id="tid-apyJ6S" tid="tid-apyJ6S">3. SameSite Cookie<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-DiYsGw"><button boxid="code-DiYsGw" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-DiYsGw pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-DiYsGw" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Set-Cookie</span><span class="hljs-punctuation">: </span>session=abc; SameSite=Lax; Secure; HttpOnly </code></pre></code-box> <p><code>SameSite</code> 可以减少跨站请求携带 Cookie 的机会。</p> <p>但它不是银弹。复杂系统里，OWASP 也建议不要只依赖 SameSite，而要结合 CSRF Token 等策略。</p> <h4 id="tid-bYkkrS" tid="tid-bYkkrS">4. 校验 Origin / Referer<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>后端可以校验请求来源：</p> <code-box id="code-zYJT7G"><button boxid="code-zYJT7G" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-zYJT7G pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-zYJT7G" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">Origin: https://www.example.com </code></pre></code-box> <p>如果来源不是可信域名，就拒绝敏感操作。</p> <p>面试回答：</p> <blockquote> <p>CSRF 利用的是浏览器自动携带 Cookie，而不是直接偷 Cookie。防御上首先避免 GET 做副作用操作；对敏感请求加 CSRF Token；Cookie 设置 SameSite；后端再校验 Origin 或 Referer。SameSite 是重要防线，但不能替代 token，尤其是高风险业务。</p> </blockquote> <h3 id="tid-wj5jT2" tid="tid-wj5jT2">6.3 Clickjacking：用户以为点 A，实际点了 B<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>Clickjacking，点击劫持。</p> <p>核心是：</p> <blockquote> <p>攻击者把你的页面嵌进透明或伪装的 iframe，让用户误点你的页面按钮。</p> </blockquote> <p>防御重点在响应头。</p> <h4 id="x-frame-options" tid="tid-F8ePde">X-Frame-Options<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <code-box id="code-Gz6mez"><button boxid="code-Gz6mez" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Gz6mez pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-Gz6mez" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">X-Frame-Options</span><span class="hljs-punctuation">: </span>DENY </code></pre></code-box> <p>或：</p> <code-box id="code-tBzzQD"><button boxid="code-tBzzQD" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-tBzzQD pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-tBzzQD" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">X-Frame-Options</span><span class="hljs-punctuation">: </span>SAMEORIGIN </code></pre></code-box> <p>含义：</p> <ul> <li><code>DENY</code>：完全禁止被 iframe；</li> <li><code>SAMEORIGIN</code>：只允许同源页面嵌入。</li> </ul> <h4 id="csp-frame-ancestors" tid="tid-AS5GWe">CSP frame-ancestors<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>现代更推荐：</p> <code-box id="code-7Xrd4M"><button boxid="code-7Xrd4M" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-7Xrd4M pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-7Xrd4M" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Content-Security-Policy</span><span class="hljs-punctuation">: </span>frame-ancestors 'self' </code></pre></code-box> <p>或完全禁止：</p> <code-box id="code-Yd8Tzn"><button boxid="code-Yd8Tzn" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Yd8Tzn pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-http" highlighted="true" boxid="code-Yd8Tzn" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-http highlighter-hljs hljs" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-attribute">Content-Security-Policy</span><span class="hljs-punctuation">: </span>frame-ancestors 'none' </code></pre></code-box> <p>面试回答：</p> <blockquote> <p>点击劫持不是脚本注入，而是视觉层欺骗。防御主要靠响应头，老方案是 <code>X-Frame-Options</code>，现代 CSP 用 <code>frame-ancestors</code> 控制谁能嵌套当前页面。涉及支付、删除、权限修改等高危页面，最好默认不允许被第三方 iframe 嵌套。</p> </blockquote> <h3 id="tid-wme4Jx" tid="tid-wme4Jx">6.4 三类攻击放在一起记<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <div class="table-wrapper"><table> <thead> <tr> <th>攻击</th> <th>利用点</th> <th>关键词</th> <th>主要防御</th> </tr> </thead> <tbody> <tr> <td>XSS</td> <td>页面执行了不可信脚本</td> <td>注入、执行、窃取</td> <td>输出编码、Sanitizer、HttpOnly、CSP</td> </tr> <tr> <td>CSRF</td> <td>浏览器自动带 Cookie</td> <td>伪造请求、借身份</td> <td>CSRF Token、SameSite、Origin/Referer、避免 GET 副作用</td> </tr> <tr> <td>Clickjacking</td> <td>页面被 iframe 视觉欺骗</td> <td>误点、透明 iframe</td> <td><code>X-Frame-Options</code>、<code>frame-ancestors</code></td> </tr> </tbody> </table></div> <p>一句话记忆：</p> <blockquote> <p>XSS 是“把坏脚本塞进你页面”，CSRF 是“借你的登录态发坏请求”，点击劫持是“让你以为点了这个，其实点了那个”。</p> </blockquote> <h2 id="tid-3e2PJ4" tid="tid-3e2PJ4">7. 算法题：虚假进度条不是骗人，是体验建模<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>面试里问“虚假进度条”，通常不是让你写一个 <code>setInterval</code> 就结束。</p> <p>它考的是：</p> <ul> <li>你能否把不确定耗时建模成用户可理解的反馈；</li> <li>你是否能处理成功、失败、超时、取消；</li> <li>你是否能避免进度条倒退、卡死、乱跳。</li> </ul> <h3 id="tid-GaMGGP" tid="tid-GaMGGP">7.1 为什么需要假进度？<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>有些任务没有真实进度：</p> <ul> <li>后端长任务；</li> <li>文件转码；</li> <li>AI 生成；</li> <li>报表导出；</li> <li>批量处理；</li> <li>多接口聚合。</li> </ul> <p>前端只知道：</p> <code-box id="code-h5m6Dy"><button boxid="code-h5m6Dy" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-h5m6Dy pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-h5m6Dy" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">请求开始了 请求成功了 请求失败了 </code></pre></code-box> <p>中间到底 30% 还是 70%，不知道。</p> <p>如果页面什么都不展示，用户会焦虑；如果一直转圈，用户不知道还要等多久。假进度条的意义是：</p> <blockquote> <p>用一个可控的视觉反馈告诉用户：系统还在工作，而且越来越接近完成。</p> </blockquote> <h3 id="tid-wZXfSw" tid="tid-wZXfSw">7.2 核心模型：每次只走剩余距离的一部分<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <p>最常见的模型是“剩余量衰减”：</p> <code-box id="code-yTeEmH"><button boxid="code-yTeEmH" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-yTeEmH pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-yTeEmH" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">next = current + (target - current) * ratio </code></pre></code-box> <p>如果目标是 99，当前是 0，比例是 0.15：</p> <ul> <li>第一次走到 14.85；</li> <li>第二次走到 27.47；</li> <li>第三次走到 38.20；</li> <li>越往后剩余越少，增长越慢；</li> <li>最终接近 99，但不会自己到 100。</li> </ul> <p>这很符合用户感知：</p> <code-box id="code-XrcZKf"><button boxid="code-XrcZKf" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-XrcZKf pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-XrcZKf" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">开始很快 -> 中间变慢 -> 快完成时卡住 -> 成功后直接满格 </code></pre></code-box> <h3 id="tid-JZBDr5" tid="tid-JZBDr5">7.3 一个更完整的实现<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <code-box id="code-cMRZMr"><button boxid="code-cMRZMr" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-cMRZMr pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-cMRZMr" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">function</span> <span class="hljs-title function_">createFakeProgress</span>(<span class="hljs-params">{ min = <span class="hljs-number">0</span>, maxBeforeDone = <span class="hljs-number">95</span>, interval = <span class="hljs-number">200</span>, ratio = <span class="hljs-number">0.12</span>, onChange, } = {}</span>) { <span class="hljs-keyword">let</span> progress = min; <span class="hljs-keyword">let</span> timer = <span class="hljs-literal">null</span>; <span class="hljs-keyword">let</span> status = <span class="hljs-string">"idle"</span>; <span class="hljs-keyword">function</span> <span class="hljs-title function_">emit</span>(<span class="hljs-params">value</span>) { progress = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(progress, <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">min</span>(value, <span class="hljs-number">100</span>)); onChange?.(<span class="hljs-title class_">Number</span>(progress.<span class="hljs-title function_">toFixed</span>(<span class="hljs-number">2</span>))); } <span class="hljs-keyword">function</span> <span class="hljs-title function_">start</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">if</span> (timer) <span class="hljs-keyword">return</span>; status = <span class="hljs-string">"running"</span>; <span class="hljs-title function_">emit</span>(progress); timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> { <span class="hljs-keyword">if</span> (status !== <span class="hljs-string">"running"</span>) <span class="hljs-keyword">return</span>; <span class="hljs-keyword">const</span> distance = maxBeforeDone - progress; <span class="hljs-keyword">const</span> randomFactor = <span class="hljs-number">0.8</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">0.4</span>; <span class="hljs-keyword">const</span> step = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(distance * ratio * randomFactor, <span class="hljs-number">0.2</span>); <span class="hljs-keyword">if</span> (progress >= maxBeforeDone) { <span class="hljs-title function_">emit</span>(maxBeforeDone); <span class="hljs-keyword">return</span>; } <span class="hljs-title function_">emit</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">min</span>(progress + step, maxBeforeDone)); }, interval); } <span class="hljs-keyword">function</span> <span class="hljs-title function_">done</span>(<span class="hljs-params"></span>) { status = <span class="hljs-string">"done"</span>; <span class="hljs-built_in">clearInterval</span>(timer); timer = <span class="hljs-literal">null</span>; <span class="hljs-title function_">emit</span>(<span class="hljs-number">100</span>); } <span class="hljs-keyword">function</span> <span class="hljs-title function_">fail</span>(<span class="hljs-params"></span>) { status = <span class="hljs-string">"failed"</span>; <span class="hljs-built_in">clearInterval</span>(timer); timer = <span class="hljs-literal">null</span>; } <span class="hljs-keyword">function</span> <span class="hljs-title function_">reset</span>(<span class="hljs-params"></span>) { status = <span class="hljs-string">"idle"</span>; <span class="hljs-built_in">clearInterval</span>(timer); timer = <span class="hljs-literal">null</span>; progress = min; <span class="hljs-title function_">emit</span>(progress); } <span class="hljs-keyword">return</span> { start, done, fail, reset, <span class="hljs-attr">getProgress</span>: <span class="hljs-function">() =></span> progress, <span class="hljs-attr">getStatus</span>: <span class="hljs-function">() =></span> status, }; } </code></pre></code-box> <p>使用：</p> <code-box id="code-7cbkrr"><button boxid="code-7cbkrr" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-7cbkrr pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-7cbkrr" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;"><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">submitTask</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">const</span> progress = <span class="hljs-title function_">createFakeProgress</span>({ <span class="hljs-attr">maxBeforeDone</span>: <span class="hljs-number">96</span>, <span class="hljs-attr">onChange</span>: renderProgress, }); progress.<span class="hljs-title function_">start</span>(); <span class="hljs-keyword">try</span> { <span class="hljs-keyword">await</span> <span class="hljs-title function_">runLongTask</span>(); progress.<span class="hljs-title function_">done</span>(); <span class="hljs-title function_">showSuccess</span>(); } <span class="hljs-keyword">catch</span> (error) { progress.<span class="hljs-title function_">fail</span>(); <span class="hljs-title function_">showError</span>(error); } } </code></pre></code-box> <h3 id="tid-nWBXQ8" tid="tid-nWBXQ8">7.4 真实项目里的细节<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <h4 id="不要让进度倒退" tid="tid-XRhRWR">不要让进度倒退<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>如果你同时有真实进度和模拟进度，取较大值：</p> <code-box id="code-Baeacc"><button boxid="code-Baeacc" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-Baeacc pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-js" highlighted="true" boxid="code-Baeacc" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-js highlighter-hljs hljs language-javascript" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">displayProgress = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(fakeProgress, realProgress); </code></pre></code-box> <p>用户最讨厌看到 80% 突然回到 40%。</p> <h4 id="不要太早到-99" tid="tid-nGSKjc">不要太早到 99%<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>如果接口可能要 30 秒，而你 3 秒就到 99%，用户会觉得“卡死了”。可以分阶段：</p> <code-box id="code-yc8k8M"><button boxid="code-yc8k8M" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-yc8k8M pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-yc8k8M" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">0 - 60：快 60 - 85：中 85 - 95：慢 95 - 99：非常慢 成功：100 </code></pre></code-box> <h4 id="失败时不要显示-100" tid="tid-fdJxGB">失败时不要显示 100%<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>失败应该停在当前进度，然后给出明确错误状态。不要为了动画完整把失败也拉到 100%，这会误导用户。</p> <h4 id="取消时要清-timer" tid="tid-hDhCJ5">取消时要清 timer<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h4> <p>组件卸载、路由切换、用户取消任务时，要清掉定时器，否则会有内存泄漏或状态更新异常。</p> <h3 id="tid-s8sGhw" tid="tid-s8sGhw">7.5 面试回答模板<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <blockquote> <p>假进度条适合后端没有真实进度的长任务。我的设计是用剩余量衰减模型，每次增加 <code>(目标值 - 当前值) * 比例</code>，让它开始快、后面慢，并停在 95 或 99 等待真实结果。接口成功后直接补到 100，失败则停止并显示错误，取消或组件卸载时清理定时器。如果有真实进度和模拟进度并存，要保证展示进度不倒退。</p> </blockquote> <h2 id="tid-kTKAJs" tid="tid-kTKAJs">8. 把这些题串起来：高级前端的回答方式<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>经过上面的拆解，你会发现高级前端面试的关键不是“说得多”，而是“说得有层次”。</p> <p>推荐回答结构：</p> <code-box id="code-FpNWxJ"><button boxid="code-FpNWxJ" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-FpNWxJ pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-FpNWxJ" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">先给结论 -> 解释原理 -> 给项目落地方式 -> 补充风险和边界 </code></pre></code-box> <p>比如问 Fetch 和 Axios：</p> <code-box id="code-mtSPWy"><button boxid="code-mtSPWy" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-mtSPWy pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-mtSPWy" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">结论： Fetch 是原生 Promise API，Axios 是第三方请求库，业务系统里 Axios 的工程封装更完整。 原理： Fetch 返回 Response，HTTP 4xx/5xx 不会自动 reject，需要手动判断 response.ok。 落地： 如果用 Fetch，我会封装统一的 http 方法，处理 JSON、错误、超时和鉴权；如果项目复杂，用 Axios 可以用拦截器、timeout、取消请求等能力。 边界： 跨域带 Cookie 不是前端一个配置能解决，还要后端 CORS 和 Cookie SameSite/Secure 配合。 </code></pre></code-box> <p>比如问 Nginx：</p> <code-box id="code-yt5Qry"><button boxid="code-yt5Qry" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-yt5Qry pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-yt5Qry" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">结论： 前端项目常用 Nginx 托管 dist，同时做 SPA fallback 和 API 反向代理。 原理： try_files 会按顺序查找真实文件，找不到就内部转发到 index.html，让前端路由接管。 落地： index.html 不强缓存，带 hash 的静态资源长缓存；/api 代理到后端。 边界： proxy_pass 尾斜杠会影响 URI 转发结果，线上配置要和后端接口路径一致。 </code></pre></code-box> <p>比如问产品需求：</p> <code-box id="code-XK5PjJ"><button boxid="code-XK5PjJ" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-XK5PjJ pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-XK5PjJ" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">结论： 不建议注册阶段强制上传头像，除非头像是业务强必要信息。 原理： 注册流程核心目标是转化，每增加一步都会增加漏斗流失。 落地： 更推荐注册后渐进式引导完善头像；如果必须上传，就提供默认头像、预览、独立上传、失败重试。 边界： 弱网、权限弹窗、上传失败都要处理，不能让头像上传失败直接阻塞核心注册流程。 </code></pre></code-box> <h2 id="tid-QxzzEf" tid="tid-QxzzEf">9. 复盘：这场面试真正提醒了什么？<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>这次面试最有价值的地方，不是发现“我还有几个题不会”，而是提醒我们：五年前端的能力边界已经比过去宽很多。</p> <p>你不仅要会写页面，还要知道：</p> <ul> <li>页面为什么这样布局；</li> <li>动画为什么这样动；</li> <li>请求为什么这样失败；</li> <li>Cookie 为什么没有带上；</li> <li>路由刷新为什么 404；</li> <li>静态资源为什么缓存错；</li> <li>容器为什么跑不起来；</li> <li>日志应该去哪看；</li> <li>需求会不会伤害转化；</li> <li>接口设计会不会放大安全风险；</li> <li>没有真实进度时怎么给用户稳定反馈。</li> </ul> <p>真正的高级前端，是能把这些问题连成一条线的人：</p> <code-box id="code-NMx35p"><button boxid="code-NMx35p" type="button" class="clipboard code-copay-btn" data-clipboard-action="copy" data-clipboard-target="#code-NMx35p pre" aria-label="复制代码"><i class="iconfont icon-fuzhi1"></i></button><div class="code-tools" style="background: rgb(245, 245, 250);"></div><pre class="highlighter-hljs language-text" highlighted="true" boxid="code-NMx35p" style="font-size: 14px; background: rgb(245, 245, 250);"><code class="language-text highlighter-hljs hljs language-plaintext" style="background: none; border: 0px; border-radius: 0px; padding: 0px;">用户体验 -> 页面实现 -> 请求链路 -> 鉴权安全 -> 构建部署 -> 线上排障 -> 产品取舍 </code></pre></code-box> <p>如果你现在还觉得这些知识点有点多，不用慌。学习顺序可以这样排：</p> <ol> <li>先把 CSS 和请求层吃透，因为这是每天都用的基本功；</li> <li>再补 Nginx、Docker、Linux，因为它们决定你能不能独立上线；</li> <li>然后补安全和鉴权，因为它们决定你写的系统有没有底线；</li> <li>最后训练产品判断和算法建模，因为这是高级工程师和纯执行之间的分水岭。</li> </ol> <p>面试不是判决书，它更像一次系统扫描。扫出问题不可怕，可怕的是扫完以后不整理、不复盘、不把经验沉淀成自己的知识结构。</p> <p>这次“一面之缘”，如果能把它变成一张能力地图，那它就不只是一次面试，而是一次升级。</p> <h2 id="tid-Qi6txT" tid="tid-Qi6txT">10. 附：面试前快速记忆卡片<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <h3 id="css" tid="tid-iwCmHn">CSS<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <ul> <li>动画：<code>@keyframes</code> 定义状态，<code>animation-*</code> 控制播放。</li> <li>动画简写：时间值第一个是 duration，第二个是 delay，动画名建议放最后。</li> <li>优先动画 <code>transform</code>、<code>opacity</code>。</li> <li>渐变是“浏览器生成的图片”。</li> <li>文字渐变：背景渐变 + <code>background-clip: text</code> + <code>color: transparent</code>。</li> <li>圆角渐变边框：优先双背景裁剪或伪元素。</li> <li>CSS 三角形：宽高为 0，给相反方向 border 上色。</li> <li>移动端全屏：优先理解 <code>svh/lvh/dvh</code>，不要迷信 <code>100vh</code>。</li> </ul> <h3 id="请求" tid="tid-WfWmBs">请求<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <ul> <li>XHR：老式回调 API，底层能力完整。</li> <li>Fetch：原生 Promise，4xx/5xx 不自动 reject。</li> <li>Fetch 解析 JSON 要手动 <code>response.json()</code>。</li> <li>Fetch 超时/取消用 <code>AbortController</code>。</li> <li>Axios：默认非 2xx reject，支持拦截器、timeout、取消、JSON 转换。</li> <li>跨域带 Cookie：前端、后端 CORS、Cookie 属性三方都要配合。</li> </ul> <h3 id="nginx--docker--linux" tid="tid-sPTrRz">Nginx / Docker / Linux<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <ul> <li>SPA 刷新 404：<code>try_files $uri $uri/ /index.html</code>。</li> <li><code>proxy_pass</code> 尾斜杠会影响 URI 转发。</li> <li><code>index.html</code> 不强缓存，hash 静态资源长缓存。</li> <li>Docker 多阶段：Node build，Nginx serve。</li> <li>Linux 排障：<code>curl</code>、<code>ss</code>、<code>ps</code>、<code>tail</code>、<code>df</code>、<code>free</code>。</li> </ul> <h3 id="安全" tid="tid-jPrGd3">安全<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <ul> <li>XSS：坏脚本进页面执行。</li> <li>CSRF：借浏览器自动带 Cookie 发请求。</li> <li>Clickjacking：视觉欺骗，误导用户点击。</li> <li>XSS 防御：输出编码、Sanitizer、HttpOnly、CSP。</li> <li>CSRF 防御：CSRF Token、SameSite、Origin/Referer、避免 GET 副作用。</li> <li>点击劫持防御：<code>X-Frame-Options</code>、CSP <code>frame-ancestors</code>。</li> </ul> <h3 id="产品和算法" tid="tid-jYdfCw">产品和算法<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <ul> <li>注册流程先看转化率，不要无脑加必填项。</li> <li>头像不是强必要时，优先注册后渐进式完善。</li> <li>假进度条：剩余量衰减，成功到 100，失败停止，取消清理。</li> <li>回答问题：结论 -> 原理 -> 落地 -> 风险边界。</li> </ul> <h2 id="参考资料" tid="tid-45iKak">参考资料<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <ul> <li>MDN：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation" target="_blank" rel="noopener nofollow"><code>animation</code> CSS property</a></li> <li>MDN：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units" target="_blank" rel="noopener nofollow">CSS values and units</a></li> <li>MDN：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-image" target="_blank" rel="noopener nofollow"><code>border-image</code> CSS property</a></li> <li>MDN：<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" target="_blank" rel="noopener nofollow">Using the Fetch API</a></li> <li>MDN：<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS" target="_blank" rel="noopener nofollow">Cross-Origin Resource Sharing (CORS)</a></li> <li>MDN：<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie" target="_blank" rel="noopener nofollow"><code>Set-Cookie</code> header</a></li> <li>Axios Docs：<a href="https://axios-http.com/docs/res_schema" target="_blank" rel="noopener nofollow">Response schema</a></li> <li>Axios Docs：<a href="https://axios-http.com/docs/interceptors" target="_blank" rel="noopener nofollow">Interceptors</a></li> <li>Axios Docs：<a href="https://axios-http.com/docs/cancellation" target="_blank" rel="noopener nofollow">Cancellation</a></li> <li>Axios Docs：<a href="https://axios-http.com/docs/req_config" target="_blank" rel="noopener nofollow">Request config</a></li> <li>Nginx Docs：<a href="https://nginx.org/en/docs/http/ngx_http_core_module.html#try_files" target="_blank" rel="noopener nofollow"><code>try_files</code></a></li> <li>Nginx Docs：<a href="https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass" target="_blank" rel="noopener nofollow"><code>proxy_pass</code></a></li> <li>Docker Docs：<a href="https://docs.docker.com/build/building/multi-stage/" target="_blank" rel="noopener nofollow">Multi-stage builds</a></li> <li>Docker Hub：<a href="https://hub.docker.com/_/nginx" target="_blank" rel="noopener nofollow">nginx official image</a></li> <li>OWASP Cheat Sheet：<a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html" target="_blank" rel="noopener nofollow">Cross Site Scripting Prevention</a></li> <li>OWASP Cheat Sheet：<a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html" target="_blank" rel="noopener nofollow">Cross-Site Request Forgery Prevention</a></li> <li>OWASP Cheat Sheet：<a href="https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html" target="_blank" rel="noopener nofollow">Clickjacking Defense</a></li> </ul> <div> </div><span class="articleSuffix-flg"> <br><p class="essaySuffix-eof">__EOF__</p> <div id="articleSuffix"> <div class="articleSuffix-bg"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 147.78 155.96"> <path d="M10.5,99.81a1.9,1.9,0,0,0-.53-.09,1.66,1.66,0,0,0-1.64,1.65A1.64,1.64,0,0,0,10,103a1.57,1.57,0,0,0,.87-.25l26.76,26.82.45-1.08L11.52,101.91A1.65,1.65,0,0,0,10.5,99.81Zm-.13,2a.57.57,0,0,1-.8,0,.58.58,0,0,1-.17-.41.58.58,0,0,1,.57-.57h0a.57.57,0,0,1,.56.58A.55.55,0,0,1,10.37,101.77Z" style="fill:#c5c9e0"></path><path d="M56.15,117.58H39.06l0-.09a1.65,1.65,0,0,0-1.36-1H37.5a1.65,1.65,0,1,0,1.56,2.19H55.7L92.92,156h41.44v-1.08h-41Zm-18.25.94a.56.56,0,0,1-.79,0,.58.58,0,0,1-.17-.41.57.57,0,0,1,.56-.57h0a.58.58,0,0,1,.57.58A.54.54,0,0,1,37.9,118.52Z" style="fill:#c5c9e0"></path><path d="M23.52,50.32a1.65,1.65,0,0,0,1.55-1.11H55.28l48-48.13h31.06V0H102.85l-48,48.13H25.07a1.64,1.64,0,0,0-2.09-1,1.64,1.64,0,0,0,.54,3.2Zm0-2.21a.57.57,0,0,1,0,1.13.57.57,0,1,1,0-1.13Z" style="fill:#c5c9e0"></path><polygon points="102.86 0 102.86 0 102.86 0 102.86 0" style="fill:#c5c9e0"></polygon><path d="M107.72,12.14h26.64V11.07H107.27L57.4,61H3.09a1.66,1.66,0,0,0-1.45-.86H1.52A1.65,1.65,0,1,0,2.81,63a1.59,1.59,0,0,0,.45-.87H57.85ZM2.05,62.23a.57.57,0,0,1-.8,0,.58.58,0,0,1-.17-.41.57.57,0,0,1,.56-.57h.09a.57.57,0,0,1,.32,1Z" style="fill:#c5c9e0"></path><path d="M134.36,43.22V42.14h-22.3l-9.62,9.63a1.64,1.64,0,0,0-2.19.77,1.61,1.61,0,0,0-.17.71,1.65,1.65,0,1,0,3.29,0,1.61,1.61,0,0,0-.16-.72l9.3-9.32Zm-32.64,10.6a.57.57,0,0,1,0-1.13.57.57,0,0,1,0,1.13Z" style="fill:#c5c9e0"></path><path d="M147,52.3l-9,9H111.48a1.64,1.64,0,0,0-1.61-1.33h-.14a1.65,1.65,0,1,0,1.6,2.41h27.19l9.26-9.29L147,52.3Zm-37.15,9.85a.56.56,0,0,1-.56-.57h0a.56.56,0,0,1,.56-.56h0a.57.57,0,1,1,0,1.13Z" style="fill:#c5c9e0"></path><path d="M66.79,75.35l11,11.06h56.53V85.33H78.27l-11-11.06H49.49L37.12,86.67a1.64,1.64,0,0,0-2.09,1,1.61,1.61,0,0,0-.09.54,1.65,1.65,0,0,0,3.29,0,1.68,1.68,0,0,0-.26-.89l12-12ZM36.58,88.79a.57.57,0,1,1,.57-.56A.57.57,0,0,1,36.58,88.79Z" style="fill:#c5c9e0"></path><path d="M110.61,95.55,92.8,113.4a1.62,1.62,0,1,0,.77.76l17.49-17.53h23.31V95.55ZM92.49,115.28a.56.56,0,0,1-.8,0,.58.58,0,0,1-.17-.41.57.57,0,0,1,.57-.57h0a.58.58,0,0,1,.56.58A.55.55,0,0,1,92.49,115.28Z" style="fill:#c5c9e0"></path><path d="M97.89,122.3H76.62L64.2,109.85a1.65,1.65,0,0,0-.77-2.2,1.77,1.77,0,0,0-.72-.17h-.14a1.65,1.65,0,0,0,.15,3.29,1.58,1.58,0,0,0,.71-.17l12.74,12.77H98.34l17.48-17.52h18.54v-1.08h-19ZM63.12,109.53a.56.56,0,0,1-.8,0,.58.58,0,0,1-.17-.41.57.57,0,0,1,1.14,0A.54.54,0,0,1,63.12,109.53Z" style="fill:#c5c9e0"></path> </svg> </div> <div class="articleSuffix-left"> <a data-fancybox="gallery" href="https://shandianteng20250825.oss-cn-beijing.aliyuncs.com/avar.jpg"><img src="https://1000bd.com/contentImg/2026/08/09/6f555a84e77a395b.jpeg"></a> </div> <div class="articleSuffix-right"> <item> <li> <b>本文作者：</b> <a href="https://www.cnblogs.com/zsnhweb" target="_blank">jialiangzai</a> </li> <li> <b>本文链接：</b> <a href="https://www.cnblogs.com/zsnhweb/p/20061744" target="_blank">https://www.cnblogs.com/zsnhweb/p/20061744</a> </li> <li> <b>关于博主：</b> 评论和私信会在第一时间回复。或者<a href="https://msg.cnblogs.com/msg/send/zsnhweb" target="_blank">直接私信</a>我。 </li> <li> <b>版权声明：</b> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" alt="BY-NC-SA" title="BY-NC-SA" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！ </li> <li> <b>声援博主：</b> 如果您觉得文章对您有帮助，可以点击文章右下角<strong><span style="color: #ff0000; font-size: 12pt;">【<a id="post-up" onclick="votePost(20061744,'Digg')" href="javascript:void(0);">推荐</a>】</span></strong>一下。 </li> </item> </div> <div style="clear:both"></div> </div> </span></div> <div id="MySignature" role="contentinfo"> <p>本文来自博客园，作者：<a href="https://www.cnblogs.com/zsnhweb/" target="_blank">jialiangzai</a>，转载请注明原文链接：<a href="https://www.cnblogs.com/zsnhweb/p/20061744" target="_blank">https://www.cnblogs.com/zsnhweb/p/20061744</a></p> </div> <div class="clear"></div> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/869307">JAVA泛型</a> <br /> <a href="/Article/Index/956053">Excel 多条件筛选 与 数据透视表 实现</a> <br /> <a href="/Article/Index/1277886">C语言数组和指针笔试题(二)(一定要看)</a> <br /> <a href="/Article/Index/910642">Docker 学习笔记总结(四)</a> <br /> <a href="/Article/Index/809325">深入剖析多层双向LSTM的输入输出</a> <br /> <a href="/Article/Index/819777">JVM理解（二）</a> <br /> <a href="/Article/Index/1562475">项目——boost搜索引擎</a> <br /> <a href="/Article/Index/1499586">架构师技能9-深入mybatis:Creating a new SqlSession到查询语句耗时特别长</a> <br /> <a href="/Article/Index/1123844">电脑重装系统蓝屏是什么原因</a> <br /> <a href="/Article/Index/748902">【汇编语言02】第2章 寄存器——理论知识</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://www.cnblogs.com/zsnhweb/p/20061744 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/2039502">C# 内存安全性的重大演进：重新定义 unsafe 关键字</a> <br /> <a href="/Article/Index/2039543">[MAF的Agent管道详解-05]对话历史的持久化和输入输出的增强</a> <br /> <a href="/Article/Index/2039563">一行代码干翻 Java 反射？EggG 流式反射调用让反射优雅到不可思议</a> <br /> <a href="/Article/Index/2039616">vibe coding（二）Where you go：一个微型 windows 桌面覆盖工具</a> <br /> <a href="/Article/Index/2039617">[送码] 用 AI Coding 做了一个 App，谈谈 AI Coding 的真实体验</a> <br /> <a href="/Article/Index/2039624">面试官：说一下 Agent 的常见范式，如何选型？</a> <br /> <a href="/Article/Index/2039660">CAD子系统，是自研还是外包？</a> <br /> <a href="/Article/Index/2039662">polygon出题教程</a> <br /> <a href="/Article/Index/2039663">Manim物理模拟：别自己写欧拉了！</a> <br /> <a href="/Article/Index/2039664">AI 学习笔记：Agent 的应用演示</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div style="padding:0px 5px;"> <a href="/tools">小工具</a> <a href="https://games.1000bd.com">小游戏</a> </div> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style=" padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>