前端面试题总结

0.vue的MVVM原理？

观察者-订阅者（数据劫持）：
一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

1.输入完网址，按下回车键到看到网页这个过程中发生了什么？

域名解析
发起TCP的三次握手
建立TCP连接后发起http请求
服务器端响应http请求，浏览器得到html代码
浏览器解析html代码，并请求html代码中的资源
浏览器对页面进行渲染呈现给用户

2.谈谈你对前端性能优化的理解

请求数量：合并脚本和样式表，CSS sprites，拆分初始化负载，划分主域
请求带宽：开启GZip，精简js，移除重复脚本，图像优化，将icon做成字体
缓存利用：使用CDN，使用外部js和css，添加Expires头，减少DNS查找，配置ETag，使AjaxX可缓存
页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验：避免css表达式，避免重定向

3.ie6盒模型和w3c盒子模型

ie6盒模型：box-sizing:border-box; padding和border被包含在定义的width和height之内

4.线程与进程的区别

进程是资源分配的最小单位，线程是程序执行的最小单位。
进程有自己的独立地址空间，每启动一个进程，系统就会为它分配地址空间，建立数据表来维护代码段、堆栈段和数据段，这种操作非常昂贵。而线程是共享进程中的数据的，使用相同的地址空间，因此CPU切换一个线程的花费远比进程要小很多，同时创建一个线程的开销也比进程要小很多。
线程之间的通信更方便，同一进程下的线程共享全局变量、静态变量等数据，而进程之间的通信需要以通信的方式（IPC)进行。不过如何处理好同步与互斥是编写多线程程序的难点。
但是多进程程序更健壮，多线程程序只要有一个线程死掉，整个进程也死掉了，而一个进程死掉并不会对另外一个进程造成影响，因为进程有自己独立的地址空间。

5.单线程和多线程

单线程（单个cpu等运行）：比如，打开任意一个浏览器，里面有多个标签页；当某一个标签页系统崩溃时，其他标签页也不能使用，必须关掉浏览器。
多线程（多个cpu等运行）：比如，浏览器中有多个标签页，当某一个标签页系统崩溃时，只是该标签页不能使用，不影响其他标签页的正常使用。

6.懒加载和预加载

1.什么是预加载？
提前加载图片，用户需要时可以直接从本地缓存中渲染。
1.什么是懒加载？
懒加载也叫延迟加载，当访问一个页面的时候，想把img元素或是或是其他元素背景图片路径替换成一张大小为1*1px的图片的路径（这样只需请求一次俗称占位），只有图片出现在浏览器的可视区域内时才设置图片的真实路径，让图片显示出来，这就是图片懒加载。

7.预加载的方法

1若是小图标，可以合并成雪碧图，在改变状态前就把所有图标都一起加载了。
2设置了display:none属性的元素，图片不会渲染出来，但会加载。把要预加载的图片加到设置了display:none的元素背景图或标签里。
3在javascript创建img对象，把图片url设置到img对象的src属性里。

8.BFC（块级格式化上下文）

BFC 可以用来包住浮动元素（不是清除浮动哟）。就算子元素再怎么折腾，也不会影响外部元素了。
下列方式会创建块格式化上下文：
根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素 （元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-caption）
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

9.重绘与回流（渲染）

Repaint(重绘)：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
Reflow(渲染)：对于DOM结构中的各个元素都有自己的盒模型，浏览器根据各种样式（浏览器的、开发人员定义的等）来计算，并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。
reflow会影响到dom的结构渲染，同时会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
什么情况下会触发浏览器的repaint/reflow?

1. DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
3. 应用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、滚动页面
5. 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
6. 改变字体大小
7. 添加、删除样式表
8. 内容的改变，如用户在输入框中写字
9. 激活伪类
10. 设置style属性
    如何避免
    （1） 尽可能少的修改元素style上的属性
    （2）尽量通过修改className来修改样式
    （5）设置元素的position为absolute或fixed

10.闭包

