HTML5,CSS,JS前端常见知识面试题

css中单位px,em,rem的区别

（1）px 是长度单位，它是相对于显示器屏幕分辨率而言的。比较稳定和精确，但在浏览器中放大或缩放浏览器页面时会出现页面混乱的情况。
（2）em 是相对长度单位。em是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸。em的值并不是固定的，它会继承父级元素的字体大小。
（3） rem 是css3新增的一个相对单位，REM是相对单位，是相对HTML根元素。集相对大小和绝对大小的优点于一身，通过它可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

seo优化

seo叫搜索引擎优化。
设置网页的title，不要出现空链接，设置网络中图片的alt属性，在页面中多使用hx标签，优化网页相应速度，定期更新文章内容，购买外链，花钱买关键字（额外投入）
技巧：

1. 关键字优化：a.meta标签的keywords,description属性值；
2. 网站结构和内容优化
3. 内链和外链的优化
4. 设置网站的关键词和描述信息
5. 所有的js,css采用外联方式，图片采用css精灵图，减少网络请求次数
6. 利用布局：将重要的HTML内容代码放在最前
7. 每个页面只能出现一次h1, h2可以多次；h1权限很高，普遍认定仅次于title
8. 图片一定要写alt,title可选
9. 非特殊性链接，链接地址一定要写href属性
10. 网站结构呈扁平状树型，目录结构不宜过深，过深不利于搜索引擎的抓取
11. 做好404页面，提升用户体验友好
12. .尽量不使用iframe,重要的内容不要放在框架中，搜索引擎不会抓取到iframe里的内容

sass,less—css预处理器

sass,less是css预处理器, 是css上的一种抽象层。他们是一种特殊的语法/语言编译成css。
sass是一种动态样式语言，sass语法属于缩排语法，比css多出功能（变量，嵌套，运算，继承，颜色处理，函数等）更容易阅读。scss用{}取代了原来的缩进。
less也是一种动态样式语言，变量，继承，运算，函数。既可以在客户端上运行（IE6+，Webkit,Firefox）,也可以在服务器端运行（借助Node.js）。
区别：
编译环境不一样，sass Ruby环境，在服务端处理，less需要引入less.js来处理输出css到浏览器，也可以在开发环节中使用less然后后编译成css文件。
Sass 变量符号$，less变量符号@
less和sass中的变量会随着作用域的变化而不同
less没有输出设置，sass输出选项：nested(嵌套缩进 的css代码),compact（展开的多行css代码）,compressed（简介格式 的css代码）,expanded（压缩后的css代码）
sass支持条件语句，可以使用if{} else{} for{} 循环等待。而less不支持。
sass引入外部文件以_开头， less引用外部文件和css中的@import没什么差异。
sass有工具库compass，less有UI组件库Bootstrap。
sass功能比less强大，less则相对清晰明了，易于上手，对编译环境要求比较宽松。
结构清晰，便于扩展，可以方便屏蔽浏览器私有语法差异，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。完全兼容CSS代码，可以方便的应用到老项目中。Less只是在css语法上做了扩展，所以老的css代码可以与less代码一同编译。

src与href的区别

src用于替换当前元素，source，指向外部资源的位置，指向的内容将会嵌入到文档当中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如JS脚本，img图片和frame元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载编译，执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。故js脚本放在底部而不是头部。

href用于在当前文档和引入资源之间确立关系。Hypertext Reference 指向网络资源所在位置，建立和当前元素（瞄点）或当前文档（链接）之间的链接，在文档中添加 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理，@import需要页面网页完全载入以后加载。故建议使用Link方式加载css，而不是使用@import方式。

页面中使用CSS的三种方式

（1）行内添加定义style属性值，
（2）页面头部内嵌调用，
（3）外面链接调用，link和@import

		importXML/HTML代码
		"stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
		XML/HTML代码
		  

link和@import的区别

（1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
（3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM去改变样式；而@import不支持。
@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

标准盒模型

