js面试题(2019最新)

Js面试题

1. 数据类型有哪些，那些事基本数据类型，哪些是引用数据类型，如何判断？

Js数据类型共8种:

   1.Number类型

2.String类型

    3.Boolean类型

4.Undefined类型

5.Null类型

6.Object类型

7.Symbol

8.Array类型

其中Object类型、Array类型是引用数据类型，Number类型、String类型、Boolean类型、Undefined类型、.Null类型、Symbo为基本数据类型

基本数据用：typeof()来判断

引用数据类型用： instanceof来判断

1. http协议，(请求头，请求体，响应体，状态码)   socket，的用途？

• http简介：

     1.HTTP协议，即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。

  2.HTTP协议作为TCP/IP模型中应用层的协议也不例外。HTTP协议通常承载于TCP协议之上，有时也承载于TLS或SSL协议层之上，这个时候，就成了我们常说的HTTPS。

3.HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

   4.HTTP默认的端口号为80，HTTPS的端口号为443。

    5.浏览网页是HTTP的主要应用，但是这并不代表HTTP就只能应用于网页的浏览。HTTP是一种协议，只要通信的双方都遵守这个协议，HTTP就能有用武之地。比如咱们常用的QQ，迅雷这些软件，都会使用HTTP协议(还包括其他的协议)。

二、http详解：

HTTP之请求消息Request 

由 请求行、请求头部、空行和请求数据四个部分组成。

第一部分：请求行，用来说明请求类型,要访问的资源以及所使用的HTTP版本.

第二部分：请求头部，紧接着请求行（即第一行）之后的部分，用来说明服务器要使用的附加信息

第三部分：空行，请求头部后面的空行是必须的

第四部分：请求数据也叫主体，可以添加任意的其他数据。

HTTP之响应消息Response

一般情况下，服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

第一部分：状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。

第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）

第二部分：消息报头，用来说明客户端要使用的一些附加信息

第二行和第三行和第四行为消息报头，
Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是ISO-8859-1

第三部分：空行，消息报头后面的空行是必须的

第四部分：响应正文，服务器返回给客户端的文本信息。

空行后面的html部分为响应正文。

HTTP请求方法  

HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

.HTTP之状态码     

状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求

  

详见网址：https://www.cnblogs.com/qdhxhz/p/8468913.html

 

• websocket的作用

通常情况下Socket 连接就是 TCP 连接，因此 Socket 连接一旦建立,通讯双方开始互发数据内容，直到双方断开连接。在实际应用中，由于网络节点过多，在传输过程中，会被节点断开连接，因此要通过轮询高速网络，该节点处于活跃状态。

 

很多情况下，都是需要服务器端向客户端主动推送数据，保持客户端与服务端的实时同步。

若双方是 Socket 连接，可以由服务器直接向客户端发送数据。

若双方是 HTTP 连接，则服务器需要等客户端发送请求后，才能将数据回传给客户端。

因此，客户端定时向服务器端发送请求，不仅可以保持在线，同时也询问服务器是否有新数据，如果有就将数据传给客户端。

 

总结：http与Socket 的区别：

http 为短连接：HTTP连接使用的是"请求-响应"方式，不仅在请求时建立连接，而且客户端向服务器端请求后，服务器才返回数据

Socket为长连接只要连接不断就能传输数据，不需要客户端自己在发送请求。服务器也可以自动向客户端发送数据。

 

 

 

1. 跨域，（什么是域，浏览器同源策略，为什么要跨域，如何跨域）？

  域名：简称域名、网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

网域名称系统（DNS，Domain Name System，有时也简称为域名）是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP地址数串。

浏览器同源策略：

    同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

所谓同源是指：域名、协议、端口相同。

同源策略又分为以下两种：

1.DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。

2.XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

为什么要跨域：由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容。而有的时候可能会有不同于域之间的页面也要能互相访问，这就涉及到了跨域了。

跨域：

1. 前端的方式: possMessage，window.name,document.domain,image.src(得不到数据返回)，jsonP(script.src后台不配合得不到数据返回)，style.href（得不到数据返回)
2. 纯后端方式: CORS，服务器代理

