前端面试题---长更

浏览器的重绘和重排如何实现

重绘：某些元素的外观被改变，例如：元素的填充颜色

重排：重新生成布局，重新排列元素。 juejin.cn/post/684490…

jQuary中的链式调用如何实现

每个jQuery节点在调用api后都会返回节点自身，并且在每一个原型方法的实现上都返回当前对象this，使当前对象一直处于原型链作用域的顶端，这样即可实现链式调用

实例化对象的时候，new关键字做的四件事

new会立即在内存中创建一个新的空对象 var obj= {}

new 会让this指向这个新的对象 Obj.call(obj)

对象的隐式原型指向的构造函数显示原型prototype obj._ proto_ = Obj.prototype

执行构造函数内的代码

new会返回这个新对象

遇到跨域的问题该如何解决，如果使用代理，有几种方式，还有为什么代理可以实现跨域

代理有九种方式： 我们常用的有jsonp，代理服务器

使用代理实际上是利用了服务器与服务器之间不受同源策略的限制，

同源策略：同源策略是浏览器端的一种安全规范，而同源策略规定，只有发送请求的那一边和接受请求的那一边处于同源的情况下，浏览器才会接受响应。必须拥有相同的协议，域名，端口，任意一个不相同即两个服务器不同源 为什么会有同源策略：同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。保护用户数据安全。

简述一下对于this关键字的理解

this是JS中的关键字， 它始终指向了一个对象 ，这个对象被称为当前对象，默认情况下是window

...this 12种指向问题

对于promise对象，你有什么看法或者你的理解是

意为：承诺 即承诺调用者过会返回数据给你

三个状态 初始状态，成功状态（resolve），失败状态（reject） , 两个方法 then catch，成功时调用then方法，失败调用catch方法

promise和异步函数有什么区别

异步编程的新方案，起初都是为了解决回调地狱的问题

promise 意为承诺，承诺调用者等会返还数据给你，返回的是promise对象，它有三种zhuan状态，初始状态和成功（resolve），失败状态（reject），当状态由初始状态切换为其他任意一种状态，状态一旦切换，便不得更改

async语法糖 意为等待 告诉调用者等待一段时间后返还数据，返回的相当于promise里面的then 它是用同步的方式执行异步代码

异步函数的返回值和普通返回值有所区别

• 普通函数主动返回什么就返回什么，不返回为undefined

• 异步函数的返回值特点

  • 明确有返回一个普通值，相当于Promise.resolve(返回值)
  • 返回一个thenable对象则由，then方法中的resolve,或者reject有关
  • 明确返回一个promise，则由这个promise决定

• 异步函数中可以使用await关键字，普通函数不行

• await特点

  • 通常await关键字后面都是跟一个Promise

    • 可以是普通值
    • 可以是thenable
    • 可以是Promise主动调用resolve或者reject

  • 这个promise状态变为fulfilled才会执行await后续的代码，所以await后面的代码，相当于包括在.then方法的回调中，如果状态变为rejected，你则需要在函数内部try catch，或者进行链式调用进行.catch操作

4.3 异步函数的异常处理

• 如果函数内部中途发生错误，可以通过try catch的方式捕获异常
• 如果函数内部中途发生错误，也可以通过函数的返回值.catch进行捕获

在webpack中如何设置代理

在devSever中设立proxy:代理端口号等等

深浅拷贝原理及实现--设计思路

• 设计思路：
  • 浅拷贝原理：遍历对象，然后把属性和属性值都放在一个新的对象
  • 深拷贝原理：我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数就好了

css中BFC机制

BFC 名为 "块级格式化上下文"。它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局 这里简单列举几个触发BFC使用的CSS属性

• overflow: hidden
• display: inline-block
• position: absolute
• position: fixed
• display: table-cell
• display: flex
• BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列 BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠 计算BFC的高度时，浮动元素也参与计算

数组方法哪些会影响原数组--哪些不影响原数组

• 会改变原数组的方法：

  • push 方法往数组里面添加元素，返回数组的长度。
  • unshift 方法会在数组的开头添加一个元素，它会返回数组新的长度。
  • pop() 方法从数组中删除最后一个元素，并返回该元素的值。
  • shift() 方法从数组中删除第一个元素，并返回该元素的值。
  • sort() 方法用原地算法对数组的元素进行排序，并返回数组
  • splice() 方法用于添加或删除数组中的元素，如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。
  • reverse() 方法用于颠倒数组中元素的顺序。

