前端知识总结

1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？

答：<!DOCTYPE>声明位于文档中最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）

2.常用浏览器有哪些，内核都是什么？

答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核,现在跟随chrome用blink内核。

3.简述一下你对HTML语义化的理解？

1. 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
2. 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。

1. 方便其它设备解析。
2. 便于团队开发和维护，语义化根据可读性。

4.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

答：新增加了图像、位置、存储、多任务等功能。

新增元素：

1. canvas
2. 用于媒介回放的video和audio元素

1. 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
2. 语意化更好的内容元素，比如 article footer header nav section

1. 位置API：Geolocation
2. 表单控件，calendar date time email url search

1. 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
2. 拖放API：drag、drop

移除的元素：

1. 纯表现的元素：basefont big center font s strike tt u
2. 性能较差元素：frame frameset noframes

区分：

1. DOCTYPE声明的方式是区分重要因素
2. 根据新增加的结构、功能来区分

5.页面导入样式时，使用link和@import有什么区别？

1.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)

link引入的样式权重大于@import引入的样式。

6.position属性和值的含义

position 属性规定元素的定位类型。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中

7.null，undefined的区别？

• Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
• Null类型也只有一个值，即null。

• null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其他语言一样都代表“空值”，不过undefined却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。
• javascript权威指南：null 和 undefined 都表示 “值的空缺”，你可以认为 undefined 是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

• javascript高级程序设计：在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。null值则是表示空对象指针。

8.添加 删除 替换 插入到某个接点的方法？

1.创建新节点

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2.添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

remove()//删除所有的子元素

3.查找

getElementsByTagName() //通过标签名称

getElementsByClassName() //通过元素的class属性的值

getElementById() //通过元素Id，唯一性

9.函数声明与函数表达式的区别？

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

10.new操作符具体干了什么呢?

1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2. 属性和方法被加入到 this 引用的对象中。

1. 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

11.请说出至少三种减低页面加载时间的方法？

1. 压缩css、js文件
2. 合并js、css文件，减少http请求

1. 外部js、css文件放在最底下
2. 减少dom操作，尽可能用变量替代不必要的dom操作

12.讲几个常见的js内置对象？

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

13.DOM 事件流是什么?如何阻止事件冒泡？

• 事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。
  事件流包括三个阶段事件捕获,目标阶段,事件冒泡。
• 事件捕获：它认为当某个事件发生时，从window发出一个事件，不断经过下级节点最终到达目标节点之前的阶段。（当某个事件发生时，父元素最先捕获到事件，目标元素最后收到）

• 目标阶段：当事件不断传递直到目标节点的时候，最终在目标节点上出发这个事件。
• 事件冒泡：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后层层往上传递，直至传递到dom的根节点。

• 阻止事件冒泡:event.stopPropagation()

14.什么是事件委托?

利用事件冒泡的原理，原本绑定在子元素身上的事件，现在绑定在父元素身上，由父元素监听事件的行为。

15.说一下你对this的理解？

this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同

1. 普通函数this在非严格模式下指向window，严格模式下指向undefined
2. 构造函数this指向实例对象，原型对象里面的方法也指向实例对象

1. 对象方法中的this指向该方法所属的对象
2. 事件绑定方法中的this指向绑定该事件的对象

1. 定时器函数的this指向window
2. 立即执行函数中的this指向window

16.什么是作用域和作用域链，js有几种作用域分别是？

作用域（scope）

作用域是指程序源代码中定义变量的区域，简单来说，一段程序代码中所用到的变量并不总是有效的，而限定这个变量的可用性的代码范围就是这个变量的作用域。

js有三种:

• 全局作用域
  全局作用域是最外围的一个作用域。根据 ECMAScript 实现所在的宿主环境不同，表示全局作用域的对象也不一样。在浏览器中，全局作用域就是window对象，node则是global对象。
• 局部作用域
  和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的是函数内部。

• 块级作用域
  ES5本身是没有块级作用域，ES6 引入了块级作用域，让变量的生命周期更加可控，使用let和const声明的变量在指定块（简单理解就是一对花括号）的作用域外无法被访问。

作用域链（scope chain）

一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

17.Javascript的事件流模型都有什么?

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡。

JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

18.简述window对象除 document以外的一些常用子对象，并描述其作用？

window对象有很多子对象，除了 document以外，还有如下常用子对象：

• screen对象：此对象包含有关客户端显示屏幕的信息，常用于获取屏幕的分
  辨率和色彩；
• history对象：此对象包含用户（在浏览器窗口中）访问过的 URL；

• location对象：此对象包含有关当前 URL的信息，常用于获取和改变当前浏览的网址；
• navigator对象：此对象包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息；

• event对象：任何事件触发后将会产生一个 event对象，该对象记录事件发
  生时的鼠标位置、键盘按键状态和触发对象等信息。

19.BOM 和 DOM 的关系

BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。

DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。

JS是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

20.请说出你熟悉的数组的操作方法并说出如何使用?

//改变原数组方法:
var arr = []
arr.push()  //数组末尾添加
arr.pop() 	//数组末尾删除
arr.unshift()  //数组头部添加
arr.shift()			//数组头部删除
arr.splice()		//方法向/从数组中添加/删除项目，然后返回被删除的项目。
arr.reverse()		//方法用于颠倒数组中元素的顺序。
arr.sort()			//方法用于对数组的元素进行排序。
//不改变原数组方法:
var arr = []
arr.includes();  // 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。
arr.indexOf();		//方法可返回某个指定的字符串值在字符串中首次出现的位置。
arr.lastIndexOf();	//方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
arr.slice();			//方法可从已有的数组中返回选定的元素。
arr.join();				//方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arr.toString();	
arr.concat();		//方法用于连接两个或多个数组。

//高阶js新增数组方法

arr.forEach//遍历数组

//数组方法filter过滤数组
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。


//数组方法some
arr.some()// 查找数组中是否有满足条件的元素 ,如果数组中有元素满足条件返回 true，否则返回 false。