在函数内部调用函数外部的变量，那这个变量与这个函数称为闭包
1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 。3.参数和变量不会被垃圾回收机制回收。

11.常用状态码

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
301 （永久性重定向）请求的资源已经被分配了新的URI，以后应使用资源现在所指的URI。
302 （临时性重定向）请求的资源已经被分配了新的URI，但是将来还有可能发生改变。
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

12.一个数组去重的简单实现

<script>
	var arr = [1,2,3,4,5,1,2,3]
	//定义一个新的数组
	var s = [];
	//遍历数组
	for (var i = 0; i < arr.length; i++) {
		if (s.indexOf(arr[i]) == -1) {  //判断在s数组中是否存在，不存在则push到s数组中
		s.push(arr[i]);
		}
	}
	console.log(s);//12345
</script>

13.http和https的区别

HTTPS协议="SSL+HTTP协议"构建的可进行加密传输、身份认证的网络协议，是HTTP的安全版。
工作层：在OSI网络模型中，HTTP工作于应用层，而HTTPS工作在传输层。
连接端口：HTTP标准端口是80，而HTTPS的标准端口是443。
传输方式：HTTP是超文本传输协议，信息是明文传输，而HTTPS是SSL加密传输协议。
工作耗时：HTTP耗时=TCP握手，而HTTPS耗时=TCP握手+SSL握手。
显示形式：HTTP的URL以http://开头，而HTTPS的URL以https://开头。
费用：HTTP无需费用，而HTTPS需要到CA申请证书，一般免费证书较少，需要一定费用。
安全性：HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。

14.阐述清除浮动的几种方式（常见问题）

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好

3.结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

15.css实现两列布局，一栏固定一栏自适应的5种方式

1. float基本方式
   固定端float，自适应端不设置width，只设置高；
2. css计算属性calc实现
   固定端float，自适应端width为calc(100%-固定端width)，即width: calc(100%-100px)
3. table布局实现
   父容器display:table,两端都以display:table-cell，固定端设置width,自适应端不设置width
4. 相对定位绝对定位实现
   父容器相对定位，固定端于父容器绝对定位，自适应端margin-left设置为固定端width
5. flex布局实现
   父容器flex布局，固定端固定width,自适应端flex:1实现自适应

16.js原型

1、js所有引用数据类型本质都是对象。
2、对象分为普通对象和函数对象。
3、所有构造对象都有_proto_属性，指向其构造函数的prototype属性（也就是构造函数的原型对象）。
4、只有函数对象有prototype属性

new 操作符具体干了什么？
(1)新建一个空对象
var obj = {};
(2)将Person的protoype属性赋值给obj的_proto_属性
obj._proto = Person.prototype;
(3)将Person的this指向obj，并执行Person函数
Person.call(obj);
(4)返回obj
return obj;

17.解决跨域问题

1、JSONP
$.ajax({
type:“GET”,
url:“http://www.xxx.com/getMySeat”, //访问的链接
dataType:“jsonp”, //数据格式设置为jsonp
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert(“error”);
}
});
2、nginx反向代理
3、window.name+iframe

18.是否改变原数组的常用方法

改变原数组的：

push：     向数组末尾添加一个或多个元素，并返回新的长度
pop：      删除数组最后一个元素并返回删除的元素
unshift：  向数组开头添加一个或多个元素，并返回新的长度
shift：    将数组开头第一个元素删除并且返回删除元素，空即为undefined
reverse：  颠倒数组顺序
sort：     对数组排序
splice(开始索引,要删除的个数,插入或替换的值)删除，增加，替换数组元素，返回被删除数组，无删除则不返回

不改变原数组的：

concat： 连接多个数组，返回新的数组
join：   将数组中所有元素以参数作为分隔符放入一个字符
slice(开始索引,结束索引)， 返回选定元素，（返回一个新的数组，包含从开始索引到结束索引（不包括该元素）的数组中的元素。）
map,filter,forEach,some,every等都不改变原数组