整理一下js面试题
1、Javascript的typeof返回值的类型有哪些
答：number、string、boolean、object、function、undefined
其中Array、object、null的返回值类型为object
2、说出几种显示类型转换和隐式类型转换
答：显示类型转换：
number（将目标转换为数字，如果其中带有字母则转换为NaN；true转换为1，false转换为0；null转换为0；undefined转换为NaN）。
string（将任何目标转换为字符串，包括true、false、undefined、null等）
parseInt（将目标转换为整型，true、false、null、undefined全部转换为NaN；将正常的数字转换为整数，小数直接去掉。注：如果parseInt中含有两个参数，含义就是以第二个参数为基底，将第一个数字转换为十进制的数字）
boolean（将目标转换为true或false）
toString（将其转换为字符串类型）
parseFloat（转换为小时类型，将第一个小数点后面的第一个数字返回，其余截断）
3、split()和join()的区别
答：join（）的作用是将数组拼接为字符串，括号中可以填写需要的连接字符，默认的连接字符是“，”。（john.htlm）
split()的作用是将字符串分割，返回数组。
4、数组方法.pop()、.push()、.unshift()、.shift的作用
答：pop()是在尾部删除；push()是在尾部添加；
shift()是在头部删除；unshift()是在头部添加；
5、ajax请求时get和post方式的区别
答：get和post本质上就是TCP连接，并无差别。http请求最初设定了八种方法，这八种方法本质上没有区别，只是让请求更加语义化而已。但是由于http的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
1、发送机制不同
1）get请求时将参数跟在url后面进行传递，而post请求是将参数作为http消息的实体内容发送给web服务器。
2）get请求提交的数据限制是1024字节，这是由于特定浏览器和服务器的限制，如ie的url长度限制是2083字节，而火狐理论上没有长度显示。注意这个限制是url的整个长度的限制，而不只是参数的长度。post理论上没有长度限制。
3）get请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的流失记录中提取到这些数据，如账户名称和密码等等。所以get方式会带来严重的安全问题，而post可以避免这些问题。
2、服务端的区别
1）客户端使用get请求时，服务端使用Request.QueryString来获取，而客户端使用post请求时，服务端使用Request.Form来获取。
2）post用于创建资源，资源的内容会被编入http请示的内容中，例如，处理订货表单等等。
3）当请求无副作用时（如进行搜索），使用get方法，当请求有副作用时（如添加数据），则使用post方法。
6、call和apply的作用是什么，有什么区别
答：call和apply的作用是改变this指向，区别是传参列表不同。
7、什么是闭包，闭包的作用是什么，使用闭包的注意点
1、什么是闭包：
JS的变量分为局部变量和全局变量，函数内部可以读取全局变量，但是函数外部不能读取局部变量。任何未声明而直接赋值的变量都会变为全局变量。因此在正常情况下函数外部不能获得函数内部的局部变量，为了获得这个局部变量，可以在函数内部再定义一个函数，将此函数作为返回值，这样在函数外部就能得到这个局部变量了。因此阿可以理解为闭包是将函数内部和函数外部连接起来的桥梁。
如果一个函数用到了它作用域外面的变量，那么这个变量和这个函数之间的环境就叫闭包。
2、闭包的作用:
1）模仿块级作用域
所谓块级作用域就是指在循环中定义的变量，一旦循环结束，变量也随之销毁，它的作用范围只在这一小块。而在JavaScript中没有这样的块级作用域，由于JavaScript不会告诉你变量是否已经被声明，所以容易造成命名冲突，如果在全局环境定义的变量，就会污染全局环境，因此可以利用闭包的特性来模仿块级作用域。
2）储存变量
闭包的另一个特点是可以保存外部函数的变量，内部函数保留了对外部函数的活动变量的引用，所以变量不会被释放。这种写法可以用在把一些不经常变动计算起来又比较复杂的值保存起来，节省每次的访问时间。
3）封装私有变量
我们可以把函数当做一个范围，函数内部的变量就是私有变量，在外部无法引用，但是我们可以通过闭包的特点访问私有变量。
3、使用闭包的注意点
1）由于闭包会使得函数的变量保存在内存中，内存的消耗很大，所以不能滥用闭包，可能会导致内存泄漏。解决方法是在函数退出之前，将不适用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
8.事件委托是什么，为什么要使用事件委托
答：
1）事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。因此如果我们给最外面的div加点击事件，同时点击div内的ul或li或a标签，都会触发父级div上的点击事件，这就是事件委托，委托它们父级代为执行事件。
2）js中性能优化的主要思想就是减少js直接操作dom的次数，这也就是为什么vue等框架使用虚拟dom的原因，因为每一次直接操作dom节点都会导致浏览器的重拍与重绘，严重影响了浏览器的交互时间。每一个函数就是一个对象，是对象就会占用内存，对象越多占用内存越大，100个li就会占用100个内存空间。如果使用事件委托，就只对它的父级进行操作，与dom的交互就只有一次，大大减少dom的操作次数，显著提高系统性能。
9、简述一下浏览器处理dom事件的过程，如何阻止事件冒泡
答：
dom2.0模型简时间处理流程分为三个阶段
一、事件捕获阶段：当某个元素触发某个事件（如：onlick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到达到真正发生的目标元素。在这个过程中，事件相应的监听函数是不会触发的。
二、事件目标阶段：到达目标元素之后，执行目标元素该事件的相应处理函数。如果没有绑定监听函数，那就不执行。
三、事件起泡阶段：从目标元素开始，往顶层传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被依次触发。
阻止事件冒泡
ie：e.cancelBubble = true
非ie：e.stopPropagation()
10、如何取消默认事件
答：
W3Cde方法是：e.preventDefault();
IE的方法是：e.returnValue = false;
默认事件：如a标签，具有点击跳转功能，button按钮的默认提交功能等。
11、添加节点、删除节点、替换节点、插入节点的方法
1）创建新节点：
createElement()//创建一个具体的元素节点
createTextNode()//创建一个指定文本的节点
2）操作节点
添加：appendChild()
移除：removeChild（）
替换：replaceChild()
插入：insertBefore()
3)查找节点
通过标签名称：getElementByTagName()
通过name属性：getElementByName()
通过元素id（具有唯一性）：getElementById()
12、简述一下什么是ajax，如何发送一个ajax请求
答：
1）AJAX = Asynchronous JavaScript and XML，这不是新的编程语言，而是一种使用现有标准的新方法，它最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX不需要任何的浏览器插件，但需要用户允许JavaScript在浏览器上执行。
2）发送ajax请求的步骤
1创建一个对象XMLHttpRequest
var xhr = new XMLHttpRequest();为了支持ie6以及更早的版本，要 var xhr=new ActiveXObject()
2监听请求成功后的状态变化
3设置请求参数
4发起请求
5操作dom，实现动态局部刷新
13、一个完整的http请求的步骤是什么
1、建立tcp连接
2、web浏览器向web服务器发送请求命令
3、web浏览器发送请求头信息
4、web服务器应答
5、web服务器向浏览器发送应答头信息
6、web服务器向浏览器发送数据
7、web服务器关闭tcp连接
14、解释一下什么是jsonp，为什么不是真正的ajax
jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本。该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术。
ajax的核心是：通过XmlHttpRequest获取非本页的内容
jsonp的核心是：通过动态添加<script>标签来调用服务器提供的js脚本。
jsonp只支持get请求，ajax支持get和post请求。
15、document load和document ready的区别
答：load是当页面所有资源全部加载完成之后（包括dom文档树、css文件、js文件和图片资源等），执行一个函数。load方法就是onload事件，如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待教程时间，一些效果可能受到影响。
ready是当dom文档树加载完成之后执行一个函数（不包含图片和css等），所以会比load快。在原生js中没有load方法，jquery中有$().ready(function)
16、JS中"="=="和"==="有什么区别
答：
"="是赋值运算符，赋值顺序是从右向左。
"=="判断值是否相等，如果两者类型不一样就进行隐式转换；"==="不会进行隐式转换，不但判断值是否相等，还要判断类型是否完全相等。具体如下。
1)"=="进行判断时方法如下：
如果两个值类型相等，数值相等，那么两者相等。
如果两个值类型不一样，就要进行如下转换
1.1如果一个值是null，另一个值是undefined，两者相等。
1.2如果一个值是数字，另一个值是字符串，就将字符串转换为数字，再将二者比较。
1.3如果一个值是true，将其转换为1，进行比较；如果一个值是false，将其转换为0，进行比较。
1.4如果一个值是对象，另一个值是数字或者字符串，将对象转换为原始类型再进行比较。
2）"==="具体的判断方法如下：
2.1首先如果两个值类型不同，他们就不相等，就不用往下看了。
2.2如果两个值都是number类型，而且值相同（NaN除外，NaN不等于任何值，NaN不等于NaN），那么两者相等。
2.3如果两个值都是string，两个值在相同位置上的字符必须一致，否则不相等。
2.4如果两个值都是boolean类型，必须同为true或false，否则不相等。
2.5如果两个值引用的是同一个对象、数组或函数，那么它们完全相同。如果引用的是不同的对象、数组或函数，两者不相等。
2.6如果两个值同为null或undefined，两个相等；unll不等于undefined。
17、函数声明和函数表达式的区别
定义函数主要有三种方法：
1、函数声明（Function Declaration）;
function functionName(arg1, arg2, ...){
<!-- function body -->}
2、函数表达式（Function Expression）
var variable=function(arg1, arg2, ...){
<!-- function body -->}
3、new Function构造函数
讲函数声明和函数表达式之前先说一个类似的。小伙伴们应该都知道"变量声明提升"：主要就是三个要点：1变量声明会提前到函数的顶部；2只有声明被提前，初始化不提前（也就是赋值不提前），初始化还在原来的位置；3在初始化之前变量的值是undefined。
与"变量声明提升"相类似，函数的声明也会进行提升。在js中，函数声明和函数表达式的解析顺序并不一样。由于在预编译时函数声明会进行提升（函数声明和函数体都要进行提升），所以函数声明会在其他代码执行之前执行，当程执行到函数声明的时候直接跳过（因为预编译的时候已经执行过了）。而函数表达式并不会进行提升，只有当程序执行到这里时才会初始化上下文,因此如果在函数表达式之前让这个函数执行，会导致浏览器报错。
考点：程序中有同名函数时，由于预编译导致后面的函数覆盖前面的函数，导致程序执行结果不同，分析时一定要注意；函数体内部的变量与函数体外部的变量同名时会产生冲突，此时会输入内部变量，外部变量被屏蔽。由于函数提升定问题，导致打印undefined等，这是经常考察的小知识点。
原文地址：https://www.cnblogs.com/chaoyuehedy/p/9110063.html
18、JavaScript的事件流模型都有什么
答：
1）捕获流：捕获流最早由网景公司开发的浏览器使用，当时间发生时，该事件由高层次向低层次传递。
2）冒泡流：冒泡流最早由微软公司使用，它是一种与上述捕获流截然相反的机制。当事件发生时，该事件由低层次向高层次传播。
3）dom中的事件流：
dom2级综合了上述两个过程，将事件流分为三个过程：捕获阶段 -->处于目标对象阶段-->冒泡阶段。注意，处于目标对象阶段和冒泡阶段同属于冒泡过程。
19、JavaScript的变量范围有什么不同
全局变量：当前页面有效
局部变量：函数体内有效（函数体内部没有声明而直接赋值的变量默认作为全局变量）
20、一下程序执行的结果是什么？
21、null和undefined的区别是什么
答：
Null类型中只有一个值就是null。unll表示没有对象，即此处不应该有值。例如：
1）作为函数的参数，表示该函数的参数不是对象。
2）作为对象原型链的终点。
而Undefined类型中只有一个值就是undefined。undefined表示缺少值，即此处应有一个值，但是还没有定义。例如：
1）变量被声明但还没有赋值，就是undefined。
2）调用函数时，应该提供的参数没有提供，该参数就等于undefined。
3）对象没有复制的属性，该属性的值就为undefined。
4）函数没有返回值时，默认返回值为undefined。
小知识点：
typeof(null) //返回值为object；
typeof(undefined) //返回值为undefined;
console.log(null == undefined) //结果为true；
console.log(null== undefined) //结果为false；
因此null和undefined两者相等，但不完全相等。
22、new操作符具体做了什么呢
1、创建一个空对象，var obj = new Object();
2、让空对象的原型属性指向原型链obj.__proto__ = Func.prototype;
3、让Func中的this指向obj，并执行Func的函数体。var result = Func.call(obj);
4、判断Func的返回值类型：
如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。
if(typeof(result) == "object") {
func = result;
}else{
func = obj;
}
23、JavaScript延迟加载的方式有哪些
在<script>标签中的代码，不论是嵌入代码还是引用文件，只要不包含defer和async属性，浏览器就会按照<scripe>标签出现的顺序对他们依次进行解析。也就是说执行到这里的时候，页面的处理会暂时停止，一直等待该标签下载和解析完毕之后才会进行后续的工作。这样的用户体验很不好，因此才会有异步加载js的需求。
1、defer属性
html为<script>标签定义了defer属性，表明脚本在执行时不会影响页面构造。相当于告诉浏览器可以立即下载，但是要延迟执行，也就是说脚本会延迟到整个页面都解析完之后再执行。有两个注意点，h5规范要求脚本按照他们出现的先后顺序执行。在现实中，延迟脚本并不一定按照顺序执行；defer属性只适用于外部脚本，嵌入的html脚本会忽略defer属性。
2、async属性
<script>标签同样定义了async属性，与defer属性相似都用于改变脚本的行为。运行到含有async属性的<script>标签时，会异步加载js文件，不会让页面等待脚本的下载和执行，但是在该脚本下载完成之后就会立即被执行。注意点与defer一样：只适用于外部脚本；不能控制加载的顺序。
defer与async的区别：（1）defer是将js文件下载完成之后等到页面完全处理完毕才执行；async是在js下载完毕之后立即执行，不管页面有没有处理完毕。（2）在执行顺序方面，由于defer属性会在文件加载完成之后执行，所以脚本会DOMContentLoaded事件之前执行。标记为async的脚本并不保证按照指定他们的先后顺序执行，但可能会在DOMContentLoad事件触发之前或之后执行。
3、动态创建DOM方式（Document Object Model 文档对象模型）
addEventListener()方法经常用语向指定元素添加时间句柄。
removeEventLIstener()方法来移除addEventListener()添加的时间句柄。
语法：element.addEventListener(event,function,useCapture)
其中event（必须）字符串，指定时间名称。注意不要用"on"作为前缀。例如使用"click"而不是使用"onclick".
function(必须)指定事件触发时执行的函数。时间对象会作为第一个参数传入函数。事件对象的类型取决于特定的函数。例如"click"事件属于MouseEcent（鼠标移动）事件。
4、使用jQuery的getScript()方法
5、使用setTimeout延迟方法
6、将js外部文件写到页面的最底部，使得js最后被引用，从而加快页面的加载速度。
提升页面性能优化
24、如何提高页面的加载速度
1）减少http请求
2）使用CDN
3）将脚本放在底部
4）避免css表达式
5）使用外部的JavaScript和css
6）减少DNS查询
7）避免重定向
原文网址：https://blog.csdn.net/wsymcxy/article/details/82377355
25、Flash和Ajax的优缺点是什么，如何取舍
Ajax对css、文本支持很好，支持搜索；多媒体。矢量图形、机器访问不足。
Flash适合处理多媒体、矢量图形、机器访问；多媒体、矢量图形、机器访问不足。
二者的共同点：
1）与服务器无刷新传递消息
2）可以检测用户离线和在线状态
3）操作DOM
26、Cookie在客户机上是如何存储的
1）cookie的概述
cookie是有http服务器设置的，保存在浏览器中；是客户端保存数据的一个小文件；是服务器发送给客户端的小量信息；以键值对的形式进行存储的。cookie存储的数据量是有限的，不同的浏览器有不同的大小，但是一般来说不会超过40kb。因此cookie只能存储一些小量数据。
2）cookie的作用：
①让浏览器存储指定的信息 ②与session配合使用，完成会话跟踪
原文网址：https://blog.csdn.net/Thor_Selen_Liu/article/details/81262023
27、如何获取JavaScript三个数中的最大值和最小值
答：
Math.max(a,b,c);//最大值
Math.min(a,b,c);//最小值
28、JavaScript是面向对象的，怎么体现JavaScript的继承关系
答：使用prototype原型来实现
29、from中的input可以设置为readonly和disabled，二者有什么区别
答：readonly和disabled都可以禁止用户更改表单的内容。比如都设置为true，form属性将不能被编辑。
二者的相同点如下：
都不能编辑和获取焦点。
不同点如下：
1)readonly只针对input(text/password)和textarea有效，而disabled对所有的表单元素都有效，包括select，radio，checkbox等。
2)表单在使用get或post方式提交时，设置为readonly的表单元素可以传值到后台；设置为disabled的表单元素不可以传值到后台。
3）所有控件都有disabled属性，但不一定拥有readonly属性。例如button按钮就没有readyonly属性，设置为readonly也没有作用，但是设置为disabled按钮就没办法使用了。
30、列举JavaScript的三种主要数据类型，2种复合类型和2种特殊数据类型。
主要数据类型：string，boolean，number
复合数据类型：function，object
特殊类型：undefined，null
31、程序中捕获异常的方法
答：在ES3之前，如果js代码在执行时出现了错误，整个js代码都会停止执行，这样的代码是非常不健壮的。在java或c语言中，都提供了异常处理机制，可以处理异常而不停止整个应用程序。因此在ES3之后js也提供了类似的异常处理机制，从而让代码变得更加健壮。即使在执行的过程中出现了异常，也让程序具有一部分的异常恢复的能力。
1、把有可能出现错误的代码放在try语句中，try语句理论上可以写任何代码。只要有一行代码出现问题，整个程序的执行流程就会跳到catch语句中执行。如果try中的语句不出现错误则catch中的语句不会执行。
2、一旦try中有一行代码发生异常，整个try语句中错误代码后面的代码就都不会执行了。比如上述代码中console.log(b)；，如果这行代码出错，则立即去执行catch中对的代码。所以console.log("我不会输出的，不要找了")这行代码不会再执行。
3、在执行catch中的代码之前，js引擎首先会根据错误类型自动创建一个错误，并通过catch后面的参数传递到catch中。不同的浏览器创建的error对象不一样，但是他们都包含一个message属性，值是这个错误的一些信息。
4、catch中的代码执行完毕之后，后继续执行后面的代码，程序不会停止下来。参考其他编程语言，也提供了一种finally语句。不管try中的语句有没有错误，最后都会执行finally中的语句。
具体的执行流程：如果try中的语句没有出现错误，就会在try语句之后执行finally语句；如果try中的语句出现错误，就跳转去执行catch语句，最后执行finally语句。
原文网址https://blog.csdn.net/u012468376/article/details/57411822
32、什么是单线程和多线程
javaScript语言的一大特点就是单线程，也就是说同一个时间只能做一件事。为什么JavaScript不能有多个线程呢？这样能提高相率啊。
JavaScript的单线程，与他的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户进行互动以及操作DOM。这决定了它只能单线程，否则会带来很多复杂的问题。假设JavaScript同时又两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器会以哪个线程为准呢？
所以为了避免复杂性，从诞生开始JavaScript就是单线程。这已经成为了这门语言的核心特征，将来也不会改变。为了利用多核cpu的计算能力，html5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程的控制，而且不能操作DOM。所以这个新标准并没有改变JavaScript单线程的本质。
33、什么是同步任务，什么是异步任务
js单线程意味着所有的任务都要排队，前一个任务结束才会执行后一个任务。如果前一个任务耗时很长，后一个任务就要一直等着。如果是因为计算量大，cpu忙不过来倒也算了，但很多时候cpu在闲着，是因为IO设备（输入输出设备）很慢，不得不等着结果出来再往下执行。
JavaScript语言的设计者意识到，这时主线程完全可以不管IOS设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头把挂起的任务继续执行下去。
于是所有的任务可以分为两种，一种是同步任务（synchronous）,另一种是异步任务（asynchronous）。同步任务是指，在主线程上排队执行的任务，只有前一个任务完成才能执行后一个任务；异步任务是指，不进入主程序、而进入”任务队列“的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
具体来说异步执行的机制如下：
上面代码执行的结果总是2，1，因为只有在执行第二行以后，系统才会执行“任务队列”中的回调函数。
原文网址http://www.ruanyifeng.com/blog/2014/10/event-loop.html
34、Ajax的原理
答：AJAX的全称是"Asynchronous JavaScript and XML"（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量的数据交换，可以使网页实现异步更新。也就是意味着可以再不重新加载整个网页的情况下，对网页的某部分进行更新。
优点：
1.最大的优点就是页面无需刷新，在页面内与服务器进行通信，非常好的用户体验。
2.使用异步的操作与服务器进行通信，不需要终端操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，最大限度的减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载小插件或者小程序。
缺点：
1.ajax干掉了Back和History功能，即对浏览器的机制的破坏。在动态更新页面的情况下，用户无法返回前一个状态，因为浏览器只能记住历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差距非常微妙，用户通常会希望单机后退按钮取消前一次操作，但是在ajax应用中，这将无法实现。
2.安全问题也为it企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通到。这使得开发者会在不经意间透露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上进行安全攻击。
3.对搜索引擎的支持比较弱。如果使用不当，ajax会增大网络数据的流量，从而降低整个系统的性能。
35、Ajax原理
36、解释一下什么是json
答：
1）json是一种轻量级的数据交换格式。
2）json独立于语言和平台，json解析器和json库支持许多不同的编程语言。
3）json的语法表示三种类型值 ：简单值（字符串、数值、布尔值、null），数组，对象
37、js中三种弹出式消息提醒（警告窗口、确认窗口、信息输入窗口）的命令是什么
答：alert、confirm、prompt
38、浏览器的滚动距离
答：可视区域距离页面顶部的距离
scrollTop = document.documentElement.scrollTop||document.body.scrollTop
39、节点类型有几种，分别是什么
答：一般来说，每个节点都拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个属性。nodeType属性返回节点类型的常数值。
一共有12中节点类型，但其中一部分已经弃用（2、4、5、6、12）。其中经常用到的：
1）元素节点：nodeType === 1；
2）文本节点：nodeType === 3；
3）属性节点：nodeType === 2；
40、innerHTML和outerHTML有什么区别
答：
innerHTML：元素内包含的内容
outerHTML：自己及元素内包含的内容
41、offsetWidth offsetHeight和clientWidth clientHeight的区别
答：
(1)offsetWidth （content宽度+padding宽度+border宽度）
(2)offsetHeight（content高度+padding高度+border高度）
(3)clientWidth（content宽度+padding宽度）
(4)clientHeight（content高度+padding高度）
42、冒泡排序算法
答：
43、真实DOM及其解析流程
答：浏览器渲染引擎工作流程都差不多，大致分为五步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting。
第一步，用HTML分析器分析html元素，构建一棵DOM树（标记化和树构建）。
第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。
第三步，将DOM树和样式表关联起来，构建一棵Render树（这一过程又被称为renderer）。每个dom节点都有attach方法，接收样式信息，返回一个render对象。这些render对象最终会被构建成一棵Render树。
第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把他们绘制出来。
44、为什么要使用虚拟DOM，它有什么好处
答： Web界面由DOM树（树的意思是数据结构）来构建，当其中一部分发生变化是，其实就是对应某个DOM节点发生了变化。
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。在以前，若一次造作中由十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的differ内容保存到本地的一个js对象中，最终将这个js对象一次性的attach到DOM树上，然后再进行后续操作，避免大量无谓的计算。
所以使用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在js对象（许你DOM）上，操作内存中js对象的速度显然更快，等更新完成后，再将最终的js对象映射成真是的DOM，交由浏览器去绘制。
45、jsji基础数据类型和引用类型是什么？这个前提下写一个getType，返回相应的类型。
答：
基本数据类型：Number、String、Boolean、Null、Undefined、symbol
引用数据类型：Object(Array、Date、Function)
46、DOM选择器的优先级别是什么，权重是多少
答：
1.行内样式 1000
2.id选择器 0100
3.类选择器、伪类选择器、属性选择器[type = 'text'] 0010
4.标签选择器、伪元素选择器（::first-line） 0001
5.通配符选择器（*）、子选择器、相邻选择器 0000
47、JavaScript的七种数据类型
答：
js在1997年标准化以后，定义了六种数据类型，包括五种原始值和一种引用值；ES6又新增了一种原始类型——symbol。
六种原始值：number、string、boolean、null、undefined、symbol
（symbol表示独一无二的值，symbol的最大用途是用来定义对象的唯一属性名。ES5的对象属性名都是字符串，容易造成属性名的冲突。如果使用了一个他人提供的对象，但又想为其添加新的方法，那么新方法的名字可能与已有的方法产生冲突。因此需要保证每个属性的名字都是独一无二的，以防止属性名的冲突。这就是ES6引入Symbol的原因。）
引用值：
Object：在js中，除了原始类型，其他的都是对象类型。原始类型和对象类型不一样，原始类型存储在栈中，对象类型是存储在堆中；原始值存储的是值，对象类型存储的是地址（指针）。
48、讲一下prototype是什么东西，原型链的理解，什么时候用到prototype
答：原型是function对象的一个属性，它定义了构造函数制造出对象的公共祖先。通过该构造函数构造出的对象，可以继承该原型的属性和方法。原型也是对象。
constructor属性：指向该函数的构造函数。
49、函数里面的this什么含义，什么情况下，怎么用
50、数组和对象有哪些原生方法，列举一下，分别是什么含义，比如连接两个数组用哪个方法，删除数组指定项和重新组装数组（操作数据的重点）
51、vue双向数据绑定的原理是什么
答： 首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新
52、JavaScript中的定时器有哪些，他们的区别及用法是什么
答：setTimeout 只执行一次
setInterval 会一直重复执行
53、请描述一下cookies、session Storage和local Storage的相同点和不同点
答：
相同点：都存储在客户端
不同点：
1）存储大小
cookies的数据大小不能超过4k
session Storage和local Storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2）有效时间
cookie在设置的过期时间之前一直有效，即使窗口或浏览器关闭。
session Storage数据在当前浏览器窗口关闭之后自动删除。
local Storage存储用旧数据，浏览器关闭后数据也不会丢失，除非主动删除数据。
3）数据与服务器之间的交互方式
cookie的数据会自动传递到服务器，服务器端也可以写cookie到客户端。
session Storage和local Storage不会自动把数据发送给服务器，只会在本地保存。
54、计算一个数组arr所有元素的和
答：
var arr = [1,2,3,4,5,6,7,8,9],
sum = 0,
len = arr.length;
for(i = 0; i < len; i++) {
if(typeof(arr[i]) == "number") {
sum += arr[i];
}
}
console.log(sum);
51、数组去重
var arr = [1,2,3,1,2,3];
Array.prototype.unique = function () {
//temp进行验证，arr存储数据
var temp = {};
arr = [];
len = this.length;
for(var i = 0; i < len; i++) {
if(!temp[this[i]]) {
temp[this[i]] = "abc";
arr.push(this[i]);
}
}
return arr;
}
alert(arr.unique());
55、document.write和innerHTML的区别
答：主要区别：document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
原文地址https://www.cnblogs.com/lyd447113735/p/8856982.html
56、简述一下跨域及其解决方式
57、什么是mvvm和mvc，两者有什么区别
答：MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。
58、px和rem的区别
答：
1.px是相对长度单位。像素px是相对于显示屏幕的分辨率而言的。
2.em是相对长度单位。相对于父级字体尺寸，会叠加（继承父级元素字体大小）。
3.rem是相对单位长度，但是相对于根元素字体尺寸。这是css3中新增的一个相对单位（root em 根em），与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的事HTML根元素。
59、解释一下JavaScript的同源策略
答：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）
简单来说就是：一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
具体解释：
（1）源包括三个部分：协议、域名、端口（http协议的默认端口是80）。如果有任何一个部分不同，则源不同，那就是跨域了。
（2）限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）
Cookie、LocalStorage和IndexDB无法获取。
无法获取和操作DOM。
不能发送Ajax请求。我们要注意，Ajax只适合同源的通信。
同源策略带来的麻烦：ajax在不同域名下的请求无法实现。
60、优雅降级和渐进增强
答：
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
61、怎样添加、移除、移动、复制、创建和查找节点
答：
1）创建新节点
createDocumentFragment()//创建一个dom片段
createElement()//创建一个元素节点
createTextNode()//创建一个文本节点
2）添加、移动、替换、输入
appendChild()//添加
removeChild()//移动
replaceChild()//替换
insertBefore()//插入
3）查找
getElementsByTagName()//通过标签名称
getElementsByName()//通过元素的name属性的值
getElementById()//通过元素id，唯一性
61、从输入url到显示页面都发生了什么
答：
1.浏览器的地址栏输入url并按下回车
2.浏览器查找当前url是否存在缓存，并比较缓存是否过期
3.DNS解析url对应的ip
4.根据ip建立tcp连接（三次握手）
5.HTTP发送请求
6.服务器处理请求，浏览器接收HTTP响应
7.渲染页面，构建DOM树
8.关闭TCP连接（四次握手）