//数组方法every
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
array.every(function(currentValue,index,arr))
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
  注意： every() 不会对空数组进行检测。
  注意： every() 不会改变原始数组。

  
//数组方法find
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined

21.总结String 对象操作方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。不包含结束的索引
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toString()	返回一个字符串。

22.如何编写高性能的JavaScript

• 将js脚本放在页面底部，加快渲染页面;
• 将js脚本成组打包，减少请求;

• 使用非阻塞方式下载js脚本;
• 尽量使用局部变量来保存全局变量;

• 尽量减少使用闭包;
• 使用window对象属性方法时省略window;

• 尽量减少对象成员嵌套;
• 缓存DOM节点的访问;

• 通过避免使用eval和function()构造器;
• 给setTimeout()和setInterval()传递函数而不是字符作为参数;

• 尽量使用直接量创建对象和数组;
• 最小化重绘(repaint)和回流(reflow);

23.标准盒模型 和ie盒模型区别(复习CSS知识等)

标准盒模型是w3c 标准的盒模型，其包含：

(他的with就是content的宽度)

盒子占用宽度：margin + border+ padding + width

实际宽度： border+ padding + width

IE盒模型，在IE中content的宽度包括padding和border这两个属性，所以

(他的with包括content+padding+border)

盒子占用宽度：margin + width

实际宽度：width = padding + border + 内容宽度

24.浏览器是如何渲染页面的？

渲染的流程如下:
解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式。
将CSS与DOM合并，构建渲染树（Render Tree）。
布局和绘制，重绘（repaint）和重排（reflow）。

参考资料:页面优化，谈谈重绘(repaint)和回流(reflow) - 听风是风 - 博客园

25.全局变量和局部变量的区别？

变量根据作用域的不同分为两种：全局变量和局部变量。

1. 函数内部可以使用全局变量。
2. 函数外部不可以使用局部变量。

1. 当函数执行完毕，本作用域内的局部变量会销毁。
2. 网页关闭时,全局变量销毁。

26.栈结构和队列结构,这两种数据结构的区别?

栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。

队列先进先出，栈先进后出。

栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除

27.栈区和堆区的区别？

栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。

堆区（heap） — 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收。

堆（数据结构）：堆可以被看成是一棵树，如：堆排序；

栈（数据结构）：一种先进后出的数据结构

28.flex属性举例说明

父元素属性

1.display:flex;（定义了一个flex容器）

2.flex-direction（决定主轴的方向）

row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上）

3.flex-wrap（定义如何换行）

nowrap（默认值，不换行）wrap（换行）wrap-reverse（换行，且颠倒行顺序，第一行在下方）

4.flex-flow（属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap）

5.justify-content（设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式）

flex-start（ 默认值、弹性盒子元素将向行起始位置对齐）

flex-end（弹性盒子元素将向行结束位置对齐）

center（弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐）

space-between（弹性盒子元素会平均地分布在行里）

space-around（弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半）

6.align-items（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）

flex-start（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界）

flex-end（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界）

center（ 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度））

baseline（如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。）

stretch（如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制）

7.align-content（设置或检索弹性盒堆叠伸缩行的对齐方式）

flex-start（各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行）

flex-end（各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行）

center（各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一      行之间的距离相等）

space-between（各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则      按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等）

space-around（ 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后      一行后面的空间是其他空间的一半）

stretch（各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸）

子元素上属性

1.order（默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数）

2.flex-grow（设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间）

3.flex-shrink（设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间）

4.flex-basis (设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间)

5.flex   (flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选)

//flex属性意义
flex:none;   // flex:0,0,auto;
flex:auto;  // flex:1,1,auto;
flex:1;    //  flex:1,1,0%;

6.align-self  (设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置)

29.你用过媒体查询，或针对移动端的布局/CSS吗？

媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

语法结构及用法：@media  设备名 only （选取条件） not （选取条件） and（设备选取条件）。

30.href与src的区别

1.href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。

2.src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

31.说一说事件代理,优缺点是什么?

事件代理是指将事件绑定到目标元素的父元素上,利用冒泡机制触发该事件

优点:

1.可以减少事件注册,节省大量内存占用

2.可以将事件应用于动态添加的子元素上

缺点:

使用不当会造成事件在不应该触发时触发

32.简单数据类型和复杂数据类型

 简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括String ，Number，Boolean，Undefined，Null

   复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

33.CSS3新特性：

1. 颜色：新增RGBA，HSLA模式
2. 文字阴影（text-shadow）

1. 边框： 圆角（border-radius）边框阴影： box-shadow
2. 盒子模型：box-sizing

1. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
2. 渐变：linear-gradient、radial-gradient

1. 过渡：transition，可实现动画
2. 自定义动画

1. 在CSS3中唯一引入的伪元素 ：selection.
2. 媒体查询，多栏布局

1. border-image
2. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

1. 3D转换

14.新增选择器：属性选择器、伪类选择器、伪元素选择器。

34.H5新特性:

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

1. 音频、视频API(audio,video)
2. 画布(Canvas) API

1. 地理(Geolocation) API
2. 数据存储 localStorage、sessionStorage

1. 表单控件date、time、email、url、search

35.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta声明的viewport。

36.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

37.eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行； 　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’)。

38.Location对象的属性和方法

属性

