前端八股文(二)

news2024/11/25 2:31:27

1.什么是diff算法?

https://www.bilibili.com/video/BV1JR4y1R7Ln/?spm_id_from=333.337.search-card.all.click&vd_source=0406fa5cf8203ba41f1c8aec5f967e9d

我们修改了文本内容后会生成新的虚拟dom,新旧俩个虚拟dom之间是存在一定差异的,如果能快速找到这俩个对象之间的差异,就可以最小化的更新视图,"diff算法"就是专门用来比对这两个虚拟dom对象的。

diff算法的目的(本质):找出差异,最小化的更新视图。 

流程:

 

当数据改变时,就会触发内部的setter方法,进一步触发dep.notify方法,通知到各数据使用方,执行patch方法,patch方法接收俩个参数(新旧虚拟节点),首先在内部判断一下是不是同类标签,如果不是同类标签那就没有比对的必要了,直接替换就行,如果是同类标签那就执行pacthvnode方法,在这个方法内部也是需要判断一下新旧虚拟节点是否相等,相等的话就直接return,如果不相等那就需要分情况来比对,比对的原则是以新虚拟节点的结果为准;

情况1:

新、旧节点都有文本节点,那直接用新的文本节点来替换就行。

情况2:

旧的没有子节点,新的有子节点,那就直接添加新的子节点就行了。

情况3:

旧的有子节点,新的没有子节点,那就直接删除旧的子节点就行了。

情况4:

新旧都有字节点,那就需要比对他们的子节点(updateChildren)。

updateChildren方法

在该方法中规定了只在同级比对方法,这样可以减少比对次数,最大化的提高比对性能。而且在同级比对中采用的是首尾指针法。

 首先旧虚拟节点的oldS和新虚拟节点的newS做比对,如果没有比对成功,那oldS会和newE做比对。如果依旧没有比对成功,就oldE和newS做比对,如果依旧没有比对成功,oldE会和newE做比对。

比对的原则是依照以上顺序依次做比对,当比对成功的,就退出当前比对,渲染结果会以新虚拟节点的结果为准。每次比对成功后,比对成功的start会向右侧移动,end会向左侧移动。在移动的过程中当start跑到end的右侧时九会终止比对。

如果首尾指针法以上4种情况都没有匹配成功的话,则会看新旧虚拟节点的key值,key相同的话就会复用。

2.闭包(closure)

https://www.bilibili.com/video/BV1gM4y1y7bt/?spm_id_from=333.788&vd_source=0406fa5cf8203ba41f1c8aec5f967e9d

将函数内部和外部连接起来的一个桥梁

闭包有2个特点:

1.函数嵌套函数,内部函数引用外部函数变量

2.内部函数可以访问外部函数的变量和参数

闭包有2个作用:

1.防止变量和参数被垃圾回收机制回收(变量持久化)

2.防止变量和参数被外部污染(变量只在闭包内部可访问)

3.实现数据的私有化 ,外面可以用,但没法修改。

闭包风险:

滥用可能会造成内存泄漏

闭包的应用:

1.实现js的模块化

2.封装私有变量

3.防抖和节流

防抖:用户频繁触发某个动作,但是我只想让它最后一次生效(比如用户输入)

节流:比如监听滚动条,控制多久执行一次方法,有固定的一个频率。

闭包一定有return吗?,闭包一定会造成内存泄漏吗?

no

什么时候用到return?

 

3.什么是原型和原型链?

https://www.bilibili.com/video/BV1LY411d7Yt/?spm_id_from=333.788&vd_source=0406fa5cf8203ba41f1c8aec5f967e9d

 

原型:

每个函数都有一个prototype属性,称之为原型。

因为这个属性的值是个对象,所以我们也称之为原型对象。

作用:

1.里面存放了一些属性和方法,也就是把我们的属性和方法挂载到原型身上。

2.在js中可以通过原型来实现继承

__proto__:

每个对象都有__proto__属性,这个属性指向它的原型对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/534856.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

未来的航空电子设备会是什么样子?

具有多功能航空电子设备、大触摸屏显示器、先进通信系统、高性能/低功耗解决方案和人工智能 (AI) 功能的驾驶舱将成为未来军事飞行员日常生活的一部分。 如今,配备模拟驾驶舱的军用飞机已经很少见,因为大多数都已被采用先进嵌入式硬件和软件解决方案的现…

金融学学习笔记第2章

第2章 金融市场和金融机构 一、金融体系 金融体系包括金融市场、中介、服务公司和其它用于执行家庭、企业及政府的金融决策的机构 1.金融市场 金融市场:以金融资产为交易对象而形成的供求关系及其机制的总和 金融市场可分为有特定地理位置的市场和没有特定地点的市…

使用NodeJs创建Web服务器

Web服务器 什么是Web服务器? 当应用程序(客户端)需要某一个资源时,可以向一个台服务器,通过Http请求获取到这个资源;提供资源的这个服务器,就是一个Web服务器; 目前有很多开源的We…

用ChatGPT生成一个Python贪吃蛇游戏(42)

小朋友们好,大朋友们好! 我是猫妹,一名爱上Python编程的小学生。 和猫妹学Python,一起趣味学编程。 今日主题 什么是ChatGPT? ChatGPT可以帮我们做什么? 用ChatGPT生成一个Python贪吃蛇游戏。 什么是C…