标准w3c盒子模型：内容，内边距，外边距，边框：一般不计入盒子实际宽度
怪异盒：内容，内边距，外边距，边框：计入盒子的实际宽度

常见浏览器的兼容问题

（1） 双边bug float引起的 使用display；
（2）3像素问题，使用float引起的 使用display:inline -3px；
（3）超链接hover 点击后失效，使用正确的书写顺序 link visited hover active；
（4）IE z-index问题 给父级添加position:relative；
（5）png透明使用js代码改；
（6）min-height 最小高度 ！important解决；
（7）select在ie6下遮盖 使用iframe嵌套；
（8）为什么没有办法定义1px左右的宽度容器（IE默认的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）；
（9）IE5-8不支持opacity，解决办法；

	.opacity{
		Opacity:0.4
		Filter:alpha(opacity=60);
		-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;	/* for IE8 */
	} 

（10）用margin:0 auto;设置水平居中在IE下会失效，解决办法用text-align属性：
body{text-align:center};#content{text-align:left}
怪异模式下设置图片的padding会失效,怪异模式下Table中的字体属性不能继承上层的设置,怪异模式下white—space:pre会失效。

属性继承

可继承：font-size font-family color,ul li dl dd dt;
不可继承：border padding margin width height;

css有哪些新特性

（1）cssc3实现圆角（border-radius）,阴影（box-shadow）
（2）对文字加特效（text-shadow）,线性渐变（gradient）,旋转（transform）
（3）Transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); // 旋转，缩放，定位，倾斜
（4）增加了更多的css选择器 多背景rgba
（5）在css3中唯一引入的伪元素时 ：：selection.7
（6）媒体查询，多栏布局
（7）Border-image

如何对网站的文件和资源进行优化

（1）文件合并（目的是减少http请求）
（2）文件最小化/文件压缩（最小化css,js，减小文件体积）
（3）使用CDN托管
（4）缓存的使用
（5）将css放在页面最上面
（6）将script放在页面最下面
（7）避免在css中使用表达式
（8）将css，js都放在外部文件中
（9）减少DNS查询，将资源分布到恰当数量的主机名
（10）避免重定向
（11）移除重复脚本
（12）配置实体标签etag
（13）使用ajax缓存，让网站内容分批加载，局部更新
content方面：
减少http请求：合并文件，css精灵等。
减少DOM元素的数量
cookie方面：减少cookie大小
css方面：将样式表放到页面顶部
不使用css表达式
使用引入文件，不使用@import

样式居中

{display:block;margin:0 auto}
{display:block;position:absolute;left:50%;right:50%;translate(-50%,-50%)}
水平垂直居中
1 margin负值+定位（transfrom）
2 {
	position:abosulate;
	top:50%;
	left:50%;
	transfrom:transition(-50%,-50%);
}
3 flex布局居中
{ // 给父元素添加
	display:flex;
	justify-content:center; // 水平居中
	align-item:center; // 垂直居中
}
4 gird布局居中
{ // 给父元素添加
	display:grid;
	place-align:center;
	// 或 place-content center
}

css的content属性

css的content属性专门应用在before/after伪元素上，用来插入生成内容。最常用的应用是利用伪类清除浮动。

div+css布局较table布局的优点

结构与样式分离，代码语义性好，更符合HTML标准规范，SEO优化
table布局的适用场景：某种原因不方便加载外部css的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面局部正常。

移动开发–如何实现适配

flex布局

圣杯布局，双飞翼布局

都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先以便先行渲染。（核心目的：先解析中间栏，展示当前页面的核心内容，提升用户体验。）
圣杯布局：结构上先解析center，三块之间没有重叠部分，给最大的盒子添加了padding挤进去的；
双飞翼布局：结构上先解析center，3大块，最大的中间是和左右重叠的，center中的小盒子是margin挤进去的；

get和post的区别

（1）get是获取数据，post是传送数据
（2）get的安全性比较低（明文传输），它传送的参数数据包含在url中，可以在地址栏看到。post安全性比较高（加密传输），post传参包含在请求体中无法直接获取。
（3）传参的数据量大小不同get传送的数据量比较小2kb，post一般是不受限制,大小由服务器端决定。