属性	描述
hostname	返回URL的主机名
port	返回一个URL服务器使用的端口号
pathname	返回的URL路径名。
protocol	返回一个URL协议
hash	返回从井号 (#) 开始的 URL（锚）
href	返回完整的URL
search	返回从问号 (?) 开始的 URL（查询部分）
host	返回一个URL的主机名和端口

方法

属性	描述
replace()	用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
reload()	重新加载当前文档。相当于点击刷新按钮刷新F5，如果参数为true，相当于ctrl+F5强制刷新
assign()	加载新的文档。跟href一样，可以跳转页面

39.Navigator对象是做什么的?

window.navigator 接口表示用户代理的状态和标识。

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

Navigator.onLine网络状态

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。

HTML5 给我们提供了2个事件  online  和 offline，给window绑定事件--检测网络开始状态

40.History对象的属性和方法?

属性

length  返回浏览器历史列表中的 URL 数量。

方法

back()  加载 history 列表中的前一个 URL。

forward()  加载 history 列表中的下一个 URL。

go()  加载 history 列表中的某个具体页面。

41.拖拽API的相关事件

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

DataTransfer

在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型

42.在浏览器地址栏键入URL，按下回车之后会经历以下流程：

1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;

2、解析出 IP 地址后，根据该 IP 地址和默认端口

80，和服务器建立TCP连接;

3、浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP

请求，该请求消息作为 TCP三次握手的第三个报文的数据发送给服务器;

4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器

5、释放TCP连接;

6、浏览器加载该 html 文本并显示内容;

43.http协议和https协议的区别

一、传输信息安全性不同

1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。

2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。

二、连接方式不同

1、http协议：http的连接很简单，是无状态的。2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。

三、端口不同

1、http协议：使用的端口是80。2、https协议：使用的端口是443．

四、证书申请方式不同

1、http协议：免费申请。2、https协议：需要到ca申请证书，一般免费证书很少，需要交费。

44.http常见状态码有哪些？

一: 2开头状态码

2xx (成功)表示成功处理了请求的状态代码

200 (成功) 服务器已成功处理了请求。 通常。

二: 3开头状态码

3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

三: 4开头状态码

4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理

1:400 (错误请求) 服务器不理解请求的语法。

2:403 (禁止) 服务器拒绝请求。

3:404 (未找到) 服务器找不到请求的网页。

四: 5开头状态码

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错

500 (服务器内部错误) 服务器遇到错误，无法完成请求。

45.GET和POST的区别，何时使用POST？

1.GET：一般用于信息获取，使用地址栏提交参数;而Post是通过提交请求体提交参数。

2.GET：对所发送信息的数量也有限制, 传送的数据量较小，不能大于2KB。post 传送的数据量较大。

3.GET:是从服务器上获取数据，post 是向服务器传送数据,一般用于修改服务器上的资源。

在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库），

向服务器发送大量数据，

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

46.JSON是什么？JSON和JavaScript普通对象有什么区别？如何把JS对象转化为JSON字符串，又如何把JSON字符串转化为JavaScript对象？

• JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON的规则很简单： 对象是一个无序的“名称/值”对集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“名称/值”对之间使用“,”（逗号）分隔。 它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号；
• Javascript 普通对象:一种javascript的引用类型, 可允许加单引号，双引号

• JSON.stringify() 和 JSON.parse()相互转换.

47.什么是ajax？ajax作用是什么？

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.

48.为什么要用ajax?

ajax应用程序的优势在于：

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

1. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

49.ajax最大的特点是什么?

Ajax可以实现动态不刷新（局部刷新） 就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

50.请介绍一下XMLHttprequest对象。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

51.ajax几种请求方式？他们的优缺点？

常用的post,get,delete put

• 代码上的区别
  1:get通过url传递参数。
  2:post参数在请求体中,发送ajax请求时post设置请求头 ,规定请求数据类型。
• 使用上的区别
  1:post比get安全
  (因为post参数在请求体中。get参数在url上面)
  2:get传输速度比post快 根据传参决定的。
  (post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)。
  3:post传输文件大理论没有限制 ,get传输文件小大概7-8k,ie中时4k左右。
  4:get一般用于获取数据,post上传数据(上传的数据比较多, 而且上传数据都是重要数据。所以不论在安全性还是数据量级post是最好的选择)。

52.ajax都有哪些优点和缺点？

• ajax的优点
  1、最大的一点是页面无刷新，用户的体验非常好。
  2、使用异步方式与服务器通信，具有更加迅速的响应能力。
  3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
  4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
• ajax的缺点
  1、ajax不支持浏览器back按钮。
  2、安全问题 AJAX暴露了与服务器交互的细节。
  3、对搜索引擎的支持比较弱。
  4、破坏了程序的异常机制。
  5、不容易调试。

53.原生js ajax请求有几个步骤？分别是什么?

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
}

54.什么是跨域？ 如何解决跨域？

要说跨域,首先得说同源策略,

1、同源策略,是浏览器的安全策略,协议名、域名、端口号必须完全一致。

2、跨域是违背同源策略就会产生跨域。

3、解决跨域

• vue代理配置、nginx代理配置、后端设置、jsonp（前后端配合）

然后介绍自己在项目中是如何去做的

55.说一下网络四层模型

 1、主机到网络层  

 实际上TCP/IP参考模型没有真正描述这一层的实现，只是要求能够提供给其上层-网络互连层一个访问接口，以便在其上传递IP分组。由于这一层次未被定义，所以其具体的实现方法将随着网络类型的不同而不同。  

 2、网络互连层  

 网络互连层是整个TCP/IP协议栈的核心。它的功能是把分组发往目标网络或主机。同时，为了尽快地发送分组，可能需要沿不同的路径同时进行分组传递。因此，分组到达的顺序和发送的顺序可能不同，这就需要上层必须对分组进行排序。  

 网络互连层定义了分组格式和协议，即IP协议（Internet Protocol）。  

 网络互连层除了需要完成路由的功能外，也可以完成将不同类型的网络（异构网）互连的任务。除此之外，网络互连层还需要完成拥塞控制的功能。  

 3、传输层  

 在TCP/IP模型中，传输层的功能是使源端主机和目标端主机上的对等实体可以进行会话。在传输层定义了两种服务质量不同的协议。即：传输控制协议TCP（transmission control protocol）和用户数据报协议UDP（user datagram protocol）。  

 TCP协议是一个面向连接的、可靠的协议。它将一台主机发出的字节流无差错地发往互联网上的其他主机。在发送端，它负责把上层传送下来的字节流分成报文段并传递给下层。在接收端，它负责把收到的报文进行重组后递交给上层。TCP协议还要处理端到端的流量控制，以避免缓慢接收的接收方没有足够的缓冲区接收发送方发送的大量数据。  

 UDP协议是一个不可靠的、无连接协议，主要适用于不需要对报文进行排序和流量控制的场合。  

 4、应用层  

 TCP/IP模型将OSI参考模型中的会话层和表示层的功能合并到应用层实现。  

 应用层面向不同的网络应用引入了不同的应用层协议。其中，有基于TCP协议的，如文件传输协议（File Transfer Protocol，FTP）、虚拟终端协议（TELNET）、超文本传输协议（Hyper Text Transfer Protocol，HTTP），也有基于UDP协议的。

