搞定大厂前端一面的必备知识
一 、关于面试
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