var,let,const的区别

（1）var声明的变量属于函数作用域；let和const声明的变量属于块级作用域，不能跨函数访问。
（2）var存在变量提升现象，而let和const没有
（3）var变量可以重复声明，值可改变；在同一个块级作用域下：let变量不能重复声明；const定义的变量是常量，声明时必须赋值，但不允许重复赋值，如果定义的是引用类型，可以修改数据内部结构。

jpg,gif,png-8,png-24的区别，及其各自的使用场景

gif,jpg,png格式的图片在网站制作中的区别
gif格式的特点：
（1）透明性，gif是一种布尔透明类型，它既可以是全透明，也可以是全不透明，但是它并没有半透明（alpha透明）
（2）动画，gif这种格式支持动画
（3）无耗损性，gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
（4）水平扫描，gif是使用了一种叫做LZW的算法进行压缩的，这也意味着同等条件下，横向的gif图片比竖向的git图片更加小。例如50010的图片比10500的图片更加小。
（5）间隔渐进显示，gif支持可选择性的间隔渐进显示
　由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。
png格式特点：
（1）类型,Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg
（2）透明性,Png是完全支持alpha透明的（透明，半透明，不透明），尽管有两个怪异的现象在ie6（下面详细讨论）
　（3）动画,它不支持动画
　　PNG图片格式现在包含三种类型：
　　1.PNG8 256色PNG的别名
　　2.PNG 24全色PNG的别名
　　3.PNG 32全色PNG的别名

深拷贝，浅拷贝

浅拷贝如果目标是基本数据类型，就和直接赋值一样，会拷贝其本身，如果目标是对象，对于浅拷贝只拷贝其引用，原对象改变，拷贝对象也会随之改变。
深拷贝会拷贝多层，即使嵌套了对象，也会拷贝出来。深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，所以原对象的改变不会对拷贝出的对象产生影响。
区别：
深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。
实现浅拷贝的方法：
（1）自定义函数实现（实例：拷贝一个对象，函数里定义一个空对象，然后for循环将目标对象中的内容伪数组形式赋给空对象）
（2）ES6：object.assign({},obj)(这是一个对象合并方法)
（3）ES6：扩展运输–let newObj={…obj}
（4）引用lodash.js,使用它的_.clone(value)实现
实现深拷贝的方法：
（1）递归拷贝（代码量大，一般不用）
（2）JSON方法拷贝：JSON.parse,JSON.stringify(局限性：不能拷贝函数方法)
（3）jQuery中的extend方法 $.extend（true,[]/{},a）
（4）引用lodash.js，使用它的_.cloneDeep(value)实现
（5）自定义函数拷贝

http和https的区别

（1）传输信息安全性不同。
http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。
（2）连接方式不同。
http协议：http协议的连接很简单，是无状态的。
https协议：是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议。
（3）端口不同。
http协议：端口80。
https协议：端口443。
（4）
http协议：免费申请。
https协议：需要到ca申请证书，一般免费证书很少，需要交费。

什么是面向对象

是一种编程思想。三大特点：
封装，（把数据和数据的操作书写在一个类中）
继承，（apply/prototype）
多态 ，重载：相同函数名的函数：根据参数个数的不同或者参数类型的不同实现不同的功能。 JS没有重载，因为JS天生就支持。
覆写/重写：继承父级的方法名，但是方法体重写。

封装的好处（代码复用）

提高内聚，降低耦合
(1)将不需要外界知道的东西隐藏起来，提供公共方法进行访问，提高了代码的安全性
(2)功能性代码封装之后，可以在当前项目中引入进行使用，提高了代码的复用性
(3)高内聚：封装细节便于修改内部代码，提高可维护性。低耦合：简化外部调用，便于调用者使用，便于扩展和协作。

map和forEach的区别

