搞定大厂前端一面的必备知识

一 、关于面试

1.1 等级划分

想必大家肯定都不陌生，什么是前端工程师的等级。这是一个前端工作者的实例、技术成熟度的划分。往白了说，这个等级直接决定你银行卡里的位数，下面从等级和知识方面对此加以区分。

• 初级工程师

初级工程师——工作1-2年（应届生居多），这类工程师面试时会被着重考察基础知识，与其在校相关知识技能的考察，考察偏基础。
总结：面试时主要是基础

• 高级工程师

高级工程师——工作3-5年，这类工程师在面试时被考察方向主要是在项目经验这一块，要注意的是，基础知识仍是必不可少的，只是相对于初级工程师而言，基础知识相对减少考察频率。
总结：基础知识+项目经验

• 前端架构师

前端架构师——这个不好从工作时间上去定义，但绝大多数一定是有较长工作年限作为支撑的，主要看中的是解决问题与实现方案的能力，非常看重大局观与知识的全面性。带领团队的能力。
总结：架构能力+带队能力

1.2 关于基础

• 基础知识是一个前端工程师的自我修养。万丈高楼平地起，再高的建筑也离不开地基的支撑。基础知识的掌握程度，很大程度上决定了一个人之后的高度，尤其是在前端这个知识更新频繁的领域，基础显得更加的重要。基础知识的掌握程度，可以在我们学习新框架的时候让我们理解、接受的更加快速。JS更是前端的核心，所以JS的基础我们应定要牢牢掌握。

二、面试准备

2.1 什么是面试

• 面试是经过组织者精心设计的，考察应聘者是否符合要求的一次会面，主要以交谈和观察为手段，对面是这进行综合考量，对知识、经验、能力、性格的综合考察。
• 在面试时需要注意的是在抛开知识技术层面，在精神层面我们要保持乐观、积极、踏实。同事在仪表和穿着上也不要过于随意。

2.2 简历渠道

• 简历被HR拿到主要是三个渠道

员工内推（或得面试机会极大，基本直接一面，可以多去脉脉上看看）
猎头推荐（这种一般是个人自身价值极大）
HR收集（通过邮箱收集，平台收集）

2.3 面试流程

• 每个公司都有面试的不同标准，比如字节一般四面左右，且据说字节规定每一面的面试时间不应低于26分钟。
• 一面

主要就是基础面，考察基础知识为准

• 二面

很大可能是交叉面试，考察点从基础知识到框架原理到应用场景，始于基础，终于项目经验
交叉面试就是多个人分别面试，不同组的在职员工互相面试应聘者，但是都算二面。

• 三面

到了这一阶段，技术考察的比重直线下降，可能涉及一些项目经验。主要就是你要面试部门的主管对个这个人的综合审查，看是否符合公司的氛围，以及能为团队带来的东西。进本会问职业生涯规划。

• HR面

这一面只要我们态度积极，不要带有不好的情绪，薪资范围合理就基本问题不大。

2.4 关于JD

2.4.1 JD分析

• JD是一个用人单位发布的招聘信息
• 包含了岗位要求，职位描述，以便于面试者对自身做出考量是否合适
• 从JD中，我们能直接看到经验要求，工作内容，以及所需要的技术栈
• 同时，面试者应该着重了解岗位要求，完善所要求的知识技术，来提升自己通过面试的机会
• 要注意的是，我们也不必太过于在乎JD，一些公司的招聘要求是HR发的，HR对知识结构了解不全面以及和技术人员沟通不及时，所以会导致一些要求根本就是非必要的

2.5 如何写简历

• 简历就像我们的高考作文阅卷一样，被阅读时间非常短，所以我们在写简历时要内容简练，直击重点，表现出自己的优势。应包括如下：
• 个人信息

姓名、性别、邮箱、电话
年龄和头像无所谓，看个人（长得好看的小姐姐小哥哥会加分哟）

• 教育经历

写上最高学历即可，专业方向

• 专业技能

太基础的不要写（比如会VScode这种…）
写表现出核心竞争力的（比如了解源码这种）
要注意了解，熟悉、掌握、熟练掌握这种词的用法。否则可能被问到死。
内容不宜过多，5-8条就OK

• 工作经历

如实写
写明公司、职位，所负责内容就可

