前端面试题

1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?并说说你对浏览器内核的理解
IE:trident 内核
Firefox:gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

理解：浏览器内核主要包括以下三个技术分支：排版渲染引擎、JavaScript引擎以及其他。
排版渲染引擎：主要负责取得网页的内容（HTML、XML、图像等），整理信息，计算网页的显示方式最后输出至显示器
JavaScript引擎：用来渲染JavaScript，渲染速度越快动态网页展示越快。
2. Doctype是什么？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档应该使用哪种HTML或者XHTML规范，告诉浏览器以何种方式来渲染页面（严格模式和混杂模式）（重点：告诉浏览器按照何种规范解析页面）
3、img 的 alt 与 title 有何异同？ strong 与 em 的异同？页面导入样式时，link和@import有什么区别
a、首先两者都用来提示文字。alt属性用来在图片加载失败时指定替换文字，替换文字的语言由lang属性指定，图片加载时提示；title属性为设置该属性的元素提供建议性的信息，鼠标放在图片上显示，是对图片的描述与进一步说明。alt是img必要的属性，title不是；对于网站seo优化来说：搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。
b、strong是粗体强调标签，表示内容的重要性；em是斜体强调标签，更强烈强调，表示内容的强调点。
c、

1. 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览时候），link引用的CSS会同时被加载。而@import引用CSS会等到页面全部被下载完再被加载，所以有时候浏览@import加载CSS的页面开始时会没有样式（就是闪烁）。
3. 兼容性差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，link都可以。
4. 使用dom控制样式时的差别。当使用JavaScript控制dom去改变样式的时候，只能使用link标签，@import不可以控制dom

4、渐进增强和优雅降级的区别？
渐进增强（progressive enhancement）针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级（graceful degradation）一开始就构建完整的功能，然后针对低版本浏览器进行兼容。
5、为什么利用多个域名来存储网站资源会更有效？
CDN 缓存更方便 突破浏览器并发限制；
节约 cookie 带宽；
节约主域名的连接数，优化页；
响应速度；
防止不必要的安全问题
6、 HTTP状态码
以2××开头的表示请求成功响应
以3××开头的表示需要进行附加操作完成请求
以4××开头的表示客户端发生了错误
以5××开头的表示服务器发生了错误

状态码	含义
200	OK 请求成功。一般用于GET与POST请求
201	Created 已创建。成功请求并创建了新的资源
202	Accepted 已接受。已经接受请求，但未处理完成
203	Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204	No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205	Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206	Partial Content 部分内容。服务器成功处理了部分GET请求
300	Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301	Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other 查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305	Use Proxy 使用代理。所请求的资源必须通过代理访问
306	Unused 已经被废弃的HTTP状态码
307	Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
400	Bad Request 客户端请求的语法错误，服务器无法理解
401	Unauthorized 请求要求用户的身份认证
402	Payment Required 保留，将来使用
403	Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
500	Internal Server Error 服务器内部错误，无法完成请求
501	Not Implemented 服务器不支持请求的功能，无法完成请求
502	Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503	Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

7.函数定义的三种方式

1. 自定义函数：

 function name(){}

2. 匿名函数：

var fn=function(){}

3. 构造函数：

var f=new function(){}

