首页面试记录

# 一、前言

有一说一，这可以说是我近期最糟糕的面试体验。我本来就没什么经验，紧张的要死，面对面试官强迫着自己不要紧张堆出来笑脸，可我对面的我感觉不是个人坐在那里，就是一个无情的问题提出机。他问我一个问题，我叽里呱啦讲了半天，中途我不对的地方没有帮我指出，甚至一声不吭，对我的发言完全没有任何的反应，马上又给了我下一个问题，让我感觉他是不是赶着下班？是不是不太想面我？

总而言之，这次面试到后面连我自己都不耐烦起来了，对这样的一个面试官我的发挥自然也不能算好。

讲一下题吧，总共才 40min 左右，问了一堆：

# 二、题目列表

  1. 自我介绍

  2. 你平常是怎么学习前端的？ 说了平常用 GitHub 来浏览优秀开源项目，吸取、借鉴其优秀的地方；平常在技术社区浏览文章来积累自己；用 ChatGPT 来辅助我学习等。之后问我有没有看过什么书来学习前端 (?) 由于我前端技术基本纯靠网上的一些技术网站或者 B 站来找教程跟完，基本上没看过书，就老实说了。有没有懂的同学跟我说一下看书重不重要？

  3. 讲一下你从 GitHub 上面浏览的一个项目吧，并且说说你从中学到了什么。 我答了一个模仿 B 站的一个 Vue3+Vite+Pinia+TypeScript+ElementPlus 的项目，然后说自己学到了很多，比如组件化、工程化、模块化、规范化、目录结构设计、一些比较通用的组件或者工具的封装思路等。他也没评价。

  4. 根据我简历提问，我简历写了我在青训营大项目还有上学期打的服务外包担任队长，问我是不是团队负责人，每个团队多少人，队内的各个队员的主要职责是怎么分工的，工程是怎么统筹推进的。

  5. 讲一下浏览器搜索框输入 URL 会发生什么事情。

  6. 浏览器渲染的过程讲一下。

  7. 讲一下 http 中的缓存。

  8. 讲讲 http 和 https 的区别。

  9. 讲讲 CSS 中的盒模型。 叽里呱啦的说完了四层，突然给我提了个 怪异盒模型 的概念，问我知不知道。我之前说实话真的没听过，之后问我 box-sizing : border-box 这个属性是什么意思。我直接秒回不知道不浪费时间，他就跟我解释了一下。

    事后我问了问 GPT，接下来贴一下它的回答：

    "怪异盒模型"（Quirks Mode Box Model）是一个在早期的浏览器版本中使用的 CSS 盒模型。在这个模式下，元素的 width 和 height 属性不仅包括内容的尺寸，还包括了内边距（padding）和边框（border）。这与现代浏览器中默认使用的标准盒模型（W3C Box Model）是不同的。在标准盒模型中， width 和 height 仅仅定义了内容区域的尺寸，而内边距和边框则是额外添加的。

    怪异盒模型主要是为了向后兼容那些在早期浏览器规范成型之前就已经存在的网站。现代浏览器通常允许开发者通过设置文档类型（DOCTYPE）来选择使用哪种盒模型。

    如果你在开发过程中遇到了怪异盒模型，你可以通过设置 CSS 的 box-sizing 属性为 border-box 或 content-box 来明确指定使用哪种盒模型。

    • border-box ：这会使元素采用怪异盒模型的行为，其中 width 和 height 包括内容、内边距和边框。
    • content-box ：这会使元素采用标准盒模型的行为，其中 width 和 height 仅包括内容。

