各种面试题
HTML
什么是标签语义化
合适的标签做合适的事情
标签语义化的好处
- 比如标题使用
h1-h6,能够增加权重，有利于蜘蛛的抓取，有利于SEO的优化 - 去掉样式的时候，页面结构仍然比较清晰
- 便于团队的开发和维护
link和@import的区别
- link是属于XHTML标签，除了加载CSS之外，还可以用于定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
- link引用CSS的时候，在
页面载入时加载；@import在页面完全载入以后才加载 - link是XHTML标签没有兼容问题；@import是在CSS2.1时提出来的，低版本的浏览器不支持
- link支持使用JavaScript控制DOM来改变样式；而@import不支持
XHTML和HTML的区别
XHTML可以说是HTML的子集，XHTML是更加严格的HTML。在XHTML中严格要求：
- 所有的标签必须是闭合的
- 所有的标签必须小写
- 所有的属性值必须要用引号引起来（
"",遵循w3c的规范，如果不加双引号，就无法区分是一些特殊字符了。）
XML和HTML的区别？
- XML不是用来替代HTML的。
- XML和HTML设计的目的不同
- XML被设计用来传输和存储数据的，其焦点在于数据的内容
- HTML是用来显示数据的，其焦点在于数据的外观
- XML旨在传输信息，HTML旨在显示信息
列举常见的行内元素、块级元素和空元素
- 行内元素：
a span img input select b - 块级元素：
div ul li ol p h1-h6 - 空元素（指的是没有内容的元素）：
link input meta br hr
谈谈你对浏览器内核的理解
浏览器内核主要由两部分组成：渲染引擎 JS引擎
- 渲染引擎：负责取得网页的内容（html、xml、css、img等）以及计算网页的的显示方式，然后输出至显示器或者打印机。不同浏览器的内核也不尽相同，所以在不同的浏览器可能会渲染出不同的效果。
- JS引擎：解析、执行JavaScript来展示网页的动态效果
开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。
JavaScript
为什么typeof = null 的结果为"object"
不同的对象在底层都表示为二进制，在JavaScript中二进制前三位都为0的话会被判定为object类型，而null的二进制全部为0，前三位也为0，所以执行typeof检测的时候返回的结果为object。
call、apply、bind的区别以及应用场景？
不同点：call 和apply语法如下：
- 把需要操作函数中的this变为第一个实参值，（在非严格模式下），第一个实参为空或者写null或者undefined，this都是window，剩下的第一个实参是谁，this就是谁。
（严格模式下）第一个实参为空，this是undefined，其余的写谁this就是谁。 - 改变为this后，把需要操作的函数执行。
唯一的区别：call在给函数传递实参的时候是一个个传递的，而apply是放在一个数组中一起传递的（但是也相当于一个个传参）
bind的语法和call一样，但是作用不一样，bind只是提前把函数中的this改变了，但是并没有立即把函数执行，它属于预先改变this（柯里理化思想）
共同点：都属于Function上定义的三种方法，所有的函数数据类型值都可以调取这三种方法，都是用来改变一个函数中的this关键字指向的（bind不兼容ie6-8）其余的兼容所有的浏览器。
箭头函数和普通函数的区别？
- 箭头函数是匿名函数不能作为构造函数，不能使用new方法来创建
- 箭头函数不绑定arguments,取而代之用rest参数…解决
- 箭头函数没有原型属性
- 箭头函数不能换行
- 箭头函数中的this和普通函数的this指向存在着差别
- 箭头函数中的this不能使用call、apply、bind来改变
[].map(function(){})和[].forEach(function(){})的区别？
1 forEach（）为数组中的每一项执行回调函数，不像map（），他总是返回undefined的值，并且不可以被链式调用。
2. forEach遍历的范围在第一次调用callBack前就会确定。调用forEach后添加到数组中的项是不会被访问到。
3. 使用forEach循环的时候是不能跳出循环的（中途不能被打断），但是我们可以通过return控制循环，然而for循环我们可以通过break或者continue来控制循环是否执行
map（）同样为数组中的每一项执行回调函数，并进行相应的处理，返回一个新的数组，原来的数组不会发生变化。
iframe有哪些优缺点？
缺点：
- 在网页中使用框架架构最大的弊病就是搜索引擎的‘蜘蛛’程序无法解读这个页面，
不利于SEO的优化。当‘蜘蛛’程序遇到由无数的框架组成的页面时，它们只会看到框架而无法找到链接，因此他们以为改网站是个死站。对于一个网站来说无异于一场灾难。 - 框架结构有时候会使人感到迷惑，特别是在几个框架中都出现上下左右的滚动条的时候，
不利于审美。 不利于打印浏览器的后退按钮无效- 多框架页面会增加http请求，造成网页加载速度慢
- 在手机或者小屏显示器上达不到良好的展示
优点：
- 提高了代码的重用性
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)
DOM操作怎样添加、删除、移动、复制、查找节点
someNode.appendChild("node")//添加节点
someNode.removeChild()//删除节点
someNode.insertBefore(newNode,oldNode)//移动
someNode.cloneNode(true)//深度复制节点，以及对应的子元素
someNode.cloneNode(false)//浅复制，仅仅复制someNode对应的节点
查找节点：
1. document.getElementById("id")//通过id进行查找
2. document.getElementsByName("exe")[0]//通常获取到的是元素集合,通过name
3. document.getElementsByTagName("div")[0]//通过标签名进行查找
4. document.getElementsByClassName("box")//通过类名进行查找，不兼容ie6-8
5. document.querySelector(".box/[name="exe"]/div/#box")//通过查找一个CSS选择器
6. document.querySelectorAll(".box/[name="exe"]/div/#box")[0]//通过查找多个CSS选择器
position中的relative和absolute都是相对于谁定位的？
- realtive是相对于其在普通中的位置进行定位的，元素不脱离文档流。
- absolute是相对于其父级（不是static）的定位元素，元素脱离文档流。
客户端检测的几种方式
- 能力检测：在编写代码前先检测浏览器的能力。
- 怪癖检测：实际上是指浏览器中存在着的bug，例如：早期的webkit内核中存在着一个怪癖：它会在for-in循环中返回隐藏的属性值。
- 用户代理检测：检测用户代理字符串
说一说常见的浏览器内核？
Webkit内核：chrome、safari以及手机设置自带的浏览器Gecko内核:FirefoxTrident内核:IEPresto内核：opera
ES6
Object .is() 与原来的比较操作符 === 和 == 的区别？
== 相等运算符，比较时会自动进行数据类型转换
=== 严格相等运算符，比较时不进行隐式类型转换
Object .is() 同值相等算法，在 === 基础上对 0 和 NaN 特别处理
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
其他
localforage和localStorage用来本地存储数据的区别
localStorage的缺点：
存储容量限制，大部分浏览器应该最多5M。我就遇到过localStorage存储字符然后尺寸爆掉的情况。仅支持字符串，如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换，有些啰嗦。读取都是同步的。大多数情况下，还挺好使的。但，如果存储数据比较大，例如一张重要图片base64格式存储了，再读可能会有可感知的延迟时间。
localforage的作用就是用来规避上面localStorage的缺点，同时保留localStorage的优点而设计的。从命名上就可以看出两者关系不浅。
localStorage的优点是API非常简单，使用很方便。于是，localforage和localStorage一模一样。
至于localStorage的不足，localforage和使用了其他HTML5 API进行规避，什么API呢？是IndexedDB和WebSQL。
也就是说，localforage的逻辑是这样的：优先使用IndexedDB存储数据，如果浏览器不支持，使用WebSQL，浏览器再不支持，使用localStorage。
然后API还是localStorage的API，也就是数据增删改查通过get，set，remove，clear和length等API。
所以在项目中，我们一般通过npm安装这个库来进行本地存储。
堆、栈、队列之间的区别？
- 堆是在程序运行时而不是在程序编译时，申请的某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别
- 栈就是一个桶，后放进去的先拿出来，它后面本来有的东西要等它出来之后才能出来(后进先出）
- 队列是只能在队头做删除操作，在队尾做插入操作，而栈只能在栈顶做插入和删除操作。
基于 Token 的身份验证方法
基于token的身份验证是无状态态的，我们不将用户信息存在服务器或Session中。中概念解决了在服务端存储信息时的许多问题
- 客户端通过用户名+密码等方式请求登录
- 服务端收到请求，验证账号、密码是否正确
- 验证成功后服务端会签发一个token，将这个token以及请求的数据返回给客户端
- 客户端收到token之后可以把它存储起来，存在cookie或者localStorage中
- 客户端每次请求资源的时候，都需要带着服务端签发的token
- 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
每一次请求都需要token。token应该在http的头部发送从而保证了http请求无状态。我们同样设置服务器属性Acess-Control-Allow-Origin,让服务器能接受到来自所有域的请求。
什么是svg，什么用处？
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
主要用途：用来绘制图形的。