常用方法ms总结

typeof null 输出为object其实是一个底层的错误，但直到现阶段都无法被修复。
原因是，在 JavaScript 初始版本中，值以 32位存储。前 3位表示数据类型的标记，其余位则是值。
对于所有的对象，它的前 3位都以000 作为类型标记位。在 JavaScript 早期版本中，null被认为是一个特殊的值，用来对应 c中的空指针。 JavaScript 中没有中的指针，所以null意味着什么都没有或者 void 并以全0(32个) 表示
因此每当 JavaScript 读取 null 时，它前端的 3位将它视为对象类型，这也是为什么typeof null 返回object的原因

2、浏览器缓存的位置及区别

前端性能优化：浏览器的2种缓存方式，你了解吗？|服务器|应用程序|linux|expires_网易订阅前端性能优化：浏览器的2种缓存方式，你了解吗？,前端,浏览器,服务器,性能优化,应用程序,linux,expireshttps://www.163.com/dy/article/HUU08IK90511G03U.html 【一文就够】浏览器缓存机制详细知识点梳理_浏览器缓存过程_傲娇味的草莓的博客-优快云博客浏览器缓存机制详细知识点梳理在前端的性能优化中，浏览器缓存是很重要的一环。比如在页面前进或者后退，发现丝毫不卡顿很流畅，就是缓存机制的力量。一、什么是缓存浏览器缓存Brower Caching是浏览器对之前请求过的文件进行缓存，以便再次访问的时候提高页面展示的速度。比如当我们第一次访问优快云网站的时候，PC会把从网站上的图片和数据下载到电脑上。当再次访问优快云网站的时候，网站直接从PC加载，这就是缓存。二、为什么需要缓存？缓存有哪些优势？（1）浏览器缓存是将文件保存在客户端，减少重复请求浪费网https://blog.youkuaiyun.com/weixin_45709829/article/details/123752150

缓存优势

1.提高浏览器的响应速率；

2.减少服务器的访问压力；

3.减少对网络的压力。

缓存位置及区别

浏览器缓存的位置一般为四类：Server Worker、Memory Cache、Disk Cache、Push Cache

Server Worker(服务器工作进程)

Server Worker 是运行在浏览器的独立线程，一般用来缓存。Server Worker 涉及请求拦截，so传输协议是HTTPS来保障安全。

Server Worker 是“外建”的缓存机制，可以自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的，这是与其他内建缓存机制的区别。

Memory Cache(内存缓存)

内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等，占据该进程一定的内存资源，但是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

内存缓存特点：①读取速度快 ②时效性：页面关闭进程的内存清空释放

Disk Memory(磁盘缓存)

硬盘中的缓存。在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的，绝大部分的缓存都来自 Disk Cache。为什么呢？cuz根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。

硬盘缓存比内存缓存读取速度慢，读取需要对硬盘进行I/O操作，会导致重新解析缓存内容，造成读取路的复杂。

Memory Cache 和 Disk Cache的相同和不同比较

	Memory Cache	Disk Cache
相同点	只能存储一些派生类资源文件
不同点	退出Tag进程时数据会被清除	退出Tag进程时数据不会被清除
存储资源	一般脚本、图片、字体	一般非脚本css等

CSS文件加载一次就可以渲染，不会频繁的读取，存储在Disk Cache；js脚本可能会随时会被执行，存储在Memory Cache，若存储在硬盘中，会因为I/O开销大导致浏览器失去响应。

三级缓存原理

①先去内存查找，找到直接加载

②内存找不到，硬盘中找，找到直接加载

③硬盘找不到进行网络请求

④请求获取的资源缓存到硬盘和内存

prefetch cache 预取缓存

html代码的link标签带有prefetch，prefetch是预加载的一种方式，被标记为prefetch的资源会在浏览器空闲的时间加载

Push Cache(推送缓存)

推送缓存，是HTTP/2的内容，并没有严格执行HTTP头部的缓存指令。在Server Worker、Memory Cache、Disk Cache都没有命中的时候，它会被使用。在Session中存在，Session结束就会被释放，缓存时间短暂。

浏览器缓存过程

浏览器的缓存过程一般分为强缓存和协商缓存。

强缓存不需要向浏览器发送请求，直接从缓存中读取资源，协商缓存需要询问浏览器缓存是否过期以确定从哪里读取资源。

强缓存

强缓存通过设置http header来实现：Expires 和 Cache-Control。