56.什么是Jsonp?原理是什么,缺点是什么?

1、Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

2、Jsonp的原理:利用script标签可以获取不同源资源的特点，来达到跨域访问某个资源的目的。

3、为什么不是真正的 ajax?

ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，

Jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。

4、Jsonp只支持get请求，ajax支持get和post请求等。

5、Jsonp本质上是加载了其他网站的脚本，这种方式存在安全风险，因为其他网站可以利用JavaScript窃取用户信息，或更改页面内容。因此，在加载脚本前，一定确保对方是受信任的网站。

57.call / apply / bind 有啥区别

都是替换函数中不想要的this, call 和 apply 是临时的, bind 是永久的

call: call(thisObj, obj1, obj2...)

要求传入函数的参数是参数列表

apply: apply(thisObj, [argArray])

要求传入函数的参数必须放入数组中整体传入

bind: .bind(thisObj,arg1,arg2,...),

• 共同点 : 都可以改变this指向
• 不同点:

• • call 和 apply  会立即调用函数, 并且改变函数内部this指向.
  • call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递

• • bind  不会立即调用函数, 可以改变函数内部this指向.

• 应用场景

1. 1. call 经常做继承.
   2. apply 经常跟数组有关系.  比如借助于数学对象实现数组最大值最小值

1. 1. bind  不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

58.什么是原型，什么是原型链？

原型: 每一个构造函数，都会带有一个 prototype 属性。该属性指向一个对象，该对象称之为 原型对象。其所有的属性和方法都能被构造函数的实例对象共享访问,因为实例都包含着一个指向原型对象的内部指针 __proto__。可以通过内部指针 __proto__ 访问到原型对象,

原型对象 上默认有一个 constructor 属性，指向其相关联的构造函数。

原型链: 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找(即上一层构造函数的prototype)，这样一层一层向上查找直到Object的prototype结束,这样就会形成一个链式结构，我们称为原型链。我们可以说：它们是继承关系

59.构造函数 和 class的区别

构造函数:

1. 在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写
2. 功能类似对象模板，一个构造函数可以生成任意多个实例，实例对象具有相同的属性、行为特征，但不相等。

1. 函数体内使用 this，引用将要生成的实例对象。
2. 必需使用 new 命令调用函数，生成实例对象。

class类:

1. 类的内部所有定义的方法，都是不可枚举的
2. 类和模块的内部，默认就是严格模式（this 实际指向的是undefined），非严格模式指向window，所以不需要使用use strict指定运行模式

1. 类不存在变量提升（hoist）
2. 类的方法内部如果含有this，它默认指向类的实例

1. 类的静态方法不会被实例继承，静态方法里的this指的是类，而不是他的实例
2. 类的继承extends，在constructor中使用super，让this指向当前类，等同于Parent.prototype.constructor.call(this)

1. 类的数据类型就是函数，类本身就指向构造函数；使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致；

60.说说继承

1. 原型链继承（在实例化一个类时，新创建的对象复制了父类构造函数的属性和方法，并将proto指向父类的原型对象，当在子类上找不到对应的属性和方法时，将会在父类实例上去找。）
   缺点1：引用缺陷（修改其中一个实例的父类变量会影响所有继承的实例）
   缺点2：无法为不同的实例初始化继承来的属性
2. 构造函数继承（在子类的构造函数中执行父类的构造函数，并为其绑定子类的this，让父类的构造函数把成员属性和方法都挂到子类的this上）
   缺点：无法访问原型上的方法

1. 组合式继承(将原型链继承和构造函数继承组合到一起, 综合了原型链继承和构造函数继承的优点)
   小缺点：调用了两次父类构造函数
2. extends继承(class和extends是es6新增的，class创建一个类，extends实现继承)

参照文档:原型链继承的问题及解决方法 - codingOrange - 博客园

 61.例举强制类型转换和隐式类型转换?

答案：强制（parseInt(),parseFloat(),Number(),String(),toString()）

隐式:

1.算术运算符（+、-、*、/、%）

2.关系运算符（== ,!,&&,||)

3.条件判断语句如if(){}else{}等

62.CSS选择器优先级 && CSS选择器效率

!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器 

关于CSS的执行效率

样式系统从右向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。

63.逻辑运算符：与、或、非

|| : 只要其中有一个为true，整体结果是true；
&& : 只要有一个是false，整体结果是false；
!：取反 （比较：转布尔，在取反）

64.对象的定义

1.首先会开辟一个新的空间地址；空间地址是16进制；0-9a-f;
2.把键值对存储到当前这个堆内存下；
3.把这个空间地址给了对象名；
(函数定义同上，把函数体中的代码当做字符串存储到堆内存)

65.JS四种检测

1、typeOf：只能检测基本数据类型
2、instanceOf：检测当前实例是否属于某个类的方法
3、construtor:检测当前实例的构造函数
4、Object.prototype.toString.call([]); 最准确的方式；

66.闭包是什么，有什么特性，对页面有什么影响

1. 概念:内部函数访问其所在的外部函数中声明的参数和变量,形成的词法环境叫闭包.
2. 特性

让外部访问函数内部变量成为可能；

局部变量会常驻在内存中；

