今年秋招结束了，虽然拿到的offer不多，不能和大佬们相比，但是自己已经满足了。秋招的过程中一直在总结面试遇到的一些问题，今天按照知识板块做一个整理，希望能有助于要求职的各位。

2021.12.21更新

一. Html相关问题

1. 如何理解HTML语义化

语义化含义

语义是对一个词或者句子含义的正确解释，像是h1标签，在浏览器解析到h1时，就将该标签解释为包含着一块内容的最重要的标题。

为什么要语义化

在页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO，爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验，例如title、alt可以用于解释名称或解释图片信息，以及label标签的灵活运用
便于团队开发和维护，语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化
方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页

什么是SEO

SEO是指搜索引擎优化。全称为(Search Engine Optimization)，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

语义化元素

header:用于定义页面的介绍展示区域
nav：定义页面导航链接部分区域
article：定义页面独立内容
section：用于标记文档的各个部分
aside：定义与主要内容相关的内容块
footer：定义文档的底部区域
abbr：解释缩写词

2.meta标签是什么

meta标签的作用

搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。

meta标签的常用属性

http-equiv：添加http头部内容，对一些自定义的或者需要额外添加的发送到浏览器中的http头部内容
name：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

二. CSS相关问题

1.行内元素、行内块元素、块元素

常用元素的分类

行内元素：a、span、b、label、small
行内块元素：input、img、
块元素：p、div、ul、li、ol、form

行内块元素和块元素的区别

行内块元素的display值为inline-block,块元素为block
行内块元素不独占一行，块元素独占一行

2.css选择器

选择器	权重
!import()	♾️
内联样式	1000
ID选择器	0100
类选择器/属性选择器/伪类选择器	0010
元素选择器/伪元素选择器	0001
通配符选择器/关系选择器	0000

3.px、em、rem的区别

px，相对长度单位，是相对于显示器屏幕分辨率而言的
em，相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem，相对单位长度，相对于HTML根元素的字体尺寸。

4.BFC

什么是BFC

BFC（Block Formatting Context，块级格式化上下文）是W3 CSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位以及和其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局，一个环境的元素不会影响到其他元素;

BFC的触发条件

根元素
浮动元素（float不为none）
绝对定位元素（position：absolute/fixed）
内联块（display：inline-block）
表格单元格（display：table-cell）
表格标题（display：table-caption）
具有overflow属性，且值不是visible
弹性盒（display：flex/inline-flex）

BFC的约束规则

内部的盒会在垂直方向上一个一个排列
处于同一个BFC中的元素相互影响，可能会发生外边距重叠
每个元素的margin box的左边与容器块border box的左边相接触（对于从左往右的格式化，否则相反，即使存在浮动也是如此）
BFC是页面上独立的一个隔离的独立容器，与外界互不影响
BFC高度计算考虑BFC包含的所有元素，包括浮动元素
浮动盒区域不叠加到BFC上

BFC可以解决的问题

垂直外边距重叠问题
去除浮动
自适应两栏布局（float+overflow）
盒子塌陷（浮动）

什么是盒子塌陷，为什么会出现盒子塌陷

现象：本应该在父盒子内部的元素跑到了外部。
原因当父元素的高度小于子元素高度，且子元素设置了浮动属性时，子元素就会脱离文档流，父元素的高度就无法由子元素撑开，就会发生盒子高度塌陷，这个时候需要给父级清除浮动

清除浮动的方法

overflow：auto/hidden
父盒子里最下方引入清楚浮动块
给父级的伪元素after添加清除浮动三件套

4.实现水平垂直居中

1.position+transform/(margin-left/top)

.box{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: blueviolet;
}

2.flex

.wrap {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: brown;
}

5.盒模型

盒模型分类

标准盒模型：盒子内容区的宽度=width，内容区高度=height，实际宽度=左右border+左右padding+width，实际高度=上下border+上下padding+height；
IE盒模型盒：子内容区的宽度=width-左右border- 左右padding；内容区高度=height-上下border-上下padding，实际宽度=width，实际高度=height；