Expires用来指定资源到期的具体时间，是服务器的具体时间点。该属性是HTTP/1中使用的属性，受限于本地时间，如果本地时间修改，可能会造成缓存失效。

Cache-Control也用来指定资源的到期时间，他的时间是一个时间范围。比如：Cache-Control：max-age=300，单位是秒，代表该资源的有效时间是5分钟。该属性是HTTP1.1中的属性，如果Expires和Cache-Control都设置，则Cache-Control的优先级高于Expires。

协商缓存

协商缓存是在强缓存失效之后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。协商缓存可以通过两种HTTP Header来实现：Last-Modified和ETag。

Last-Modified

浏览器第一次访问资源时，服务器会在response头中添加时间节点，这个事件点是服务器最后一次修改文件的时间点，浏览器第二次访问该资源时，检测到缓存文件中有last-Modified，就会在第二次请求头中添加if-Modified-Since，值为上次Last-Modified的值，服务器拿到该值后，会与该资源在服务器端的最后修改时间做对比，如果相同，则说明命中缓存，返回304，如果不相同，则会返回200，并返回新资源。

ETag

和Last-Modified相同，Last-Modified会返回最后修改的时间点，而Etag会返回一个新的token，第二次请求时，token会在If-None-Match中返回给服务器，服务器会比较token是否一致。

总结

浏览器缓存的强缓存和协商缓存如下图：

3、CSRF、XSS攻击及防御方法

XSS、CSRF攻击以及预防手段_xss和csrf如何防范_南栀~zmt的博客-优快云博客文章目录XSS反射型持久型DOM型XSS如何防御？CSRFXSSXSS全程Cross Site Scripting，名为跨站脚本攻击，是一种常见于 Web 应用中的计算机安全漏洞。恶意攻击者往 Web 页面里嵌入恶意的客户端脚本，当用户浏览此网页时，脚本就会在用户的浏览器上执行，进而达到攻击者的目的。比如获取用户的 Cookie、导航到恶意网站、携带木马等。攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它https://blog.youkuaiyun.com/qq_46658751/article/details/123441204

xss攻击

XSS全称Cross Site Scripting，名为跨站脚本攻击，是一种常见于 Web 应用中的计算机安全漏洞。

用户在浏览网站、使用即时通讯软件、甚至在阅读电子邮件时，通常会点击其中的链接。攻击者通过在链接中插入恶意代码，就能够盗取用户信息。攻击者通常会用十六进制（或其他编码方式）将链接编码，以免用户怀疑它的合法性。网站在接收到包含恶意代码的请求之后会产成一个包含恶意代码的页面，而这个页面看起来就像是那个网站应当生成的合法页面一样。许多流行的留言本和论坛程序允许用户发表包含HTML和javascript的帖子。假设用户甲发表了一篇包含恶意脚本的帖子，那么用户乙在浏览这篇帖子时，恶意脚本就会执行，盗取用户乙的session信息。

分类

（1）持久型跨站（存储型）：最直接的危害类型，跨站代码存储在服务器（数据库）。

（2）非持久型跨站（反射型）：反射型跨站脚本漏洞，最普遍的类型。用户访问服务器-跨站链接-返回跨站代码。

（3）DOM跨站（DOM XSS）:DOM(document object model文档对象模型)，客户端脚本处理逻辑导致的安全问题。

预防

来自应用安全国际组织OWASP的建议，对XSS最佳的防护应该结合以下两种方法：

验证所有输入数据，有效检测攻击；

对所有输出数据进行适当的编码，以防止任何已成功注入的脚本在浏览器端运行。具体如下：

输入验证：某个数据被接受为可被显示或存储之前，使用标准输入验证机制，验证所有输入数据的长度、类型、语法以及业务规则。

输出编码：数据输出前，确保用户提交的数据已被正确进行entity编码，建议对所有字符进行编码而不仅局限于某个子集。

明确指定输出的编码方式：不要允许攻击者为用户选择编码方式(如ISO 8859-1或 UTF 8)。

用户角度：当打开一封Email或附件、浏览论坛帖子时，可能恶意脚本会自动执行，因此，在做这些操作时一定要特别谨慎。建议在浏览器设置中关闭JavaScript。如果使用IE浏览器，将安全级别设置到“高”。

CSRF攻击

CSRF，即 Cross Site Request Forgery，名为跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。

