【整理九】

1.说说你对递归的理解？封装一个方法用递归实现树形结构封装

• 表象理解
  • 函数会自己调用自己
  • 每一次调用，函数的参数都会收敛变小
• 实质理解
  • 把一个大问题变成1个或n个小问题
  • 用同样的逻辑来解决这些问题
  • 最后把他拼凑起来，拼成全局问题
• 具体实现
  • 先写Base case，定义基线条件，判断其是否为最小号问题，避免死循环
  • Recursive rule：递归规则

2.Link和@import有什么区别？

• 本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
• 加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
• 兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。
• 使用 dom(document object model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。

3.什么是FOUC? 如何避免？

FOUC即无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。
IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系

解决方法：在之间加入一个标签来导入css文件

4.说说你对预编译器的理解？

预编译是程序编译前的准备阶段，预编译又称为预处理，预编译是做些代码文本的替换工作，把一个工程中的一部分代码预先编译好放在一个文件里。C 编译系统在对程序进行通常的编译之前，首先进行预处理。C/C++提供的预处理功能主要：宏定义、文件包含、条件编译。

5.shouldComponentUpdate 的作用

shouldComponentUpdate 函数是 React 中的一个生命周期函数，用于在更新组件前检查数据是否有变化，从而决定是否重新渲染组件。

• shouldComponentUpdate 函数的作用:
  • (1)提升组件性能:当组件在接收到新的 props 和 state 时，可以通过shouldComponentUpdate 判断是否需要重新渲染，减少不必要的渲染。
  • (2)允许控制: React 通过此函数允许开发者控制组件是否重新渲染，能够提高开发效率，实施预期的操作。

6.概述下 React 中的事务处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。
这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。
另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。
这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的

7.React组件的划分业务组件技术组件？

根据组件的职责通常把组件分为 UI 组件和容器组件
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑
两者通过 React-Redux 提供 connect 方法联系起来

8.React中Hooks方法以及理解？

点击查看详情

9.react性能优化是哪个周期函数

shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom因为dom描绘非常消耗性能，如果我能在shouldComponentUpd方法中能够写出更优化的domdiff算法，可以极大的提高性能

10.说说你对Fiber的理解和应用场景

Fiber把渲染更新过程拆分成多个子任务，每次只做一小部分，做完看是否还有剩余时间，如果有继续下一个任务；如果没有，挂起当前任务，将时间控制权交给主线程，等主线程不忙的时候在继续执行
即可以中断与恢复，恢复后也可以复用之前的中间状态，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber节点
点击查看详情

11.react性能优化方案

• Reac.memo 缓存组件
• 使用 useMemo 缓存大量的计算
• 避免使用 内联对象
• 避免使用 匿名函数
• 延迟加载不是立即需要的组件
• 调整CSS而不是强制组件加载和卸载
• 使用React.Fragment避免添加额外的DOM
• 使用React.PureComponent , shouldComponentUpdate

12.简述flux 思想及Redux的应用

Flux是一种架构思想或者说是设计模式，专门解决软件的结构问题。
它跟MVC架构是同一类东西，但是更加简单和清晰。
FaceBook Flux是用来构建客户端Web应用的应该架构。
利用单向数据流的方式来组合React中的视图组件。
更像一个模式而不是一个正式的框架，开发者不需要太多的新代码就可以快速上手

Redux最主要的作用是用作状态的管理，即：集中式管理状态的javascript库。
两大核心：actions state
简言之，Redux用一个单独的常量状态树（state对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）,这样就可以进行数据追踪，实现时光之旅。

• Redux三大原则
  • state以单一的对象存储在store中,是唯一的数据源，有且只有一个
  • state是只读的只能通过action修改
  • 使用纯函数reducer执行数据的更新

13.说说html和css渲染的过程是什么

Html渲染过程
Css渲染过程

14.说一下DOM0、DOM2、DOM3事件处理的区别是什么？

点击查看详情

15.如何判断页面滚动到底部，如何判断页面中元素是否进入可视化区域？

点击查看详情

16.浏览器的内核和区别？

• IE浏览器内核：Trident内核，也是俗称的IE内核；
• Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
• Firefox浏览器内核：Gecko内核，俗称Firefox内核；
• Safari浏览器内核：Webkit内核；
• Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
• 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
• 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
• 百度浏览器、世界之窗内核：IE内核；
• 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

17.说一下浏览器Event Loop 和NodeJs中Event Loop的区别?

任务队列个数不同

浏览器事件环有 2个事件队列(宏任务队列和微任务队列)
NodeJS 事件环有 6 个事件队列

微任务队列不同

浏览器事件环中有专门存储微任务的队列
NodeJS 事件环中没有专门存储微任务的队列

微任务执行时机不同

浏览器事件环中每执行完一个宏任务都会去清空微任务队列。
NodeJS 事件环中只有同步代码执行完毕和其它队列之间切换的时候会去清空微任务队列

微任务优先级不同

浏览器事件环中如果多个微任务同时满足执行条件，采用先进先出。
NodeJS 事件环中如果多个微任务同时满足执行条件，会按照优先级执行

18.说一下vue-router的底层实现原理？

Vue Router 是一个基于 Vue.js 的官方路由器，致力于提供一个简单灵活的路由系统并实现页面切换时的无缝过渡效果。其底层原理主要是依托于 Vue.js 的能力来实现的。
Vue Router 主要由两部分组成，一个是路由映射表，另一个是路由组件。
路由映射表主要用于定义路由地址和相应的组件对应关系，并对每个路由进行配置。其中包括路由地址、路由组件、路由别名、路由重定向、路由嵌套和路由元信息等。
路由组件是指与路由地址相关联的组件，通过路由映射表中的配置，路由器会将当前路由地址和相关组件映射关联起来，并根据需要动态加载。
在使用 Vue Router 时，主要通过 Vue.js 提供的路由 API来实现其中包括 router-link 组件、router-view 组件和路由对象等
router-link 组件主要用于定义页面中的路由跳转链接，通过设置 to 属性来指定跳转到的路由地址。
router-view组件则用于定义页面中的路由视图，它会根据当前的路由地址动态加载相应的路由组件并显示出来。
而路由对象则提供了一些方法和属性，用于获取当前路由地址导航到新的路由地址、监听路由变化等操作，从而实现路由器的基本功能。
总之，Vue Router 的底层原理就是通过路由映射表和路由组件来实现页面路由和组件加载，并通过 Vue.is 提供的路由API 来实现路由器的基本功能。

19.说一下Vuex的实现原理，commit和dispatch方法如何实现的

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，
这个状态管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

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

20.有A,B,C 三个组件，A组件跳转到B组件缓存，A组件跳转到C组件不缓存，如何实现？

传参通过路由来传参，然后将B组件的数据存入vuex中，每次加载都是从vuex中取数据