IE盒模型的使用场景

宽度不确定（百分数），但内边距固定；
input，因为默认带两像素的边框，父级宽度不确定，且input又想与父级同宽，则可使用该属性来实现，输入框想加padding更方便

6.前端常见布局

文档布局
浮动布局
定位布局
流式布局
弹性布局
自适应布局
响应式布局

7.flex

flex:1是什么

flex-grow：1；：设置了一个flex项主轴方向上尺寸的增长系数，它指定了flex容器中剩余空间应该如何分配给项目
flex-shrink:1;：指定了flex元素的收缩规则
flex-basis:0%:当所有子项的flex-basis属性值之和小于盒子的宽度时，flex-basis的属性值会覆盖width的属性值，此时在计算盒子伸缩时以flex-basis为基准

8.动画，动画性能

JavaScript直接实现

思路：通过setInterval/setTimeout方法的回调函数的持续调用来改变某个元素的CSS样式，达到元素样式变化的效果
缺点：JavaScript实现动画会导致页面频繁性重排重绘，消耗性能，一般使用在PC端浏览器，在移动端会有明显卡顿
提问：setInterval为什么设置16ms，因为一般认为人眼能辨识的流畅动画为每秒60帧，在很多移动端动画性能优化时，一般使用1000/60=16ms来进行节流处理连续触发频率，可以大大提升动画的流畅性

SVG

优点：含有较丰富的动画功能，原生绘制各种图形、滤镜和动画，并且能被JS调用
缺点：元素较多且复杂的动画使用svg渲染会比较慢

transition

transition是过渡动画，它不能实现独立动画，只能在某个标签元素样式或状态改变时，进行平滑的动画过渡效果。
⚠️ transition动画会让页面卡顿，因此通常添加transform：translate3D(0,0,0)来开启GPU加速，让动画更加流畅

animation

animation通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变。
优点：摆脱了JS的控制，并且能利用硬件加速，可以实现复杂的动画效果

canvas

通过getContext()获取元素的绘制对象，优点是可以解决页面中多个动画元素渲染较慢的情况，完全通过javaScript来渲染控制动画的执行，可用于实现较复杂的动画

requestAnimationFrame

原理与setTimeout/setInterval类似，都是通过JavaScript持续循环的方法调用来触发动画动作，但是requestAnimationFrame是浏览器针对动画专门优化形成的API，性能上要比setTimeout/setInterval好得多。

9.css效果

旋转45度

.box{
    transform:rotate(45deg)
}

实现三角形

.box{
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-top-color: tomato;
}

10.translate和translate3D的区别

translate3D可以使用GPU进行加速，translate是2D移动，不能调用GPU进行3D加速
translate是一个二维度的向量，translate3D是三维向量，可以在z轴方向上移动，并不会影响到别的dom和自己原先位置
translte是相对于元素变化前原生的位置进行移动，并不会影响到别的dom和自己的原先位置，只是渲染发生了变化，因此translate只触发页面重绘

11.display：none；visibility：hidden；opacity：0的区别

是否占据空间
- display:none,隐藏后不占位置
- visibility:hidden/opacity:0,隐藏后仍然占据位置
子元素是否继承
- display:none,不会被子元素继承
- visibility:hidden,会被子元素继承，通过设置子元素visibility:visible来显示子元素
- opacity:0,会被子元素继承，但不能设置opacity来重新显示
事件绑定
- display:none,无法触发绑定事件
- visibility:hidden,不会出发绑定事件
- opacity:0,可以出发绑定事件
过渡动画
- display:none,transition无效
- visibility:hidden，transition无效
- opacity:0,transition有效

12.回流与重绘

回流

当renderTree中部分或全部元素的尺寸、结构，或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流，会导致回流的操作有：

