最近赶上“金三银四”，趁着这个时间，去面试了一些公司，这里把面试的内容整理一下，供大家参考，大家共同学习进步，也希望offer快到碗里来！
HTML5新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
关于SEO性能优化
（1） 减少http请求次数：CSS Sprites， JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的
怎样理解语义化
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
怎么实现跨域，jsonp跨域原理，cors跨域需要设置什么？
跨域问题是这是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。
（1）script标签jsonp跨域；
（2）nginx反向代理；
（3）node.js中间代理跨域；
（4）后端在头部信息设置安全域名；
（5）后端在服务器上设置cors。
jsonp跨域原理：首先在客户端注册一个callback，然后把callback的名字传给服务器，服务器生成json数据，然后以JavaScript语法生成一个function，function名字就是传递上来的参数jsonp，最后将json数据直接以参数方式放置到function中，生成js文档，返回给客户端，客户端浏览器解析script标签，并执行返回的JavaScript文档，此时数据作为参数，传入到客户端预先定义好的callback函数里（动态执行回调函数）
cors跨域需要设置头部Access-Control-Allow-Origin 参数
谈一谈对this的理解
通常情况下，this指向的是执行上下文中当前的对象；
在事件函数中，this通常指向的是事件源DOM元素对象；
在构造函数中，this通常指向其new所创建的对象本身。
如何绑定this
可以使用call（）、apply（）绑定
使用Function.prototype.bind()进行绑定
使用new关键字进行绑定
call（）、apply（）、bind（）区别
apply、call、bind 都是可以改变 this 的指向的，但是这三个函数稍有不同。
其实 apply 和 call 基本类似，他们的区别只是传入的参数不同。
call 的语法为：
fun.call(thisArg[, arg1[, arg2[, ...]]])
apply的语法为：
fun.apply(thisArg, [argsArray])
所以 apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。
bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
所以我们可以看出，bind 是创建一个新的函数，我们必须要手动去调用
CSS3新增
这里可以分为边框、背景，渐变，阴影、2D转换 3D转换等之类的来说。
比如：边框(border-radius、border-shadow、border-image)之类的 。
具体的可以参见菜鸟教程：www.runoob.com/css3/css3-t…。类似的镜像问题还有HTML5的新增属性，可以自己谷歌一下。
实现元素垂直居中
单行文本的话可以使用height和line-height设置同一高度。
position+margin：设置父元素:position: relative;，子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
position+transform：设置父元素position:relative,子元素：position: absolute;top: 50%; left：50%；transform: translate(-50%, -50%);
position+margin：设置父元素：position：relative；子元素：position：absolute；margin：auto；top：0；left：0；bottom：0；right：0；
百搭flex布局(ie10+)，设置父元素display:flex;align-items: center;justify-content：center；
VUE数据双向绑定原理
利用object.defineproperty()这个方法重新定义了对象获取属性值（get）和设置属性值（set）的操作来实现的。
前端路由
通常 SPA 中前端路由有2种实现方式：
window.history
location.hash
let const var有什么区别？
let是块级作用域，函数内部使用let定义后，对函数外部无影响。
const定义的变量不可以修改，而且必须初始化。
const b = 2;//正确 // const b;//错误，必须初始化 console.log(‘函数外const定义b：’ + b);//有输出值 // b = 5;5 // console.log(‘函数外修改const定义b：’ + b);//无法输出
var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
其他问题
jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
JQuery的源码看过吗？能不能简单概况一下它的实现原理？
原来公司工作流程是怎么样的，如何与其他人协作的？如何跨部门合作的？
你遇到过比较难的技术问题是？你是如何解决的？
你的职业规划是什么？
小结
我想说的是：在找工作期间，肯定有自己发挥不好，或者不会的问题，一定要在空闲的时候自己再学习总结一下，在一个问题上面尽量不要栽倒两次，学到了的才是自己的。以上就是近期面试遇到的一些问题记录总结，实际上还是有一些问题没有写出来。希望各位大佬看了本文，能有所收获，感谢阅读。祝大家都能收到自己满意的offer，在前端这条路上越走越好！写的不好的地方，欢迎指正，共同进步学习。
