前端校招：刚出校园，没有经验的我们该如何准备面试呢？

ゞ浴缸里的玫瑰 2022-10-28 10:13 20阅读 0赞

**前言：**  
要过年了，准备实习的你是已经在实习了，还是已经辞职回家过年，准备年后重新找工作呢，又或者是错过秋招，准备2021年春招？  
那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢？

#### 简历 ####

首先肯定是要准备一份自己的简历，简历经常是给面试官的第一印象。  
简历一般包括**个人基础信息，专业技能，项目经验，其他模块**。

个人基础信息模块就不说了，太基础。

**专业技能**:  
专业技能这一节，最好除了列一些通用的技术能力，也写上一些对某个技术点的深入研究。

> 先区分大能力，如：  
> 掌握前端基础能力  
> 有移动 Web 开发能力  
> 了解新技术  
> ……

> 再归类小能力，如：  
> 了解常用的屏幕适配方案  
> 了解移动端与 PC 开发的差异  
> 了解 base64 等移动端常用的优化方案

> 最后补上亮点如：  
> ……  
> 研究过一些手势库，了解基本原理，能定制一些特殊手势实现特殊功能；

**项目经验:**  
项目经验可以写：参加实习做的项目、在学校工作室或参加编程比赛做的项目、自己折腾的技术项目。一般按照时间顺序来梳理。

项目经历不是给面试官讲清楚项目是什么，而是突出项目背后通用的技术知识的应用和你解决技术难题的思路。

可以这样写：

*  项目名称，你的角色，时间；
 *  项目简介，一句话讲清楚项目的功能和产生的价值；
 *  技术栈简介；
 *  项目中遇到的技术难点，以及怎么解决。

**其他模块**:  
跟岗位能力关联不大的，基本不重要，比如兴趣爱好等等。

> 面试的基本流程是：**自我介绍，基础部分，项目经历，拓展部分**（通常都是以面试者自己回答的内容为发散点），**面试者询问**。

#### 自我介绍 ####

面试者最好自己写好自我介绍的草稿，涉及到的内容包括但不限于简单的个人基础，为什么学前端？拿过什么样的奖项之类的？，虽然简历中有写。

面试官可能会问：

*  如何学前端的？
 *  你认为的前端都要做什么样的工作？
 *  你最近遇到过什么技术挑战？你是如何解决的？
 *  项目中遇到的问题是如何解决的？
 *  平时都是怎么学习的？
 *  实习过程中能不能完成公司给你的工作？工作量如何？  
    …

好了，前戏差不多了，现在开始划一下基础知识的重点。

#### 面试知识点 ####

> 主要内容包括**html，css，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，设计模式，项目等等**。

##### html #####

1.浏览器页面有哪三层构成，分别是什么，作用是什么?  
2.HTML5的优点与缺点？  
3.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?  
4.HTML5有哪些新特性、移除了哪些元素？  
5.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?  
6.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？  
7.说说你对HTML5认识?（是什么,为什么）  
8.对WEB标准以及W3C的理解与认识?  
9.HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?  
10.什么是WebGL,它有什么优点?  
11.请你描述一下 cookies，sessionStorage 和 localStorage 的区别?  
12.说说你对HTML语义化的理解?  
13.`link`和@import的区别?  
14.说说你对SVG理解?  
15.HTML全局属性(global attribute)有哪些?  
16.说说超链接target属性的取值和作用？  
17.`data-`属性的作用是什么？  
18.介绍一下你对浏览器内核的理解？  
19.常见的浏览器内核有哪些？  
20.iframe有那些缺点？  
21.Label的作用是什么，是怎么用的？  
22.如何实现浏览器内多个标签页之间的通信?  
23.如何在页面上实现一个圆形的可点击区域？  
24.title与h3的区别、b与strong的区别、i与em的区别？  
25.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？  
**…**  
![b494997696facee7d772c9218400b286.png][]

##### CSS #####