8.JS 常用的方法
pop() 方法用于删除并返回数组的最后一个元素。 join(separator) 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。 separator可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。 slice(start,end) 方法可从已有的数组中返回选定的元素。 start必需 end可选。 unshift(newelement1,newelement2,…,newelementX) 方法可向数组的开头添加一个或更多元素，并返回新的长度。第一个参数必须，其他可选
9.HTML5的Web存储对象有两个，分别是localStorage和sessionStorage
10.当HTML页面加载完毕时触发的事件是onLoad或者onload
11.CSS3中，能使用div的宽度变化有2秒的过渡效果的属性是transition
12.脚本script放在head和body的区别
script标签内未设置async时：
（1）script放在，会阻塞HTML代码的解析和渲染，而放在底部时，不会阻塞HTML代码的解析和渲染。
（2）script放在，将无法操作HTML元素，而放在底部时，可以操作HTML元素。
（3）script放在，无法通过脚本改变内联的CSS样式，而放在底部时，可以通过脚本改变内联的CSS样式
script标签内设置async时：
script放在和放在底部时没区别。
script标签设置defer时（仅对IE浏览器有用），script脚本会异步加载，在加载过程中不会阻塞HTML代码的解析和渲染，当script脚本加载完毕后，script脚本会立即执行，此时会阻塞HTML代码的解析和渲染。
13.ajax 的 readyState 有哪几个状态，含义分别是什么？
0（未初始化）还没有调用send（）方法
1（载入）已经调用send（）方法，正在发送请求
2（载入完成）send（）方法执行完成，已经接收到全部响应内容
3（交互）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用
parseInt(100,3) // (13^2)+(0*31)+(03^0) = 9
parseInt(15,3) // 会忽略比3大的数5，直接解析数字1，即（13^0） = 1
parseInt(6,3) // 忽略比3大的数字6，解析空字符串，即 NaN
parseInt(250,3) // 忽略比3大的数字5，且数字5后面的也会被忽略，23^0 = 2
14.一个页面从输入URL到页面加载显示完成的过程发生了什么？
1. 浏览器根据请求的URL交给DNS域名解析，找到IP地址；
2. 浏览器根据IP地址向服务器发起TCP连接与浏览器建立TCP三次握手（1、C向S发送一个建立连接的请求2、S收到请求同意发送连接的信号3、C接到同意的信号，再次发送确认信号后C和S的连接建立成功）；
3. 浏览器发送HTTP请求，浏览器根据URL内容生成HTTP请求，包含请求文件的位置，方式等；
4. 服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成：状态码、响应报头和响应报文）；
5. 断开连接
15.TCP的三次握手以及四次分手
第一次客户端向服务端发送连接请求报文段，将SYN位置为1，Sequence Number为x，确认服务端能正确接受信息；第二次服务端收到客户端的SYN报文段，需要确认，设置Acknowledgment Number为x+1（Sequence Number+1），同时发送SYN请求信息将SYN位置为1，Sequence Number为y，服务器向客户端询问能否正确收到信息；第三次客户端收到SYN+ACK报文段，将Acknowledgment Number位置为y+1，向服务器发送ACK报文段，确认可以进行正常交流，C和S都进入ESTABLISHED状态，完成TCP三次握手

当客户端和服务器通过三次握手建立了TCP连接以后，断开TCP连接时进行了四次分手

• 主机1（可以是C或者S），设置Sequence Number和Acknowledgment Number，向主机2发送一个FIN报文段，进入FIN_WAIT_1状态表示1没有数据要发送给2了
• 2收到1发送的FIN报文段，向1回一个ACK报文段，Acknowledgment Number为Sequence Number+1，1进入FIN_WAIT_2状态，2告诉1同意关闭请求
• 2向1发送FIN报文段，请求关闭连接同时2进入LAST_ACK状态
• 1收到2发送的FIN报文段，向2发送ACK报文段，1进入TIME_WAIT状态，2收到1的ACK报文段后关闭连接；此时1等待2MSL后依然没有收到回复，则整明S端已经正常关闭，1就可以关闭连接了。

16、浏览器缓存
sessionStorage
优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：只能作为临时存储，不能持久化
localStorage
优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动删除
缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个对我们日常比较常见的JSON对象类型需要一些转换
cookie
优点：兼容性好，几乎所有的浏览器都支持
缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
userData
优点：出现的时间比sessionStorage要早
缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB
17、URL和URI的区别
URI是统一资源标识符，相当于一个人的身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个URI定位的
URI一般由三部分组成
a、访问资源的命名机制
b、存放资源的主机名
c、资源自身的名称，由路径表示，着重强调于资源
URL是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等
URL一般由三部分组成
ａ、协议（服务方式）
ｂ、存有该资源的主机IP地址（有时也包括端口号）
ｃ、主机资源的具体地址，如目录和文件名等
18、HTTP和HTTPS的区别