通常情况下，CSRF攻击是攻击者借助受害者的Cookie骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在未授权的情况下执行在权限保护之下的操作。

CSRF攻击原理及过程：

用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
用户未退出网站A之前，在同一个浏览器中，打开一个Tab页访问网站B；
网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A。；
浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。

预防：防御CSRF攻击：

目前防御 CSRF 攻击主要有三种策略：

验证 HTTP Referer 字段；

在请求地址中添加 token 并验证；

在 HTTP 头中自定义属性并验证。

CSRF和XSS的区别：

1、CSRF需要登陆后操作，XSS不需要
2、CSRF是请求页面api来实现非法操作，XSS是向当前页面植入js脚本来修改页面内容

4、为什么vue中引用一个组件需要注册，而react不用

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下。

5、vue模板的解析过程

vue模板解析到渲染过程_vue如何解析模板_巴拉巴拉小魔仙_的博客-优快云博客当组件的数据发生变化时，Vue.js 会重新调用渲染函数，并通过比对新旧虚拟 DOM，尽可能地复用已有的 DOM 元素，从而更新视图。当组件被渲染时，Vue.js 会调用渲染函数，并将渲染函数返回的虚拟 DOM 转换成真实的 DOM 元素。在渲染过程中，Vue.js 会通过比对新旧虚拟 DOM，尽可能地复用已有的 DOM 元素，从而提高渲染性能。这个过程中，Vue.js 会将模板中的标签、属性、指令等信息解析成 AST 中的节点和属性，并对节点和属性进行静态分析和优化。https://blog.youkuaiyun.com/m0_66637749/article/details/129911513

Vue.js 的模板解析和渲染过程可以分为以下几个步骤：

1.模板解析

Vue.js 会将模板解析成抽象语法树(AST)。这个过程中，Vue.js 会将模板中的标签、属性、指令等信息解析成 AST 中的节点和属性，并对节点和属性进行静态分析和优化。

2.模板编译

Vue.js 将抽象语法树编译成可执行的渲染函数。渲染函数是一个 JavaScript 函数，它接受一个上下文对象作为参数，并返回一个虚拟 DOM。在编译过程中，Vue/.js 会将指令和表达式编译成函数，并将静态内容提取出来以便在渲染时复用。

3.数据响应式

Vue.js 将数据转换为响应式对象。当响应式对象的属性被访问时，Vue.js 会将属性和依赖之间建立起一个关联关系。当响应式对象的属性被修改时，Vue.js 会自动更新与之相关联的视图。

4.模板渲染

当组件被渲染时，Vue.js 会调用渲染函数，并将渲染函数返回的虚拟 DOM 转换成真实的 DOM 元素。在渲染过程中，Vue.js 会通过比对新旧虚拟 DOM，尽可能地复用已有的 DOM 元素，从而提高渲染性能。

5.组件更新

当组件的数据发生变化时，Vue.js 会重新调用渲染函数，并通过比对新旧虚拟 DOM，尽可能地复用已有的 DOM 元素，从而更新视图。在更新过程中，Vue.js 会先触发“beforeUpdate”钩子函数，然后更新视图，最后触发“updated”钩子函数。

6、axios可以通过new Axios实例的形式使用，原理是什么

axios原理及使用_大大艺术家的博客-优快云博客一、什么是axios？axios是一个基于Promise的方法，并且前后端都可以使用。二、axios的内部原理1.有一个Axios方法，它有一个interceptors对象，这个对象有一个request对象和response对象，所以，我们外部可以调用axios.interceptors.request.use().2.interceptors对象里面的request对象和response对象，他们是一个用来管理拦截器的数组（handlers）。interceptors对象提供了一个use方法，当我https://blog.youkuaiyun.com/Joy_Huu/article/details/109523557

axios对外暴露了一个axios的实例，实例中挂在了一个Axios方法

7、手写节流防抖函数

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
	if(!canRun){
		// 判断是否已空闲，如果在执行中，则直接return
		return;
	}

	canRun = false;
	setTimeout(function(){
		console.log("函数节流");
		canRun = true;
	}, 300);
};

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
	clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

	timer = setTimeout(function(){
		console.log("函数防抖");
	}, 300);
};

8、手写快速排序的实现

