前端面试

长风呀
498 阅读11分钟

1、重点

  • 简历就像高考作文——阅卷时间非常短。
  • 内容要简洁。
  • 直击重点，表现出自己的优势（只要是符合招人单位要求的都是优势，不是别人不会的你会才叫优势）。

2、简历包含的内容

  • 个人信息。
  • 专业技能。
  • 工作经历。
  • 项目经历。
  • 社区贡献。

2.1 基本信息

  • 必备：姓名 电话 邮箱。
  • 年龄（最好写上，在这个行业年龄还是比较重要的），学历（写好是哪一届）。
  • 头像无所谓（好看就放上呗）。
  • 可以放 github 链接，前提是有内容。

2.2 专业技能

  • 表现出自己的核心竞争力（只要是符合招人单位要求的都是优势）。
  • 内容不要太多，3、5 条即可。
  • 太基础的不要写，例如会用 vscode、lodash。

2.3 工作经历

  • 如实写。
  • 写明公司，职位，入职离职时间即可，多写无益。
  • 如果有空窗期，如实写明即可。

2.4 项目经历

  • 写 2-4 个具有说服力的项目（不要什么项目都写，没用）。
  • 项目名称，项目描述，技术栈，个人角色。

2.5 社区贡献

  • 有博客或者开源作品，会让你更有竞争力。
  • 切记：需要真的有内容，不可临时抱佛脚。

3、注意事项

  • 界面不能太花哨，简洁明了即可。
  • 注意用词，“精通”“熟练”等慎用，可用“熟悉”。
  • 不可造假，会被拉入黑名单。

4、面试前准备

  • 看 JD，是否需要临时准备一下。
  • 打印纸质简历，带着纸和笔（增加好印象）。
  • 最好带着自己电脑，现场可能手写代码（带一个帆布包最适合，又优雅又方便）。
  • 要有时间观念，如果迟到或者推迟，要提前说。
  • 衣着适当，不用正装，也不要太随意。
  • 为何离职？—— 不要吐槽前东家，说自己的原因（想找一个更好的发展平台等）。
  • 能加班吗？—— 能！除非你特别自信，能找到其他机会。
  • 不要挑战面试官，即便他错了（面试一定要保证愉快）。
  • 遇到不会的问题，要表现出自己积极的一面（不好意思哈，确实是我的知识盲区，可以跟我说下 xxx 吗，我回去研究一下）。

二、HTML+CSS 面试题

HTML 和 CSS 面试题答不出来基本可以回去了。

1、HTML 面试题

以下是针对 HTML 相关的面试题，一般来说这地方不会出太多题，面试官也不愿意花太多时间在这上面。

1.1 如何理解 HTML 语义化？

  • 让人更容易读懂（增加代码可读性）。
  • 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
  • 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

1.2 script 标签中 defer 和 async 的区别？

  • script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
  • async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
  • defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

下图清晰地展示了三种 script 的过程： image.png

推荐文章：

1.3 从浏览器地址栏输入 url 到请求返回发生了什么

先阅读这篇科普性质的：从 URL 输入到页面展现到底发生什么？ 先阅读篇文章：从输入 URL 开始建立前端知识体系。

  1. 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。
  • 强缓存。
  • 协商缓存。

  1. DNS 域名解析。（字节面试被虐后，是时候搞懂 DNS 了）

  2. TCP 连接。

    总是要问：为什么需要三次握手，两次不行吗？其实这是由 TCP 的自身特点可靠传输决定的。客户端和服务端要进行可靠传输，那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力，第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。

  3. http 请求。

  4. 服务器处理请求并返回 HTTP 报文。

  5. 浏览器渲染页面。

image.png

  1. 断开 TCP 连接。

2、CSS 面试题

以下是针对 CSS 相关的面试题，这些题答不出来会给人非常不好的技术印象。

2.1 盒模型介绍

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

  • 标准盒模型：只包含 content 。
  • IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

  • box-sizing: content-box ：标准盒模型（默认值）。
  • box-sizing: border-box ：IE（替代）盒模型。

2.2 css 选择器和优先级

首先我们要知道有哪些选择器：选择器参考表。