• HTTPS协议需要CA（Certificate　Authority证书颁发机构）颁发证书，免费的证书比较少，可能需要一定费用
• HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议
• HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，，前者是80，后者是443
• HTTP的连接很简单，是无状态的。HTTPS协议是由SSL+HTTP协议构建的，可进行的加密传输，身份认证的网络协议，比HTTP协议安全（无状态的意思是其数据包的发送、传输和接受都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息）

补充：TCP和UDP的区别

• TCP是一种面向连接，可靠，基于字节流。UDP不面向连接，不可靠，基于数据报。基于字节流就是对于读写没有相对应的次数。UDP基于数据报就是每对应一个发，就要对应一个收。TCP不是。对于UDP而言，不面向连接，不可靠，没有三次握手，发送数据之前，不需要对方的同意，只管把数据发送出去.TCP面向连接三次握手在客户端和服务端之间初始化好了序列号。只要满足TCP的四元组+序列号，那客户端和服务端之间发送的消息就有效，可以正常接收。
• TCP虽然可靠，但是有滑动窗口，拥塞避免，四个超时定时器，还有慢启动，快恢复，快重传,可靠性的实现也让TCP变的复杂，在网络的状况很差的时候，TCP的优势会变成缺点。对于可靠不可靠而言，没有绝对的说法，TCP可靠仅仅是在传输层实现了可靠，UDP要想可靠就要向上封装，在应用层实现可靠性。
• 不管用TCP或者UDP，应用要看需求，TCP更加注重的是可靠性而不是实时性，如果发送的数据很重要一点也不能出错，有延迟无所谓就用TCP。UDP更加注重是速度快，也就是实时性，对于可靠性要求不那么高，而且UDP支持多播，很符合直播网站.
• 一般实时性高的对可靠性要求不是很严的用UDP,TCP虽然可以设置实时的,但是维护这个链接对服务器压力大,一般直播都是一对多,也就是广播,使用UDP比较好.对于点对点的,TCP更好.UDP在广播的时候,只用给直接相连的路由器或者服务器发数据就行,而TCP是虚电路,相当于每个客户端都建立了虚电路链接
  19、HTML与XHTML有什么区别
• 语言基础不同

HTML	XHTML
HTML是基于标准通用标记语言（SGML）	XHTML是基于du可扩展标记语言（XML）

• 语法严格程度不同

HTML	XHTML
HTML语法要求不严格，对网页编写者来说比较方便	XHTML语法比较严格，存在DTD定义规则

• 可混合应用不同

HTML	XHTML
HTML不能混和其他XML应用	XHTML可以混合各种XML应用，比如MathML、SVG

• 大小写敏感程度不同

HTML	XHTML
HTML对大小写不敏感	XHTML对大小写敏感，标准的XHTML标签应该使用小写

• 公布时间不同

HTML	XHTML
HTML4.01是1999年W3C推荐标准	XHTML是2000年W3C公布发行的

20、HTML5的新特性
1、语义化标签
语义化标签使得页面的内容结构化，

标签	描述
<header></header>	定义文档的头部区域
<footer></footer>	定义文档的尾部区域
<nav></nav>	定义了文档的导航
<section></section>	定义了文档中的节（section、区段）
<article></article>	定义了页面独立的内容区域
<aside></aside>	定义页面的侧边栏内容
<detailes></detailes>	用于描述文档或文档某个部分的细节
<summary></summary>	标签包含details元素的标题
<dialog></dialog>	定义对话框，比如提示框

2、增强型表单
新增表单Input输入类型