1.解释一下CSS的盒子模型？  
2.请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？  
3.请你说说CSS有什么特殊性?（优先级、计算特殊值）  
4.要动态改变层中内容可以使用的方法？  
5.常见浏览器兼容性问题与解决方案？  
6.列出display的值并说明他们的作用？  
7.如何居中div, 如何居中一个浮动元素?  
8.CSS中 link 和@import 的区别是？  
9.请列举几种清除浮动的方法(至少两种)?  
10.block，inline和inlinke-block细节对比？  
11.什么叫优雅降级和渐进增强？  
12.说说浮动元素会引起的问题和你的解决办法  
13.你有哪些性能优化的方法？  
14.为什么要初始化CSS样式？  
15.解释下浮动和它的工作原理？清除浮动的技巧？  
16.CSS样式表根据所在网页的位置，可分为哪几种样式表？  
17.谈谈你对CSS中刻度的认识？  
18.请你说说em与rem的区别？  
19.请你说说box-sizing属性的的用法？  
20.浏览器标准模式和怪异模式之间的区别是什么？  
21.怪异Quirks模式是什么，它和标准Standards模式有什么区别？  
22.说说你对边距折叠的理解?  
23.内联与块级标签有何区别？  
24.说说隐藏元素的方式有哪些？  
25.为什么重置浏览器默认样式，如何重置默浏览器认样式？  
26.谈谈你对BFC与IFC的理解？(是什么，如何产生，作用)  
27.说说你对页面中使用定位(position)的理解？  
28.如何解决多个元素重叠问题？  
29.页面布局的方式有哪些？  
30.overflow :hidden是否形成新的块级格式化上下文？  
![0d7dee10a4b18a27a2c7f5a4de425d44.png][]

**篇幅有限，需要更详细的内容可以[点击这里][Link 1]获取完整版PDF文档**

##### 前端基础 #####