• 不会改变原数组的方法：

  • concat() 方法用于连接两个或多个数组
  • join() 方法用于把数组中的所有元素转换一个字符串，元素是通过指定的分隔符进行分隔的。
  • reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  • map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
  • forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
  • filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • slice() 方法可从已有的数组中返回选定的元素。
  • findIndex 接收一个测试函数，也可以叫做条件函数，最终返回满足该测试函数的元素的索引位置，如果没有找到符合条件的元素，则返回-1。

原型原型链

隐式原型(proto) ,显示原型（prototype）

原型链：对象查找属性时的链式查找机制

• 当你试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的隐式原型 __proto__（也就是它的构造函数的显式原型 prototype）中寻找，如果没有找到会由此继续向它的上上级目录查找一直找到最顶层 null，像这样的链式查找机制

如何实现断点续传？

上传大文件中断了怎么恢复?

答：大文件一般都是采用分片上传，将大文件转换成二进制文件流，利用文件流可以切割的属性，将整个文件切分成多个chunk,每个chunk都要有chunkIndex，chunkHash, 此外还要传chunkTotal,fileHash给服务器,以便服务端校验文件的正确性和完整性。以并行或串行的方式传输，服务器接收分片并存储，收到合并请求后使用流将切片合并成最终文件。 在分片上传的过程中，如果因为由于意外因素（如网络中断或系统崩溃等异常因素)导致上传中断，网络恢复后，为了避免重新开始从头上传, 需要在上传切片的时候记录上传的进度。再次上传时，可以继续从上次中断的地方进行继续上传。可以在客户端记录,服务端也可以提供已上传分片查询接口，让客户端查询已上传的分片数据，下一次从未上传的分片数据开始继续上传。

JavaScript 中的假值有

false、null、0、""、undefined和 NaN。

v-bind 和 v-on 的批量操作

v-if和v-show的区别--初始化渲染开销和切换开销

• 用法上：v-show不支持在template标签上使用；v-show不可以和v-else一起使用。v-show 是通过 display 来控制标签进行渲染的，但是 template 标签在 vue 解析后是不会显示在页面上的，是虚拟 Dom，所以无法使用 v-show。反之 v-if 是可以使用在 template 标签上，因为 v-if 是条件渲染，只要满足 v-if 后的条件就可以完成渲染。

• 本质上：v-show元素无论是否需要显示到浏览器上，它的DOM实际上都是有渲染的，只是通过CSS的display属性来进行切换；v-if当条件为false时，其对应的原生压根就不会被渲染到DOM中。

• 开发中如果原生需要在显示和隐藏之间频繁切换，就使用v-show；如果不会频繁发生切换，就使用v-if。

• 总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

为什么使用key?

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

vue常用的修饰符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。

浏览器的存储

本地发起请求时cookie怎么携带数据

箭头函数和普通函数的区别

简述Es6

const var let 区别

怎么实现一个const

readyState 五种状态：

• 请求未初始化，还没有调用open()。

• 请求已经建立，但是还没有发送，还没有调用 send()。

• 请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

• 请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

• 响应已完成；您可以获取并使用服务器的响应了。

status 常见的几种状态

• 100——客户必须继续发出请求

• 101——客户要求服务器根据请求转换 HTTP 协议版本

• 200——成功

• 201——提示知道新文件的 URL

• 300——请求的资源可在多处得到

• 301——删除请求数据

• 302------缓存问题

• 404——没有发现文件、查询或 URl

• 500——服务器产生内部错误

JavaScript内置对象有以下几种。

• String对象：处理所有的字符串操作 

• Math对象：处理所有的数学运算 

• Date对象：处理日期和时间的存储、转化和表达 

• Array对象：提供一个数组的模型、存储大量有序的数据 

• Event对象：提供JavaScript事件的各种处理信息

Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

HTTP 协议的状态消息都有哪些?(如 200、302 对应的描述)国内外的 JS 牛人都知道哪些?

 

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从 Web 服务器传送到客户端的浏览器，

“100″ : Continue（继续） 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1 新）

“101″ : Switching Protocols（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备进行切换。（HTTP 1.1 新）

“200″ : OK（成功） 一切正常，对 GET 和 POST 请求的应答文档跟在后面。

“201″ : Created（已创建）服务器已经创建了文档，Location 头给出了它的 URL。

“202″ : Accepted（已接受）服务器已接受了请求，但尚未对其进行处理。

“203″ : Non-Authoritative Information（非授权信息） 文档已经正常地返回，但一些应答头可能不正确，可能来自另一来源 。（HTTP 1.1 新）。

“204″ : No Content（无内容）未返回任何内容，浏览器应该继续显示原来的文档。

“205″ : Reset Content（重置内容）没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1 新）。

