前端面试题

1、列举常用浏览器，及内核

常用浏览器有Chrome，FireFox，Safari，IE
内核有Trident，Gecko，Presto，Webkit最常用

2、浏览器如何渲染网页

（1）遍历DOM节点，构建DOM树
（2）解析CSS文件生成CSS规则树
（3）渲染树布局，从根节点开始遍历，输出盒子模型。
（4）渲染树绘制，浏览器遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容，渲染树的绘制工作是由浏览器的UI后端组件完成的。

3、简单介绍回流和重绘

回流（reflow）：当浏览器发现某个部分发生了变化从而影响了布局，这个时候就需要倒回去重新渲染，这个操作称为回流。例如选项卡，显示隐藏等。回流会从HTML这个root frame开始往下递归，依次计算所有的节点的几何尺寸和位置。以确认是渲染树的一部分发生变化还是整个渲染树发生变化。
重绘（repaint）：重绘是当某个元素改变背景色，文字颜色，边框颜色等不影响它周围或内部布局的属性石时，屏幕一部分要重画，但是元素的几何尺寸和位置没有发生变化。

4、简单介绍浏览器内核

主要分为两部分，渲染引擎和JS引擎
渲染引擎负责渲染网页
JS引擎负责解析和执行js脚本来实现网页的动态效果及前后端交互。

5、HTML5新特性

1.canvas，
2.语义化标签，如nav,、header、footer、article等
3.媒介回放的标签，video和audio
4.localstorage，sessionstorage，indexDB等本地离线存储方式
5.websocket，webworker等
可以使用 html5shim框架来兼容浏览器

6、介绍js基本数据类型

undfined, boolean, string, number, null

7、JS内置对象

Object，Array，String，Boolean，Number，String，Function，Arguments, Math, Date, RegExp

8、DOM操作

/// 创建新节点
createDocumentFragment()
createElement()
createTextNode()
/// 添加、移除、替换、插入
appendChild()
removechild()
replaceChild()
inserBefore()
/// 查找
getElementsByTagName()
getElementById()
getElementsByName()

9、null和undefined区别

null表示空对象，对象原型链的终点，转为数字是0；
undefined是一个表示无得原始值，转为数字NaN（Not a Number）
undefined的用法
（1）变量被声明，但是没有赋值
（2）调用函数时应该提供的参数没有提供，该参数为undefined
（3）对象中没有赋值的属性
（4）函数没有返回值时，默认返回undefined
null的用法
（1）作为函数的参数，
（2）作为对象原型链的终点

10、如何理解this

this总是指向函数的直接调用者。如果有new 关键字，this指向new出来的那个对象。在事件中，this指向出发这个事件的对象。注意：IE中的attachEvent中的this总是指向全局对象window

11、eval

eval的功能是把字符串解析成js代码并运行；尽量避免使用eval，会额外耗费性能，一次解析成js语句，第二次执行语句。eval另外一个用法是可以将JSON字符串转换为JSON对象。

12、apply和call的用法及区别

apply和call的用法类似，都是调用一个对象的方法，用另一个对象替换当前对象。
区别是apply最多只能传入两个参数，第一个是用来替换的对象，第二个参数是数组，如果第二个参数不是数组，会报TypeError错误
call()可以传递多个参数，第一个是用来替换的对象，后面是参数列表

13、new关键字原理

（1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
（2）具体和方法被加入到this引用的对象中
（3）新创建的对象由this所引用，并且最后隐式的返回this

14、HTTP状态码

分类	描述
100 Continue	继续请求
101 Switching Protocols	切换协议，服务器根绝客户端的请求切换协议。只能切换到更高级协议，例如切换到HTTP新版本协议
200 OK	请求成功，一般用于GET和POST请求
201 Created	已创建，成功请求并创建了新的资源
202 Accept	已接受， 已经接受请求，但未处理完成
204 No Content	无内容，服务器成功处理，但未返回内容
300 Multiple Choices	多种选择。
301 Moved Permanently	永久移动，请求的资源已被永久移动到新URI
302 Found	临时移动
303 See Other	查看其他地址，与301类似。使用get和POST请求查看
304 Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存已访问过的资源，通过提供一个头信息指出客户端希望之返回在指定日期后修改的资源
400 Bad Request	客户端请求的语法错误，服务器无法理解
401 Unauthorized	请求要求用户的身份认证
403 Forbidden	服务器理解客户端的请求，但是拒绝执行此请求
404 Not Found	服务器无法根据客户端的请求找到资源
405 Method Not Allowed	客户端请求中的方法被禁止
413 Request Entity Too Large	请求的实体过大，服务器无法处理，因此拒绝请求
414 Request-URI Too Large	请求的URI过长，服务器无法处理
500 Internal Server Error	服务器内部错误，无法完成请求
502 Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器收到一个无效的响应

15、一个TCP链接可以发多少个HTTP请求？