CORS 是w3c标准的方式，通过在web服务器端设置：响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据，ie8&9(XDomainRequest),10+,chrom4 ，firefox3.5,safair4，opera12支持这种方式。

3.前后端结合:JsonP

JSONP 跨域

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

优点

• 使用简便，没有兼容性问题，目前最流行的一种跨域方法。

缺点

• 只支持 GET 请求。
• 由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。
• 要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror 事件处理程序，但是存在兼容性问题。

  跨域最主要的的方法是JSONP和后台来设置

详见网址：https://www.cnblogs.com/laixiangran/p/9064769.html与https://www.cnblogs.com/wxtlinlin/p/6603505.html

 

1. 4.瀑布流布局实现原理

  瀑布流布局即等宽不等高的块有序排列，而且无空隙。

 实现原理如下：

1. 计算页面的宽度，计算出页面可放数据块的列数。
   2.将各个数据块的高度尺寸记入数组中
   3.用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。
   4.继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

5.当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。
6.滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

   详见网址：https://www.jianshu.com/p/db68070b2560

 

1. html5、css3的新特性。如何做兼容？

• HTML5新特性及兼容：

1. 新特性：

   增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

1.   绘画 canvas;
2.   本地离线存储 localStorage
3.   事件监听addEventListener

4)  用于媒介回放的 video和 audio 元素;

5)  语意化更好的内容元素，比如article、footer、header、nav、section;

6)  表单控件，calendar、date、time、email、url、search;

7)  新的技术webworker(专用线程)

8)  websocketsocket通信

9)  Geolocation 地理定位

移除的元素

纯表现的元素：basefont，big，center，font,s，strike，tt，u；

 对可用性产生负面影响的元素：frame，frameset，noframes；

1. 兼容：

  当在页面中使用HTML5新标签时，可能会得到三种不同的结果：

 

1)结果1：新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在。

 

2)结果2：新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素。

 

3)结果3：新标签被识别为HTML5标签，然后用DOM节点对其进行替换。

 

 

 

 

1)方法1：实现标签被识别

 

通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。

要在css样式里加上这样一行代码：

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

让创建的标签都为块元素

2)方法2：JavaScript解决方案

 

a)使用html5shiv（推荐）：

 

详见网址：https://blog.csdn.net/zhouziyu2011/article/details/58588947

二、css3新特性

1.新特性：

1.CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。比如：

 

    2.Transition

Transition可以在当元素从一种样式变换为另一种样式时为元素添加效果，而不用使用Flash动画或JavaScript。Transition有如下属性：·

1. transition-property: 规定应用过渡的CSS属性的名称。
2. transition-duration: 规定完成过渡效果需要多长时间。
3. transition-delay: 规定过渡效果何时开始，默认是0。
4. transition-timing-function: 规定过渡效果的时间曲线，默认是"ease"，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。
5. transition: 简写属性，用于在一个属性中设置四个过渡属性。

3.Transform

Transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等

 

3.Animation

Animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码

Animation属性及方法如下：

 

边框

CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。·

背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。·

background-clip

background-clip属性用于确定背景画区，有以下几种可能的属性：·

• background-clip: border-box; 背景从border开始显示
• background-clip: padding-box; 背景从padding开始显示
• background-clip: content-box; 背景显content区域开始显示
• background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin

background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。

• background-origin: border-box; 从border开始计算background-position
• background-origin: padding-box; 从padding开始计算background-position
• background-origin: content-box; 从content开始计算background-position

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

• background-size: contain; 缩小图片以适合元素（维持像素长宽比）
• background-size: cover; 扩展元素以填补元素（维持像素长宽比）
• background-size: 100px 100px; 缩小图片至指定的大小
• background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break

CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

• background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
• background-break: bounding-box; 把盒之间的距离计算在内；
• background-break: each-box; 为每个盒子单独重绘背景。

文字效果

word-wrap

CSS3中，word-wrap属性允许您允许文本强制文本进行换行，即这意味着会对单词进行拆分。所有主流浏览器都支持 word-wrap 属性。·

text-overflow

它与word-wrap是协同工作的，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow则设置或检索当当前行超过指定容器的边界时如何显示。对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。·

text-shadow