“206″ : Partial Content（部分内容）服务器成功处理了部分 GET 请求。（HTTP 1.1 新）

“300″ : Multiple Choices（多种选择）客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在 Location 应答头指明。

“301″ : Moved Permanently（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应（作为对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

“302″ : Found（临时移动）类似于 301，但新的 URL 应该被视为临时性的替代，而不是永久性的。注意，在 HTTP1.0 中对应的状态信息是“Moved Temporatily”，出现该状态代码时，浏览器能够自动访问新的 URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和 301 替换使用。例如，如果浏览器错误地请求 http://host/~user（缺少了后面的斜杠），有的服务器返回 301，有的则返回 302。严格地说，我们只能假定只有当原来的请求是 GET 时浏览器才会自动重定向。请参见 307。

“303″ : See Other（查看其他位置）类似于 301/302，不同之处在于，如果原来的请求是 POST，Location 头指定的重定向目标文档应该通过 GET 提取（HTTP 1.1 新）。

“304″ : Not Modified（未修改）自从上次请求后，请求的网页未被修改过。原来缓冲的文档还可以继续使用，不会返回网页内容。

“305″ : Use Proxy（使用代理）只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。（HTTP 1.1 新）

“307″ : Temporary Redirect（临时重定向）和 302（Found）相同。许多浏览器会错误地响应 302 应答进行重定向，即使原来的请求是 POST，即使它实际上只能在 POST 请求的应答是 303 时才能重定向。由于这个原因，HTTP 1.1 新增了 307，以便更加清除地区分几个状态代码：当出现 303 应答时，浏览器可以跟随重定向的 GET 和 POST 请求；如果是 307 应答，则浏览器只能跟随对GET 请求的重定向。（HTTP 1.1 新）

“400″ : Bad Request（错误请求）请求出现语法错误。

“401″ : Unauthorized（未授权）客户试图未经授权访问受密码保护的页面。应答中会包含一个 WWW-Authenticate 头，浏览器据此显示用户名字/密码对话框，然后在填写合适的 Authorization 头后再次发出请求。

“403″ : Forbidden（已禁止） 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

“404″ : Not Found（未找到）无法找到指定位置的资源。

“405″ : Method Not Allowed（方法禁用）请求方法（GET、POST、HEAD、DELETE、PUT、TRACE 等）禁用。（HTTP 1.1 新）

“406″ : Not Acceptable（不接受）指定的资源已经找到，但它的 MIME类型和客户在 Accpet 头中所指定的不兼容（HTTP 1.1 新）。

“407″ : Proxy Authentication Required（需要代理授权）类似于 401，表示客户必须先经过代理服务器的授权。（HTTP 1.1 新）

“408″ : Request Time-out（请求超时）服务器等候请求时超时。（HTTP 1.1 新）

“409″ : Conflict（冲突）通常和 PUT 请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1 新）

“410″ : Gone（已删除）如果请求的资源已被永久删除，那么，服务器会返回此响应。该代码与 404（未找到）代码类似，但在资源以前有但现在已经不复存在的情况下，有时会替代 404 代码出现。如果资源已被永久删除，那么，您应当使用 301 代码指定该资源的新位置。（HTTP 1.1 新）

“411″ : Length Required（需要有效长度）不会接受包含无效内容长度标头字段的请求。（HTTP 1.1 新）

“412″ : Precondition Failed（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。（HTTP 1.1 新）

“413″ : Request Entity Too Large（请求实体过大）请求实体过大，已超出服务器的处理能力。如果服务器认为自己能够稍后再处理该请求，则应该提供一个 Retry-After 头。（HTTP 1.1 新）

“414″ : Request-URI Too Large（请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法进行处理。

“415″ : Unsupported Media Type（不支持的媒体类型）请求的格式不受请求页面的支持。

“416″ : Requested range not satisfiable（请求范围不符合要求）服务器不能满足客户在请求中指定的 Range 头。（HTTP 1.1 新）

“417″ : Expectation Failed（未满足期望值）服务器未满足”期望”请求标头字段的要求。

“500″ : Internal Server Error（服务器内部错误）服务器遇到错误，无法完成请求。

“501″ : Not Implemented（尚未实施） 服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。

“502″ : Bad Gateway（错误网关）服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。

“503″ : Service Unavailable（服务不可用）服务器由于维护或者负载过重未能应答。通常，这只是一种暂时的状态。

“504″ : Gateway Time-out（网关超时） 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1 新）

“505″ : HTTP Version not supported（HTTP 版本不受支持）不支持请求中所使用的 HTTP 协议版本。