154. 面试官：SSR是什么？在vue开发中需要注意哪些问题？

伊泽瑞尔灬

于 2023-12-28 09:00:16 发布

阅读量788

点赞数 21

文章标签： vue.js javascript ecmascript 前端前端框架

本文链接：https://blog.csdn.net/qq_30811721/article/details/135281545

版权

154期

1. SSR是什么？在vue开发中需要注意哪些问题？

2. git中，fork，clone，branch这三个概念有什么区别?

3. scrip标签中，async和defer两个属性有什么用途和区别？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

153期问题及答案

1. 说说vue中的diff算法，以及key的作用？

Vue中的diff算法是虚拟DOM技术的一部分，它用于高效地更新真实DOM。当组件的状态发生变化时，Vue会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较，通过这个比较过程来确定实际DOM需要进行哪些最小化更新。为了做到这一点，Vue使用了一种高效的diff算法，该算法遵循以下几个基本假设规则：

同级别元素的比较：Vue的diff算法只会在同一个层级进行节点的比较，不会跨层级进行比较。如果两个节点属于不同的层级，Vue将不会尝试比较它们，而是直接进行替换。
Tag和Type的比较：在比较虚拟节点时，如果两个节点的标签（tag）或类型（如组件）不同，Vue会直接替换旧节点，而不会尝试更详细的比较。
key的作用：当在一个数组中包含多个同类型的元素时，Vue通过给每个元素指定一个唯一的key值来识别它们。这样，当数据发生变化时，Vue可以根据key直接定位到正确的元素，这对于实现高效更新是至关重要的。

key的作用有以下几个方面：

确定节点的身份：在更新过程中，有了key值后，Vue可以根据key找到原始元素，从而确定是否可以复用现有元素。
高效重排元素：对于列表渲染时，如果数据源发生变化（如排序、增删），有了key值可以更高效地插入、删除或移动子元素，避免不必要的元素重建或重排。
减少渲染时间：通过精准定位到需要更新的节点，可以减少不必要的DOM操作，从而减少渲染时间。
维持组件状态：与组件状态保持一致，如果key不变，组件会被复用，因而可以保持组件状态；如果key变了，即使是同一类型的组件，也会被销毁并重新创建，组件状态将重置。

在Vue中使用key的最佳实践是，在使用v-for进行列表渲染时，为每个循环的元素绑定一个唯一的key值：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

正确使用key可以大大提高虚拟DOM的更新效率，避免不必要的DOM操作，对提升性能有显著的帮助。在没有提供key的情况下进行列表渲染，Vue会使用一个基于索引的默认策略，这在某些场景下可能会导致不必要的渲染，因此了解并正确使用key对于开发高性能的Vue应用是非常关键的。

2. 说说react中的diff算法？

React 的 diff 算法是 React 虚拟 DOM 技术中的关键环节，它用于在组件状态更新时，高效地对比新旧虚拟 DOM 树，并计算出实际 DOM 需要进行的最小化更新。React 的 diff 算法基于两个假设来优化性能：

两个不同类型的元素会生成不同的树：当 React diffing 算法遇到两个不同类型的元素时（例如，一个<div>和一个<span>），它会直接卸载旧元素，并且完全创建新元素及其子元素。
使用开发者提供的 key 属性来区分同类兄弟元素：在渲染含有多个相同类型子元素的列表时，使用 key 属性来识别每个列表项的唯一性。通过 key，React 能够匹配旧节点和新节点，实现节点的稳定性，达到高效利用旧元素，减少不必要的元素重建和重排。

React 的 diff 算法具体操作过程大致如下：

树级别的比较

React 分别从根节点开始进行树的逐层比较，这一步被称为“树级别的比较”。这里有几个重要的策略：

元素类型的改变：如果元素的类型发生了变化，React 会销毁旧树并建立一棵全新的树。
同类型元素的比较：如果两个元素是相同类型，React 会保留 DOM 节点，并仅更新改变的属性。
组件级别的比较：对于组件元素，会调用其生命周期方法，根据新的 props 更新组件状态，并递归进行子组件的比较。

元素级别的比较

在同一层级的节点比较中，React 分别对比每一个子节点。diff 算法会根据 key 和类型来更新子节点。这一步被称为“元素级别的比较”。具体如下：

使用 key 属性：当子节点拥有 key 时，React 会使用 key 来匹配新旧子节点列表中的子节点元素。正确地使用 key 可以帮助 React 标识和保留状态，在元素位置变动时减少不必要的元素重建或销毁过程。
没有 key 的情况：如果没有 key，React 会按照列表顺序进行简单的比较。如果位置发生了变化，React 可能会执行不必要的组件重建和渲染，产生性能问题。

子节点级别的比较

React 对子节点的比较遵循深度优先策略，逐个比较，并递归地进行下去。如果发现差异，React 会生成一个 "变更" 列表，列出哪些节点需要进行创建、更新或删除。

React 的 diff 算法做了很多优化，使得在大多数情况下能够提供很好的性能，但它不是最优的算法。在极端复杂的情况下，如果不恰当地使用 key 或构建组件，仍可能导致性能问题。因此，合理使用 key，避免不必要的子节点重组，以及避免进行大量的 DOM 操作都是提高 React 应用性能的重要考量。

3. CSS3新增了哪些特性？

CSS3 是 CSS 技术的最新进化，相比 CSS2，它包含了一系列新特性和改进，使得前端开发者能够创建更加丰富和互动的网站样式。主要的 CSS3 特性如下：

选择器（Selectors）：CSS3 引入了更多的选择器，包括属性选择器、结构性伪类选择器、目标伪类选择器、:nth-child选择器等，使得元素的选择更加灵活和强大。
盒模型（Box Model）：CSS3 允许使用 box-sizing 来更容易地控制盒模型的行为，例如可以设置为 border-box 来使元素的宽度和高度包括其边框和填充。
背景和边框（Backgrounds and Borders）：引入 border-radius 属性轻松创建圆角，box-shadow 添加阴影效果，以及使用 background 的新增属性实现多重背景。
文本效果（Text Effects）：支持文字阴影（text-shadow），以及允许使用 @font-face 直接嵌入字体文件。
2D/3D 转换（2D/3D Transformations）：CSS3 提供 transform 属性向元素应用2D旋转、缩放、移动和倾斜等变化，以及3D变换。
动画（Animations）：使用 @keyframes 规则和 animation 属性创建复杂的动画效果。
过渡（Transitions）：transition 属性可以在元素状态变化时添加过渡效果，比如鼠标悬停或者DOM属性的变化。
弹性盒子布局（Flexbox Layout）：一个新的布局模式，用于设计灵活的响应式布局结构。
网格布局（Grid Layout）：允许开发者创建复杂的多维布局网格，更高效地控制布局结构。
多列布局（Multi-Column Layout）：使内容能够以多列的方式呈现，类似于传统报纸的布局。
媒体查询（Media Queries）：允许根据不同设备和视口大小应用不同的样式规则，对构建响应式设计至关重要。
用户界面（User Interface）：增加了更多控制本地 UI 元素样式的属性，如 resize、box-sizing、outline-offset 等。