自我介绍
注意点(克服紧张,语速放慢,目光直视面试官)
面试官你好,我叫***,今天来应聘贵公司的前端工程师岗位。我从事前端开发两年多,有··年多的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)。