前端校招面试指南，校招面试题精编大全（350页）

妖狐艹你老母 2023-01-15 14:24 103阅读 0赞

#### 前言 ####

本篇文章主要分享技能学习的路线图和前端校招面试题资料，希望能对想要校招和准备校招的同学有所帮助。

#### 技能学习 ####

**一，HTML/CSS基础**  
页面设计是前端的基础，也是入门的必经之路。无论是面试还是笔试，这部分都是必考的。

HTML是页面中内容的载体，可以展示开发者想要用户浏览的任何文字、图片、音频信息。对于HTML的各类标签，不仅要掌握日常开发中经常碰到的，也要慢慢积累那些不常用标签，块级、行内元素的定义以及二者相互转换几乎是每场技术一面必考问题。

如果将HTML标签看成一个个搭起来的盒子，那CSS则是用来“装饰”盒子的，如颜色、字体、背景、边框等。在页面开发时，展示内容的同时用户体验也至关重要，熟练使用CSS技术才能产出更高大上的页面。

![4a4d323e88b93151edf3716ec00f0631.png][]

**二， JavaScript基础**  
JavaScript主要是为Web页面添加交互行为，让页面中的盒子们“动”起来。

与C++、Java一样也有自身的语法结构，基础知识超高频考点有数据类型以及判断方法、闭包、块级作用域、函数提升与变量提升、原型链、JS继承、变量深浅拷贝等等。

另外，JS事件机制也是另一高频考点，其中主要考点有原生事件绑定、事件冒泡、事件委托、事件监听、阻止默认事件触发等等。

![f0bdbeece8a9fbfa3439a1d306a55c2d.png][]

**三，ES6新特征**  
JS的标准是以ECMA国际组织发布的ECMAScript为准的 。根据不停的版本更替，不断引入了很多新的语法特性，现在大多数浏览器与框架都支持ES6标准。

ES6新特性在面试中的必考点主要有：箭头函数、Promise相关、let/const/var这三大块。

![e9189af38431f4efe4c34eefa2b0c1c5.png][]

**四，浏览器相关**  
页面在浏览器中显示时，浏览器针对页面中的HTML、CSS、JS代码，以及各类图片、音频资源有特定的渲染机制。

同时页面资源请求是通过浏览器代为执行的，出于安全考虑，浏览器制定了同源策略，当请求方与目的地不同源则需要跨域请求资源，约有5~6种跨域方案，实现原理不同，也有不同方面的优缺点，此类问题几乎是笔试中问答题的必考题。

**五，框架相关**  
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。

现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

![c3ce905de68cd62f71e334c63876517c.png][]

#### 面试准备 ####

> 面试资料（含答案解析）领取点击==》[《前端校招面试题精编解析大全》][Link 1]

**HTML**

*  浏览器页面有哪三层构成，分别是什么，作用是什么?
 *  HTML5的优点与缺点？
 *  Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
 *  HTML5有哪些新特性、移除了哪些元素？
 *  你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
 *  每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
 *  说说你对HTML5认识?（是什么,为什么）
 *  对WEB标准以及W3C的理解与认识?
 *  HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
 *  什么是WebGL,它有什么优点?
 *  请你描述一下 cookies，sessionStorage 和 localStorage 的区别?
 *  说说你对HTML语义化的理解?
 *  **…**

![b68dbff4dd69a5c1c79dc218ecd1dd64.png][]

**CSS**

*  解释一下CSS的盒子模型？
 *  请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
 *  请你说说CSS有什么特殊性?（优先级、计算特殊值）
 *  要动态改变层中内容可以使用的方法？
 *  常见浏览器兼容性问题与解决方案？
 *  列出display的值并说明他们的作用？
 *  如何居中div, 如何居中一个浮动元素?
 *  CSS中 link 和@import 的区别是？
 *  请列举几种清除浮动的方法(至少两种)?
 *  block，inline和inlinke-block细节对比？
 *  什么叫优雅降级和渐进增强？
 *  说说浮动元素会引起的问题和你的解决办法
 *  **…**

![07242dbcf7134b22ab78b6fea8dc363d.png][]

**前端基础**

*  说一下http和https
 *  tcp三次握手，一句话概括
 *  TCP和UDP的区别
 *  WebSocket的实现和应用
 *  HTTP请求的方式，HEAD方式
 *  一个图片url访问后直接下载怎样实现？
 *  说一下web Quality（无障碍）
 *  几个很实用的BOM属性对象方法?
 *  说一下HTML5 drag api
 *  说一下http2.0
 *  补充400和401、403状态码
 *  fetch发送2次请求的原因
 *  **…**

![1e0a60657f7e3db6b3ecfe93f166217c.png][]

**前端核心**

