程序员经验分享-hwhale

【整理九】

2023-10-26

目录

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中取数据

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

面试题整理

前端

【整理九】 的相关文章

  • JS的类型转换和float取n位小数

    javascript中的变量都是弱类型 所有的变量都声明为var 在类型转换过程中就没有java那么方便 它是通过 parseInt 变量 parseFloat 变量 等方法来进行类型转换的 注意 没有parseDouble 变量 这种类型

随机推荐

  • k8s deployment Strategy 更新策略

    k8s更新策略 https kubernetes io zh docs concepts workloads controllers deployment Strategy spec strategy specifies the strat

  • vue修改富文本中的元素样式

    富文本编辑器目前应用很广泛 而有时候我们想要对其中的一些元素的样式进行修改 就会遇到问题 首先 直接修改是不可行的 因为是用v html标签进行渲染的 无法直接获取到 在修改的时候 一般是按标签进行修改 当然 也可以按class和id等 这

  • python：从键盘输入学生的成绩，转换成 5 个等级输出。A（90~100），B（80~89），C（70~79），D（60~69），E（0~59）。试用嵌套分支结构实现。

    grades eval input 请输入你的成绩 if 90 lt grades lt 100 print A elif 80 lt grades lt 90 print B elif 70 lt grades lt 79 print C

  • 前置机

    前置机这个概念一般在银行 券商 电信运营商那里用的比较多 这些地方都有很多后台核心处理系统 对外提供各种接口服务 如果我有某种业务接口需要跟他们的后台系统打交道 要从我们的外部网络访问他们的后台系统 这些单位是绝对不允许的 这个时候 他们要

  • Unity中协程与线程的区别

    本文转载自 https blog csdn net qq 25122429 article details 80481443 协同程序 coroutine 与多线程情况下的线程比较类似 有自己的堆栈 自己的局部变量 有自己的指令指针 IP

  • 【编程之路】面试必刷TOP101：贪心算法（95-96，Python实现）

    面试必刷TOP101 贪心算法 95 96 Python实现 95 分糖果问题 小试牛刀 95 1 贪心思想 要想分出最少的糖果 利用贪心思想 肯定是相邻位置没有增加的情况下 大家都分到1 相邻位置有增加的情况下 分到糖果数加1就好 什么情

  • Java-内部类

    Java 内部类 1 概念 Java中允许将一个类A声明在另外一个类B中 则类A就是内部类 类B 就称为外部类 内部类的分类 成员内部类 一方面作为外部类的成员 可以调用外部类的结构 可以被static修饰 可以被四种不同的权限修饰符 pu

  • 在手机上运行Python--安卓linux终端Termux

    今天突发奇想 想找一种在手机上运行Python的工具 于是发现了这个安卓端的linux终端 Termux 可以在手机上实现一个微型的linux终端 网上已经有不少教程了 我在这里做一下汇总 1 安装Python以及常用的package nu

  • Python+OpenCV3简单手势识别

    文章目录 安装相关库 原理简述 代码 效果实现 今天教大家一个有趣的玩法 如何利用Python opencv3实现简单的手势识别 当然网上也有相关教程 但绝大多数给出的代码拿来之后你是不能直接用的 这对于拿来主义的同学来说简直太 禽兽 了

  • python rpy2_Python&R语言-rpy2使用示例

    前言 Python编程灵活方便 R的模型方法众多 如何将两者结合起来 发挥更大的作用 值得探索 Python可以直接调用R的函数 R是开源项目 肯定会有一些第三方库实现Python与R互通 需要在python中调用R 实在是一种无奈的选择

  • vue3+TSX+element-plus（DateTimePicker）做一个时间范围选择器

    element plus包括element ui支持时间范围选择 把type指定成datetimerange就行了 但是它不支持单个选择 也许unlink panels这个配置有用 但我是用TSX写的 传了个true进去没用 怎么试都不行

  • 20张图带你了解JVM运行时数据区（上）

    我们的JVM系列已经断更好几天了 小伙伴们在后台疯狂私信阿Q 想看后续内容 今天它来了 相信大家在上篇文章中已经对类加载子系统有了清晰的认识 接下来就让我们来揭开 运行时数据区 的神秘面纱吧 运行时数据区总览 内存是非常重要的系统资源 是硬

  • GC overhead limit exceeded问题

    Java运行时环境内置了 垃圾收集 GC 模块 上一代的很多编程语言中并没有自动内存回收机制 需要程序员手工编写代码来进行内存分配和释放 以重复利用堆内存 在Java程序中 只需要关心内存分配就行 如果某块内存不再使用 垃圾收集 Garba

  • vue watermark水印添加

    vue 水印实现 Vue项目在页面添加水印功能 不允许操作dom关闭水印 1 添加watermark dom插件 npm i watermark dom save 引用 watermark dom import watermark from

  • lsqcurvefit函数的基本用法

    本文讲解lsqcurvefit函数的基本用法 一 lsqcurvefit函数的简单使用格式 x lsqcurvefit fun x0 xdata ydata x resnorm lsqcurvefit fun x0 xdata ydata

  • 线程安全性的基本概念

    线程安全性 我们总是说要编写线程安全的代码 有时候也会讨论某个类是不是线程安全的 那到底什么是线程安全性呢 网上有很多说法 可以被多个线程调用 并且线程之间不会出现错误的交互 多个线程调用时 不需要做额外的动作等等 但这话 明明什么都说了

  • 力扣刷题-128.最长连续序列、并查集

    一 并查集 顾名思义 并 就是合并 查 就是查找 集 就是集合 并查集是一种树形的数据结构 支持以下两种操作 查找 确定某个元素处于哪个子集 合并 将两个子集合并成一个集合 初始化 集合就是一些具有相同特征的元素构成的圈子 然后用其中某个元

  • vue3中定义的对象再次赋值，页面不会自动更新解决方法

    第一种方法 将reactive换成ref 即可实现页面随时刷新 export default components HelloWorld name App setup let person ref const getPerson data

  • Umi 内使用mock

    在mock文件夹下创建stu js 在mock文件夹下创建stu js 代码如下 利用mock js库 增强mock数据能力 首先先安装 yarn add mockjs 或者 npm i mockjs

  • 【整理九】

    目录 1 说说你对递归的理解 封装一个方法用递归实现树形结构封装 2 Link和 import有什么区别 3 什么是FOUC 如何避免 4 说说你对预编译器的理解 5 shouldComponentUpdate 的作用 6 概述下 Reac

热门标签