CSS3中，text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：·

1. text-fill-color: 设置文字内部填充颜色
2. text-stroke-color: 设置文字边界填充颜色
3. text-stroke-width: 设置文字边界宽度

渐变

CSS3新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变)。具体用法参考教程：CSS3 Gradient·

box-sizing

box-sizing属性可设置的值有content-box、border-box和inherit。·

1. content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding)，此属性表现为标准模式下的盒模型。
2. border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (Element width = width)，此属性表现为怪异模式下的盒模型。

outline-offset

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

详见网址：http://caibaojian.com/css3-properties.html

Css3兼容：

Opacity透明度

元素的透明度在IE中可以很方便的用滤镜来实现。

1 background-color:green;

2 opacity: .4;

3 filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

border-radius圆角/Box Shadow盒阴影/Text Shadow文字阴影

在IE中可以利用Vector Markup Language (VML)和javascript来实现这些效果，参见IE-CSS3，在引用了一个HTC文件后，在IE浏览器中就可以使用这三种CSS3属性了。

动画兼容 

火狐用-moz-、谷歌和safari用-webkit-，opera用-o-及-浏览器内核名-加动画名来兼容

详见网址：https://www.cnblogs.com/-5012/p/5634096.html

6.你对语意化标签的理解

 

1.通俗易懂

标签语义化就是给某块内容用上最恰当合适的标签

2.对搜索引擎友好

网页良好的结构和语义自然容易被搜索引擎捕捉

网页好比一栋房子，HTML为墙，标签为砖，CSS为装饰材料

7.typescript应用场景（angular.js）变量的声明，函数的声明，好处？

TypeScript 是微软2012年推出的一种编程语言，属于 JavaScript 的超集，可以编译为 JavaScript 执行。 它的最大特点就是支持强类型和 ES6 Class。

变量的声明let  isDone: boolean = false;变量名后加个冒号定义此变量的类型。

函数的声明：

function sum(x: number, y: number): number {

    return x + y;

}

 

function  函数名：加返回类型（）{}

优点：

TypeScript 增加了代码的可读性和可维护性

• 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
• 可以在编译阶段就发现大部分错误，这总比在运行时候出错好
• 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

TypeScript 非常包容

• TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可
• 即使不显式的定义类型，也能够自动做出类型推论
• 可以定义从简单到复杂的几乎一切类型
• 即使 TypeScript 编译报错，也可以生成 JavaScript 文件
• 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

TypeScript 的缺点

任何事物都是有两面性的，我认为 TypeScript 的弊端在于：

• 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念
• 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本
• 集成到构建流程需要一些工作量
• 可能和一些库结合的不是很完美

 

详见网址：https://ts.xcatliu.com/basics/type-of-function.html

8.两种盒模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型

把所有的网页元素都看成一个盒子，它具有： 
content，padding，border，margin 
四个属性，这就是盒子模型

盒子模型有两种形式：标准盒子模型，怪异盒子模型

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

1. Window.onload和DOMContentLoaded(jquery.ready())

 Window.onload是在dom文档树加载完和所有文件加载完执行的一个函数，document。Ready原生里没有这个方法

jquery.ready()文档树加载完之后执行的一个函数，他要比Window.onload先执行

Window.onload只能出来一次  

jquery.ready()可以出现多次

一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片，以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。

而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。

1. 闭包（什么是闭包，优点、缺点）

function a(){

    var n = 0;

    function inc() {

        n++;

        console.log(n);

    }

    inc();  

    inc(); }

a(); //控制台输出1，再输出2

有权访问另一个函数作用域内变量的函数都是闭包。

我们首先知道闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

好处

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

 

 

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

11.深拷贝、浅拷贝

1.浅拷贝就是只把内存地址赋给变量，造成复制对象和原对象指向同一个内存地址

2.深拷贝就是指对象的递归复制，包括对象中的对象。即开辟两个不同的地址，对应两个不同的值

 

深拷贝的两种方法：

1. 用jquery的extends方法，把对象合并到新的对象去，会返回一个新层次的副本
2. 使用JSON的序列化，var b=JSON.stringify(a)在反序列化JSON.parse(b)