可以避免使用全局变量，防止全局变量污染；

会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

1. 对页面的影响：

　　使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

67.闭包的好处

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)

(2)避免全局变量的污染

(3)私有成员的存在

为什么用闭包

• 因为在闭包内部保持了对外部活动对象的访问,但外部的变量却无法直接访问内部,避免了全局污染;
• 可以当做私有成员,弥补了因js语法带来的面向对象编程的不足;

• 可以长久的在内存中保存一个自己想要保存的变量.

68.函数的递归

递归： 针对的是函数； 是JS中一种重要的思想；
函数： 分为定义和执行
函数递归： 在函数体内部，调用函数自己本身，让其执行；这就是递归；

69.浅拷贝与深拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝: 只复制指向某个对象的指针而不复制对象本身，新旧对象还是共享同一块内存。

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

深拷贝:会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

深拷贝的实现方式

1.JSON.parse(JSON.stringify())

原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

2.手写递归方法

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝;

70.赋值和浅拷贝的区别

• 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
• 浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即：默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

71.网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局;

静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；

自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；

流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

72.CSS margin重叠问题

块元素在垂直方向上的margin是很奇怪的，会有重叠现象。

如果display都是block，有三种情况：

外间距均为正数，竖直方向上会选择最大的外边距作为间隔

一正一负，间距 = 正 - |负|

两个负，间距 = 0 - 绝对值最大的那个

设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。

73.forEach和map的区别

相同点

• 都是循环遍历数组中的每一项
• forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）

• 匿名函数中的this都是指向window
• 只能遍历数组

• 都有兼容问题

不同点

• map速度比forEach快
• map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，

• map因为返回数组所以可以链式操作，foreach不能

74.什么是严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。

严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改：

1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。

2.消除代码运行的一些不安全之处，保证代码运行的安全。

3.提高编译器效率，增加运行速度。

4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名

75.javascript的typeof返回哪些数据类型.

答案：string,boolean,number,undefined,function,object

76.”==”和“===”的不同

答案：前者会自动转换类型,再判断是否相等

后者不会自动类型转换，直接去比较

77.怎么判断一个原型是否是这个对象的原型

使用: Object.prototype.isPrototypeOf()进行比较
var obj1 = {name: "Lilei"};
var obj2 = Object.create(obj1);
obj1.isPrototypeOf(obj2); // true

---

79.localstorage不能手动删除的时候，什么时候过期

除非被清除，否则永久保存 clear()可清楚

sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除

80.setTimeout 和 setInterval 细谈

常问的点，前者是在一定时间过后将函数添加至执行队列，执行时间=延迟时间+之前函数代码执行时间+执行函数时间。

后者是不管前一次是否执行完毕，每隔一定时间重复执行，用于精准执行互相没有影响的重复操作。

如果需要控制前后执行顺序，最好使用setTimeout模拟setInterval

81.Object.prototype.toString.call()

常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined

82.transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式

三者属性说明

transform 是指变换、变形，是 css3 的一个属性，和 width，height 属性一样；

translate 是 transform 的属性值，是指元素进行 2D(3D)维度上位移或范围变换;

transition 是指过渡效果，往往理解成简单的动画，需要有触发条件。

83.说说写JavaScript的基本规范？

1) 不要在同一行声明多个变量

2) 使用 ===或!==来比较true/false或者数值

3) switch必须带有default分支

4) 函数应该有返回值

5) for if else 必须使用大括号

6) 语句结束加分号

7) 命名要有意义，使用驼峰命名法

84.栈和堆的区别？

栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；

堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。

85.什么是window对象? 什么是document对象?

window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。

86.响应事件

onclick鼠标点击某个对象；onfocus获取焦点；onblur失去焦点；onmousedown鼠标被按下

87.XML与JSON的区别？

1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

3) 数据描述方面。JSON对数据的描述性比XML较差。

4) 传输速度方面。JSON的速度要远远快于XML。

88.HTML与XML的区别？

（1）XML用来传输和存储数据，HTML用来显示数据；

（2）XML使用的标签不用预先定义

（3）XML标签必须成对出现

（4）XML对大小写敏感

（5）XML中空格不会被删减

（6）XML中所有特殊符号必须用编码表示

（7）XML中的图片必须有文字说明

89.jQuery 库中的 $() 是什么？

$() 函数是 jQuery() 函数的别称,$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

90.网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？

$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。

91. jQuery 里的 ID 选择器和 class 选择器有何不同？

ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。

92. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('#ButtonToClick').click(function(){

    $('#ImageToHide').hide();

});

93.$(document).ready() 是个什么函数？为什么要用它？

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。

94.JavaScript window.onload 事件和 jQuery ready 函数有何不同？

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

95.$(this) 和 this 关键字在 jQuery 中有何不同？

这对于很多 jQuery 初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

 96.jQuery中 detach() 和 remove() 方法的区别是什么? 

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法.

97.你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

　　通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等

                .addClass("类名")添加元素      .remove()  删除样式类   

98.jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

　　ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

99.jQuery 中的方法链是什么？使用方法链有什么好处？

　　方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

100.如何用jQuery禁用浏览器的前进后退按钮？

实现代码如下：

$(document).ready(function() {
    window.history.forward(1);
    //OR window.history.forward(-1);
　　});

101. jquery中$.get()提交和$.post()提交有区别吗？

• 相同点：都是异步请求的方式来获取服务端的数据；
• 不同点：

1. 1. 请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
   2. 参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

1. 1. 数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
   2. 安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

102.写出一个简单的$.ajax()的请求方式？

$.ajax({
    url:'http://www.baidu.com',
    type:'POST',
    data:data,
    cache:true,
    headers:{},
    beforeSend：function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
});

103.为什么使用jQuery

因为jQuery是轻量级的框架，它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题) ,出色的浏览器的兼容性,而且支持链式操作，隐式迭代;行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

104.你知道jquery中的选择器吗，请讲一下有哪些选择器？