arr.map()方法：没有修改原数组
返回值：每次执行的返回值组成的新数组；
var arr=[4,3,2,1];
var res=arr.map(function(item,index,arr){
Return parseInt(item1.310)/10
})
console.log(res);
arr.forEach()方法：会修改原数组
item:数据项 index:数据项索引 arr：操作目标
var arr=[4，3，2，1，0]；
arr.forEach(function(item,index,arr){
console.log(item,index,arr);
})

构造函数

用来构造（创建）结构相同的对象的函数，他在声明的时候跟普通函数没有区别。用new运算符加上函数名的调用，调用的结果就是一个对象。
任何函数前面加上new调用->这个函数就称之为构造函数！使用构造函数主要是用来构造各种类型的数据和各种系统提供给我们的功能。 所有的数据都可以用构造函数去构造，基本类型被构造函数创建在使用上没有任何区别，在数据类型上有区别；构造函数构造出来的内容用typeof得到的都是object。
普通函数调用fn();
构造函数调用new Fn();
var a=fn()
Var b=new Fn() //称b是Fn的实例，Fn是b的抽象
console.log(a) //undefined
console.log(b) //空对象
console.log(typeof b) //object

函数防抖

我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove,resize,onscroll等等，我们并不能或者不想频繁触发事件，这时候就用到函数防抖和函数节流了
函数防抖：短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
函数节流：指连续触发事件但是在n秒中只执行一次函数。即2n秒内执行2次，节流如字面意思，会稀释函数的执行频率。

基本数据类型

string,number,boolean,symbol
undefined(未定义) : 变量未声明或变量声明未赋值的时候,计算机默认变量值为 undefined;
null (空) : 如果希望数据为空赋值 null 。

事件委托

给具有相同事件的多个子元素的父级绑定该事件。
原理：事件冒泡，只指定一个事件处理程序，就可以处理某一类型所有的事件。
使用场景：用于事件源不确定的情况，把事件委托给父级。（子级发生该事件，冒泡，父级同样可以监听捕捉该事件。）
优点：方便，可以给不确定的元素添加事件（后创建的）
判断事件来源（取事件源）：e.target||e.srcElement
示例：var target=e.target||e.srcElement
var className=target.calssName

事件冒泡

事件流概念：子元素的事件被触发时，从自身向外传递，父元素以及祖先也会被触发（冒泡）。
一个完整的事件流包含：捕获阶段–目标阶段–冒泡阶段。浏览器默认在冒泡阶段处理事件。在非IE浏览器可以用事件监听觉得处理的阶段是冒泡还是捕获。
事件冒泡是从自己开始一层一层往外传播事件的过程。子-父-祖先。
事件捕获: 由外到内进行事件传播。
事件冒泡：由内到外冒泡。

this指向问题

this是一个关键字，指向一个对象，在不同的调用环境this指向的对象也不一样。
（1）全局this指window console.log(this)
（2）全局函数里的this指window

function fn(){
	console.log(this)
}
fn()

（3）事件处理函数里this指绑定事件的DOM对象（不一定是事件源，哪个对象绑定就是哪个对象）

document.querySelector(‘#box’).onclick=function(){
	    console.log(this)
}

（4）没有名字的，明确指向的匿名函数的this指window

   (function(){
	  console.log(this)
	})()
	setTimeout(function(){
		console.log(this)
	},1000)
包括数组的map，reduce等方法里面的匿名函数this都是指window；匿名回调函数里的this也是window。
示例：1. var a=2;

    function fun(){
		 console.log(this.a);
	}
	var o={a:3.fun:fun}
	o.fun(); //打印3
这时o对象调用的函数，this指向o，只看前四行，函数没有被明确调用，指向的是window。
2.赋值语句的结果就是赋的值
var p={a:4};
//把赋值的结果也就是fun这个函数放进一个自调用函数里来执行，this指window
(p.fun=o.fun)(); //打印2 

（5）对象方法里的this指向对象本身，不管事字面量声明还是原型方法或者class，this都是当前实例对象。
var obj={
name:’name1’,
say:function(){
console.log(this) //obj
}
}

