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

前言

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

技能学习

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

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

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

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

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

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

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

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

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

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

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

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

面试准备

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

HTML

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

CSS

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

前端基础

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

前端核心

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

前端进阶

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

移动端开发

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

计算机基础

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，怎么传递
…

算法与数据结构

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

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