选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器

105.jquery中的选择器 和 css中的选择器有区别吗？

jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS 中的选择器是只能添加相应的样式。

106.你觉得jquery中的ajax好用吗，为什么？

好用的。因为jQuery提供了一些日常开发中夙瑶的快捷操作，例 load，ajax，get，post等等，所以使用jQuery开发ajax将变得极其简单，我们就可以集中精力在业务和用户的体验上，不需要去理会那些繁琐的XMLHttpRequest对象了。ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。

107.你在jquery中使用过哪些插入节点的方法，它们的区别是什么？

答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore()

内添加

1.append在文档内添加元素

2.appendTo()把匹配的元素添加到对象里

3.prepend()在元素前添加

4.prependTo()把匹配的元素添加到对象前

外添加

1.after()在元素之后添加

2.before()在元素之前添加

3.insertAfter()把匹配元素在对象后添加

4.insertBefore()把匹配元素在对象前添加

108.jquery中有哪些方法可以遍历节点？

children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素

next() 取得匹配元素后面紧邻的同辈元素

prev() 取得匹配元素前面紧邻的同辈元素

siblings() 取得匹配元素前后的所有同辈元素

closest() 取得最近的匹配元素

find() 取得匹配元素中的元素集合,包括子代和后代

109.jQuery 能做什么？

1 获取页面的元素

2 修改页面的外观

3 改变页面大的内容

4 响应用户的页面操作

5 为页面添加动态效果

6 无需刷新页面，即可以从服务器获取信息

7 简化常见的javascript任务

110.jQuery 里的 each() 是什么函数？你是如何使用它的？

each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。

111.使用CDN加载 jQuery库的主要优势是什么？

除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

112.var,let,const的区别

• 使用 var 声明的变量，其作用域为全局作用域或者为所在的函数内局部作用域，且存在变量提升现象
• 使用 let 声明的变量，其作用域为该语句所在的代码块内{}，不存在变量提升

• 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

113.ES6的新语法

1. let

let将会具有块级作用域，即在{}之间有效,同时不允许在为声明前进行使用

2. const

const为常量，不允许修改他的值

3. 模板字符串

4. 增强的对象字面量：【给对象属性赋值时，无需写成键值对】

5. 解构赋值

6.es6之函数相关语法

(1)函数参数默认值

(2) 函数不定参数

(3) 箭头函数

7.es6之class相关语法

8.es6之http请求相关语法

(1.)promise的使用

(2.)fetch的使用

9.es6之async-await相关语法

等等

114.说说你对数组的解构和对象的解构的理解?

115.map和set的区别

• map类似于对象，也是键值对的集合，但是“键”的范围不限制于字符串，各种类型的值（包含对象）都可以当作键。Map 也可以接受一个数组作为参数，数组的成员是一个个表示键值对的数组。注意Map里面也不可以放重复的项。
• Set类似于数组，但是它里面每一项的值是唯一的，没有重复的值，Set是一个构造函数，用来生成set的数据结构

116.set实现数组去重

第一种数组去重方法（使用Array.from）：

let arr = [12,43,23,43,68,12];
let item = new Set(arr);
console.log(item);//结果输出的是一个对象
//使用Array.from转成数组
let arr = [12,43,23,43,68,12];
let item = Array.from(new Set(arr));
console.log(item);// [12, 43, 23, 68]

第二种数组去重方法（使用...扩展运算符）：

let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]

117.JS的垃圾回收机制是什么?你得理解?

最常使用的方法叫做"引用计数"（reference counting）：语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。JS的垃圾回收机制是为了以防内存泄漏，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。

118.cookie、localStorage、sessionStorage的区别

1. cookie：能存储内容较小，在4k左右，一般用作保存用户登录状态、记住密码，记住账号使用。不清除的话会一直存在，可以设置过期时间自动清除，设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header里面，所以若是储存太多会影响性能。

2.localStorage：HTML5 标准中新加入的技术，可保存内容在5M左右，不会自动清除，除非手动进行删除。

3. sessionStorage：和localStorage类似，他们唯一区别就是sessionStorage保存在当前会话中，会话结束sessionStorage失效。会话一般是在关闭页面或者关闭浏览器失效。

119.前端性能优化相关理解

一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。

1、减少http请求，合理浏览器缓存

2、启用压缩：HTML、CSS、javascript文件启用GZip压缩可达到较好的效果

3、CSS Sprites：合并 CSS图片，减少请求数的又一个好办法。

4、LazyLoad Images：在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片

5、CSS放在页面最上部，javascript放在页面最下面：让浏览器尽快下载CSS渲染页面

6、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

7、Javascript代码优化

(1). DOM操作  

a.HTML Collection（HTML收集器，返回的是一个数组内容信息）  

 在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。  

 因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。    

b. 减少Reflow & Repaint    

 除了上面一点之外， DOM操作还需要考虑浏览器的Reflow和Repaint ，因为这些都是需要消耗资源的。

(3)避免使用 eval和 Function

每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。  

 eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。  

 Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。  

 此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

(4) 减少作用域链查找

然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

8、CSS选择符优化

在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如  

#toc A { color: #444; }这样一个选择符，如果是从右往左解析则效率会很高，因为第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个 A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有兴趣的童鞋可以去了解一下。

9.使用CDN（contentdistribute network，内容分发网络)

120.你能描述一下渐进增强和优雅降级之间的不同吗?

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

121.setTimeout、Promise、Async/Await 的区别

1. setTimeout

console.log('script start')    //1. 打印 script start

setTimeout(function(){

    console.log('settimeout')    // 4. 打印 settimeout

})    // 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数

console.log('script end')    //3. 打印 script start

// 输出顺序：script start->script end->settimeout

2. Promise

Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。

console.log('promise111')

        let promise1 = new Promise(function (resolve) {

            console.log('promise222')

            resolve()

            console.log('promise333')

        }).then(function () {

            console.log('promise555')

        })

        setTimeout(function () {

            console.log('promise666')

        })

        console.log('promise444')

