前端常见面试题html/css，js，ES6，Vue，前端工程化等等

最近找工作阶段，总结了不少前人的面经，总想整理的特别特别好再发出来，但是发现如果一直等等等的话，就不知道等到猴年马月了，先发一些吧，持续更新！！！

答案自己去整理吧，整理的过程也是学习的过程~~~

格式没有统一看着很尴尬啊，以后有时间再弄吧emmm

基础

简单介绍一下自己，为什么选择做前端？

介绍下你最近的项目？

说出你觉得自己身上最优秀的能力？

说出你未来的规划？

你最近有没有什么想要学习的技术？

你有什么要问我的？

HTML、CSS篇以及布局相关

说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
position的值有哪些？
css选择器有哪些？选择器的优先级？
CSS属性选择器和伪类选择器的优先级?
使用css实现一个持续的动画效果
animate和translate有没有用过，一些常见的属性说下？
CSS实现宽度自适应100%，宽高16:9的比例的矩形。
如何实现左边两栏一定比例，左栏高度随右栏高度自适应？
css有哪些垂直水平居中方式？
右边宽度固定，左边自适应怎么布局？
Flex布局用的多吗？
移动端适配怎么做的？
你用到了Flex，请问flex怎么设置垂直水平居中？

JavaScript篇(重要)