页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容发生变化
元素字体大小变化
添加或删除可见的dom元素
激活css伪类
查询某些属性或调用某些方法
- clientWidth/clientHeight/clientTop/clientLeft
- offsetWidth/offSetHeight/offSetTop/offSetLeft
- scrollWidth/scrollHeight/scrollTop/scrollLeft
- scrollIntoView/scrollIntoViewIfNeeded
- getComputedStyle();
- getBoundingClientRect();
- scrllTo(); ⚠️ 当浏览器频繁发生重绘时，浏览器会把所有改动放在队列中，统一进行一次重排和重绘。但是，当遇到 clientWidth, clientHeight, OffsetWidth, OffsetHeight 这些属性的时候，浏览器的缓存渲染队列机制就不再生效了，因为，clientWidth 是一个元素的实时宽度，必须重排重绘以后才能得到，如果不提前进行重排重绘，clientWidth 有可能拿到的是浏览器缓存队列没执行完的时候的值。

重绘

当页面中元素样式的改变不影响它在文档流中的位置等，浏览器会将新样式赋予给元素并重新绘制该元素，这一过程称为重绘,避免重绘的方法如下：

css方面
- 避免使用table布局
- 尽可能在Dom树的最末端改变class
- 避免设置多层内联样式
- 将动画效果应用到position属性为absolute/fixed的元素上
- 避免使用css表达式（calc）
JavaScript方面
- 避免反复操作样式
- 避免频繁操作DOM
- 避免频繁读取会引发的回流/重绘的属性

13. 浏览器渲染过程

浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点
将CSS解析成CSS rule tree
根据DOM树和CSSOM来构造Rendering Tree
绘制，遍历render树，并使UI后端层绘制每个节点 ⚠️ Rendering Tree渲染书并不等同于DOM树，因为一些像header或display：none不在渲染树中。有了Render Tree，浏览器就能知道网页中有哪些节点、各节点的CSS定义以及他们的从属关系。下一步进行layout，即计算出每个节点在屏幕中的位置
⚠️ 上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树，它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容

14.伪类选择器（被选择元素的一种状态）

基本过滤选择器

E:not()：选择除满足括号内条件的E元素，常用于列表最后一个元素不设置底边线
:root：选择根节点，html文件中，该选择器等于html标签选择器，xml文件同理
E:nth-child(n)：若E在其兄弟节点中排第n位，则将样式赋予E

子元素过滤选择器

E:first-child：如果E是某元素的第一个子元素，则将样式赋予E
E:last-child：与:first-child同理
E:only-child：若E是某元素的唯一一个子元素，则赋予样式
内容过滤选择器
E:empty：选择内容完全为空的E

表单对象属性过滤选择器

E:checked
E:disabled
E:enabled
E:read-only
E:read-write

伪元素选择器

E::placeholder
E::selection

伪类和伪元素选择器

伪类选择器：伪类可以用来定义样式，但不会出现在HTML文档中
伪元素选择器：用于css渲染中向元素逻辑上的头部或尾部添加内容，这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入，一般用来显示修饰性内容，比如图标。

15. 获取元素在页面的位置

function getTop(e){
    let offset = e.offsetTop;
    if(e.offsetParent!=null){
        offset+=getTop(e.offsetParent)
    }
    return offsetl
}

HTMLElement.offsetTop 只读属性，返回当前元素相对于其offsetParent元素顶部内边距的距离
HTMLElement.offsetParent 只读属性，返回一个指向最近的（包含层级上的最近）包含该元素的定位元素或者最近的table、td、th、body元素。
Element.clientWidth/Height = width/height + padding;
HTMLElement.offsetWidth/Height = border+padding+(scrollbar)+width/height

16. css预处理器、后处理器

预处理器

sass 可以定义变量，变量名以$开头 less 在nodejs中使用

后处理器

css后处理器是对css进行处理，并最终生成css预处理器，它属于广义上的css预处理器

less实现原理

取到less代码的分析树
将含有动态生成相关节点的分析树转换为静态分析树
将静态分析树转换为css的静态分析树
将css的静态分析树转换为css代码

17.圣杯布局

要求

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

方法

浮动
flex

前端面试分享：秋招面试总结