// 3. async/await

async function async1() {

            console.log('async022');

            await async2();

            console.log('async055')

        }

        async function async2() {

            console.log('async033')

        }

        console.log('async011');

        async1();

        console.log('async044')

        // 输出顺序：script start->async1 start->async2->script end->async1 end

        // async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

122.什么是nodejs？我们在哪里使用它？

Nodejs是服务器端的一门技术。它是基于Google V8 JavaScript引擎而开发的。用来开发可扩展的服务端程序。

123.为什么要使用node js？

nodejs会让我们的编程工作变得简单，它主要包含如下几点几个好处:

执行快速。

永远不会阻滞。

JavaScript是通用的编程语言。

异步处理机制。

避免并行所带来的问题。

124.nodejs有哪些特点？

是单线程的，但是有很高的可扩展性，使用JavaScript作为主流编程语言。使用的是异步处理机制和事件驱动。处理高效。

125.为什么nodejs是单线程的？

Nodejs使用的是单线程没错，但是通过异步处理的方式，可以处理大量的数据吞吐量，从而有更好的性能和扩可扩展性。

126.NPM的作用是什么?

Node package manager, 主要有两个功能。

它是一个网端模块的存储介质。

它的另一个作用是安装程序依赖和版本管理。

127.什么是事件循环机制eventloop

1)要说eventloop先来理解同步和异步：

所有的线程，都是有同步队列，和异步队列，

立即执行的任务队列，这些都是属于同步任务，比如一个简单的函数；

请求接口发送ajax，发送promise，或时间计时器等等，这些就是异步任务。

2)、任务队列-事件循环：

同步任务会立刻执行，进入到主线程当中，异步任务会被放到任务队列（Event Queue）当中。Event Queue 单词的意思就是任务队列。

等待同步代码执行完毕后，返回来，再将异步中的任务放到主线程中执行,反复这样的循环，这就是事件循环。也就是先执行同步，返回来按照异步的顺序再次执行

128.vue优点？

答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

129.什么是MVVM,谈谈你对mvvm的理解

MVVM模式的理解

MVVM是Model-View-ModelView的缩写

模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

它有两个方向：

一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。

实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总结：

• MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel。
• m model数据层:Vue中数据层 都放在data 里面。

• v view视图:Vue中view 即 我们的HTML页面。
• vm （view-model）控制器将数据和视图层建立联系，vm即Vue 的实例。

129.双向数据绑定原理

Vue的双向数据绑定的原理主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。

• 当数据发生变化的时候，视图也就发生变化
• 当视图发生变化的时候，数据也会跟着同步变化

130.为什么使用key?

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。

作用主要是为了高效的更新虚拟DOM。

131.分别简述computed和watch的使用场景

答：computed:

　　　　当一个属性受多个属性影响的时候就需要用到computed

　　　　最典型的栗子： 购物车商品结算的时候

watch:

　　　　当一条数据影响多条数据的时候就需要用watch

　　　　栗子：搜索数据

132.简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

133.Vue.js特点

简洁：页面由HTML模板+Json数据+Vue实例组成

数据驱动：自动计算属性和追踪依赖的模板表达式

组件化：用可复用、解耦的组件来构造页面

轻量：代码量小，不依赖其他库

快速：精确有效批量DOM更新

模板友好：可通过npm，bower等多种方式安装，很容易融入

134.计算属性和watch的区别

在我们运用vue的时候一定少不了用计算属性computed和watch

computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。

watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。

135.v-show和v-if指令的共同点和不同点？

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

136.v-on可以监听多个方法吗？

可以。

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

137.v-on 常用修饰符

.stop 该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法

.prevent 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

.self 该指令只当事件是从事件绑定的元素本身触发时才触发回调

.once 该修饰符表示绑定的事件只会被触发一次

138.v-for key的作用。

当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

139.v-for 与 v-if 的优先级

v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

140.简单说一下Vue2.x响应式数据原理

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

141.说一下v-model的原理

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

142. vue.js的两个核心是什么？

数据驱动、组件系统

143.vue如何兼容ie的问题。

babel-polyfill插件

144.说一下Vue的生命周期

beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

145.你都做过哪些Vue的性能优化？

编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• v-if和v-for不能连用

• 如果需要使用v-for给每项元素绑定事件时使用事件代理
• SPA 页面采用keep-alive缓存组件

• 在更多的情况下，使用v-if替代v-show
• key保证唯一

• 使用路由懒加载、异步组件
• 防抖、节流

• 第三方模块按需导入
• 长列表滚动到可视区域动态加载

• 图片懒加载

SEO优化

• 预渲染
• 服务端渲染SSR

打包优化

• 压缩代码
• Tree Shaking/Scope Hoisting

• 使用cdn加载第三方模块
• 多线程打包happypack

• splitChunks抽离公共文件
• sourceMap优化

用户体验

• 骨架屏
• PWA

还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

146.axios是什么？怎么使用？描述使用它实现登录功能的流程？

第一问

请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

第二问根据项目回答.

147.SPA 单页面的理解，它的优缺点分别是什么？

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

基于上面一点，SPA 相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

148. js的哪些操作会造成内存泄露

(1) 意外的全局变量（未经声明的变量，直接this创建的变量）

(2) 计时器（计时器未被清除的时候就一直存在）或回调函数

(3) Dom清空或删除时，事件未清除导致的内存泄漏

(4) 闭包

(5) 控制台过多的console.log()

149.再说一下vue2.x中如何监测数组变化

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

150.keep-alive了解吗

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

常用的两个属性include/exclude，允许组件有条件的进行缓存。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive的中还运用了LRU(Least Recently Used)算法。

151.vue路由hash模式和history模式实现原理及区别

hash 模式：

#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

history 模式：

history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。

区别

url 展示上，hash 模式有“#”，history 模式没有

刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由

兼容性，hash 可以支持低版本浏览器和 IE。