在HTTP/1.0中，一个服务器在发送完一个HTTP响应后，会断开TCP链接。但是这样每次请求都会重新建立和断开TCP链接，代价过大。某些服务器对connection: keep-alive的header进行了支持。这样的情况下，一个TCP链接，就可以发送多个HTTP请求。除非在请求报头中声明connection：close才会在请求完成后关闭链接。HTTP/1.1在规范中规定了用Pipelining来试图解决单个TCP连接在同一时刻只能处理一个请求的问题。一个支持持久连接的客户端可以在一个连接中发送多个请求，收到请求的服务器必须按照请求收到的顺序发送响应。但是会由此引发另外一个显著问题，Head-of-line Blocking连接头阻塞：在建立起一个TCP连接之后，假设客户端在这个连接中连续发送了几个请求，按照标准，服务器应该按照收到请求的顺序返回结果。假设服务器在处理首个请求花费了大量时间，那么后面所有的请求都需要等着首个请求结束才能响应。所以现在浏览器默认不开启HTTP Pipelining。在HTTP/2.0中提供了Multiplexing多路传输特性。并行完成所有请求。HTTP/2.0只能在HTTPS中使用。如果不能使用HTTP2，那么浏览器就会在host上建立多个TCP连接，连接数量的最大限制取决于浏览器设置。

16、性能优化

减少HTTP请求次数，JS\CSS压缩，网页Gzip，CDN托管，数据缓存，图片服务器
少用全局变量，缓存DOM节点查找的结果
及时清除定时器，避免引发内存泄漏

17、什么是伪数组

具有length属性，按索引方式存储数据，但不具有数组的方法。
使用Array.prototype.slice.call() 转换为真正的数组
ES6可用Array.from()转换
例如文件域的value\函数的arguments对象\getElementsByTagName返回的NodeList对象都是伪数组

vue面试题

1、vue中Key的作用

Key的特殊属性主要用在vue的虚拟DOM算法，再新旧nodes对比时辨别nodes。如果不使用key属性，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。会基于key的变化重新排列元素顺序，并且移除key不存在元素。key必须是唯一的，重复的key会造成渲染错误。常见的用法是结合v-for，还可以用于强制替换元素/组件而不是重复使用，这种方式会完整的触发组件的生命周期钩子。

2、vue父子组件相互传值，方法调用。

父->子 传值 prop 属性
子->父 this.$emit();

3、v-show和v-if

相同点都是可以控制元素/组件的显示隐藏
不同点：
v-show是通过修改元素的display属性达到显示隐藏
v-if是直接移除和添加元素/组件达到显示隐藏。

4、修改组件样式

使用:v-deep可以修改组件内的样式

5、keep-alive的作用

用keep-alive包裹动态组件时，会缓存不活动的组件实例，保留组件状态或避免重新渲染。

6、vue中引用第三方插件的方式

（1）采用ES6的import语法引入
（2）使用全局方法 Vue.use(Plugin, { options })注册插件

7、简述Vuex的原理和使用方法

vuex是一个专为vue开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
state是vuex的唯一数据源，是所有组件的公共data。
getters用于state中派生出一些状态。例如对列表进行过滤等，只有当它的依赖值发生了改变才会被重新计算。getters接受state作为其第一个参数。
mutation类似于事件，更改该vuex的store中的状态的唯一方法就是提交mutation。mutation有一个字符串的事件类型和一个回调函数，回调函数就是实际进行状态更改的地方。这个回调函数接受两个参数，state作为第一个参数。
action类似于mutation，不同之处在于action会提交到mutation，不会直接更改状态；可以包含异步操作，mutation不可以；action中的回调函数第一个参数是context，是一个与store实力具有相同属性和方法的对象；通过store.dispath触发，mutation通过store.commit提交。
module:由于使用单一状态树，应用的所有者状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就可能变得相当臃肿。为了解决这个问题，vuex允许我们将store分割成模块，每个模块都用自己的state，mutation，action，getter。甚至还可以嵌套子模块。

8.原型链相关

function Foo() { // 创建Foo变量，指向某堆内存 => 存放代码字符串的地方
    getName = function () { console.log(1); };
    return this; // this指向window
}
Foo.getName = function () { console.log (2);};
Foo.prototype.getName = function () { console.log (3);}; 
var getName = function () { console.log (4);}; // 由于变量提升
function getName() { console.log (5);} // 由于变量提升，会最先被声明

Foo.getName(); // 2 Foo的静态方法
getName(); // 4
Foo().getName(); // 1 => getName重新赋值
getName(); // 1
new Foo.getName();
new Foo().getName(); // 3 => let a = new Foo(); a.getName(); 原型链上查找getName方法
new new Foo().getName(); // 3 => new((new Foo()).getName())
/* 相当于
let a = new Foo();
let b = new a.getName();
 */

9.JS中的数据类型有哪些？如何检测这些类型？

// 基本数据类型
// Number、string、boolean、undefined、null（空对象指针）
// 引用类型
// Object、Array、RegExp
/// 检测类型
typeof Number /// 'number'
/// 判断已知对象类型的方法
a instanceof Object // false
a.constructor === Array // false /// 继承中可能不准确，要手动将constructor指向自身
/// 判断是否是null 
Object.prototype.toString.call(null); // [object Null]