let _quickSort = (left, right, nums) => {
  let swap = (left, right, nums) => {
    let temp = nums[left]
    nums[left] = nums[right]
    nums[right] = temp
  }
  if (left <= right) {
    let val = nums[left]
    let [i, j] = [left, right]
 
    while (i < j) {
      while (i < j && nums[j] > val) {
        j--
      }
      while (i < j && nums[i] < val) {
        i++
      }
      if (i < j) {
        swap(i, j , nums)
      }
    }
    nums[i] = val
    _quickSort(left, i - 1, nums)
    _quickSort(i + 1, right, nums)
  }
}
 
let quickSort = (...numbers) => {
  _quickSort(0, numbers.length - 1, numbers)
  return numbers
}
 
console.log(quickSort(1, 20, 9, 13, 59, 19, 98))

9、实现简单的emitter

【【前端面试题】实现一个EventEmitter_实现简单的emitter-优快云博客】

10、http1.0和2.0的区别

vue2与vue3的区别_vue2和vue3区别_longfan_的博客-优快云博客

11、diff算法的比较过程（深度优先、同层比较、首尾假猜）

【面试进阶核心，10张图，带你吃透 “Diff” 算法核心原理（图文详解）_diff算法原理-优快云博客

12、async\awiat原理

https://www.cnblogs.com/AllenPan/p/16535418.html

13、手写pluging\loader

手写loader和plugin · 要努力 · 看云

14、webpack打包过程

webpack 打包过程 - 知乎

webpack构建过程

1、根据配置找到入口文件；

2、逐层识别模块依赖（包括commonjs、AMD，es6的import等，都会进行识别解析）；

3、webpack的工作主要包括：分析代码、转换代码、编译代码以及输出代码；

4、输出最后打包的代码

15、找出字符串中第一个只出现一次的字符，考虑时间复杂度空间复杂度

找出一个字符串中第一个只出现一次的字符（空间换时间）（时间复杂度O（N））（每日一题）_能在字符串中找出第一个只出现一次的字符,要求时间复杂度不超过o(n)-优快云博客

16、vue2和vue3的区别

Vue2 和Vue 3的区别_vue2和vue3区别-优快云博客

17、优化seo的方式

Vue项目SEO优化解决方案_vue seo解决方案_<a href="#">leo</a>的博客-优快云博客

18、服务端渲染方面的内容（服务端、客户端生命周期的调用）（脱水、注水）

19、常见的js类型错误

20、npm发包流程

21、node事件机制、进程等内容

22、webpack热更新原理，与5的区别

23、线上项目错误收集机制的实现

24、单元测试

25、file-loader、url-loader的区别

26、http、https的区别

27、webpack打包vue项目时做了哪些事，分template、script和style介绍下

28、介绍下常用的设计模式和使用场景

29、vue-cli帮我们做了哪些工作，自己实现脚手架

30、虚拟dom什么场景下减少dom的操作

31、微前端、低代码等

32、实现简单的promise

33、父子组件生命周期的实现顺序

34、跨域、同源策略

同源策略&跨域_同源策略和跨域_奋斗吧程序媛的博客-优快云博客

同源策略：

同源指的是两个 URL 地址具有相同的协议、主机名、端口号。

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。

浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互

跨域

同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

跨域解决方案

1、通过jsonp跨域(原理使用<script>标签不受同源策略的限制)
2、跨域资源共享（CORS）(设置请求头服务器端通过 Access-Control-Allow-Origin 响应头，来告诉浏览器当前的 API 接口是否允许跨域请求。)
3、 nginx代理跨域

4、vue.config.js中进行代理相关配置

devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    overlay: {
        warnings: false,
        errors: true
    },
    proxy: {
        '/api': {
            target: 'http://blog.pangao.vip',
            ws: true,
            changOrigin: true,
            pathRewrite: {
            '^/api': ''
            }
        }
    }
}

35、es6数组操作的方法

36、数组遍历的方法

37、forEach、map的区别

本地惠生活-您身边的好服务

一、foreach和map的区别

1、相同点

(1)都是循环遍历数组中的每一项。

(2)每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。

(3)匿名函数中的this都是指向window。

(4)只能遍历数组。

2、不同点

(1)map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

(2)forEach()允许callback更改原始数组的元素。map()返回新的数组。

38、map是否可以修改原数组

39、数组去重的多种方法

js数组去重常见的七种方法_js 数组去重_Lguorong的博客-优快云博客

40、数组平铺的多种方法

41、自己实现一个flat()方法

var arr = [1, 2, [3, 4]];
 
// 展开一层数组
arr.flat();
// 等效于
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
 
