2022我的面试准备

2023-01-12 10:26:40 浏览数 (1)

自我介绍

注意点(克服紧张,语速放慢,目光直视面试官)

面试官你好,我叫***,今天来应聘贵公司的前端工程师岗位。我从事前端开发两年多,有··年多的React开发经验,··年vue开发经验,在上家公司主要从事H5页面,后台管理系统,混合App等项目开发。平常喜欢逛一些技术社区丰富自己的技术,像思否,掘金,csdn之类,并且自己也独立开发了个人博客网站,记录自己的工作总结和学习心得。 我的性格比较温和,跟同事朋友相处时比较外向,在工作中代码开发时我喜欢全心全意的投入,对于工作我总抱着认真负责的态度,擅于快速定位问题,并用心解决。面试官,以上是我的介绍,谢谢。

HTML、CSS相关

垂直水平居中

由于父相子绝。等等方法基本是个前端都会的,这里只说几种实用且好记的:

flex居中1
代码语言:javascript复制
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>
18
flex居中2
代码语言:javascript复制
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居中
代码语言:javascript复制
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)

代码语言:javascript复制
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)。

0 人点赞