*  JSONP的缺点
 *  跨域（jsonp，ajax）
 *  如何实现跨域
 *  dom是什么，你的理解？
 *  关于dom的api有什么
 *  ajax返回的状态
 *  实现一个Ajax
 *  如何实现ajax请求，假如我有多个请求，我需要让这些ajax请求按照某种顺序一次执行，有什么办法呢？如何处理ajax跨域
 *  如何实现一个ajax请求？如果我想发出两个有顺序的ajax需要怎么做？
 *  Fetch和Ajax比有什么优缺点？
 *  移动应用和web应用的关系
 *  **…**

![e99fc595663cddebfd5ef284f120f422.png][]

**前端进阶**

*  前端测试
 *  接口文档的制定
 *  webpack和gulp区别（模块化与流的区别）
 *  redux用处
 *  redux里常用方法
 *  angularJs和react区别
 *  vue双向绑定原理
 *  说说vue react angularjs jquery的区别
 *  node的事件方法讲讲看
 *  node的特性，适合处理什么场景
 *  你有用到Express,讲讲Express
 *  promise的状态有那些
 *  **…**

![14d4b181450491257c0ae8f5b2eb3edb.png][]

**移动端开发**

*  介绍一下react
 *  React单项数据流
 *  react生命周期函数和react组件的生命周期
 *  react和Vue的原理，区别，亮点，作用
 *  reactJs的组件交流
 *  有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
 *  项目里用到了react，为什么要选择react，react有哪些好处
 *  怎么获取真正的dom
 *  选择react的原因
 *  react的生命周期函数
 *  setState之后的流程
 *  react高阶组件知道吗？
 *  **…**

![b74ba19a0dcf1af717732abe2daa8798.png][]

**计算机基础**

*  TCP 建立连接的三次握手过程
 *  cdn 原理
 *  HTTP 的头部包含哪些内容。常见的请求方法（我为什么要 说后面的 options，head，connect）
 *  请求方法 head 特性
 *  HTTP 状态码，301和302 有什么具体区别，200 和 304 的 区别
 *  OSI 七层模型
 *  TCP 和 UDP 的区别，为什么三次握手四次挥手
 *  HTTP 缓存机制
 *  websocket 和 ajax 的区别是什么，websocket 的应用场景有哪些
 *  TCP/IP 的网络模型
 *  知道什么跨域方式吗，jsonp 具体流程是什么，如何实现 原生 Jsonp 封装，优化，对于 CORS，服务器怎么判断它该不 该跨域呢
 *  怎么生成 token，怎么传递
 *  **…**

![c8693d9b91ddec5ccb2bf22faa4d2c1b.png][]

**算法与数据结构**

*  二叉树层序遍历
 *  B 树的特性，B 树和 B+树的区别
 *  尾递归
 *  如何写一个大数阶乘？递归的方法会出现什么问题？
 *  把多维数组变成一维数组的方法
 *  知道的排序算法 说一下冒泡快排的原理
 *  Heap 排序方法的原理？复杂度？
 *  几种常见的排序算法，手写
 *  数组的去重，尽可能写出多个方法
 *  如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
 *  知道数据结构里面的常见的数据结构
 *  **…**  
    ![832483882e67c08682608de4b9530686.png][]

> **最后**：由于篇幅限制，需要校招面试题PDF文档（含答案解析）完整版，可以点赞❤+评论666，然后私信【校招】，免费获取！

[4a4d323e88b93151edf3716ec00f0631.png]: /images/20221022/aea7e060474d4b0db5f1aada264b6d34.png
[f0bdbeece8a9fbfa3439a1d306a55c2d.png]: /images/20221022/198d347ffe534b869d0bbabad6953de8.png
[e9189af38431f4efe4c34eefa2b0c1c5.png]: /images/20221022/2516cf5ad0c54090bd188fae6850b407.png
[c3ce905de68cd62f71e334c63876517c.png]: /images/20221022/fbb4ebf73a474a548873c9661e9e9c70.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=coZokyJt
[b68dbff4dd69a5c1c79dc218ecd1dd64.png]: /images/20221022/37691460df05468aa66b0e167ec63646.png
[07242dbcf7134b22ab78b6fea8dc363d.png]: /images/20221022/a165b41ba6d74ddc841355be54f2393e.png
[1e0a60657f7e3db6b3ecfe93f166217c.png]: /images/20221022/9b75250e979441e6b817d5092cbfef25.png
[e99fc595663cddebfd5ef284f120f422.png]: /images/20221022/70ba9c9990e0485d8eb441502970c592.png
[14d4b181450491257c0ae8f5b2eb3edb.png]: /images/20221022/87594977e4464adb9266839188182eae.png
[b74ba19a0dcf1af717732abe2daa8798.png]: /images/20221022/7f737ebcdc2e45c9acbb1307e0a436b4.png
[c8693d9b91ddec5ccb2bf22faa4d2c1b.png]: /images/20221022/7809490274a1460eacaf3202896cc4d6.png
[832483882e67c08682608de4b9530686.png]: /images/20221022/e11af8a0e9af45738b5e1cb3835d32a5.png