输入类型	描述
color	选取颜色
date	选择日期从日期选择器中
datetime	选择一个日期（UTC时间）
datetime-local	选择一个日期和时间（无时区）
email	包含e-mail地址的输入域
month	选择月份
number	数值的输入域
range	一定范围内数字值的输入域
search	搜索域
tel	输入电话号码字段
time	选择时间
url	URL地址的输入域
week	选择周和年

新增表单元素

表单元素	描述
<datalist>	元素规定输入域的选项列表，使用元素的 list 属性与元素的 id 绑定
<keygen>	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
<output>	用于不同类型的输出

新增表单属性

表单属性	描述
placehoder	简短的提示在用户输入值前会显示在输入域上，在用户输入后消失
required	是一个boolean属性，要求填写的输入域不能为空
pattern	正则表达式用于验证元素的值
min和max	设置元素的最小值和最大值
step	为输入域规定合法的数字间隔
height和width	用于image类型的标签设置高度和宽度
autofocus	boolean属性，规定在页面加载时，域自动获得焦点
multiple	boolean属性，规定元素中可以选择多个值

新增视频、音频标签、Canvas绘图、SVG绘图、地理定位、拖放API、Web Worker、Web Storage、WebSocket。
21、CSS的行内元素有哪些？块级元素有哪些？CSS的盒模型是什么？
行内元素：a b br i span input select
块级元素：div p h1…h4 form ul
CSS盒模型：内容（center），border，margin，padding
比较具体
22、清除浮动有什么方式？

1. 额外标签法：谁清除浮动就给谁额外加一个空白标签<div class="a"></div>
2. 父级添加 overflow属性：父元素添加overflow:hidden
3. 使用 after伪元素清除浮动：after{ content: ""; display: block; height: 0; clear:both; visibility: hidden; }
4. 使用 before和after 双伪元素清除浮动。

23、CSS的选择符？哪些可以继承？优先级算法如何计算？
类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）
CLASS属性，伪类A标签，列表ul、li、dl、dd、dt可以继承
优先级就近原则
24、CSS3新增伪类？
p:first-of-type 选择属于其父元素的首个< p>元素的每个< p>元素。
p:last-of-type 选择属于其父元素的最后< p>元素的每个< p>元素。
p:only-of-type 选择属于其父元素唯一的< p>元素的每个< p>元素。
p:only-child 选择属于其父元素唯一的子元素的每个< p>元素。
p:nth-child(n) 选择属于其父元素的第n个子元素的每个< p>元素。
p:nth-last-child(n) 选择属于其父元素的倒数第n个子元素的每个< p>元素。
p:nth-of-type(n) 选择属于其父元素第n个< p>元素的每个< p>元素。
p:nth-last-of-type(n) 选择属于其父元素倒数第n个< p>元素的每个< p>元素。
p:last-child 选择属于其父元素最后一个子元素的每个< p>元素。
p:empty 选择没有子元素的每个< p>元素（包括文本节点）。
p:target 选择当前活动的< p>元素。
:not( p) 选择非< p>元素的每个元素。
:enabled 控制表单控件的可用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
25、怎么样居中一个div？
1、div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。
2、仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，
3、对于水平居中，可以使用最简单的<center>，正规一点的就是text-align:center;
26、为什么要初始化CSS？
浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异
27、BFC规范的理解
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
使用BFC后
1、内部浮动元素不会乱跑
2、和浮动元素产生边界
3、margin叠加问题：外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠。
28、什么是闭包？特性是什么？
闭包的本质就是在一个函数内部创建另一个函数，闭包有三个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
闭包的优点：
①保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存，但是实用多了会消耗内存
③匿名自执行函数（没有方法名的函数）可以减少内存消耗
闭包的缺点：
①滥用闭包会造成内存泄漏，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放，所以我们应该在必要的时候及时的释放闭包函数。解决方法是在使用之后手动为它赋值为null
②闭包会跨域访问，导致性能损失，解决办法是把跨域作用域变量存储在局部变量中，然后直接访问局部变量减轻对执行速度的影响
29、继承

