https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/Recent content in 滴滴-社招-2年 on Last StandHugozh-cnMon, 28 Jul 2025 02:28:18 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-90/Mon, 28 Jul 2025 02:28:18 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-90/<blockquote> <p>← <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-89/">第 1 轮</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/">返回本次面经</a> · 已是最后一轮 →</p> </blockquote> <p><strong>本轮要点：</strong> WebWorker、Canvas 和 SVG</p> <p>本轮共 10 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-ee1b2317997f">1. 自我介绍，项目介绍</h2> <h3 id="题目要点">题目要点</h3> <p>略</p> <details> <summary>参考答案</summary> <p>略</p> </details> <h2 id="question-subjective-5057de803a73">2. 为什么选择Vue3+TS而非React</h2> <h3 id="题目要点-1">题目要点</h3> <p>略</p> <details> <summary>参考答案</summary> <p>略</p> </details> <h2 id="question-subjective-d894c5540f67">3. 你们用的是什么脚手架，脚手架的基本原理了解么</h2> <h3 id="题目要点-2">题目要点</h3> <ul> <li>脚手架是提升工程效率、统一规范的工具</li> <li>底层通过 Node.js 实现文件复制、模板注入、命令执行</li> <li>常用工具：Vue CLI、CRA、Vite、自研 CLI（基于 Plop、Yeoman）</li> <li>企业通常自研脚手架实现快速初始化、统一配置和组件生成</li> <li>掌握核心原理（模板渲染、交互、文件操作）有助于二次开发</li> </ul> <details> <summary>参考答案</summary> <h3 id="考察点">考察点</h3> <ul> <li>面试官希望了解你是否具备工程化思维<br></li> <li>是否熟悉当前项目所用的脚手架工具及其底层实现原理<br></li> <li>是否理解脚手架在项目初始化、规范约定、自动化等方面的作用<br></li> <li>是否具备定制或维护脚手架的能力<br></li> </ul> <hr> <h3 id="参考答案">参考答案</h3> <h4 id="一常用脚手架工具及我们团队的选择">一、常用脚手架工具及我们团队的选择</h4> <p>我们项目主要使用的是：</p> <ul> <li><strong>Vue 项目</strong>：使用 <code>@vue/cli</code>、<code>vite</code> 或公司自研的内部模板系统</li> <li><strong>React 项目</strong>：早期使用 <code>create-react-app</code>，后续迁移为 <code>Vite + 自定义模板</code><br></li> <li><strong>自研脚手架</strong>：基于 <code>Plop.js</code>、<code>Yeoman</code>、<code>Commander</code> 或 <code>create-*</code> 实现，通过 Node.js 实现项目初始化、目录结构生成、依赖安装、git 初始化等功能</li> </ul> <h4 id="二脚手架的核心功能">二、脚手架的核心功能</h4> <ul> <li><strong>初始化项目结构</strong>（生成项目目录和基础文件）<br></li> <li><strong>注入标准化配置</strong>（eslint、prettier、commitlint、husky、tsconfig等）<br></li> <li><strong>自动安装依赖</strong>（npm/yarn/pnpm install）<br></li> <li><strong>选择模板和功能模块</strong>（用户选择功能特性，动态生成对应模块）<br></li> <li><strong>自定义交互式命令行（CLI）</strong>（使用 inquirer 等库实现配置选择）<br></li> <li><strong>生成代码片段/组件</strong>（如 <code>plop generate component</code>）</li> </ul> <h4 id="三脚手架的实现原理">三、脚手架的实现原理</h4> <p>脚手架本质上是基于 Node.js 脚本，通过命令行交互完成初始化和代码生成，主要原理包括：</p>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-89/Mon, 28 Jul 2025 02:20:14 +0000https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-89/<blockquote> <p>← 已是第一轮 · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/">返回本次面经</a> · <a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-90/">第 1 轮</a> →</p> </blockquote> <p><strong>本轮要点：</strong> 生命周期、Vue3 API、响应式原理、v-for、事件循环</p> <p>本轮共 21 道题。答案默认折叠，便于先自行作答。</p> <h2 id="question-subjective-2245b14e802d">1. 为什么使用 <header> 而非 <div class="header"></h2> <h3 id="题目要点">题目要点</h3> <ul> <li><code>&lt;header&gt;</code>是HTML5语义化标签，明确头部区域含义<br></li> <li>语义化标签有助于SEO和辅助技术识别<br></li> <li>提高代码可读性和维护性，减少依赖类名赋予语义<br></li> <li>推荐优先使用语义标签代替无语义的<code>&lt;div&gt;</code>+类名组合</li> </ul> <details> <summary>参考答案</summary> <h3 id="考察点">考察点</h3> <ul> <li>理解HTML语义化标签的重要性及作用<br></li> <li>掌握语义化标签对SEO和无障碍的影响<br></li> <li>了解语义化标签在开发协作和维护中的优势<br></li> </ul> <hr> <h3 id="参考答案">参考答案</h3> <h4 id="一语义化标签的核心概念">一、语义化标签的核心概念</h4> <ul> <li>HTML5引入了如 <code>&lt;header&gt;</code>、<code>&lt;nav&gt;</code>、<code>&lt;article&gt;</code>、<code>&lt;footer&gt;</code> 等语义化标签，明确表达页面结构和内容含义<br></li> <li>语义化标签比普通 <code>&lt;div&gt;</code> 搭配类名更具意义，利于浏览器、搜索引擎、辅助设备等理解页面<br></li> </ul> <h4 id="二使用-header-的优势">二、使用 <code>&lt;header&gt;</code> 的优势</h4> <ol> <li> <p><strong>明确语义</strong><br></p> <ul> <li><code>&lt;header&gt;</code>表示页面或区块的头部区域，包含标题、导航等信息<br></li> <li>比 <code>&lt;div class=&quot;header&quot;&gt;</code> 直接通过类名赋予语义更标准、易识别<br></li> </ul> </li> <li> <p><strong>提升可访问性</strong><br></p> <ul> <li>语义化标签被屏幕阅读器等辅助技术识别，帮助视障用户理解页面结构<br></li> <li><code>&lt;header&gt;</code>使辅助设备快速定位页眉内容，提升用户体验<br></li> </ul> </li> <li> <p><strong>SEO友好</strong><br></p> <ul> <li>搜索引擎利用语义标签准确抓取页面结构和重点内容<br></li> <li>语义标签利于内容分类和权重判断，可能提高搜索排名<br></li> </ul> </li> <li> <p><strong>代码规范与维护</strong><br></p> <ul> <li>语义化标签增强代码自解释性，方便团队协作和代码维护<br></li> <li>减少对类名、ID等非结构性属性的依赖，代码更简洁清晰<br></li> </ul> </li> </ol> <h4 id="三使用场景对比">三、使用场景对比</h4> <ul> <li><code>&lt;header&gt;</code>适合定义页面或区块的头部区域<br></li> <li><code>&lt;div class=&quot;header&quot;&gt;</code>仅作为普通容器，没有内置语义<br></li> <li>两者均可通过CSS样式控制外观，但语义化标签具备结构语义</li> </ul> </details> <h2 id="question-subjective-247f9e07b586">2. SEO和可访问性有何影响</h2> <h3 id="题目要点-1">题目要点</h3> <ul> <li>语义化标签提升SEO抓取效率和内容权重分配<br></li> <li>结构化页面内容，增强搜索引擎对重点信息的识别能力<br></li> <li>语义标签是辅助技术识别页面结构的关键，提升可访问性<br></li> <li>有助于残障用户快速导航和理解页面<br></li> <li>符合无障碍标准，降低法律和合规风险</li> </ul> <details> <summary>参考答案</summary> <h3 id="考察点-1">考察点</h3> <ul> <li>理解SEO（搜索引擎优化）对网页结构和内容的重要性<br></li> <li>掌握语义化标签对搜索引擎抓取的正面影响<br></li> <li>了解可访问性（Accessibility）概念及辅助技术如何利用语义标签<br></li> <li>能说明如何通过结构优化提升用户体验及业务价值<br></li> </ul> <hr> <h3 id="参考答案-1">参考答案</h3> <h4 id="一seo影响">一、SEO影响</h4> <ol> <li> <p><strong>语义化标签助力搜索引擎理解页面结构</strong><br></p>