前端面试题库
其他技术无关：
三五年规划
其他技术相关：
es6新特性
前端如何优化
性能优化相关(这个点很大，设计很多方面，不要自以为优化就是网上经常看到的那一套)
lodash相关
mvvm的好处
设计模式相关(单例、发布订阅等)
浏览器渲染过程
设计一个模版引擎
设计一个打包工具
设计一个mvvm框架需要注意的case
源码阅读相关
jQuery中被誉为工厂函数的是？
如何修改chrome记住密码后自动填充表单的黄色背景？
HTML5离线缓存机制
HTML5新增标签有哪些
如何使用storage 对js文件进行缓存
谈谈你对重构的理解
什么样的前端代码是好的
对前端工程师这个职位是怎么理解的？它的前景会怎么样？
你觉得前端工程师的价值体现在哪里
平时如何管理你的项目
跨域
MVC和MVVM差异，MVP
代码题：
请用css或js实现物体的平移动画
编写一个js函数fn，该函数有一个参数n（数字类型），其返回一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是[2,32]
编写一个 getElementsByClassName 封装函数?
写一个通用事件监听函数
如何判断一个对象是否为数组
数组去重
排序（冒泡排序，快速排序）
编写一个方法，求一个字符串的字节长度
js实现一个闭包函数，每次调用都自增1
['1','2','3'].map(parseInt] 输出什么？为什么？
js实现函数运行一秒后打印输出0~9
实现对一个数组或者对象的浅拷贝和深拷贝
写一个二分法查找
js时间分段
求水仙花数
请使用递归算法在TODO注释后实现通过节点key数组寻找json对象中的对应值
常见排序算法的时间复杂度,空间复杂度
下面代码输出什么，若要输出0至9，该怎么办？
for(var i=0;i<10;i++){ setTimeout(()=>{console.log(i)},0) }
说一下macrotask 和 microtask？并说出下面代码的运行结果。
console.log('a');
setTimeout(() => {
console.log('b');
}, 0);
console.log('c');
Promise.resolve().then(() => {
console.log('d');
})
.then(() => {
console.log('e');
});
console.log('f');
实现一个once函数，传入函数参数只执行一次
function ones(func){ var tag=true; return function(){ if(tag==true){ func.apply(null,arguments); tag=false; } return undefined } }
将原生ajax封装成promise
var myNewAjax=function(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.open('get',url); xhr.send(data); xhr.onreadystatechange=function(){ if(xhr.status==200&&readyState==4){ var json=JSON.parse(xhr.responseText); resolve(json) }else if(xhr.readyState==4&&xhr.status!=200){ reject('error'); } } }) }
从promise、process.nextTick、setTimeout出发，谈谈Event Loop中的Job queue
setTimeout(function(){console.log(1)},0); new Promise(function(resolve,reject){ console.log(2); resolve(); }).then(function(){console.log(3) }).then(function(){console.log(4)}); process.nextTick(function(){console.log(5)}); console.log(6); //输出2,6,5,3,4,1
如何实现数组的随机排序？（两种方法以上）
react相关：
react核心思想
react constructor,super解释一下
setState
生命周期函数有哪些
axios封装
ant-design用到哪些功能
react组件封装（接口设计）
react-router原理，了解过react-router内部实现机制吗？
React中的controlled component 和 uncontrolled component区别（受控组件和不受控组件）
虚拟DOM的原理
简要介绍一下React中的refs以及它的作用
简要介绍一下key以及它的作用
在实际开发中shouldComponentUpdate有什么作用
setState的第二个参数是一个回调函数，组件更新完后执行的回调函数（setState函数是异步的）
webpack相关：
谈谈你对webpack的看法
webpack常用插件
webpack打包原理
webpack文件划分
chunk
loader原理
webpack优化措施
webpack常见优化手段有哪些？
webpack打包优化
设计一个自己的打包工具需要设计哪些主要功能
babel相关
算法部分：
数组去重
排序
数组扁平化处理：实现一个flatten方法，使得输入一个数组，该数组里面的元素也可以是数组，该方法会输出一个扁平化的数组。
如果在17问的前提下，要做去重和排序处理又该怎么做（不用给出具体代码）
http，html和浏览器部分：
303和304的区别
304：设置了缓存，请求的文档并没有发生改变，所以返回304状态码不重新拉取数据，直接使用缓存中的数据
token怎么传到后台
http请求中的keep-alive有了解吗？
get请求传参长度的误区
补充get和post请求在缓存方面的区别
http和https（基本概念，区别，工作原理，https优点，缺点）
http和https有何差异？听过SPDY吗？
谈谈你对TCP的理解？对OSI七层协议和五层网络架构有了解吗？
TCP和UDP的区别
websocket的实现和应用
http请求方式，head方式
一个图片url访问后直接下载怎么实现？
web quality（无障碍）
几个很实用BOM属性对象方法
HTML5 drag API
http2.0
400,401,403状态码
fetch发送两次请求的原因
cookie，sessionStorage，localStorage的区别
web worker
对HTML语义化标签的理解
iframe是什么？有什么缺点？
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
Cookie如何防范XSS攻击
Cookie和session的区别
讲讲viewport和移动端布局
click在ios上有300ms延迟，原因及如何解决？
浏览器多个标签页面之间的通信
页面缓存
http缓存
你之前遇到过跨域问题吗？是怎么解决的？
html5多线程
服务器推送
浏览器内核有哪些
HTML5新特性
列出块级元素和行内元素，并说出两者区别
数据持久化技术(ajax)?简述ajax流程
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
为什么要有同源限制
浏览器缓存和服务端缓存控制你了解多少？说说看？
HTTP request报文结构是怎样的
HTTP response报文结构是怎样的
web开发中会话跟踪的方法有哪些
Ajax：
ajax 和 jsonp ？
ajax和jsonp的区别：
相同点：都是请求一个url
不同点：ajax的核心是通过xmlHttpRequest获取内容
jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本。
ajax执行流程？
1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
xhr对象 status ? readystate?
status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码。
readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readystate 0~4
0：未初始化状态：此时，已经创建了一个XMLHttpRequest对象
1： 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2：已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应
3：正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
4：完成响应状态：此时，已经完成了HTTP响应的接收
说出几个http协议状态码?
200, 201, 302, 304, 400, 404, 500
200：请求成功
201：请求成功并且服务器创建了新的资源
302：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。
304：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
400：服务器不理解请求的语法。
404：请求的资源（网页等）不存在
500： 内部服务器错误
ajax中 get 和 post 有什么区别?
get和post都是数据提交的方式。
get的数据是通过网址问号后边拼接的字符串进行传递的。post是通过一个HTTP包体进行传递数据的。
get的传输量是有限制的，post是没有限制的。
get的安全性可能没有post高，所以我们一般用get来获取数据，post一般用来修改数据。
jsonp原理？ 缺点?
工作原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。
缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在一定的安全隐患。如果返回的数据格式有问题或者返回失败了，并不会报错。
如何确保ajax或连接不走缓存路径
在Ajax中使用Get请求数据不会有页面缓存的问题，而使用POST请求可是有时候页面会缓存我们提交的信息，导致我们发送的异步请求不能正确的返回我们想要的数据
$.post(url,data ,ranNum:Math.random()} ,function(data){}）
ranNum : 这个是防止缓存的核心，每次发起请求都会用Math.random()方法生成一个随机的数字，这样子就会刷新url缓存
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试
页面性能：
提升页面性能的方法有哪些
异步加载的方式有哪些
defer,async的区别是什么
什么是浏览器缓存
缓存的分类有哪些（跟缓存相关的http头部有哪些）
什么是CND
预解析DNS？
如何开启DNS预解析？
渲染机制：
DTD是什么
DOCTYPE是什么？有什么作用？标准模式和兼容模式各有什么区别？
常用的DOCTYPE类型
浏览器的渲染过程
重排（reflow）是什么
重绘（repaint）是什么
如何减少重绘，避免重排？
HTTP：
http的主要特点
介绍下http报文的组成部分
常见的http方法有哪些
post和get的区别是什么
http状态码及其含义
常见状态码有哪些
介绍下持久链接（http1.1）
管线化是什么
管线化的特点是什么
错误监控、产品性能体系
前端错误分类有哪些
前端错误捕获方式分别是什么
如何使用Object.onerror捕获资源加载错误？
跨域的JS运行错误可以捕获么？错误提示是什么，应该怎么处理？
客户端上报错误的基本原理是什么？
通讯类：
什么是跨域通信？
什么是同源策略？
前后端通信有哪些？
如何创建ajax？
跨域解决方案有哪些？（六种方案）
安全类：
常见的攻击方式有哪些？
CSRF的原理及防御措施？
XSS的原理及防御措施？
请说明SQL注入的原理及防范方法
前端性能优化的关键时间点：
前端性能优化的关键时间点有哪些，分别是什么？
开始渲染时间如何获取？如何优化？
DOM Ready时间如何获取？如何优化？
首屏时间如何获取？如何优化？
onload时间如何获取？如何优化？
css部分：
css渲染
css布局（两栏布局，三栏布局）
用过flex布局吗？flex-grow和flex-shrink属性有什么用？
css盒模型的理解
画一条0.5px的线
link标签和import标签的区别
transition和animation的区别
BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）
垂直居中的几种方法
关于js动画和css3动画的差异性
清除浮动有几种方式?
简述几个css hack?
:before 和 ::before 区别?
如何让一个div 上下左右居中?（三种方法）
伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?
placeholder?如何在ie8上兼容placeholder这个效果
常见兼容性问题？
如果对css进行优化如何处理？
sass和scss有什么区别?sass一般怎么样编译的
图片和文字在同一行显示?
1 在css中给div添加上“vertical-align:middle”属性。
2 分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行。
3 把图片设置为背景图片。
a标签中 active hover link visited 正确的设置顺序是什么?
a标签的link、visited、hover、active是有一定顺序的
a:link
a:visited
a:hover
a:active
为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。
什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在<head>之间加入一个<link>或者<script>元素就可以了。
多行元素的文本省略号
visibility=hidden, opacity=0，display:none
双边距重叠问题（外边距折叠）
position
伪元素伪类
css预处理器
设置元素浮动后，该元素的display值是多少？
选择器类型及优先级
一个满屏‘品’字布局如何设计？
::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用
CSS3新特性
css有哪些样式可以给子元素继承
box-sizing常用的属性有哪些？分别有啥作用？
清楚浮动的方式有哪些？比较好的是哪一种？
说说样式权重的优先级
块级元素水平垂直居中的方法（考虑定宽高和不定宽高的情况）
如何实现一个自适应的正方形
如何使用CSS实现硬件加速？
重绘和回流（重排）是什么，如何避免？
BFC是什么？介绍一下，如何触发BFC？
说一说你知道哪些伪类选择器？
简要介绍一下一种css预处理器？
- CSS选择器有哪些
- css sprite是什么,有什么优缺点
display: none;与visibility: hidden;的区别- css hack原理及常用hack
- specified value,computed value,used value计算方法
link与@import的区别display: block;和display: inline;的区别- PNG,GIF,JPG的区别及如何选
- CSS有哪些继承属性
- IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
- 容器包含若干浮动元素时如何清理(包含)浮动
- 什么是FOUC?如何避免
- 如何创建块级格式化上下文(block formatting context),BFC有什么用
- display,float,position的关系
- 外边距折叠(collapsing margins)
- 如何确定一个元素的包含块(containing block)
- stacking context,布局规则
- 如何水平居中一个元素
- 如何竖直居中一个元素
css盒模型：
CSS盒模型是什么？
标准模型和IE模型的区别？
CSS如何设置这两种模型？
JS如何设置/获取盒模型对应的宽高
BFC是什么，讲一下原理？
BFC布局规则是？
哪些元素会生成BFC?
BFC的使用场景有哪些？（1.自适应两栏布局；2.清楚内部浮动；3.防止垂直margin重叠）
css布局：
三栏布局，高度已知，左右两栏固定，中间自适应的三栏布局有几种实现方式，各自的优缺点是什么？
三栏布局，高度未知，以上布局哪些仍可用，哪些不可用？
三栏布局，高度已知，左中固定，右自适应
三栏布局，上下固定，中自适应
CSS居中布局有哪些，适用于什么场景，举例说明？
CSS布局时需要注意哪些方面？
html部分：
语义化的理解
HTML5离线存储怎么使用，解释工作原理
浏览器是怎么对HTML5的离线存储资源进行管理和加载的？
HTML5的存储方案有哪些
HTML5提供了sessionStorage、localStorage和离线存储作为新的存储方案，其中sessionStorage和localStorage 都是采用键值对的形式存储，两者都是通过setItem、getItem、removeItem来实现增删查改，而sessionStorage是会话存储，也就是说 当浏览器关闭之后sessionStorage也自动清空了，而localStorage不会，它没有时间上的限制。离线存储也就是应用程序缓存，这个通常用来 确保web应用能够在离线情况下使用，通过在html标签中属性manifest来声明需要缓存的文件，这个属性的值是一个包含需要缓存的文件的文件名的文件， 这个manifest文件声明的缓存文件可在初次加载后缓存在客户端，可以通过更新这个manifest文件来达到更新缓存文件的目的。
viewport的常见设置有哪些
viewport常常使用在响应式开发以及移动web开发中，viewport顾名思义就是用来设置视口，主要是规定视口的宽度、视口的初始缩放值、 视口的最小缩放值、视口的最大缩放值、是否允许用户缩放等。一个常见的viewport设置如下：
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" />
其中同时设置width和initial-scale的目的是为了解决iphone、ipad、ie横竖屏不分的情况，因为这两个值同时存在时会取较大值。
移动开发：
移动开发中使用rem的优点
列举移动开发中meta基础知识点
移动端上什么是点击穿透?
什么是移动端的300ms延迟？什么是点击穿透？解决方案?
jQuery：
你觉得jQuery源码有哪些写的好的地方
使用jQuery实现，获取位于id为fruit的下value为apple的option元素
Jq中如何实现多库并存?
Jq中get和eq有什么区别？
Jq如何判断元素显示隐藏？
Jq绑定事件的几种方式？on bind ?
Jq中如何将一个jq对象转化为dom对象？
Jq中有几种选择器?分别是什么?
Jq中怎么样编写插件?
$('div+.ab')和$('.ab+div') 哪个效率高？
$.map和$.each有什么区别
$(function(){})和window.onload 和 $(document).ready(function(){})
Jq中 attr 和 prop 有什么区别
你对数据校验是怎么样处理的？jquery.validate？
通俗的说，就是为保证数据的完整性，用一种指定的算法对原始数据计算出的一个校验值。接收方用同样的算法计算一次校验值，如果和随数据提供的校验值一样，就说明数据是完整的。
用正则表达式来处理;
jquery.validate：为表单验证插件
在jq中 mouseover mouseenter mouseout mouseleave 和 hover有什么关联?
mouseenter与mouseover：
不论鼠标指针穿过被选中元素或其子元素，都会触发mouseover事件。
只有在鼠标指针穿过被选元素时，才会触发mouseentr事件。
mouseout与mouseleave：
不论鼠标离开被选元素还是任何子元素，都会触发mouseout事件。
只有在鼠标指针离开被选元素时，才会触发mouseleave事件。
hover:
hover是一个符合方法，相当于mouseenter+mouseleave。
项目相关：
技术沉淀
项目中负责什么角色
表单验证是怎么做的
自己做了什么，解决了什么棘手问题，项目成果
最近在看哪些前端方面的书
为什么大型应用要从多个域名请求资源？
简要的说并且说重点，从使用技术栈到项目架构的设计到技术难点的实现，分点说
面试官也是人，他也会好奇一些神奇的项目是怎么实现的，所以我的建议也就是平时多做一些有水平的项目，不要把todolist、图书馆管理系统这种烂大街的项目写在自己的简历上。
平时工作中怎么样进行数据交互?如果后台没有提供数据怎么样进行开发?mock数据与后台返回的格式不同意怎么办?
由后台编写接口文档、提供数据接口实、前台通过ajax访问实现数据交互；
在没有数据的情况下寻找后台提供静态数据或者自己定义mock数据；
返回数据不统一时编写映射文件 对数据进行映射。
上一个项目是什么？主要负责哪些？购物车流程?支付功能?
主要负责哪些就讲主要做哪些功能模块：
1）商品模块:
1、商品列表：商品排序 商品筛选 商品过滤 商品查询 商品推荐
2、商品详情:类型推荐 商品简介 商品详情 商品评价 售后维护
2)购物车模块：商品编号、数量、价格、总额、运费、运输选项、运费总计、从购物车删除选项、更新数量、结账、继续购物、商品描述、库存信息
简述下工作流程
我在之前的公司工作流程大概是这样的：公司定稿会结束以后，会进行简单的技术研讨，然后我们前端会进行先期的技术准备。前端切图人员会进行psd设计稿切图，并且将css文件进行整合。我们主要编写JS部分，其中包括搭建前端框架（大项目），编写js业务和数据持久化操作，我们也会编写js插件并且进行封装方便使用，还有就是编写JS前端组建和JS测试单元，最后将完成的JS部分与切图人员提供的HTML页面进行整合。最后对完成的页面进行功能测试、页面兼容、产品还原。然后对产品进行封存，提交测试。如果出现BUG会返回给我们开发人员进行修改，再提交测试，最后测试成功，进行版本封存。等到程序全部上线的时候进行线上测试。
