<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>腾讯云-实习 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/</link><description>Recent content in 腾讯云-实习 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Fri, 25 Jul 2025 05:48:41 +0000</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/index.xml" rel="self" type="application/rss+xml"/><item><title>腾讯云-实习 · 第 1 轮 · 二面</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-69/</link><pubDate>Fri, 25 Jul 2025 05:48:41 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-69/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-68/"&gt;第 1 轮&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/"&gt;返回本次面经&lt;/a&gt; · 已是最后一轮 →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮概述：&lt;/strong&gt; 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度&lt;/p&gt;
&lt;p&gt;本轮共 11 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-subjective-abdee4b51af2"&gt;1. 描述一个你解决的复杂性能优化案例（指标提升与具体手段）&lt;/h2&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;按照START法则来讲解&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;结合自身项目经历来说&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-a58fbf88961e"&gt;2. React/Vue框架设计思想对比（如数据绑定、虚拟DOM）&lt;/h2&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;React/Vue/设计思想/双向绑定/单向数据流/虚拟DOM/Fiber/Proxy/模板编译&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;h4 id="一考察点"&gt;一、考察点&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;是否理解 React 和 Vue 的设计理念与核心架构区别&lt;/li&gt;
&lt;li&gt;是否能准确比较两者在数据绑定、组件化、更新机制上的异同&lt;/li&gt;
&lt;li&gt;是否理解虚拟 DOM 的实现方式及两者的优化策略&lt;/li&gt;
&lt;li&gt;是否能结合实际项目场景，选择合适的框架思路&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id="二参考答案"&gt;二、参考答案&lt;/h4&gt;
&lt;h5 id="11-核心设计思想对比"&gt;1.1 核心设计思想对比&lt;/h5&gt;
&lt;hr&gt;
&lt;h3 id="-一框架理念对比"&gt;✅ 一、框架理念对比&lt;/h3&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;维度&lt;/th&gt;
&lt;th&gt;Vue&lt;/th&gt;
&lt;th&gt;React&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;核心理念&lt;/td&gt;
&lt;td&gt;渐进式框架，关注视图层&lt;/td&gt;
&lt;td&gt;函数式 + 声明式 UI，构建 UI 的库&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;学习曲线&lt;/td&gt;
&lt;td&gt;简洁、直观、HTML+JS 分离&lt;/td&gt;
&lt;td&gt;更偏工程化，需要理解 JSX、Hooks&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;模板机制&lt;/td&gt;
&lt;td&gt;模板语法（HTML-like） + 指令（v-xxx）&lt;/td&gt;
&lt;td&gt;使用 JSX 全部由 JS 描述 UI&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;hr&gt;
&lt;h3 id="-二数据绑定机制"&gt;✅ 二、数据绑定机制&lt;/h3&gt;
&lt;h4 id="-vue"&gt;🔹 Vue&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;使用响应式系统（Vue2 的 &lt;code&gt;Object.defineProperty&lt;/code&gt;，Vue3 的 &lt;code&gt;Proxy&lt;/code&gt;）；&lt;/li&gt;
&lt;li&gt;支持 &lt;strong&gt;双向绑定&lt;/strong&gt;（如 &lt;code&gt;v-model&lt;/code&gt;）；&lt;/li&gt;
&lt;li&gt;模板中变量变化会自动更新视图，开发体验友好。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id="-react"&gt;🔹 React&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;数据是不可变状态（immutable state）；&lt;/li&gt;
&lt;li&gt;单向数据流（父 → 子）；&lt;/li&gt;
&lt;li&gt;利用 &lt;code&gt;setState()&lt;/code&gt; 或 &lt;code&gt;useState()&lt;/code&gt; 触发重新渲染；&lt;/li&gt;
&lt;li&gt;更强调“以状态驱动视图”，需要手动绑定与更新。&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3 id="-三虚拟-dom-实现与-diff-策略"&gt;✅ 三、虚拟 DOM 实现与 Diff 策略&lt;/h3&gt;
&lt;h4 id="vue"&gt;Vue&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;自主构建 Virtual DOM（与模板语法结合）；&lt;/li&gt;
&lt;li&gt;Vue2 使用双端比较 diff 算法；&lt;/li&gt;
&lt;li&gt;Vue3 引入 &lt;strong&gt;静态提升 + Block Tree + 最长递增子序列（LIS）&lt;/strong&gt;，减少不必要 patch；&lt;/li&gt;
&lt;li&gt;编译优化层更强，template 更容易静态分析。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id="react"&gt;React&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;以函数式组件为主，使用 JSX 构建虚拟 DOM；&lt;/li&gt;
&lt;li&gt;使用 Fiber 架构重构更新机制，实现异步可中断渲染；&lt;/li&gt;
&lt;li&gt;更新优先级调度（如 &lt;code&gt;startTransition&lt;/code&gt;）是核心优势之一；&lt;/li&gt;
&lt;li&gt;Diff 算法基于同层比较 + key 优化，机制稳定。&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3 id="-四组件设计与状态管理"&gt;✅ 四、组件设计与状态管理&lt;/h3&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;对比项&lt;/th&gt;
&lt;th&gt;Vue&lt;/th&gt;
&lt;th&gt;React&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;状态管理&lt;/td&gt;
&lt;td&gt;Vuex（Vue2） / Pinia（Vue3）&lt;/td&gt;
&lt;td&gt;Redux / Context API / Zustand 等&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;生命周期&lt;/td&gt;
&lt;td&gt;Options API（Vue2）/ Composition API（Vue3）&lt;/td&gt;
&lt;td&gt;类组件生命周期 / 函数组件 Hooks&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;组件通信&lt;/td&gt;
&lt;td&gt;props / emit / provide/inject&lt;/td&gt;
&lt;td&gt;props / context / props drilling&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-af38f8a1c96b"&gt;3. React Hooks闭包陷阱的产生原因？&lt;/h2&gt;
&lt;h3 id="题目要点-2"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;React Hooks/闭包陷阱/useEffect/useRef/setInterval/函数式更新/stale closure&lt;/p&gt;</description></item><item><title>腾讯云-实习 · 第 1 轮 · 一面</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-68/</link><pubDate>Fri, 25 Jul 2025 02:54:17 +0000</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-68/</guid><description>&lt;blockquote&gt;
&lt;p&gt;← 已是第一轮 · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/"&gt;返回本次面经&lt;/a&gt; · &lt;a href="https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-69/"&gt;第 1 轮&lt;/a&gt; →&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;本轮要点：&lt;/strong&gt; 一面，更多考察的是八股文的基础知识&lt;/p&gt;
&lt;p&gt;本轮共 20 道题。答案默认折叠，便于先自行作答。&lt;/p&gt;
&lt;h2 id="question-a75b1e9d-9359-47b0-8614-1088eee4b085"&gt;1. 什么是 HTML 语义化？&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;题库原题：&lt;a href="https://fe.ecool.fun/topic/a75b1e9d-9359-47b0-8614-1088eee4b085"&gt;什么是 HTML 语义化？&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="题目要点"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;先看下什么是HTML：&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;p&gt;先看下什么是HTML：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;那么如何理解 Web 语义化？&lt;/p&gt;
&lt;p&gt;通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。&lt;/p&gt;
&lt;p&gt;单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。&lt;/p&gt;
&lt;p&gt;但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？&lt;/p&gt;
&lt;p&gt;那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。&lt;/p&gt;
&lt;p&gt;良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。&lt;/p&gt;
&lt;h2 id="为什么要使用语义化标签"&gt;为什么要使用语义化标签？&lt;/h2&gt;
&lt;p&gt;有伙伴会认为，我用DIV+CSS也能做出来一样的效果，虽然单纯看实现效果，两者并没有什么区别。&lt;/p&gt;
&lt;p&gt;但是页面不止是给人看的，机器也要看爬虫也要看，网页结构更清晰方便开发维护。&lt;/p&gt;
&lt;p&gt;特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。&lt;/p&gt;
&lt;p&gt;总结下语义化的优点：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。&lt;/li&gt;
&lt;li&gt;有利于不同设备的解析（屏幕阅读器，盲人阅读器等）&lt;/li&gt;
&lt;li&gt;有利于构建清晰的机构，有利于团队的开发、维护&lt;/li&gt;
&lt;/ul&gt;
&lt;/details&gt;
&lt;h2 id="question-subjective-c66a747cbe22"&gt;2. CSS盒模型、Flex布局与Grid布局的区别及适用场景&lt;/h2&gt;
&lt;h3 id="题目要点-1"&gt;题目要点&lt;/h3&gt;
&lt;p&gt;CSS盒模型/box-sizing/Flex布局/Grid布局/一维 vs 二维/布局适用场景/页面结构设计&lt;/p&gt;
&lt;details&gt;
&lt;summary&gt;参考答案&lt;/summary&gt;
&lt;h4 id="一考察点"&gt;一、考察点&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;是否掌握 CSS 中盒模型的基本概念及布局行为&lt;/li&gt;
&lt;li&gt;Flex 与 Grid 的本质区别及使用场景是否清晰&lt;/li&gt;
&lt;li&gt;能否结合实际 UI 场景选择最合适的布局方式&lt;/li&gt;
&lt;li&gt;是否理解布局系统与页面结构解耦的设计思想&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id="二参考答案"&gt;二、参考答案&lt;/h4&gt;
&lt;h5 id="11-原理说明"&gt;1.1 原理说明&lt;/h5&gt;
&lt;hr&gt;
&lt;h3 id="-一css-盒模型box-model"&gt;✅ 一、CSS 盒模型（Box Model）&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;定义&lt;/strong&gt;：所有 HTML 元素都可以看作一个矩形盒子，由以下四层组成：&lt;/p&gt;</description></item></channel></rss>