各种面试题

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的区别？

1. XML不是用来替代HTML的。
2. XML和HTML设计的目的不同
3. XML被设计用来传输和存储数据的，其焦点在于数据的内容
4. HTML是用来显示数据的，其焦点在于数据的外观
5. 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语法如下：

1. 把需要操作函数中的this变为第一个实参值，（在非严格模式下），第一个实参为空或者写null或者undefined，this都是window，剩下的第一个实参是谁，this就是谁。
   （严格模式下）第一个实参为空，this是undefined，其余的写谁this就是谁。
2. 改变为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对应的节点
查找节点：
	<div id="box" name=" exe" class="box"></div>
 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）的定位元素，元素脱离文档流。

客户端检测的几种方式

1. 能力检测：在编写代码前先检测浏览器的能力。
2. 怪癖检测：实际上是指浏览器中存在着的bug，例如：早期的webkit内核中存在着一个怪癖：它会在for-in循环中返回隐藏的属性值。
3. 用户代理检测：检测用户代理字符串

说一说常见的浏览器内核？

• Webkit内核：chrome、safari以及手机设置自带的浏览器
• Gecko内核:Firefox
• Trident内核:IE
• Presto内核：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的缺点：

1. 存储容量限制，大部分浏览器应该最多5M。我就遇到过localStorage存储字符然后尺寸爆掉的情况。
2. 仅支持字符串，如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换，有些啰嗦。
3. 读取都是同步的。大多数情况下，还挺好使的。但，如果存储数据比较大，例如一张重要图片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安装这个库来进行本地存储。

堆、栈、队列之间的区别？

1. 堆是在程序运行时而不是在程序编译时，申请的某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别
2. 栈就是一个桶，后放进去的先拿出来，它后面本来有的东西要等它出来之后才能出来(后进先出）
3. 队列是只能在队头做删除操作，在队尾做插入操作，而栈只能在栈顶做插入和删除操作。

基于 Token 的身份验证方法

基于token的身份验证是无状态态的，我们不将用户信息存在服务器或Session中。中概念解决了在服务端存储信息时的许多问题

1. 客户端通过用户名+密码等方式请求登录
2. 服务端收到请求，验证账号、密码是否正确
3. 验证成功后服务端会签发一个token，将这个token以及请求的数据返回给客户端
4. 客户端收到token之后可以把它存储起来，存在cookie或者localStorage中
5. 客户端每次请求资源的时候，都需要带着服务端签发的token
6. 服务端收到请求，然后去验证客户端请求里面带着的 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

主要用途：用来绘制图形的。