Rust每日一练(Leetday0002) 中位数、回文子串、Z字形变换

目录 4. 寻找两个正序数组的中位数 Median of two sorted arrays 🌟🌟🌟 5. 最长回文子串 Longest Palindromic Substring 🌟🌟 6. Z字形变换 Zigzag Conversion 🌟🌟 🌟 每日…

C/C++每日一练(20230517) 排序问题、查找小值、寻找峰值

目录 1. 排序问题 🌟 2. 查找小值 🌟 3. 寻找峰值 🌟🌟 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 排序问题 输入10个数&#…

RK3588平台开发系列讲解(进程篇)Linux文件系统数据结构

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、Linux 文件系统数据结构有哪些二、超级块结构 spuer_block三、目录 dentry四、文件索引结点 inode五、打开的文件 file沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 本篇将介绍 Linux 文件系统数据结构…

深入理解MySQL中的事务和锁

目录 数据库中的事务是什么? MySQL事务的隔离级别 脏读、不可重复读、幻读 MVCC(多版本并发控制) 快照读和当前读 MySQL中的锁 MyISAM引擎的锁: InnoDB引擎的锁: 乐观锁和悲观锁 共享锁和排他锁 数据库中的事…

【STL二十】算法——排序操作(sort、stable_sort)_集合操作(merge)

【STL二十】算法——排序操作(sort、stable_sort)_ 集合操作(merge) 一、分类二、修改序列的操作三、排序操作1、sort2、stable_sort3、is_sorted、is_sorted_until 四、集合操作1、merge2、inplace_merge 一、分类 根据网站https://www.apiref.com/cpp…

JavaScript实现输出一个“天”字的代码

以下为实现输出一个“天”字的程序代码和运行截图 目录 前言 一、实现输出一个“天”字 1.1 运行流程及思想 1.2 代码段 1.3 JavaScript语句代码 1.4 运行截图 前言 1.若有选择,您可以在目录里进行快速查找; 2.本博文代码可以根据题目要求实现相…

【瑞萨RA系列FSP库开发】初识寄存器

文章目录 一、寄存器是什么二、瑞萨RA6M5 芯片内部模块与资源三、存储器映射1. 存储器映射表2. 存储器区域划分3. 外设寄存器 四、C语言操作寄存器1. C语言对寄存器的封装(1)外设模块基地址定义(2)寄存器结构体定义(3&…

【LLM系列之BLOOM】BLOOM: A 176B-Parameter Open-Access Multilingual Language Model

论文题目:《BLOOM: A 176B-Parameter Open-Access Multilingual Language Model》 论文链接:https://arxiv.org/abs/2211.05100 github链接:https://github.com/huggingface/transformers-bloom-inference/tree/main huggingface链接&#xf…

LeetCode35. 搜索插入位置(二分法入门)

写在前面: 题目链接:LeetCode35. 搜索插入位置 编程语言:C 题目难度:简单 一、题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会…

Linkage Mapper:从栖息地连通性到物种保护的连通性指南针

✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: Linkage Mapper解密数字世界链接 文章目录 引言一、Linkage Mapper工具包简介1.1 什么是Linkage Mapper工具包⭐️ Linkage Mapper工具包的概述

Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)

一、环境 😄 😄 😄 这里因为我们有的小伙伴可能不太需要服务器,单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上,有很多方式,自行百度。你也可以购买阿里云或者腾讯云。逻辑都是…

MSQL系列(二) Mysql实战-索引结构B+Tree

Mysql实战-索引结构 BTree 上一篇 我们讲解了二叉树,平衡二叉树,红黑树,BTree的结构及特点,本文我们着重讲解一下BTree,为什么Mysql的存储结构采用BTree而不是上面的那几种 1.BTree的缺点 我们用上篇文章中的BTree的…

第四十二天学习记录:C语言进阶:笔试题整理Ⅲ

问:解释一下int(*a[20])(int)是什么? ChatAI答: int (*a[20])(int) 是一个数组,该数组中每个元素都是一个指向函数的指针,该函数具有一个int类型的参数,并返回一个int类型的值。 具体来说,a是一…

宝塔服务器(linux)服务器搭建

搭建服务器 nginx 搭配 PM2( 集合了node的功能 ) 搭建服务器 域名: http://kissface.top 流程如下: 服务器既做assets文件目录挂载 , 也当做nodejs服务使用 当我访问http://kissface.top 根目录时 展示index.html文件 同时能访问静态资源如 js/css/img/font 等 当我访问 http…

Linux:初识【VI / VIM编辑器】

Linux系统版本:centos 7.5 x64位 VMware版本: VMware Workstation Pro 16 文章目录 一、VI / VIM是什么?1.1 VI编辑器1.2 VIM编辑器 二、为什么要使用VI / VIM编辑器?三、如何使用VI / VIM编辑器?3.1 一般模式3.2 编辑…

keil MDK5插件推荐——Astyle代码格式化插件

前言 代码格式化是提高代码质量和可读性的重要手段之一。然而,在Keil MDK5中并没有内置代码格式化工具,因此需要寻找第三方工具来解决这个问题。开源的代码格式化工具Astyle能以插件的形式集成到Keil中以满足我们对代码格式化的需求。 本文将详细介绍如…