• 项目经验

写2-4个具有说服力的项目就好
项目描述：技术栈+个人角色+技术难点+怎么解决的

• 注意事项

不要过于花哨，简单明了即可
不要造假，会被拉入黑名单

• 面试前准备工作

看JD，是否需要临时准备一下
打印好纸质版简历，带好纸和笔
尽量带着电脑，可能手撸代码
注意面试时间，不要迟到，也不要过于早
穿着不随意
被问及为何离职，不要吐槽老东家，多找自身原因
被问能加班么？能——除非你自信的能有其他机会
不要挑战面试官，即使他错了
遇到不会的问题，要积极请教，表现出对知识的渴望

三、HTML与CSS

3.1 CSS——布局

3.1.1 盒模型宽度如何计算

答案：122px
知识点：

offsetWidth=content+padding+border 不包含margin
clientWidth=content+padding,不包含border
scrollWidth=content,不包含padding与border

3.1.2 margin 纵向重叠问题

答案：15px
知识点：

垂直方向相邻的两个元素的margin-top与margin-bottom会发生重叠情况，之间的距离取二者中较大的数据
空白内容会被直接重叠掉

3.1.3 margin负值问题

margin-left与margin-top设置负值，元素会分别向左、向上移动
margin-right设置负值，元素右侧元素向左移动，自身不受影响
margin-bottom设置负值，元素底部元素会向上移动，自身不受影响

3.1.4 BFC的理解与应用

• Block Format Context ,块级格式化上下文
• 一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
• 形成BFC的条件

float不是none
poasition是absolute或fixed
overflow不是visible
display是flex或inline-block

3.1.5 圣杯布局

• 圣杯布局与双飞翼布局目的

三栏内容，中间部分最先渲染（内容最重要）
两侧内容固定，中间自适应
一般用于PC页面

• 圣杯布局与双飞翼布局总结

使用float
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被覆盖，一个用padding一个用margin

• 圣杯布局代码
  

HTML代码
注意顺序

 <div class="header">这是头部</div>
    <div class="main">
        <div class="content middle">我是中间</div>
        <div class="content left">我是左侧</div>
        <div class="content right">我是右侧</div>
    </div>
 <div class="footer">这是尾部</div>

CSS代码

3.1.6 双飞翼布局

HTML代码

CSS代码

3.1.7 手写clearfix

3.1.8 flex画色子

HTML代码

CSS代码

3.2 CSS -定位

3.2.1 absolute和relative分别依据什么定位

• relative依据自身位置进行定位
• absolute依据最近一层定位元素进行定位

3.2.2 居中对齐实现方式

• 水平居中

block元素：margin：0 auto；
inline元素：text-aligin: center;
absolute元素：left: 50%; margin-left: -宽的一半

• 垂直居中

inline元素： line-height=height的值
absolute元素：top:50%;margin-top: -50%;
absolute元素: top right left bottom都为0；margin： auto；
absolute元素：transform: translate(-50%,-50%);top:50%;left:50%;

3.3 CSS-图文样式

3.3.1 line-height的继承问题

答案： 40px
写具体数值，如20px,则继承该值
写比例：如2/1.5,则继承该比例
写百分比：如200%，则继承计算之后的值

3.4 CSS—响应式

3.4.1 rem

• rem是一个相对长度单位，相对于根元素，常用语响应式布局
• px是绝对长度单位，最常用
• em相对相对长度单位，相对于父元素

3.4.2 如何实现响应式

• media-query,根据不同的屏幕设置不同的内容
• rem,基于根元素的长度单位

3.4.3 rem的弊端

阶梯性就是rem的弊端，如下代码

3.4.4 网页视口尺寸

• window.screen.height 屏幕高度
• window.innerHeight 视口高度
• document.body.clientHeight body高度

3.4.5 vw vh

• vh 网页视口高度的百分之一
• vw 网页视口宽度的百分之一
• vmax 取两者最大值
• vmin 取两者最小值

3.5 常见面试题

• 如何理解HTML语义化

让人更容易读懂代码，增加了代码的可读性
让搜索引擎更容易解析代码，有利于SEO

• 默认情况下，那些标签是块级元素，哪些是内联元素？

块级元素：div p ol ul h1-h5
内联元素： span button i a b

明日继续更新