前端面试问题汇总
面试技术问题：
- Null 与 undefined区别？
l NULL的类型是object；undefined的类型是undefined类型，一个变量如果没有初始化的话就是undefined。
l null 表示此处数值为空，undefined表示此处应该有值，但是确缺少值。null转为数字是0，undefined转为数字是NaN
l null的典型用法是作为一个空的对象，就像是一个占位符。在dom模型中获取一个不存在的元素，会得到一个null
l undefined的用法，访问不存在的对象属性或者数组项的时候会返回undefined，void操作符也返回一个undefined
- Position的值有哪些？原点在哪里？
position的值有5个：
原点位置：
relative（相对定位）：定位原点是元素原始位置；是通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。
absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性：
1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
2)如果设定TRBL，并且父级没有设定position 属性，那么当前的absolute 则以浏览器左上角为原始点进行定位，位置将由TRBL 决定。
3)如果设定TRBL，并且父级设定position 属性(无论是absolute 还是relative)，则以父级的左上角为原点进行定位，位置由TRBL 决定。即使父级有Padding 属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
以上三点可以总结出，若想把一个定位属性为absolute 的元素定位于其父级元素内，只有满足两个条件，只要有一点不满足，元素就会以浏览器左上角为原点。
第一：设定TRBL
第二：父级设定Position 属性
- 对this的理解？
this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。
1.如果是call，apply, with，指定的this是谁，就是谁。
2.普通的函数调用，函数被谁调用，this就是谁。
- 与普通函数相比，构造函数有以下明显特点：
1.用new关键字调用
var prince=new Prince("charming",25);
2.函数内部可以使用this关键字
在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数/方法，就是实例变量或实例函数/方法。需要用实例才能访问到，不能用类型名访问。
prince.age;//25
Prince.age;//undefined
3.默认不用return返回值
构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。当然，也可以用return语句，返回值会根据return值的类型而有所不同，细节将在下文介绍。
4.函数命名建议首字母大写，与普通函数区分开。
不是命名规范中的，但是建议这么写。
- Display的值有哪些？
- HTML5新加的特性有哪些？
l 不再基于SGML，只用<!DOCTYPE html>就够了。
l 新增内容元素，比如 article、footer、header、nav、section 、time等。
l 用于媒介回放的 video 和 audio 元素
l input新type：date、email、url等。
l 新增一些使用API，比如geolocation等。其中需使用getCurrentPosition方法。
兼容性情况： 针对浏览器的支持（除了IE6/IE7/IE8/IE9以为，其他的大部分主流的浏览器都是完美兼容的）
- cookie与session区别？
Session和Cookie都是为了解决HTTP协议无状态的问题，为了标识一次回话，记录一些用户信息。
session是服务器端存储的用户信息，通过session_id来标识。
cookie也是用与保存用户的一些信息，例如加入购物车的商品信息，浏览的一些选择。cookie以键值对的形式保存这些信息，其中也包括session_id，并且随着每次请求传送到服务器端。
cookie的内容包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。
https://juejin.im/entry/5766c29d6be3ff006a31b84e
- cookie、localStorage、sessionStorage的区别？
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
l 共同点：sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
l 区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，localStorage和sessionStorage仅保存在客户端，不与服务器进行交互通信。
l cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
l 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 和sessionStorage，但比cookie大得多，可以达到5M或更大。
l localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序员自己封装
l 作用域不同，sessionStorage不在不同的浏览器窗口*享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
l 应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时，更新value
2.获取 localStorage.getItem(key)如果key不存在返回null
3.删除 localStorage.removeItem(key)一旦删除，key对应的数据将会全部删除
4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据。
- get与post区别？
get:1、提交的键值对，放在地址栏URL后面
2、安全性差
3、对提交内容长度有限制
4、GET幂等，POST不幂等，幂等是指同一个请求方法执行多次和仅执行一次的效果完全相同。
5、GET用于从服务器端获取数据，包括静态资源(HTML|JS|CSS|Image等等)、动态数据展示(列表数据、详情数据等等)。
post:1、安全性相对较高
2、对提交内容长度无限制
3、POST用于向服务器提交数据，比如增删改数据，提交一个表单新建一个用户、或修改一个用户等。
- 对js继承的理解？
由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。
- 对闭包的理解？
闭包是指有权访问另一个函数作用域中的变量的函数。 创建闭包的常用方式，就是在一个函数内部创建另一个函数。
闭包最大用处有两个：1、可以访问其他函数内部的变量；2、让这些变量的值始终保存在内存中。
创建的内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数，当该内部函数在外部函数外被调用，就生成了闭包。
内部环境可以通过作用链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。这些环境直接的联系是线性，有次序的，每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。
- css选择器有哪些？
- 对ajax的理解？跨域问题？
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
Ajax可以实现动态不刷新（局部刷新），就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作
优点：1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
跨域问题：AJAX出现跨域问题，是因为浏览器的“同源策略” ，所谓“同源策略”，就是指：协议、域名、端口相同。
跨域问题解决方案：
1、JSONP 比较常用，比较简单，实现方式是：在请求查询字符串加一个callback函数。只能发送get请求。
2、CORS 是AJAX跨域的根本解决办法，CORS允许发送任何类型的请求，对跨域的解决，关键的服务器。实现方式是：在头部信息中，加origin字段，举例：origin=*。
- 请解释JSONP的工作原理，以及它为什么不是真正的AJAX？
JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。
AJAX是不跨域的，而JSONP是一个跨域的，还有就是二者接收参数形式不一样！
- 请指出document.onload和document.ready两个事件的区别。
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
- 什么是三元表达式？“三元”表示什么意思？
在表达式boolean-exp ? value0 : value1 中，如果“布尔表达式”的结果为true，就计算“value0”，而且这个计算结果也就是操作符最终产生的值。如果“布尔表达式”的结果为false，就计算“value1”，同样，它的结果也就成为了操作符最终产生的值。
- 介绍一下你对浏览器内核的理解？
- 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎则解析和执行javascript来实现网页的动态效果。
- 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
常见的浏览器内核有哪些？
Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome
- 简述一下你对HTML语义化的理解？
1. 用正确的标签做正确的事情。
2. html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3. 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
- HTML标题字数过多，如何实现隐藏？
- HTTP与HTTPs的区别？
- 状态码201、401、441含义？
面试常规问题
- 自我介绍
- 为什么选择前端
- 你的职业规划是什么？
- 有什么问题需要问公司的？
<持续更新......>
上一篇： 解决VUEX兼容IE上的报错问题