1.说一下http和https  
2.tcp三次握手，一句话概括  
3.TCP和UDP的区别  
4.WebSocket的实现和应用  
5.HTTP请求的方式，HEAD方式  
6.一个图片url访问后直接下载怎样实现？  
7.说一下web Quality（无障碍）  
8.几个很实用的BOM属性对象方法?  
9.说一下HTML5 drag api  
10.说一下http2.0  
11.补充400和401、403状态码  
12.fetch发送2次请求的原因  
13.Cookie、sessionStorage、localStorage的区别  
14.说一下web worker  
15.对HTML语义化标签的理解  
16.iframe是什么？有什么缺点？  
17.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?  
18.Cookie如何防范XSS攻击  
19.Cookie和session的区别  
20.一句话概括RESTFUL  
21.讲讲viewport和移动端布局  
22.click在ios上有300ms延迟，原因及如何解决？  
23.addEventListener参数  
24.cookie sessionStorage localStorage区别  
25.cookie session区别  
26.介绍知道的http返回的状态码  
27.http常用请求头  
28.强，协商缓存  
29.HTTP状态码说说你知道的  
30.讲讲304  
31.强缓存、协商缓存什么时候用哪个  
32.前端优化  
33.GET和POST的区别  
34.301和302的区别  
35.如何画一个三角形  
36.状态码304和 200  
37.说一下浏览器缓存  
38.HTML5新增的元素  
39.在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？  
40.cookie和session的区别，localstorage和sessionstorage的区别  
41.常见的HTTP的头部  
42.HTTP2.0 的特性  
43.cache-control的值有哪些  
44.浏览器在生成页面的时候，会生成那两颗树？  
45.csrf和xss的网络攻击及防范  
46.怎么看网站的性能如何  
47.介绍HTTP协议(特征)  
48.说一下对Cookie和Session的认知，Cookie有哪些限制？  
49.描述一下XSS和CRSF攻击？防御方法？  
50.知道304吗，什么时候用304？  
51.具体有哪些请求头是跟缓存相关的  
52.cookie和session的区别  
53.cookie有哪些字段可以设置  
54.cookie有哪些编码方式？  
55.既然你看过图解http，那你回答下200和304的区别  
56.除了cookie，还有什么存储方式。说说cookie和localStorage的区别  
57.浏览器输入网址到页面渲染全过程  
58.HTML5和CSS3用的多吗？你了解它们的新属性吗？有在项目中用过吗？  
59.http常见的请求方法  
60.get和post的区别  
61.说说302，301，304的状态码  
62.web性能优化  
63.浏览器缓存机制  
64.post和get区别  
65.说一下css盒模型  
66.画一条0.5px的线  
67.link标签和import标签的区别  
68.transition和animation的区别  
69.Flex布局  
70.BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）  
71.垂直居中的方法  
72.关于js动画和css3动画的差异性  
73.说一下块元素和行元素  
74.多行元素的文本省略号  
75.visibility=hidden, opacity=0，display:none  
76.双边距重叠问题（外边距折叠）  
77.position属性  
78.浮动清除  
79.css3新特性  
80.CSS选择器有哪些，优先级呢  
81.怎么样让一个元素消失  
82.介绍一下盒模型  
83.css动画如何实现  
84.如何实现图片在某个容器中居中的？  
85.如何实现元素的垂直居中  
86.CSS3中对溢出的处理  
87.float的元素，display是什么  
88.隐藏页面中某个元素的方法  
89.三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响  
90.什么是BFC  
91.calc属性  
92.有一个width300，height300，怎么实现在屏幕上垂直水平居中  
93.display：table和本身的table有什么区别  
94.position属性的值有哪些及其区别  
95.z-index的定位方法  
96.CSS盒模型  
97.如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？  
98.对CSS的新属性有了解过的吗？  
99.用的最多的css属性是啥？  
100.line-height和height的区别  
101.设置一个元素的背景颜色，背景颜色会填充哪些区域？  
102.知道属性选择器和伪类选择器的优先级吗  
103.inline-block、inline和block的区别；为什么img是inline还可以设置宽高  
104.用css实现一个硬币旋转的效果  
105.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法  
106.CSS画正方体，三角形  
107.overflow的原理  
108.清除浮动的方法  
109.box-sizing的语法和基本用处  
110.使元素消失的方法有哪些？  
111.两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的  
112.说说盒子模型  
113.display  
114.怎么隐藏一个元素  
115.display:none和visibilty:hidden的区别  
116.相对布局和绝对布局，position:relative和obsolute  
117.flex布局  
118.block、inline、inline-block的区别  
119.css的常用选择器  
120.css布局  
121.css定位  
122.relative定位规则  
123.垂直居中  
124.css预处理器有什么  
125.get请求传参长度的误区  
126.补充get和post请求在缓存方面的区别  
127.说一下闭包  
128.说一下类的创建和继承  
129.如何解决异步回调地狱  
130.说说前端中的事件流  
131.如何让事件先冒泡后捕获  
132.说一下事件委托  
133.说一下图片的懒加载和预加载  
134.mouseover和mouseenter的区别  
135.js的new操作符做了哪些事情  
136.改变函数内部this指针的指向函数（bind，apply，call的区别）  
137.js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？  
138.js拖拽功能的实现  
139.异步加载js的方法  
140.Ajax解决浏览器缓存问题  
141.js的节流和防抖  
142.JS中的垃圾回收机制  
143.eval是做什么的  
144.如何理解前端模块化  
145.说一下Commonjs、AMD和CMD  
146.对象深度克隆的简单实现  
147.实现一个once函数，传入函数参数只执行一次  
148.将原生的ajax封装成promise  
149.js监听对象属性的改变  
150.如何实现一个私有变量，用getName方法可以访问，不能直接访问  
151.和=、以及Object.is的区别  
152.setTimeout、setInterval和requestAnimationFrame之间的区别  
153.实现一个两列等高布局，讲讲思路  
154.自己实现一个bind函数  
155.用setTimeout来实现setInterval  
**…**  
![b114f72f5a242ce30301126fb2649dc6.png][]

**篇幅有限，需要更详细的内容可以[点击这里][Link 1]获取完整版PDF文档**

##### 前端核心 #####

1.JSONP的缺点  
2.跨域（jsonp，ajax）  
3.如何实现跨域  
4.dom是什么，你的理解？  
5.关于dom的api有什么  
6.ajax返回的状态  
7.实现一个Ajax  
8.如何实现ajax请求，假如我有多个请求，我需要让这些ajax请求按照某种顺序一次执行，有什么办法呢？如何处理ajax跨域  
9.如何实现一个ajax请求？如果我想发出两个有顺序的ajax需要怎么做？  
10.Fetch和Ajax比有什么优缺点？  
11.移动应用和web应用的关系  
12.知道PWA吗  
13.做过移动端吗  
14.知道touch事件吗