变量提升遇到的一些简单code题
说一下对闭包的理解，以及你在什么场景下会用到闭包？
说一下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？
iframe的缺点有哪些？
Ajax的原生写法
为什么会有同源策略？
前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决
怎么判断两个对象是否相等
代码实现一个对象的深拷贝
从发送一个url地址到返回页面，中间发生了什么
说下工作中你做过的一些性能优化处理
js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
* JS常见的dom操作api
* 解释一下事件冒泡和事件捕获
* 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
* 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
* this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
* call，apply，bind
* 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
* 创建对象的多种方式
* 实现继承的多种方式和优缺点
* new 一个对象具体做了什么
* 手写Ajax，XMLHttpRequest
* 变量提升
* 举例说明一个匿名函数的典型用例
* 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
* attribute和property的区别
* document load和document DOMContentLoaded两个事件的区别
* === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
* typeof能够得到哪些值
* 什么是“use strict”,好处和坏处
* 函数的作用域是什么？js 的作用域有几种？
* JS如何实现重载和多态
* 常用的数组api，字符串api
* 原生事件绑定（跨浏览器），dom0和dom2的区别？
* 给定一个元素获取它相对于视图窗口的坐标
* 如何实现图片滚动懒加载
* js 的字符串类型有哪些方法？正则表达式的函数怎么使用？
* 深拷贝
* 编写一个通用的事件监听函数
* web端cookie的设置和获取
* setTimeout和promise的执行顺序
* JavaScript 的事件流模型都有什么？
* navigator对象，location和history
* js的垃圾回收机制
* 内存泄漏的原因和场景
* DOM事件的绑定的几种方式
* DOM事件中target和currentTarget的区别
* typeof 和 instanceof 区别，instanceof原理
* js动画和css3动画比较
* JavaScript 倒计时（setTimeout）
* js处理异常
* js的设计模式知道那些
* 轮播图的实现，以及轮播图组件开发，轮播10000张图片过程
* websocket的工作原理和机制。
* 手指点击可以触控的屏幕时，是什么事件？
* 什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？(函数柯里化一些了解，以及在函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
* JS代码调试

ES6篇(引导篇，相对重要)

这块面试官主要是问你哪块用的比较多，你可以引导性地把面试官往你会的地方说

谈一谈 promise
如何实现一个promise，promise的原理，以及它的两个参数是什么？
promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？
所有的 ES6 特性你都知道吗？如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
es6的继承和es5的继承有什么区别
promise封装ajax
let const的优点
es6 generator 是什么，async/await 实现原理
ES6和node的commonjs模块化规范区别
箭头函数，以及它的this
map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？

Vue相关知识点 (框架之一重要)

因为我简历上主要写的是会vue啦，其实也不是精通，因为边学边开发，主要是实践的项目不是特别复杂，不过常见的一些坑点还是有遇到的啦，这个是看你会的框架问相应的知识点

Vue是如何实现双向绑定的？看过Vue源码吗？
简单阐述一下vue的生命周期
如何实现一个自定义组件，不同组件之间如何通信的？
父子组件如何通信的？
前端路由有没有用过，你在项目中怎么实现路由的嵌套？
nextTick和Vuex两个有没有用过，分为什么情况下用到？
Vue的响应式原理你知道是怎么实现的吗？你觉得订阅者-发布者模式和观察者模式有区别吗？有的话，说一下它们的区别。
CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

构建（工程化&模块化）

工程化

对webpack,gulp，grunt等有没有了解?对比。
webpack的入口文件怎么配置，多个入口怎么分割。
webpack的loader和plugins的区别
gulp的具体使用。
前端工程化的理解、如何自己实现一个文件打包，比如一个JS文件里同时又ES5 和ES6写的代码，如何编译兼容他们

模块化

对AMD,CMD,CommonJS有没有了解?
为什么要模块化？不用的时候和用RequireJs的时候代码大概怎么写？
说说有哪些模块化的库，有了解过模块化的发展的历史吗？
分别说说同步和异步模块化的应用场景，说下AMD异步模块化实现的原理？
如何将项目里面的所有的require的模块语法换成import的ES6的语法？
使用模块化加载时，模块加载的顺序是怎样的，如果不知道，根据已有的知识，你觉得顺序应该是怎么样的？

Other

浏览器高级特性有了解吗？（service worker）
浏览器CSS Hack手段有哪些？
为什么浏览器需要同源策略？
浏览器跨域的几种方式？
浏览器性能怎么优化？（从多个方向上去答）
JS基本数据类型有哪些？

计算机网络篇(相对重要)

http、https、以及websocket的区别
http常见的状态码，400,401,403状态码分别代表什么？
协商缓存和强缓存的区别
说下计算机网络的相关协议？
HTTP协议头含有哪些重要的部分，HTTP状态码
网络url输入到输出怎么做？
性能优化为什么要减少 HTTP 访问次数？
Http请求的过程与原理
https（对是https）有几次握手和挥手？https的原理。
http有几次挥手和握手？TLS的中文名？TLS在哪一网络层？
TCP连接的特点，TCP连接如何保证安全可靠的？
为什么TCP连接需要三次握手，两次不可以吗，为什么
为什么tcp要三次握手四次挥手？
tcp的三次握手和四次挥手画图（当场画写ack 和 seq的值）？
tcp与udp的区别
get和post的区别？什么情况下用到？
http2 与http1 的区别？
websocket
什么是tcp流，什么是http流
babel是如何将es6代码编译成es5的
http2的持久连接和管线化
域名解析时是tcp还是udp
域名发散和域名收敛
Post一个file的时候file放在哪的？
HTTP Response的Header里面都有些啥？

浏览器相关（兼容性，跨域等等）

因为我的工作主要还在专注在web端，所以浏览器兼容性的问题没有少碰到过，因主要是兼容IE8以上以及其他各个浏览器，这个就当做总结一下吧(在被问到这一块的时候其实我是有加分的，因为回答的比较多2333)

使用meta标签来调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换，现在使用meta标签来强制使用最新的内核渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

rgba不支持IE8 解决：用opacity
CSS3前缀

-webkit- webkit渲染引擎 chrome/safari
-moz gecko引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 opera

过渡不兼容IE8，可以用JS动画实现
background-size不支持IE8，可以用img
使用PIE.htc让IE6/7/8支持CSS3部分属性，像CSS3的border-radius，box-shadow，css backgrounds(-pie-background),Gradients,RGBA属性

.border-radius {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #abcdef;
behavior: url(css/PIE.htc);
}

用css hack

IE6: _
IE7/7: *
IE7/Firefox: !important
IE7: *+
IE6/7/8: 9
IE8:

:IE浮动margin产生的双倍距离,通常使用float:left来实现，浏览器存在兼容性问题，导致图片与后面的内容存在margin不一致的问题，解决方法就是给图片添加diaplay:inline即可
ie8不支持nth-child，但支持first-child和last-child，可以通过转化写法来处理问题，span:nth-child(2)可以转换为span:first-child+span,可以使ie8显示该内容，last-child可以自定义一个class类兼容ie8写法
IE8下不支持HTML5属性placeholder，解决问题的js插件挺多的，常用的使用jquery.JPlaceholder.js插件处理问题
识别HTML5元素，IE中可能无法识别nav/footer，使用html5shiv
火狐下表单阻止表单默认提交事件：在form中添加 action="javascript:",秒杀上述所有默认行为;
始终为按钮button添加type属性，IE下的默认类型是button，其他浏览器下的默认类型是submit
IE下删除所有不必要的console语句，IE下当遇到console时不识别之后报错，代码不会执行，或者全局自定义一个window.console方法
IE浏览器下由于参数过长导致通过GET请求下载文件方法报错，解决改为POST请求
IE浏览器下iframe弹窗中输入框光标丢失（无法输入）问题，解决清一下frame
兼容IE8 new Date()返回NaN问题，解决自定义方法

function parseISO8601(dateStringInRange) {
var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
date = new Date(NaN), month,
parts = isoExp.exec(dateStringInRange);
if(parts) {
month = +parts[2];
date.setFullYear(parts[1], month - 1, parts[3]);
if(month != date.getMonth() + 1) {
date.setTime(NaN);
}
}
return date;
}

跨域，为什么JS会对跨域做出限制
前端安全：xss，csrf...
浏览器怎么加载页面的？script脚本阻塞有什么解决方法？defer和async的区别？
浏览器强缓存和协商缓存
浏览器的全局变量有哪些
浏览器同一时间能够从一个域名下载多少资源
按需加载，不同页面的元素判断标准
web存储、cookies、localstroge等的使用和区别
浏览器的内核
如何实现缓存机制？（从200缓存，到cache到etag再到）
说一下200和304的理解和区别
什么是预加载、懒加载
一个 XMLHttpRequest 实例有多少种状态？
dns解析原理，输入网址后如何查找服务器
服务器如何知道你？
浏览器渲染过程
ie的某些兼容性问题
session
拖拽实现
拆解url的各部分