常规来说，大家都知道样式的优先级一般为 !important > style > id > class ，但是涉及多类选择器作用于同一个元素时候怎么判断优先级呢？相信我，你在改一些第三方库（比如 antd 😂）样式时，理解这个会帮助很大！

这篇文章写的非常清晰易懂，强烈推荐，看完之后就没啥问题了：深入理解 CSS 选择器优先级。

上述文章中核心内容： 优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  • 如果存在内联样式，那么 A = 1，否则 A = 0 ；
  • B 的值等于 ID选择器（#id） 出现的次数；
  • C 的值等于 类选择器（.class） 和 属性选择器（a[href="https://example.org"]） 和 伪类（:first-child） 出现的总次数；
  • D 的值等于 标签选择器（h1,a,div） 和 伪元素（::before,::after） 出现的总次数。

从左至右比较，如果是样式优先级相等，取后面出现的样式。

2.3 重排（reflow）和重绘（repaint）的理解

简单地总结下两者的概念：

  • 重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
  • 重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

如何减少重排和重绘？

  • 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
  • 批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。
  • 使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。
  • 开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。

这里推荐腾讯 IVWEB 团队的这篇文章：你真的了解回流和重绘吗，好好认真看完，面试应该没问题的。

2.4 对 BFC 的理解

BFC 即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 具有一些特性：

  1. 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
  2. 在 BFC 中上下相邻的两个容器的 margin  会重叠，创建新的 BFC 可以避免外边距重叠。
  3. 计算 BFC 的高度时，需要计算浮动元素的高度。
  4. BFC 区域不会与浮动的容器发生重叠。
  5. BFC 是独立的容器，容器内部元素不会影响外部元素。
  6. 每个元素的左 margin  值和容器的左 border  相接触。

利用这些特性，我们可以解决以下问题：

  • 利用 4  和 6 ，我们可以实现三栏（或两栏）自适应布局。
  • 利用 2 ，我们可以避免 margin  重叠问题。
  • 利用 3 ，我们可以避免高度塌陷。

创建 BFC 的方式：

  • 绝对定位元素（position 为 absolute 或 fixed ）。
  • 行内块元素，即 display 为 inline-block 。
  • overflow 的值不为 visible 。

推荐文章：可能是最好的 BFC 解析了...

2.5 实现两栏布局（左侧固定 + 右侧自适应布局）

现在有以下 DOM 结构：

<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>
复制代码
  1. 利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 margin-left 设为固定宽度 。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素。
.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}
复制代码
  1. 同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  overflow: auto;
  height: 100%;
  background: lightseagreen;
}
复制代码
  1. 利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1 。
.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  flex: 1;
  height: 100%;
  background: lightseagreen;
}
复制代码
  1. 利用绝对定位，父级元素设为相对定位。左边元素 absolute  定位，宽度固定。右边元素的 margin-left  的值设为左边元素的宽度值。
.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}
复制代码
  1. 利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute  定位， left  为宽度大小，其余方向定位为 0 。
.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  position: absolute;
  left: 200px;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: lightseagreen;
}
复制代码

2.6 实现圣杯布局和双飞翼布局（经典三分栏布局）

圣杯布局和双飞翼布局的目的：

  • 三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
  • 两侧内容固定，中间内容随着宽度自适应。
  • 一般用于 PC 网页。

圣杯布局和双飞翼布局的技术总结：

  • 使用 float  布局。
  • 两侧使用 margin 负值，以便和中间内容横向重叠。
  • 防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin 。

圣杯布局： HTML 结构：

<div id="container" class="clearfix">
  <p class="center">我是中间</p>
  <p class="left">我是左边</p>
  <p class="right">我是右边</p>
</div>
复制代码

CSS 样式：

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
  background-color: lightcyan;
}
.right {
  width: 150px;
  margin-right: -150px;
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
复制代码

双飞翼布局： HTML 结构：

<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>
复制代码

CSS 样式：

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  margin-left: -190px;
}
复制代码

tips：上述代码中 margin-left: -100%  相对的是父元素的 content  宽度，即不包含 paddig 、 border  的宽度。

其实以上问题需要掌握 margin 负值问题 即可很好理解。

avatar
文章
阅读
粉丝