（6）构造函数里的this指将来new的实例
function Dog(name){
this.name=name
}
（7）箭头函数没有自己的this指向
如果希望this指向当前对象，就用普通函数
如果希望this指向外层对象，用箭头函数
如果内层外层都要，用普通函数，this指向内层；在外层声明一个变量把外层this存下来，比如const _this=this, _this指向外层。

修改this指向

(1)bind是在函数封装的时候来修改this指向
(2)call和apply这两个方法作用是一样的，但参数传参不一样；
call的参数直接挨个传递即可，apply后面的参数要放到一个数组里来传递。
var a=10
var obj1={
a:20,
say:function(x,y){
console.log(this.a)
console.log(this.a+x+y)
}
}
var obj2={
a:30,
say:function(){
console.log(this.a) // bind是在函数封装的时候来修改this指向，这种的话以后的调用this都指obj1
}.bind(obj1)
}
obj2.say() //结果为20
在调用的时候临时修改this
obj1.say()
//在调用obj1.say的时候把say方法中的this临时改为window
obj1.say.call(window,1,2) //结果为13（程序先打印了10）
obj1.say.apply(window,[1,2])

原型

函数的伴生体（随着函数一块产生的 ）
我们创建的每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
给一个类的原型上新增属性或者方法：当我们用构造函数时new这个类的实例时，给类原型对象新增一个say方法。这个say只存一份，存在公共的位置，然后每一个实例就都可以调用同一个say了。

原型链

一个对象在调用方法或者访问属性的时沿着原型一层一层往上查找的链式结构。
实例对象身上有一个__proto__属性，这个属性是一个指针，指向构造函数的原型对象。

typeof和instanceof的区别以及他们各自的缺陷

js是一个弱类型的语言，所以一般想知道当前变量是哪一种类型必须判断类型，都知道判断类型的两种方式：typeof、 instanceof它们各有缺点：typeof适用于基础数据类型判断，引用类型判断都是object。 instanceof 判断一个实例是否属于某种类型，但严重存在原型继承，所以判断最好在两个对象之间
typeof在判断null、array、object以及函数实例（new + 函数）时，得到的都是object（其实这也是原型继承）。这使得在判断这些数据类型的时候，得不到真的数据类型。由此引出instanceof：instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。a instanceof b：判断a是否为b的实例，可以用于继承关系中
b是c的父对象，a是c的实例，a instanceof b 与 a instanceof c 结果均为true
总结：instanceof 只能处理两个对象是否属于的实例关系
不能判断是否由Object构造出来的对象，因为所有的对象都是被Object构造出来的，所以instanceof会一律判定为true。
解决原型链的问题
Array.isArray()针对数组的操作
Object.prototype.toString.call(’’) === ‘[object String]’

cookie,localStorage,sessionStorage的区别

（1）cookie是为了标示用户身份而存储在用户本地终端上的数据，一般是经过加密的
（2）cookie数据始终在同源的http请求中携带，会在浏览器和服务器之间来回传递
（3）localStorage和sessionStorage不会自动把数据发送给服务器，仅在本地保存
（4）存储大小：cookie存储数据大小不超过4K，localStorage和sessionStorage一般在5M左右
（5）有效期：localStorage存储持久数据，浏览器关闭后数据不会丢失；sessionStorage数据是当前浏览器窗口关闭后自动删除；cookie在设置的cookie过期时间之前一直有效，默认是会话级。

事件的event中的target和currentTarget的区别

target 表示触发事件的便签
currentTarget 表示绑定事件的当前标签

在开发的时候如何为标签自定义属性（参数），有没有用过dataset数据集

eg：

data-x就是dataset数据集，常常用来为标签定义自定义数据
在js中获取数据：选中标签（div）然后div.dataset.a获取”aaa”

http请求报文