12.事件模型（冒泡事件，和捕获时间的区别，如何控制），取消默认事件？

1、事件捕获

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

 

 

2、事件冒泡

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

Dom2级事件绑定(可以设置冒泡或捕获)

绑定事件 addEventListenner（事件类型，fn，布尔值（true：事件捕获，false：事件冒泡））

如何控制：我们可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener(“click”,doSomething2,true)

true=捕获

false=冒泡

1. 防止冒泡和捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

代码：

    var oEvent = ev || event;

   oEvent.cancelBubble = true;

    oEvent.stopPropagation();

2.取消默认事件

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;·

区别：事件冒泡是从内向外，事件捕获是外向内

13.this指向问题

 在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念：

1:全局变量默认挂载在window对象下

2:一般情况下this指向它的调用者

3:es6的箭头函数中，this指向创建者，并非调用者

4:通过call、apply、bind可以改改变this的指向

  

14.new 操作符做了什么

   1 创建一个空对象this  

2  把属性和方法添加到this上

3  返回this

 

15.继承

    // 对象b 继承 对象a ,  就在b的构造函数中 使用a构造函数.call（this）。来继承a对象里的属性。

// 让子对象构造函数的原型.方法名＝父对象构造函数的原型上的方法名。

Es6的继承

 

16、原型

在构造函数中添加方法，都添加到prototype上，这样

通过这个构造函数创建出来的对象，就共享原型上的方法。

 

 

17.原型链

假如 c继承b b继承a , 那么就说明 c构造函数的原型的值 和b构造函数的原型的值相等  b构造函数的原型的值 和a构造函数的原型的值相等 这样就形成了一条链，这个就是原型链。

18、冒泡排序

冒泡排序（Bubble Sort），是一种较简单的排序算法。

冒泡排序算法的原理如下：

相邻两元素之间两两比较，比较出大值进行赋值互换，再依次与相邻的元素比较，层层递进互换元素位置，相互赋值。

如果第一个比第二个大，那就从大到小排序；如果第二个比第一 个大，就按从小到大排序

19.如何实现浏览器标签页之间的通信？

1,Storage; 2 ,地址栏参数3.sessionStorage ，4.localStorage ,cookie

20、sessionStorage ，localStorage ,cookie的区别，和使用场景

区别：

1） cookie主要是记住密码，localStorage主要是存一些状态，比如登录状态。sessionStorage主要是，存一些临时状态，比如网页间传递参数。

2） cookie的存储大小受限制，一般不超过4k，而localStorage和sessionStorage的存储大小一般不超过5M，大大提高了存储的体积

使用场景：

 

1）localStorage可以用来统计页面访问次数。

2）sessionStorage可以用来统计当前页面元素的点击次数。

3）cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。

localStorage,sessionStorage,cookies都是客户端存储的解决方案

   sessionStorage生命周期为当前窗口或标签页面，它仅仅适用于浏览器会话的持续时间，换句话说当标签或者窗口关闭的时候，sessionStorage将会被删除。通过sessionStorage存储的数据也就被清空了。

 

 

localStorage生命周期为永久有效，除非自己清除了localStorage的内容，不然localStorage存储的信息将永久存在。

 cookie的主要内容包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命周期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命周期为浏览器会话期的cookie被称之会话cookie。

 会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式

共同点：

都是保存在浏览器端，并且是同源的（URL的协议、端口、主机名是相同的，只要有一个不同就属于不同源）

1. 网页（网站，项目）的性能优化（压缩静态文件，减少http请求）

1. 减少http请求
2. 减少DOM操作

1. 用框架
2. 事件委托
3. 在拼接的时候，只添加一次

1. 压缩静态文件

详见网址：https://blog.csdn.net/fredaouyang/article/details/70135970

22、列举一些常见的兼容问题。

 

详见网址：https://blog.csdn.net/wanmeiyinyue315/article/details/79654984

 

23、apply和call的区别

apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

 

 

call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。

 

 

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

百度网盘又doc文档更方便链接: https://pan.baidu.com/s/1pqyouu6mjypn2N5ISb5MQw 提取码: 8scs 复制这段内容后打开百度网盘手机App，操作更方便哦