Update: 面试题

content/CSS.md

@@ -4057,7 +4057,12 @@ CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它
 
 参考答案：
 
+一、单列布局（一栏布局）
+二、两列自适应布局：1.float+overflow:hidden 2.Flex布局 3.grid布局（网格布局）
+三、三栏布局：圣杯布局、双飞翼布局
+
 详细的资料可以参考：
+
 [《几种常见的 CSS 布局》](https://juejin.im/post/5bbcd7ff5188255c80668028#heading-12)
 
 </details>
@@ -4688,7 +4693,8 @@ p:after {
 参考答案：
 
 ```css
-利用绝对定位实现body {
+利用绝对定位实现
+body {
   padding: 0;
   margin: 0;
 }
@@ -4799,9 +4805,7 @@ body {
 }
 
 .right {
-  flex: auto;
-  /*11auto*/
-
+  flex: 1 1 auto;
   background: gold;
 }
 
@@ -5112,7 +5116,7 @@ body {
   height: 0;
   border-width: 100px;
   border-style: solid;
-  border-color: tomatotransparenttransparenttransparent;
+  border-color: tomato transparent transparent transparent;
 }
 ```
 

content/Git.md

@@ -58,10 +58,18 @@ git pull --rebase = git fetch + git rebase
 这与其他操作（例如：合并（merge）、变基（rebase））形成鲜明对比，后者通常是把许多提交应用到其他分支中。
 
 ```
-
 git cherry-pick <commit-hash>
 ```
 
+步骤：
+
+1.先使用 git log 命令（或 git reflog ）获取提交的记录，然后找到我们对应想要的那个 commit 的 SHA 。
+2.再使用 git checkout 命令切换到我们需要提交这个 commit 的新分支。
+3.最后再使用 git cherry-pick xxxxxxxxx 将你想要的那个 commit 的内容合并到新分支即可
+————————————————
+版权声明：本文为CSDN博主「码飞_CC」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
+原文链接：https://blog.csdn.net/cc18868876837/article/details/108402798
+
 [参与互动](https://github.com/yisainan/web-interview/issues/1001)
 
 </details>

content/js/es6.md

@@ -1423,15 +1423,62 @@ ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
 
 </details>
 
-<b><details><summary>34.</summary></b>
+<b><details><summary>34.Promise.all（只要失败一个就不会走then）的解决方案</summary></b>
 
-参考答案：
+参考答案：代码 解决：在catch里面resolve就行了
+
+```
+    // 代码 解决：在catch里面resolve就行了
+    // 测试了下 解决方式还能实现
+    var p1 = new Promise(resolve => {
+        let p1Data = b;
+        resolve(p1Data)
+    }).catch(err => {
+        return Promise.resolve("P1 无数据")
+    })
+
+    var p2 = new Promise(resolve => {
+        let p2Data = 'p2的有数据';
+        resolve(p2Data)
+    }).catch(err => {
+        return Promise.resolve("P2 无数据")
+    })
+
+    Promise.all([p1, p2]).then(res => {
+        console.log(res);
+    }).catch(err => {
+        throw new Error("Promise 执行错误", err)
+    })
+
+```
 
 </details>
 
-<b><details><summary></summary></b>
+<b><details><summary>35.Promise.race 用过吗</summary></b>
 
-参考答案：
+参考答案：Promse.race 特性就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
+
+```
+  let p1 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('success')
+  },1000)
+})
+
+let p2 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    reject('failed')
+  }, 500)
+})
+
+Promise.race([p1, p2]).then((result) => {
+  console.log(result)
+}).catch((error) => {
+  console.log(error)     // 打开的是 'failed'
+})
+
+```
+不管成功或失败，只返回第一个执行结束的
 
 </details>
 

content/test.md

@@ -1,22 +1,17 @@
 # vue
 
-* new Vue发生什么？vue的实例化，底层调用init方法，初始化数据和方法之类的
+* new Vue发生什么？
 
 * Vue的数据为什么频繁变化但只会更新一次？
 
 * Vue组件为什么采用异步渲染？
 
-* 异步渲染原理是什么？
+* 异步渲染原理是什么？数据更新，watcher加入队列，在nexttick中把任务队列清空
 
-* nextTick的原理？利用优先级promise MutationObserver setImmdate setTimeout
+* nextTick的原理？按着浏览器兼容性 promise moutationObserve serimmdate settimeout 这个顺序
 
 * vue父子组件挂载顺序?【记住最后一个是父 倒数第二往前都是子】
 
-    加载过程 父 父 父 子 子 子 子 父
-    更新过程 父 子 子 父
-    销毁过程 父 子 子 父
-
-
 * process.nextTick和Vue.nextTick的区别？【process.nextTick是node环境下的，在微任务之前执行。vue.nextTick是vue提供的在宏任务或微任务中执行】
 
     1.先说Vue.nextTick，任务在宏任务 微任务执行
@@ -225,16 +220,33 @@ Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob
 
 * 2 css盒子模型就是？【回答不准确】应该这样说：盒模型包含content+padding+border+margin。W3C盒模型（content-box）width和hight只是包含content；IE盒模型（border-box），包含content+border+padding
 
-* 3 隐藏元素？display：none； opratity：0；【就想出这两个】
+* 3 隐藏元素？display：none； opratity：0；
 还有visibility：hidden；position；overflow：hidden
 
-* 清除浮动？clear：both；【记不清】
+* 清除浮动？伪元素  clear：both；【记不清】
 
-*
+*  display:flex； 
+容器：flex-direction ： row row-reserve clumn clumn-reserve 
+flex-wrap ：no-wrap wrap wrap-reserve
+flex-flow：就是flex-direction 和 flex-wrap的集合
+justify-content：flex-sart flex-end center space-between space-around
+align-item：center 【flex-start | flex-end | center | baseline | stretch】
+align-content。类比justify-content
 
-*
 
-*
+
+子元素：flex-grow 放大 flex-shinrk 缩小 flex order flex-basis align-self
+
+
+
+
+项目上：flex   order   flex-shrink flex-grow flex-basis align-self
+
+flex 布局时，如何固定一栏宽度？flex: 0 0 200px;
+
+* 2栏布局 大类分为3种 ：浮动  定位 flex：1 
+
+* 3栏布局：大类分为几种： 1.左右绝对 中间margin 2.flex 3.左右浮动 4.圣杯 5.双飞翼 【圣杯是左右浮动、中间padding；双飞是左右浮动、中间margin】
 
 # 浏览器
 

content/vue/vue.md

@@ -3327,6 +3327,21 @@ v-for循环，利用下标和v-show显示
 5. Better TypeScript support: 更好的 ts 支持;
 6. Custom Render API: 暴露了自定义渲染的API;
 
+
+回答范例
+1. api层面Vue3新特性主要包括：Composition API、SFC Composition API语法糖、Teleport传送⻔、
+Fragments 片段、Emits选项、自定义渲染器、SFC CSS变量、Suspense
+2. 另外，Vue3.0在框架层面也有很多亮眼的改进：
+更快
+虚拟DOM重写
+编译器优化：静态提升、patchFlags、block等
+基于Proxy的响应式系统
+更小：更好的摇树优化
+更容易维护：TypeScript + 模块化
+更容易扩展
+独立的响应化模块
+自定义渲染器
+
 </details>
 
 <b><details><summary>161.在compositionAPI中如何使用生命周期函数？</summary></b>
@@ -4005,6 +4020,35 @@ function sameVnode(oldVnode, vnode){
 
 新旧节点比较的过程： 1. 如果新旧节点的引用一致，可以认为没有变化。 2. 比较新旧节点文本，需要修改的话，则更新文本。 3. 如果新节点没有子节点，老节点有子节点，直接删除老的子节点。 4. 如果新节点有子节点，老节点没有子节点，则创建新的子节点。 5. 新旧节点都有子节点，而且新旧节点的子节点引用不一样，会调用updateChildren函数比较子节点。
 
+
+
+思路
+1. diff算法是干什么的
+2. 它的必要性
+3. 它何时执行
+4. 具体执行方式
+5. 拔高：说一下vue3中的优化
+回答范例
+1. Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过
+patch方法转换。
+2. 最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法支
+持，但是这样粒度过细导致Vue1.x无法承载较大应用；Vue 2.x中为了降低Watcher粒度，每个组件只有一个
+Watcher与之对应，此时就需要引入patching算法才能精确找到发生变化的地方并高效更新。
+3. vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获
+得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟DOM，通过比对两者找到变化的地方，最后将其
+转化为对应的DOM操作。
+4. patch过程是一个递归过程，遵循深度优先、同层比较的策略；以vue3的patch为例：
+首先判断两个节点是否为相同同类节点，不同则删除重新创建
+如果双方都是文本则更新文本内容
+如果双方都是元素节点则递归更新子元素，同时更新元素属性
+更新子节点时又分了几种情况：
+新的子节点是文本，老的子节点是数组则清空，并设置文本；
+新的子节点是文本，老的子节点是文本则直接更新文本；
+新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
+新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla
+5. vue3中引入的更新策略：编译期优化patchFlags、block等
+
+
 </details>
 
 <b><details><summary>200. vue nextTick【腾讯,快手】</summary></b>
@@ -4123,9 +4167,9 @@ vue-router中的路由守卫有哪些
 
 答案
 
-前端路由有两种模式，HTML5和hash，这两种模式本质是不同的底层浏览器技术，但是上层Vue Router做了统一化的封装，因此在我们开发组件和配置路由时候使用这两种模式的区别并不大。默认是hash模式。
+前端路由有两种模式，history和hash。默认是hash模式。
 
-这两种模式有几个主要区别 1. HTML5模式的路由没有"#"字符，而是在域名后直接写路径，更加优雅 2. 由于#后面的字符不会发给服务器，因此hash路由SEO比较差 3. HTML5需要服务器在访问不同的路径时候都能fallback到index.html，因此相对麻烦
+这两种模式有几个主要区别 1. history模式的路由没有"#"字符，而是在域名后直接写路径，更加优雅 2. 由于#后面的字符不会发给服务器，因此hash路由SEO比较差 3. history需要服务器在访问不同的路径时候都能fallback到index.html，因此相对麻烦
 
 前端路由的原理关键有2点 1. 可以修改url，但不会引起刷新，从而在不刷新的页面的情况下跳转路由。 2. 监听url改变，根据url渲染对应组件。
 
@@ -4265,6 +4309,38 @@ Vuex是个状态管理器。
 它Vuex通过createStore创建了一个数据中心，然后通过发布-订阅模式来让订阅者监听到数据改变。 Vuex的store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期钩子beforeCreate 完成的。这样Vue组件就能通过this.$store获取到store了。
 
 Vuex使用vue中的reactive方法将state设置为响应式，这样组件就可以通过computed来监听状态的改变了。
-编辑于 2022-04-29 09:04
-Vue.js
+</details>
+
+<b><details><summary>211. 说说你对虚拟 DOM 的理解？</summary></b>
+
+思路
+1. vdom是什么
+2. 引入vdom的好处
+3. vdom如何生成，又如何成为dom
+4. 在后续的diff中的作用
+回答范例
+1. 虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个 JavaScript 对象，只不过它是通过不同的属性去
+描述一个视图结构。
+2. 通过引入vdom我们可以获得如下好处：
+将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能
+直接操作 dom 是有限制的，比如：diff、clone 等操作，一个真实元素上有许多的内容，如果直接对其
+进行 diff 操作，会去额外 diff 一些没有必要的内容；同样的，如果需要进行 clone 那么需要将其全部内
+容进行复制，这也是没必要的。但是，如果将这些操作转移到 JavaScript 对象上，那么就会变得简单
+了。
+操作 dom 是比较昂贵的操作，频繁的dom操作容易引起⻚面的重绘和回流，但是通过抽象 VNode 进行
+中间处理，可以有效减少直接操作dom的次数，从而减少⻚面重绘和回流。
+方便实现跨平台
+同一 VNode 节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是 dom 元素节点，渲染在
+Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等
+Vue3 中允许开发者基于 VNode 实现自定义渲染器（renderer），以便于针对不同平台进行渲染。
+3. vdom如何生成？在vue中我们常常会为组件编写模板 - template， 这个模板会被编译器 - compiler编译为渲
+染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真
+正的dom，所以会在后续的patch过程中进一步转化为dom。
+![vue_007](../../images/vue_007.jpg)
+
+4. 挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就
+会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新
+视图。
+
+
 </details>

content/原理集合.md

@@ -185,7 +185,7 @@ STEP 8: 客户端解密信息
 
 </details>
 
-<b><details><summary>18. let 和 const 区别的实现原理是什么</summary></b>
+<b><details><summary>18. var、let 和 const 区别的实现原理是什么</summary></b>
 
 参考答案：