2022我的面试准备
自我介绍
注意点(克服紧张，语速放慢，目光直视面试官)
面试官你好，我叫***，今天来应聘贵公司的前端工程师岗位。我从事前端开发两年多，有··年多的React开发经验，··年vue开发经验，在上家公司主要从事H5页面，后台管理系统，混合App等项目开发。平常喜欢逛一些技术社区丰富自己的技术，像思否，掘金,csdn之类，并且自己也独立开发了个人博客网站，记录自己的工作总结和学习心得。 我的性格比较温和，跟同事朋友相处时比较外向，在工作中代码开发时我喜欢全心全意的投入，对于工作我总抱着认真负责的态度,擅于快速定位问题，并用心解决。面试官，以上是我的介绍，谢谢。
HTML、CSS相关
垂直水平居中
由于父相子绝。等等方法基本是个前端都会的，这里只说几种实用且好记的：
flex居中1
1 <style>
2 .father {
3 display: flex;
4 /* 在主轴居中 */
5 justify-content: center;
6 /* 在侧轴居中 */
7 align-items: center;
8 width: 400px;
9 height: 400px;
10 background-color: rgb(234, 130, 238);
11 }
12 .son {
13 width: 200px;
14 height: 200px;
15 background-color: rgb(50, 205, 146);
16 }
17 </style>
18flex居中2
1 <style>
2 .father {
3 display: flex;
4 width: 400px;
5 height: 400px;
6 background-color: rgb(234, 130, 238);
7 }
8 .son {
9 width: 200px;
10 height: 200px;
11 background-color: rgb(50, 205, 146);
12 /* 四个方向间距一样 */
13 margin: auto
14 }
15 </style>table call居中
1 <style>
2 .father {
3 /* 将父容器转化成单元格 */
4 display: table-cell;
5 /* 单元格垂直居中 */
6 vertical-align: middle;
7 width: 400px;
8 height: 400px;
9 background-color: rgb(234, 130, 238);
10 }
11 .son {
12 width: 200px;
13 height: 200px;
14 background-color: rgb(50, 205, 146);
15 /* 水平居中 */
16 margin: 0 auto
17 }
18 </style>BFC:
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素（格式化上下文）
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发BFC的方式:
- overflow
- 浮动
- 绝对定位、固定定位
- display 为 inline-block、table-cells、flex
BFC应用：清除浮动带来的影响（让受影响的元素触发BFC）
1 .father {
2 width: 400px;
3 border: 1px solid red;
4/* 由于子元素浮动，导致父元素高度没有被撑开，所以给父元素添加overflow，触发BFC，清除了浮动影响 */
5 overflow: hidden;
6 }
7
8 .son {
9 width: 100px;
10 height: 100px;
11 background-color: rgb(50, 205, 146);
12 float: left;
13 }HTML5新特性:
一、语义化标签
header nav main article section aside footer
二、增强型表单
color 主要用于选取颜色
date 选取日期
datetime 选取日期(UTC时间)
datetime-local 选取日期（无时区）
month 选择一个月份
week 选择周和年
time 选择一个时间
email 包含e-mail地址的输入域
number 数值的输入域
url url地址的输入域
tel 定义输入电话号码和字段
search 用于搜索域
range 一个范围内数字值的输入域
三、视频和音频
四、Canvas绘图
五、SVG绘图
六、地理定位
七、拖放API
八、WebWorker
九、WebStorage(localStorage和sessionStorage)
十、WebSocket
回流和重绘：
回流 : 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做回流 。
触发：<br/> 1.添加或者删除可见的DOM元素<br/> 2.元素尺寸改变——边距、填充、边框、宽度和高度
重绘 : 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
触发： 改变元素的color、background、box-shadow等属性
重绘不一定回流，回流一定重绘
回流优化建议：
- 批量修改DOM或者样式
- 对于复杂动画效果,使用绝对定位让其脱离文档流
- 尽量只修改position：absolute或fixed元素，对其他元素影响不大<br/> ·········
JS相关
JS数据类型：
js数据类型分为基本数据类型和引用数据类型
基本数据类型（值类型）:
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二的属性，es6新增）。
引用数据类型：
对象(Object)、数组(Array)、函数(Function)。
腾讯云开发者