// 使用扩展运算符 ...
const flattened = arr => [].concat(...arr);

补充：

arr.reduce()会对数组中每一项运行回调函数，返回最后一次回调函数的执行结果，格式如下：

arr.reduce((previousValue, item, index, arr) => {
 
}, initialValue)

共5个参数：

previousValue：
第一次执行回调函数时，若initialValue有值，则使用initialValue，若initialValue没有值，则使用数组的第一个元素
从第二次执行回调函数开始，每次的值都是上一次调用回调函数时的返回值

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => {
        console.log(x)
        return x + y
    })
// 得到 1,3,6
 
let sum2 = arr.reduce((x, y) => {
        console.log(x)
        return x + y
    }, 10)
// 得到 10,11,13,16

42、vue自定义指令

43、vue组件间传值的多种方式

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

（1）props / $emit 适用父子组件通信

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children 适用父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on）适用于父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners 适用于隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

44、小程序开发及发布过程，使用的框架（uniapp等）

uniapp跨平台原理

45、hybrid与原生的通信方式

46、vue2和vue3样式穿透的区别

Vue中样式穿透共6种方法（Vue2、Vue3样式穿透，避免踩坑）_满脑子技术的前端工程师的博客-优快云博客1.vue2的css样式穿透: >>>2.vue3的css样式穿透： :deep()和::v-deep()3.关于less和sass的css样式穿透： /deep/ ::v-deep4.关于 important 解决样式的使用方法https://blog.youkuaiyun.com/weixin_46022934/article/details/123993834

47、vue响应式原理

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：

即：

输入框内容变化时，Data 中的数据同步变化。即 View => Data 的变化。

Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。

其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

实现一个订阅器 Dep：订阅器采用发布-订阅设计模式，用来收集订阅者 Watcher，对监听器 Observer 和订阅者 Watcher 进行统一管理。

以上四个步骤的流程图表示如下，如果有同学理解不大清晰的，可以查看作者专门介绍数据双向绑定的文章《0 到 1 掌握：Vue 核心之数据双向绑定》，有进行详细的讲解、以及代码 demo 示例。

48、ui组件发npm包，如何实现按需加载

49、json数据类型

50、http响应头有哪些内容

HTTP常见请求头/响应头_http响应头_入世毒药的博客-优快云博客

1.Accept
Accept: application/json 浏览器可以接受服务器回发的类型为 application/json。