152.vue路由传参

一、router-link路由导航

父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link>

例如：<router-link to="/a/123">routerlink传参</router-link>

子组件: this.$route.params.num接收父组件传递过来的参数

mounted () {
  this.num = this.$route.params.num
}

路由配置:：{path: '/a/:num', name: A, component: A}

地址栏中的显示:：http://localhost:8080/#/a/123

二、调用$router.push实现路由传参

父组件: 绑定点击事件，编写跳转代码

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

子组件: this.$route.params.id接收父组件传递过来的参数

mounted () {
  this.id = this.$route.params.id
}

路由配置:：{path: '/d/:id', name: D, component: D}

地址栏中的显示:：http://localhost:8080/#/d/123

三、通过路由属性中的name匹配路由，再根据params传递参数

父组件: 匹配路由配置好的属性名

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: 'B',
        params: {
          sometext: '一只羊出没'
        }
      })
    }

子组件:

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

路由配置: 路径后面不需要再加传入的参数，但是name必须和父组件中的name一致

{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失

http://localhost:8080/#/b

四、通过query来传递参数

父组件:

<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: '/c',
        query: {
          sometext: '这是小羊同学'
        }
      })
    }

子组件:

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>

路由配置: 不需要做任何修改

{path: '/c', name: 'C', component: C}

地址栏中的显示: (中文做了转码)

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

153.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

154.vuex有哪几种属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理

155.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

156.Vuex中actions和mutations的区别

Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。 .

157.为什么 Vue 组件中 data 必须是一个函数？

    如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。

    如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

158.Vue 如何清除浏览器缓存？

        （1）项目打包的时候给每个打包文件加上 hash 值，一般是在文件后面加上时间戳；

        （2）在 html 文件中加入 meta 标签，content 属性设置为no-cache;

        （3） 在后端服务器中进行禁止缓存设置。

159.Vue-cli 项目中每个文件夹和文件的用处大致是什么？

        （1）bulid 文件夹：存放 webpack 的相关配置以及脚本文件，实际开发中一般用来配置 less、babel 和配置 webpack.base.config.js 文件。

        （2）config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。

        （3）node_modules 文件夹：存放 npm install 命令下载的开发环境和生产环境的各种依赖。

        （4）src 文件夹 ：存放组件源码、图片样式资源、入口文件、路由配置等。

160.Vue-cli 项目中 assets 和 static 文件夹有什么区别？

    两者都是用于存放项目中所使用的静态资源文件的文件夹。其区别在于：

    ** assets 中的文件在运行 npm run build 的时候会打包**，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到 static 中。static 中的文件则不会被打包。

将图片等未处理的文件放在assets中，打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中，因为这些文件已经经过处理了。

161.$nextTick是什么？

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

162.$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，

你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

163.请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)

　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

　　4. 封装完毕了，直接调用即可

164.params和query的区别

答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据

params刷新 会 丢失 params里面的数据。

165.$route 和 $router 的区别

答：$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)

$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

166.点击穿透

移动端点击穿透的5种解决方案 - 简书

167.什么是vue的生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期

168.vue的生命周期的八个钩子函数

参见:144

169.第一次页面加载会触发哪几个钩子？

答：beforeCreate， created， beforeMount， mounted

170.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

化身面试官出30+Vue面试题，超级干货（附答案）｜牛气冲天新年征文

掘金

掘金

微信小程序篇

1.请谈谈微信小程序主要目录和文件的作用？

• project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
• App.js 设置一些全局的基础数据等；

• App.json 底部tab, 标题栏和路由等设置；
• App.wxss 公共样式，引入iconfont等；

• pages 里面包含一个个具体的页面；
• index.json (配置当前页面标题和引入组件等)；

• index.wxml (页面结构)；
• index.wxss (页面样式表)；

• index.js (页面的逻辑，请求和数据处理等)；

2 请谈谈wxml与标准的html的异同？

• 都是用来描述页面的结构；
• 都由标签、属性等构成；

• 标签名字不一样，且小程序标签更少，单一标签更多；
• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

• WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
• 组件封装不同， WXML对组件进行了重新封装，

• 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

3 请谈谈WXSS和CSS的异同？

• 都是用来描述页面的样子；
• WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

• WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
• WXSS 仅支持部分 CSS 选择器；

• WXSS 提供全局样式与局部样式

4 你是怎么封装微信小程序的数据请求的？

• 在根目录下创建utils目录及api.js文件和apiConfig.js文件；
• 在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；

• 在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
• 在具体的页面中导入；

5 小程序页面间有哪些传递数据的方法？

• 使用全局变量实现数据传递
• 页面跳转或重定向时，使用url带参数传递数据

• 使用组件模板 template传递参数
• 使用缓存传递参数

• 使用数据库传递数据

6 请谈谈小程序的生命周期函数？

• onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
• onShow() 页面显示/切入前台时触发，一般用来发送数据请求；

• onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
• onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。

• onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

7 简述微信小程序原理？

• 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
• 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；

• 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
• 功能可分为webview和appService两个部分；

• webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
• 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

8 你是怎么封装微信小程序的数据请求的？

• 在根目录下创建utils目录及api.js文件和apiConfig.js文件；
• 在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；

• 在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
• 在具体的页面中导入；

9 请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

10 小程序内的页面跳转

• wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
• wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

• wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
• wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

• wx.reLaunch——关闭所有页面，打开到应用内的某个页面

11 小程序的优点和缺点

小程序的优点

• 无需下载
• 打开速度快

• 开发成本低
• 为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线

• 服务请求快

小程序的缺点

• 依托微信，不能开发后台管理功能
• 大小限制不能超过2M，不能打开超过5个层级的页面

12 如何实现下拉刷新

• 先在app.json或page.json中配置enablePullDownRefresh:true
• page里用onPullDownRefresh函数，在下拉刷新时执行

• 在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

死磕JS36道手写题(提升);

掘金station

掘金