1、分为三部分：
请求行
请求头：包含 cookies，token，content-type
请求体：包含：传输的数据
2、数据传输的三种格式：
1.json
2.urlencoded
3.form-data ：此格式的数据一般用来做文件上传
请求头中的content-type
url编码，jQuery的ajax请求默认是这种编码，form表单提交默认也是这种编码
form-data，常常用来上传文件
json，axios发起请求的时候传递的数据是json格式的
原生api中的fetch方法
请求行
请求头
请求体
cookie是不能跨域传递的，如何解决这个问题?
在发送请求的时候设置withCredentials可以实现ajax请求的跨域传递问题.此方法还需要在服务器端的请求头中做配置

前端如何实时的获取服务器的最新数据

(1) 轮询：写一个定时器，定时的向服务器发送ajax请求，获取最新的数据
(2) websocket 和服务器长链接，服务器有新的数据会主动推送给客户端

对象的相关操作

(1) Object.assign对象的浅拷贝
(2) Object.keys(obj)获取对象的所有的属性
(3) Object.value(obj)获取对象的所有属性值

原生js提供的获取url参数的方法

var u=new URLSearchParams(window.location.search)
u.get(“id”);
u.get(“a”);

ajax请求的过程

（1）创建XMLHttpRequest对象
（2）创建一个新的Http请求，并指定该Http请求的方法，URL及验证信息
（3）设置响应http请求状态变化的函数
（4）发送Http请求
（5）获取异步调用返回的数据
（6）使用JavaScript和DOM实现局部刷新

客户端和服务器端交互常用的方法

from表单提交
Ajax,异步的Javascript和xml
Websocket

跨域

域名、协议、端口号有一个不一样就是跨域。
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
借助了服务器端技术：比如代理服务器，web服务器配置代理
jsonp！两端代码都要改，牵涉内容太多，不划算！
解决跨域
cors，node代理，Nginx反向代理，JSONP，
websocket,window.postMessage,document.domain+Iframe,window.location.hash+Iframe,window.name+Iframe,修改浏览器安全配置（需谨慎）
你应该知道的10 种跨域解决方案（附终极方案）

开发的时候spa单页面应用程序，如何保证数据的安全性

使用https协议

常见的网络请求状态码有哪些

200 成功
300 重定向
400 客户端错误
500 服务器端错误

window.top.location.href和window.location.href的区别

Window.location.href，location.href 是本页面跳转
Parent.location.href是上一层页面跳转
Top.location.href是最外层的页面跳转
举例说明：
​ 如果A,B,C,D都是html，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写
​ “window.location.href”、“location.href”：D页面跳转
​ “parent.location.href”：C页面跳转
​ “top.location.href”：A页面跳转
如果D页面中有form的话,
​ : form提交后D页面跳转
​ : form提交后弹出新页面
​ : form提交后C页面跳转
​ : form提交后A页面跳转
如果访问的是iframe里面的页面，重新加载最外层的页面

数组排序

冒泡排序：遍历数组里面的元素，一次比较两个元素，如果它们的顺序错误，就把它们交换过来，直到没有需要交换的两个元素为止。它是一种稳定排序算法。