• 原型链继承：将构造函数的原型设置为另一个构造函数的实例对象，这样就可以继承另一个原型对象的所有属性和方法，可以继续往上，最终形成原型链。
• 借用构造函数继承：为解决原型中包含引用类型值的问题，也叫伪造对象或者经典继承。
• 组合继承：原型链+借用构造函数。使用原型链实现对原型属性和方法的继承，通过构造函数来实现对实例属性的继承。又称为伪经典继承
• 原型式继承：不自定义类型的情况下，临时创建一个构造函数，借助已经有的对象作为临时构造函数的原型，在此基础上实例化对象并返回
• 寄生式继承：其实就是在原型式继承得到对象的基础上，在内部再以某种方式来增强对象，然后返回。
• 寄生组合式继承组合继承是JS中最常用的继承模式，但其实它也有不足，组合继承无论什么情况下都会调用两次超类型的构造函数，并且创建的每个实例中都要屏蔽超类型对象的所有实例属性。寄生组合式继承就解决了上述问题，被认为是最理想的继承范式。

30、 DOM操作（添加、移除、移动、复制、创建和查找节点）

document.createElement('元素名');
parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点
element.setAttributeNode( attributeName );给元素增加属性节点
element.removeAttribute('属性名');
document.getElementById('id属性值');

31、介绍一下new 操作符。New操作符具体干了什么？
1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。

32、HTML5离线存储
在页面头部加一个manifest属性<html manifest = "cache.manifest">
离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
33、 JS的数据类型
基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），
引用数据类型：Object(在JS中除了基本数据类型以外都是对象)
详细请查看：typeof操作符检测变量的数据类型

34、 null和undefined的区别
null表示没有对象，即该处不应该有值，典型的用法有
1：作为函数的参数，表示该函数的参数不是对象
2：作为对象原型链的终点
undefined表示缺少值，意思是这个值还没有被定义，典型的用法有
1：变量被声明了但是没有被赋值
2：调用函数时没有提供该提供的参数
3：对象没有赋值的属性，该属性的值就是undefined
4：函数没有返回值时，默认返回undefined
35、call()和apply()的区别
每个函数都有这两个方法，但是并不是由函数继承而来的。都属于function.prototype的一个方法，所以每个function实例都有call、apply属性。两者的作用相同都是改变this指向。
区别在于call（）的第一个参数值是this值没有变化，变化的是其余参数，参数直接传递给函数
apply（）传递给函数的是参数数组
传参方式不同

fun.call(thisArg,arg1,arg2,arg3,...);
fun.apply(thisArg,[arg1,arg2,arg3,...])

ECMAScript还定义了一个叫
bind()的方法。这个方法会创建一个函数的实例，其this值会被绑定给传入
bind()函数的值。
36、 深拷贝和浅拷贝
深浅拷贝
对一个对象所有的层次递归的拷贝,深拷贝可以通过copy.deepcopy()来实现。深拷贝将会给b数组创造独立的内存，并且将a数组的内容一一拷贝进来，两者互不影响。
只对一个对象的顶层进行了拷贝,浅拷贝可以通过copy.copy()来实现.对于浅拷贝来说，比如一个数组（数组是一种对象），只要我们修改了一个拷贝数组，那么原数组也会改变。因为他们引用的是同一个地址的数据！拷贝的时候并没有给b数组创造独立的内存，只是把a数组指向数据的 指针 拷贝给了b。
浅拷贝和深拷贝一般是对于引用类型值（如对象）来讲的，而基本类型值（如undefined、null、number、string、boolean以及es6新增的Symbol），只要是复制，就一定是另开辟以存储空间。
①基本数据类型存储：名值都存在栈内存中
②引用数据类型：名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值
37、 this对象
this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：this.alert()=window.alert()=alert();详细解释
38、 eval()
1.eval的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval，不安全，而且非常消耗性能（2次，一次是解析成js语句，一次是执行）
3.由JSON字符串转换为JSON对象的时候可以用eval()