看来确实是很古早的模型，他说现在这个属性很常见？我也不太清楚。

  1. 讲讲 CSS 中可继承的属性有哪些。 一开始题目都没听懂，问是不是 JS 的，结果跟我说是 CSS 的。我又一次完全没了解过的问题出现了，直接说不会。

    问问 GPT 吧：

    在 CSS 中，有些属性是可继承的，而有些则不是。可继承的属性意味着子元素会继承其父元素的这些属性值，除非子元素自己有明确的设置。以下是一些常见的可继承的 CSS 属性：

    文本相关属性

    1. color ：文本颜色
    2. font ：字体设置（这包括 font-family 、 font-size 、 font-weight 等）
    3. text-align ：文本对齐方式
    4. text-indent ：文本缩进
    5. line-height ：行高
    6. letter-spacing ：字符间距
    7. text-transform ：文本转换（如大写、小写等）
    8. white-space ：空白字符的处理方式
    9. word-spacing ：单词间距

    列表相关属性

    1. list-style ：列表样式（这包括 list-style-type 、 list-style-position 等）

    表格相关属性

    1. border-collapse ：边框合并设置
    2. border-spacing ：边框间距
    3. caption-side ：表格标题位置
    4. empty-cells ：空单元格的显示方式

    其他

    1. visibility ：可见性（注意： hidden 值不会被继承，但子元素会表现得像继承了）
    2. cursor ：光标样式
    3. direction ：文本方向

    这些只是一些常见的可继承属性，不是一个完整的列表。具体哪些属性是可继承的，还取决于浏览器的实现和 CSS 规范的版本。

  2. CSS 中有三个属性可以让某个 DOM 隐藏，分别是： display:none 、 visable:hidden 、 opacity:0 ，讲讲这三种方式彼此之间有什么区别？ 由于第二种用的不多，答得一般，没太分析出彼此的不同。

    在 CSS 中， display: none 、 visibility: hidden 和 opacity: 0 都可以用于隐藏 DOM 元素，但它们之间有一些重要的区别：

    display: none

    1. 渲染效果：元素不会被渲染，即完全消失，不占用任何空间。
    2. 文档流：元素会从文档流中移除，就像它从未存在一样。
    3. 可访问性：对于屏幕阅读器等辅助技术，元素及其子元素也会被隐藏。
    4. 性能：如果频繁地切换该属性，可能会导致页面重新布局，影响性能。
    5. 事件响应：元素不会响应任何用户事件（如点击、悬停等）。

    visibility: hidden

    1. 渲染效果：元素会被隐藏，但仍然占用空间。
    2. 文档流：元素仍然存在于文档流中。
    3. 可访问性：对于屏幕阅读器，元素（通常）也会被隐藏。
    4. 性能：性能开销相对较小，因为不需要重新布局。
    5. 事件响应：元素不会响应任何用户事件（如点击、悬停等）。

    opacity: 0

    1. 渲染效果：元素会变得完全透明，但仍然可见（例如，你仍然可以看到其背后的内容）。
    2. 文档流：元素仍然存在于文档流中。
    3. 可访问性：元素对于屏幕阅读器是可见的。
    4. 性能：通常不会导致重新布局，但可能会影响绘制性能。
    5. 事件响应：元素仍然会响应用户事件（如点击、悬停等）。

    这些属性各有用途，选择哪一个取决于你想达到什么效果。例如，如果你想让元素消失但不影响布局， visibility: hidden 是一个好选择。如果你想让元素完全消失并从文档流中移除， display: none 更合适。如果你只是想让元素暂时不可见但仍能交互， opacity: 0 是一个好选项。

  3. 在 JS 当中，有两种判断类型的方法： typeof 和 instanceOf ，请问这两种方法有什么区别？ 基本上倒背如流了。

  4. 讲讲原型、原型链、构造函数三者之间的关系。

  5. ES6 中有一个箭头函数，箭头函数可以用作构造函数吗？

  6. 之前有接触过 React 吗？

  7. 讲讲你所了解过的 JS 设计模式吧。

  8. 两道简单的算法题：

    1. 如何判断一棵树是平衡二叉树？（直接说不会二叉树的所有东西）
    2. 如何判断一个链表中有环？（直接双指针法秒了）

  9. 反问环节。

# 三、后记

目前结果还没出，我很惊讶为什么这么执着于 CSS 的部分，问的还比较细，主要是对我擅长的 Vue 框架只字不提，我回答的怎么样也不给我回复，我只感觉挺无语的，面到后面我也没啥心情了，也才 40min 左右。慢慢等结果吧。