function bubbleSort(arr){
  for(var i=0;i<arr.length;i++){
  for(var j=0;j<arr.length;j++){
    if(arr[i]<arr[j]){
  var  temp=arr[j];
  arr[j]=arr[i];
  arr[i]=temp;
}
}
return arr;
}
var arr=[2,4,6,9,3];
Bu  bbleSort(arr);

jQuery插件定义方式和区别

(1)$.extend()相对简单，一般很少能够独立开发复杂插件，仅仅是在jQuery命名空间添加了一个静态方法而以。我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()），而不需要选中DOM元素($('#example').myfunction())。
(2) $.fn则是一般插件开发用到的方式，可以利用jQuery强大的选择器带来的便利，以及将插件更好地运用于所选择的元素身上，使用的插件也大多是通过此种方式开发。
(3) $.widget()是一种高级的开发模式，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等

Vue中v-if与v-show的区别

v-if:直接销毁和重建DOM达到让元素显示和隐藏的效果，是惰性的，如果初始条件为假，则什么也不做。
v-show:v-show指令是通过修改元素的display的css属性让其显示或隐藏，在任何条件下（首次条件是否为真）都被编译

v-if 和v-for不能同时使用解决方案

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

(1)template
<template v-for="(item,index) in list" :key="index" >
  <div v-if="item.isShow">{{item.title}}div>
template>
(2)计算属性（推荐使用）
<template>
  <div>
    <div v-for="(user,index) in activeUsers" :key="user.index"> 
    {{user.name}}
    div> 
 div>
template>
<script>
  export default{
  name:'A',
  data(){
   return{
     users:[{name:'aaa',isShow:true},
                {name:'bbb',isShow:false}]
   };
 },
computed:{   //通过计算属性过滤掉列表中不需要显示的项目
  activeUsers:function(){
     return this.users.filter(function(user){
        return user.isShow;     //返回isShow=true的项，添加到activeUsers数组
     })
   }
}
}
script>
在vue component中的methods域里定义一个方法，这个方法中会调用某一个ajax call，在ajax中的this会指向ajax本身，而不再是vue实例本身。

vue中的指令和用法

v-if :判断是否隐藏
v-for :数据循环
v-bind :绑定一个属性
.prop 作为一个DOM property绑定而不是作为attribute绑定。
v-model :实现双向绑定
v-show :根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果
v-text :更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
v-html : 更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
v-on 缩写 @
修饰符
.stop 调用event.stopPropagation()
.prevent 调用event.preventDefault()
.capture 添加事件侦听器时使用capture模式
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native 监听组件根元素的原生事件
.once 只触发一次回调
.left 只当点击鼠标左键时触发
.right 只当点击鼠标右键时触发
.middle 只当点击鼠标中键时触发
.passive 以{ passsive:true } 模式添加侦听器
v-slot 缩写 #
预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
参数：插槽名 (可选，默认值是 default)
限用于

组件 (对于一个单独的带 prop 的默认插槽)
用法：
提供具名插槽或需要接收 prop 的插槽。

vuex ；单向数据流

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我自己的理解：我觉得vuex是一个类似全局的数据和数据操作的管理，它提供的数据和数据操作在当前项目作用范围内，为组件所共享。因此我们也可以把它当做一个数据中转站，而不用担心带来数据存储的问题，因为当前任务一旦执行完成，目标数据传入接口，存在数据库中。页面一刷新，vuex中的数据内容就会回复初始的状态。

MVVM

MVVM是Model-View-ViewModel的缩写。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

MVVM和MVC的区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

vue的优点

低耦合：视图（view）可以独立于Model变化和修改，一个viewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

组件传参

a. 父组件向子组件传参，通过props属性实现
b. 子组件向父组件传，通过事件派发
c. 非相关组件之间传参，使用事件总线

路由

router-link :是用来生成a标签的组件，做页面跳转
router-view :是用来展示路由对应的内容的组件，所有的路由访问地址，访问时对应的内容都在组件范围内显示。

路由传参：params传参和query传参

区别：
（1）query传参，参数在url中可见，是标准的url传参形式。使用？分割参数和url地址
（2）params传参，参数在url默认是不可见的，除非设置了占位符。
（3）query传参刷新之后参数还在
（4）params传参除非设置了占位符，否则参数不能再刷新之后保存。

vuex你了解吗？使用过吗？哪种场景使用？

是什么：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
作用：实现跨组件数据共享，可以在项目中帮我们创建一颗全局状态树。所有的状态数据都存储在里面。
vuex的使用场景：构建一个中大型单页应用，要考虑如何更好地在组件外部管理状态的时候。
单向数据流：数据是单向流动的，view视图通过dispatch派发一个action(行为)，改变state(数据)，数据改变之后视图重新渲染。
vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的dataB、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用C、 如果一个状态只在一个组件内使用，是可以不用getters

如何让css只在当前组件中起作用

将当前组件的

的作用

主要用于保留组件状态或避免重新渲染，缓存不活动的组件实例。
在列表跳转详情页的时候，列表里的数据可以被缓存下来，从详情返回列表的时候就不需要重新加载数据了。

3个vue中常用的生命周期钩子函数

生命周期的作用：针对我们的项目需求，在我们控制整个Vue实例的过程中更容易形成好的操作逻辑。
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后，以下三个为常用。
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见mounted:el被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
activated: keep-alive组件激活时调用
路由拦截器
beforeEach,结合meta元属性实现路由地址的权限判断

$el

$el 获取当前组件的dom元素，将dom 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例
$refs 获取当前组件中设置了ref属性的标签
$root获取父组件的内容，如果没有父组件，显示自己的内容

Vue.nextTick( [callback, context] )：

Vue.nextTick( [callback, context] )：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
// 修改数据
vm.msg = ‘Hello’
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})