Accept: */* 代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)。

2.Accept-Encoding
Accept-Encoding: gzip, deflate 浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate），（注意：这不是只字符编码）。

3.Accept-Language
Accept-Language:zh-CN,zh;q=0.9 浏览器申明自己接收的语言。

4.Connection
Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。

Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭，当客户端再次发送Request，需要重新建立TCP连接。

5.Host（发送请求时，该报头域是必需的）
Host:www.baidu.com 请求报头域主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的。

6.Referer
Referer:https://www.baidu.com/?start=1当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。

7.User-Agent
User-Agent:Mozilla/...，告诉HTTP服务器，客户端使用的操作系统和浏览器的名称和版本。

8.Cache-Control
Cache-Control:private 默认为private 响应只能够作为私有的缓存，不能再用户间共享

Cache-Control:public 响应会被缓存，并且在多用户间共享。正常情况, 如果要求HTTP认证,响应会自动设置为 private.

Cache-Control:must-revalidate 响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是最新的。

Cache-Control:no-cache 响应不会被缓存,而是实时向服务器端请求资源。

Cache-Control:max-age=10 设置缓存最大的有效时间，但是这个参数定义的是时间大小（比如：60）而不是确定的时间点。单位是[秒 seconds]。

Cache-Control:no-store 在任何条件下，响应都不会被缓存，并且不会被写入到客户端的磁盘里，这也是基于安全考虑的某些敏感的响应才会使用这个。

9.Cookie
Cookie是用来存储一些用户信息以便让服务器辨别用户身份的（大多数需要登录的网站上面会比较常见），比如cookie会存储一些用户的用户名和密码，当用户登录后就会在客户端产生一个cookie来存储相关信息，这样浏览器通过读取cookie的信息去服务器上验证并通过后会判定你是合法用户，从而允许查看相应网页。当然cookie里面的数据不仅仅是上述范围，还有很多信息可以存储是cookie里面，比如sessionid等。

10.Range（用于断点续传）
Range:bytes=0-5 指定第一个字节的位置和最后一个字节的位置。用于告诉服务器自己想取对象的哪部分。

51、es6的set、map类型

52、keep-alive中组件生命周期的触发过程，第一次进入、第二次进入

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

53、环境变量的注入

54、为什么vue中可以直接使用this

为什么vue里面data和methods可以直接通过this访问?_伟大的小白101的博客-优快云博客

其实整个initMethods方法核心就是将this绑定到了实例身上，因为methods里面都是函数，所以只需要遍历将所有的函数在调用的时候将this指向实例就可以实现通过this直接调用的效果。

55、表单组件的实现、form表单触发校验的原理

56、$nextTick()原理

57、性能优化

https://blog.youkuaiyun.com/qq_39933787/article/details/130219594?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22130219594%22%2C%22source%22%3A%22qq_39933787%22%7D

58、实现instanceof

【https://blog.youkuaiyun.com/weixin_39638012/article/details/110713957】

59、vue和React的区别

vue 注入组件_React和Vue区别_写实的龙角散的博客-优快云博客作者：秦罹https://blog.youkuaiyun.com/qq_26190177/article/details/93741368监听数据变化的实现原理不同 Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。 React默认是通过比较引用的方式(diff)进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这...https://blog.youkuaiyun.com/weixin_35895994/article/details/113707495

①Vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用

②props是可以动态变化的，子组件也实时更新，在react中官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图

③子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需，另两者都有props校验机制

④每个Vue实例都实现了事件接口，方便父子组件通信，小型项目中不需要引入状态管理机制，而react必需自己实现

⑤使用插槽分发内容，使得可以混合父组件的内容与子组件自己的模板

⑥多了指令系统，让模版可以实现更丰富的功能，而React只能使用JSX语法

⑦Vue增加的语法糖computed和watch，而在React中需要自己写一套逻辑来实现

60、vue3异步组件

vue3 异步组件_vue3异步组件_可缺不可滥的博客-优快云博客

61、浏览器输入url到页面展示出来的全过程

浏览器输入url到页面展示出来的全过程_浏览器从输入url到显示页面的过程_cute_ming的博客-优快云博客

1、用户在浏览器中输入url地址

2、浏览器解析域名得到服务器ip地址

浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。

3、TCP三次握手建立客户端和服务器的连接

因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手过程如下：

第一次握手：客户端--->服务端 ack=1,seq=x（x随机生成）

第二次握手：服务端--->客户端 ACK=1,ack=x+1,seq=y（y随机生成）

第三次握手：客户端--->服务端 ACK=1,ack=y+1,seq=x+1

完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。

4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

数据传输完毕后，TCP会进行四次挥手断开连接，释放资源。四次挥手过程如下：

第一次挥手：客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1

第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态

第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK

第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程：

（1）解析html资源，构建DOM Tree

（2）解析css资源，构建CSS Rule Tree

（3）JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

（4）解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流（layout or reflow）

（5）调用操作系统Native GUI的绘制

（6）页面绘制完成

62、重绘和回流区别，如何避免

什么是重绘（repaints）和回流（reflow） - 简书

重绘

重绘就是重新绘画，重绘是一个元素外观的改变所触发的浏览器行为，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，浏览器就会根据元素的新属性重新绘制，这就是重绘

回流

当改变页面几何属性（如修改宽高）时，浏览器需要重新计算元素大小及位置，重新渲染页面的过程

当增加或删除 dom 节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造 dom 树然后再次进行渲染，这就是回流

总结

重绘不会引起 dom 结构和页面布局的变化，只是样式的变化，有重绘不一定有回流
回流则是会引起 dom 结构和页面布局的变化，有回流就一定有重绘
不管怎么说都是会影响性能

怎么进行优化或减少？

1、多个属性尽量使用简写，例如：boder 可以代替 boder-width、boder-color、boder-style
2、创建多个 dom 节点时，使用 documentfragment 创建
3、避免使用 table 布局
4、避免设置多层内联样式，避免节点层级过多
5、避免使用 css 表达式
6、将频繁重绘或回流的节点设置为图层，图层能够阻止该节点的渲染行为影响到别的节点（例：will-change \ video \ iframe等标签），浏览器会自动将该节点变为图层
7、脱离文档流之后进行的任何操作，都不会造成回流了，复杂操作的地方，不妨使用 position：absolute / fixed定位

63、常见的http状态码

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。

500-599 用于支持服务器错误。

200 OK：客户端请求成功。

201 Created：表示请求已经被成功处理，并且创建了新的资源。新的资源在响应返回之前已经被创建。

301：永久重定向，表示资源已经永久移动到另一个位置。

302：临时重定向，表示资源临时移动到了另一个位置。

304 Not Modified：协商缓存，表示客户端可以使用以前请求的结果，不需要再次请求。此特性可以节省服务器流量，还可以加速客户端访问。

400 Bad Request：表示由于语法无效，服务器无法理解该请求。客户端不应该在未经修改的情况下重复此请求。

401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头字段一起使用，一般属于客户端调用问题，但也可能是服务器端设置有问题。

403 Forbidden：指的是服务器端有能力处理该请求，但是拒绝授权访问。404 Not Found：请求资源不存在，比如资源被删除了，或用户输入了错误的URL。

404 (Not Found/未找到)

500 Internal Server Error：服务器发生不可预期的错误，一般是代码的BUG所导致的。

502 Bad Gateway：表示作为网关或代理角色的服务器，从上有服务器（如tomcat、php-fpm）中接收到的响应是无效的。例如Nginx+uWSGI，当uWSGI服务没有启动成功或异常退出，而Nginx服务是正常的情况下，就会看到502 Bad Gateway错误。

503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常

504 Gateway Timeout：表示扮演网关或者代理的服务器无法在规定的时间内获得想要的响应。

64、js异步

https://www.cnblogs.com/sxww-zyt/p/16665196.html

由于JS运行环境是单线程的，即一次只能完成一个任务，所以多任务时需要排队。异步可以理解为改变执行顺序的操作，异步任务必须在同步任务执行结束之后，从任务队列中依次取出执行。

1，回调函数callback

函数B作为函数A的入参，且函数A执行了函数B，此时我们把函数A叫做回调函数。（ajax、setTimeout、dom事件回调等都是回调函数）

缺点：高耦合，结构混乱，回调函数不能使用 try catch 捕获错误，不能直接 return

2，Promise

Promise很好地解决了回调地狱的问题，它包含三种状态：pending、fulfilled(resolved)、rejected。pending是promise的初始状态，resolved表示执行完成且成功的状态，rejected表示执行完成且失败的状态。三个状态不可逆转。

Promise本身是同步，then的内容是异步：

3，Generator函数（ES6）

Generator 是一个可以暂停执行（分段执行）的函数，函数名前面要加星号，是一个状态机，封装了多个内部状态。

调用myGenerator()但并不会执行，它返回一个指向函数内部的指针对象。调用对象的next()方法使指针指向下一个，每次next()会从上一次暂停的地方继续执行，直到遇到yield或者return，Generator分段执行，yield是标记暂停的地方，next表示恢复执行，每次next返回的是一个对象，包含value和done，value的值是yield表达式后面的值，done表示是否执行完毕。

4，async/await（ES7）

基于Promise实现，使异步代码看起来更像同步代码。

async修饰符加在函数前面，返回一个promise，可以使用then添加回调函数。

await后跟着一个promise或者一个原始类型的值（会自动转成立即 resolved 的 Promise 对象），等待resolve的结果。任何一个await后的Promise发生reject，整个aysnc都会中断，需要try{}catch(err){}来捕获错误。

5、async/await和Generator函数的区别

看起来async/await和Generator用法相似，把星号换成async，把yield换成await，它们区别在于：

1，async函数自带执行器

2，语义清楚

3，async函数的返回值是 Promise 对象，Generator 函数的返回值是 Iterator 对象

4，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值

await语句后面的内容需要等待await的内容执行完才能执行（宏任务除外），可以把await当成是then的语法糖，await之后的内容就相当于then里的回调函数，是异步，根据先微后宏的顺序继续执行

65、react相关

引用地址【【前端面试题】—30道常见React基础面试题（附答案）】

react面试题总结-优快云博客

66、判断数组的几种方法

let arr = [1,2,3]

通过isArray方法判断

Array.isArray(arr) // true

通过instanceof方法判断

arr instanceof Array // true

通过constructor判断

arr.constructor === Array // true

通过Object.getPrototypeOf判断

Object.getPrototypeOf(arr) === Array.prototype // ture

通过Array的原型链查找

Array.prototype.isPrototypeOf(arr) //true

Object.prototype.toString.call()

Object.prototype.toString.cal(arr) == '[object Array]' // true