let obj = eval('(' + str + ')');

39、什么是UA?
OPC UA（Unified Architecture，统一架构）是下一代的OPC 标准，通过提供一个完整的，安全和可靠的跨平台的架构，以获取实时和历史数据和时间。
40、什么是事件委托？
事件就是onclick，onmouseover，onmouseout等，委托就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件
原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。
阻止冒泡事件：stopPropagation（）//Firefox/Chrome/Opera/Safri
cancelBubble=true//ie
阻止浏览器默认行为：preventDefault（）//Firefox/Chrome/Opera/Safari
returnValue=false//ie
41、 promise
Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息
目的： （1）、避免回调地狱的问题（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易
Promise有三种状态：pendding //正在请求，rejected //失败，resolved //成功
基础用法：new Promise(function(resolve,reject){ })
resolved,rejected函数：在异步事件状态pendding->resolved回调成功时，通过调用resolved函数返回结果；当异步操作失败时，回调用rejected函数显示错误信息
then的用法：then中传了两个参数，第一个对应resolve的回调，第二个对应reject的回调

42、 window.onload和document.ready的区别？哪一个先执行？
一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数，也就是在页面响应加载的顺序中的“加载图片等其他信息”之后，可以操作DOM。只能执行一次，如果有多个，那么第一次的执行会被覆盖
document.ready是在DOM加载完成后就可以可以对DOM进行操作，也就是在在“加载js和css”和“加载图片等其他信息”之间，就可以操作DOM了。可以执行多次
所以，document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快

43、var、let和const有什么区别
1.var定义的变量可以跨块作用域访问，不可以跨函数作用域访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；不允许在相同作用域内，重复声明同一个变量。
3.const定义的常量，初始化时必须赋值，只能在块作用域里使用，不能修改。
详细请查看：var、let、const三者的区别

44、 JavaScript 启动后，内存中有多少个对象？如何用代码来获得这些信息？
45、 XSS
跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
常用的XSS攻击手段和目的有：
1、盗用cookie，获取敏感信息。
2、利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。
4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。

46、 CSRF
跨站请求伪造（CSRF）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。
防御CSRF攻击：
目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。
跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。
47、 什么是跨域？解决跨域的方法
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
解决办法：
1、JSONP：
使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。
2、代理：相当于绕过了浏览器端，自然就不存在跨域问题。
3、PHP端修改header（XHR2方式）
在php接口脚本中加入以下两句即可：
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方
使用Nginx代理来解决跨域问题
48、什么是同源策略？
所谓同源是指，域名，协议，端口相同。
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
49、 equals（）和= =的区别
= =是判断两个变量或实例是不是指向同一个内存空间，equals是判断两个变量或实例所指向的内存空间的值是不是相同
= =是指对内存地址进行比较 ， equals()是对字符串的内容进行比较
= =指引用是否相同， equals()指的是值是否相同
1）对于==，比较的是值是否相等
如果作用于基本数据类型的变量，则直接比较其存储的 “值”是否相等；
如果作用于引用类型的变量，则比较的是所指向的对象的地址
2）对于equals方法，注意：equals方法不能作用于基本数据类型的变量，equals继承Object类，比较的是是否是同一个对象
如果没有对equals方法进行重写，则比较的是引用类型的变量所指向的对象的地址；
诸如String、Date等类对equals方法进行了重写的话，比较的是所指向的对象的内容。
50、 你都用过那种性能优化的方法？
1.尽可能的减少http请求
使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器
2.避免在CSS中使用 Expression
Expression（css表达式)又称Dynamic properties(动态属性)
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数