vue性能优化

源码优化：
(1)代码块优化：（css也可以通过less和sass的自定义css变量来减少重复代码。）
(2)for循环设置key值（高效渲染）
(3)vue路由设置成懒加载：当首屏渲染的时候，能够加快渲染速度。
(4)更加理解vue的生命周期：使用过后的全局变量在组件销毁后重新设置为null，避免造成内存泄漏。
(5)可以使用keep-alive：keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
打包优化：
（1）修改vue.config.js中的配置项
把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。
（2）使用CDN的方式外部加载一些资源
比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
（3）减少图片使用
因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。
（4）按需引用
使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。

vue自定义组件的使用

（1）首先在src目录下创建一个components目录,然后新建一个组件文件，结尾一定得有export default{}导出组件
（2）在需要用的组件页面中import导入
（3）注入到vue的子组件的components属性上面–components:{ }
（4）然后就可以在template视图中使用了

VNode是什么？虚拟DOM是什么？

Vue在页面上渲染的节点，及其子节点称为虚拟节点（Virtual Node）,简写为 VNode。虚拟DOM是由Vue组件树建立起来的整个VNode树的称呼。
模块化开发的理解：
虚拟dom不是真正的dom节点，它是一个js对象表述的dom结构，最终会通过渲染在页面中生成真的dom树，vue中的所有节点变化都是针对虚拟dom进行的，当节点改变之后，通过对比最终找到最优的dom更新方案，对页面进行重新渲染展示。虚拟dom可以针对不同的平台生成不同的显示标签，可以非常方便的实现跨平台的迁移。
模块化开发就是封装程序实现细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础是函数。

computed和watch的区别

computed能监听v-model的值，只要值发生变化 他就会重新去计算，并且必须要有返回值，用return来返回computed当你需要双向的时候，这时候就需要用到get和set了，get的作用是返回当前的值，set监视当前的属性值的变化，当值发生变化时，更新数据。
watch不仅能监听data里边的值，并且还能监听路由，watch的回调函数里边有2个参数，一个新的返回值newval和旧的返回值oldval
cumputed计算属性，一个属性受到多个属性影响的时候使用。比如购物车中的总价和全选。Watch监听，一个属性改变之后会影响到很多数据的变化。比如搜索框。

$ route和$router有什么区别

$route是VueRouter，它包含了很多路由跳转的方法，如:to,push,go,replace
$route是一个跳转的路由对象，包含了name,path,query,params等。
$ router是用来操作路由的，$ route是用来获取路由信息的。
$router是VueRouter的一个实例

vue-router的两种模式

hash模式，地址栏中有一个#,它是一个比较常见的一种历史记录形式，大部分浏览器都支持，而且不需要对web服务器做特殊的重定向配置。
history模式，使用了h5中的history接口，我们在使用的时候需要浏览器支持还需要再发布的时候对web服务器做特殊的重定向配置。

路由的懒加载

在引入组件的写法上做一些处理，设置component的时候通过箭头函数的形式进行设置，通过import方式直接引入组件进行使用
使用这种方式引入组件之后，组件在项目打包的时候会被生成单独的文件。

实现路由嵌套

children实现嵌套，我们需要在展示子路由内容的组件中添加一个节点router-view