前端面试（一）

1.了解过react 或 angular 吗
Vue借鉴了react的虚拟dom技术和react的组件化 借鉴了angular的数据绑定技术和模板

Vue:渐进式的js框架，核心库加插件（如Vue-router)
特点：MVVM模式，M：model，V：view， VM：viewmodel
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新

父子组件通信：
父传子：props属性
props的值可以是数组或者是对象，如果是驼峰命名如 myBall 则在dom里面需写成 my-ball
props传过来的数据也可以用在计算属性等上面
而且，如果传来的数据是对象或数组，在子组件改变的时候这个数据在父组件也会被改变（引用类型传递的是地址，指向同一内存空间）

子传父：$emit() $on()

v-if 和 v-show
共同点：都能对元素隐藏和显示
v-if会创建销毁真实dom,v-show只是display:none

data以函数值返回 ：还是引用类型的问题。如果不这样，每个组件的data就都一样了

v-for优先级更高

带async关键字的函数会返回一个promise对象，如果里面没有await，执行起来等同于普通函数；

await 关键字要在 async 关键字函数的内部，写在外面会报错；await会让出线程，阻塞async内后续的代码，先去执行async外的代码。等外面的同步代码执行完毕，才会执行里面的后续代码。就算await的不是promise对象，是一个同步函数，也会等这样操作

已知如下数组，编写一个程序将数组扁平化([].flat(Infinity), 降维)去并除其中重复部分数据，最终得
到一个升序且不重复的数组
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

类数组转数组  from
Array.from(new Set(arr.flat(Infinity).sort((a, b) => {return a- b})))

HTTP2
采用了二进制格式传输。而非之前的文本传输。
计算机网络知识告诉我们，采取二进制的话，数据将会一帧一帧地传输。这就可以引入了多路复用技术。只要给每个数据帧打上标识，在接收端重组数据帧即可。
多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一个 TCP 连接并发完成
在 HTTP1.x 中，并发多个请求需要多个 TCP 连接，浏览器为了控制资源会有 6-8个 TCP 连接都限制

HTTP2 中
同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
单个连接上可以并行交错的请求和响应，之间互不干扰

Object.prototype.toString.call() 、 、 instanceof 以 以及 及 Array.isArray()
1.第一种最好 判断类型基本上都行 适用性广
2.第三种 判断数组很好，但es5之后才有
3.不太好，[] instanceof Object // true

浏览器渲染机制
浏览器采用流式布局。将html解析为dom树。将css解析为css树。两树合一，就是渲染树。通过渲染树，浏览器计算元素的几何属性，渲染对应样式。
因为流式布局的原因，table的计算要花的时间是其他元素的3倍。所以尽量不使用table

重绘：几何属性的改变或样式的改变但不影响布局，例如 outline, visibility, color、background-color 等，重绘的代价是高昂的，
因为浏览器必须验证 DOM 树上其他节点元素的可见性

回流：布局改变触发页面更新。代价比重绘还大。
现代浏览器大多都是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即 16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值
主要包括以下属性或方法：
1、offsetTop、offsetLeft、offsetWidth、offsetHeight
2、scrollTop、scrollLeft、scrollWidth、scrollHeight
3、clientTop、clientLeft、clientWidth、clientHeight
4、width、height
5、getComputedStyle()
6、getBoundingClientRect()
所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列

1、使用 transform() 替代 top
2、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回
流（改变了布局
3、避免使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。
4、尽可能在 DOM 树的最末端改变 class，回流是不可避免的，但可以减少其影响。尽可能在 DOM 树的最末端改变 class，可以限制了回流的范围，使其影响尽可能少的节点。

输入URL，之后会先进行DNS域名解析。拿到目标的IP地址后，发起http请求（http请求基于TCP/IP协议，这里会先进行3次握手，即是客户端向服务器发个请求连接，服务器向客户端发送可以连接，客户端再向服务器发收到了应答）事实上，请求时会使用HTTP缓存规则来运行。HTTP缓存分为强缓存和协商缓存。强缓存主要和expire和cache-control有关。expire是资源过期时间，它会比较系统时间和expire时间。（expire是第一次请求返回的一个值，它的时间基于服务器的时间，服务器时间和本地系统时间不一定一致）如果没过期，浏览器将读本地缓存，本地缓存可以存在内存或者硬盘。如果过期了或者cache-control设置了no-cache，那么接下来走的是协商缓存路线。协商缓存主要和etag 和 last-modify 有关。 首先验证etag,它是服务器第一次返回资源时对资源计算的hash值（当然服务器可以设置不返回这个）。浏览器这边请求时会带上etag, 它的键是if-none-match ,值就是etag. 如果没变，协商缓存命中，返回304.即是使用本地缓存资源即可。如果变了，返回新的资源和状态码200.如果etag没有，那么验证last-modify 它的键是If-modify-since.
最终拿到资源后，浏览器开始解析html，构建dom树，解析css,构建css树，两树合一，渲染树诞生，根据渲染树去计算渲染。这个工作由浏览器的渲染进程的GUI线程完成。同时配合该进程下面的其他线程如JS引擎线程，http异步请求线程，定时器线程等。

cookie localstorage sessionStorage
从时效性：cookie有时间限制。不设置的话，浏览器关闭时就没了。localstorage 没有时效性，除非自己删除。sessionStorage当浏览器关闭时自动没了
从存储大小：cookie要在服务器和浏览器之前返回。大小不能太大。4kb
而其他两个都可以5mb