##### 前端进阶 #####

1.前端测试  
2.接口文档的制定  
3.webpack和gulp区别（模块化与流的区别）  
4.redux用处  
5.redux里常用方法  
6.angularJs和react区别  
7.vue双向绑定原理  
8.说说vue react angularjs jquery的区别  
9.node的事件方法讲讲看  
10.node的特性，适合处理什么场景  
11.你有用到Express,讲讲Express  
12.promise的状态有那些  
13.数组移除第一个元素的方法有哪些？  
![406650808ed0187af5117d61acac750b.png][]

##### 移动端开发 #####

1.介绍一下react  
2.React单项数据流  
3.react生命周期函数和react组件的生命周期  
4.react和Vue的原理，区别，亮点，作用  
5.reactJs的组件交流  
6.有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢  
7.项目里用到了react，为什么要选择react，react有哪些好处  
8.怎么获取真正的dom  
9.选择react的原因  
10.react的生命周期函数  
11.setState之后的流程  
12.react高阶组件知道吗？  
13.React的生命周期  
14.说说自己理解的react  
15.react的组件是通过什么去判断是否刷新的

##### 计算机基础 #####

1.TCP 建立连接的三次握手过程  
2.cdn 原理  
3.HTTP 的头部包含哪些内容。常见的请求方法（我为什么要 说后面的 options，head，connect）  
4.请求方法 head 特性  
5.HTTP 状态码，301和302 有什么具体区别，200 和 304 的 区别  
6.OSI 七层模型  
7.TCP 和 UDP 的区别，为什么三次握手四次挥手  
8.HTTP 缓存机制  
9.websocket 和 ajax 的区别是什么，websocket 的应用场景有哪些  
10.TCP/IP 的网络模型  
11.知道什么跨域方式吗，jsonp 具体流程是什么，如何实现 原生 Jsonp 封装，优化，对于 CORS，服务器怎么判断它该不 该跨域呢  
12.怎么生成 token，怎么传递  
13.操作系统进程和线程的区别  
14.什么是进程线程  
15.线程的那些资源共享，那些资源不共享  
16.操作系统里面进程和线程的区别  
17.Linux 查询进程指令，查询端口，杀进程  
18.进程间的通信方式有哪些？  
19.Redis 和 mysql

![da2e9e1b28bbd31a1f8b38fedff7417d.png][]

##### 算法与数据结构 #####

1.二叉树层序遍历  
2.B 树的特性，B 树和 B+树的区别  
3.尾递归  
4.如何写一个大数阶乘？递归的方法会出现什么问题？  
5.把多维数组变成一维数组的方法  
6.知道的排序算法 说一下冒泡快排的原理  
7.Heap 排序方法的原理？复杂度？  
8.几种常见的排序算法，手写  
9.数组的去重，尽可能写出多个方法  
10.如果有一个大的数组，都是整型，怎么找出最大的前 10 个数  
11.知道数据结构里面的常见的数据结构  
12.找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2  
13.合并两个有序数组  
14.给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）  
**……**  
![77d9cf7f87af0b49851359e4328dd4bb.png][]

> 文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要可以[点击这里][Link 1]获取**前端校招面试题PDF完整版**，包括前端校招面试题和答案解析。

[b494997696facee7d772c9218400b286.png]: /images/20221024/50236c97535f404e84e009390b01f34d.png
[0d7dee10a4b18a27a2c7f5a4de425d44.png]: /images/20221024/14230cc5514b4b5e88814329757fa096.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=eAc4Yvht
[b114f72f5a242ce30301126fb2649dc6.png]: /images/20221024/36c9ef59fa9d4d008efafa08395f18c9.png
[406650808ed0187af5117d61acac750b.png]: /images/20221024/ec603c3cc57a4e599b1fa9762c981578.png
[da2e9e1b28bbd31a1f8b38fedff7417d.png]: /images/20221024/ae1c5dd60cbd473984bf961323634bd9.png
[77d9cf7f87af0b49851359e4328dd4bb.png]: /images/20221024/eb79f89c4b404c749b757f55995e9232.png