20211025

1、回流于重绘
答：回流：当rander tree中发生元素的显示隐藏，尺寸变化，布局变化时需要重新构建就是回流。因为页面要构建rander tree，每个页面会发生至少一次的回流，就是在第一次加载页面的时候。
重绘：当rander tree上有一些属性发生变化，这些属性影响外观颜色风格，而不影响结构的时候，就会发生重绘，比如background-color。
区别：回流必将引起重绘，而重绘不一定引起回流，比如改变颜色的时候会引起重绘，但是不会回流。比如改变元素显示的时候就会引起回流并重绘。
2、怎么样避免浏览器一直回流于重绘
答：浏览器本身也会帮忙优化一些这样的问题，浏览器在回流重绘的时候会构建一个队列，在到一定的时间内或者操作数量到了一定程度后，浏览器会批量触发一次。我们自己本身也可以优化一些这样的问题，比如一个div里要添加3个p标签，我们可以把3个p标签拼接好，统一添加到div里。
3、面向对象的理解
4、Async和await和promise的区别
答：1、async/await是ES7的，Proimise是ES6的。2、async/await对于promise来说写法更优雅3、reject状态：promise的错误状态是用catch来捕获的，建议写在尾部。async/await可以用.then又可以用try catch捕获。
async/await是基于promise开发出来的，当函数执行的时候，一遇到await就返回，等待异步操作完成再执行函数体后面的语句，它其实是generator的语法糖，*号替换成async，yield替换成await。
5、渲染机制，怎么优化
6、在浏览器输入url后发生了什么
答：1、域名解析。2、建立TCP连接（三次握手）。3、发送http请求。4、服务器接受到请求并处理。5、服务器返回结果。6、关闭TCP连接。7、浏览器解析HTML。8、浏览器布局渲染
7、svg和canvas
答：canvas是用笔刷进行2D绘图的。svg是用标签绘制矢量图的。他们都是用于绘制2D图像。
区别：canvas是用来绘制位图的，svg是绘制矢量图的，svg节点较多，渲染较慢，canvas渲染快，但写起来复杂。svg支持分层和事件，canvas不支持，但是有库支持。
位图图像也称为点阵图像，位图使用我们成为像素的一格一格的小点来描述图像。矢量图是根据集合特性来绘制图形，使用线段和曲线描述图像，矢量可以是一个点或一条线，矢量图只能靠软件生成，内存较小。
8、节流和防抖
答：都是应对页面中事件频繁触发的优化方案。
防抖：避免事件重复触发。使用场景：1、频繁和服务端交互。2、输入框自动保存事件。
节流：把频繁触发的事件减少，并且每隔一段时间执行。使用场景：scroll事件
9、cookie,localstorege和sessionstrorage区别
10、缓存机制
答：1、强缓存（本地缓存）：不发起请求，直接使用缓存里的内容，浏览器把js、css、immag等存到内存中，下次用户访问直接使用。触发：HTTP1.0时间戳响应表头，HTTP1.1 Cache-Control响应标头。2、协商缓存（弱缓存）：需要向服务器发送请求，通过判断来决定是否使用协商缓存，如果请求内容没有变化，则返回304，浏览器就用缓存内容。触发：HTTP1.0if-modified-since响应标头，HTTP1.1 if-none-match响应标头：Etag。
11、用户的权限
12、说一下组件化的理解
13、虚拟dom
答：虚拟DOM本质上就是一个普通的js对象，用于描述视图的页面结构。在VUE中每个组件都有一个render函数，每一个render函数返回一个虚拟DOM树，也就证明每一个组件对应着一个虚拟DOM树。虚拟DOM的作用：1、是为了提高渲染速度，虚拟DOM只更新需要更新的部分，从而避免全量更新的开销，这种方式可以减少页面渲染开销，提高渲染效率。2、是有更好的性能表现，虚拟DOM可以通过对DOM的操作批量处理，减少对实际DOM的操作，从而减少了页面重新渲染的次数，VUE也做了一些性能优化技巧，如异步批量更新，缓存组件等。3、虚拟DOM更易于开发和维护，使用虚拟DOM可以将应用程序的状态和渲染逻辑分离，使得代码更易于理解和维护，开发者只需要关注数据的变化，不需要手动更新DOM元素，从而提高开发效率。4、跨平台支持，虚拟DOM是纯JS开发实现的，因此可以在不同的平台和环境中使用，
14、vue里的key是什么
答：key是vue中diff算法里的一个内容，key的作用是标记出我们这次和上次同一个DOM替换或更新的位置，如果不加key，默认会通过索引来，但是索引有一个缺点，如果push数组第一项的时候，后面的都会发生改变，会很浪费时间，key就是用来节约时间的。
15、keep-alive是什么
答：vue自带的组件，keep-alive会来缓存组件，是用来提升性能的。
钩子：activated是在组件激活状态下触发的函数，deactivated是在组件停止使用下使用的函数。keep-alive可以设置ç，属性值是个组件名。
用法：用keep-alive标签包裹组件，也可以在路由meta里设置keepAlive。