- 博客(26)
- 收藏
- 关注
原创 面试问题:React基本概念,和所遇到的CPU和IO问题
useDeferredValue:类似防抖,截流的功能,但是比他们效率更高,他是利用React内部Schedular(调度器)实现的,通过切换优先级,当用户输入的时候,先显示输入的值,把计算值的动作排在优先级后面每次用户修改值react都会计算渲染的值,当用户新输入会打断这个过程,重新按照最新值来跑渲染,达到优化用户体验的功能。在官方文档里面可以看见React基本设计概念,React是用 JavaScrip构建快速响应的大型Web应用程序的首选方式,但是快速响应用一定的是依赖,CPU的性能和IO的约束。
2024-07-18 15:38:06
632
原创 面试问题:react的Reconciler(调度器)为什么在做异步可中断不用原生Generator,自己做了一个Fiber
方法,里面有ABC三个函数我分别在B的前面和C的前面放一个yield打断,但是B中有调用A的结果,C中有调用B的结果,当浏览器有空闲时间的时候他会依次去执行一个,当时间用尽则会中断,当再次恢复时从中断的位置继续执行。当我只有单一优先级的时候,执行的中间状态是上下文关联的,所以计算后的B的返回值,不能在用上面那个A了,需要重新计算,如果全局变量保存之前执行的中间状态,那么这个又会导致一系列问题,所以react没有去使用。也是有异步中断功能的但是能他是有传染性的,使用了。而是自己做了Fiber。
2024-07-17 16:47:53
324
原创 fibber抓https包,并且完成简单使用
2.之后会变成文本,直接文本阅读器更改数据,然后最后改后缀变回SAZ文件。3.action第一次点选第二个,后来选最后一个,点完会在桌面生成这个。4.随便点开一个浏览器找到隐私-证书,把这个证书导入证书颁发机构里面。(1)删除敏感数据和添加新的信息操作。1.保存包(点击Text)
2024-05-09 14:27:58
225
原创 深入BFC笔记
在传统的布局中,浮动元素会导致父级元素的高度塌陷,使得父级元素无法包裹其内部的浮动元素。他为什么不是所有元素默认触发BFC,而是特点触发,因为当所有元素都默认触发BFC的时候会让灵活布局变得僵硬,这和开发者开发的的是冲突的,即分离内容与样式,以及样式的可重用性和可维护性。当浮动元素、绝对定位元素,'display' 特性为 "inline-block"的元素,以及 'overflow' 不是 "visible" 的元素,会创建新的。属性后,它会脱离正常的文档流,并且在布局时会形成一个新的 BFC。
2024-04-18 16:04:42
383
原创 React fiber框架
与用户的直接交互 > 页面更新,组件状态更新 > 预加载等(说白了就是先跑html,css然后跑js然后预加载啥的)(这个优先级react不让修改):他是通过把diff拆成一个一个小任务,每个任务叫fiber节点,然后形成fiber树,这就也就意味这现在diff可以排列优先级。:diff算法是递归出来的,一次就得全渲染完,而fiber的出现就是解决这个问题的。是一种新的框架,他的目的是实现增量式,可中断的虚拟Dom diff的过程。:提高react性能优化和响应速度。
2024-04-18 16:03:36
304
原创 面试问题:js是什么
(2)BOM是什么:浏览器对象模型,主要是用来描述组合中对象与对象和字键之间的层次关系的模型,并且浏览器对象模型提供了独立于内容的,可以与浏览器窗口进行交互的对象结构,BOM的顶级对象是Window对象是里面有(location,history什么的)可以与浏览器的api交互。而它的解释型语言,SpiderMonkey 引擎火狐的引擎,等大多数的引擎都是逐行解释js代码,然后将他转换成相应的操作,然后执行操作,他的优势是快速运行简单的js代码,对于短时执行代码很友好。3,简单原因:是弱类型语言。
2024-04-02 10:25:08
295
原创 深拷贝,浅拷贝
浅拷贝:只能复制第一层数据,比如说简单类型,遇到复杂类型会切换成直接去拿原来数据的储存地址。简单玩法:object.assign(”被赋值的”,”用来复制的”);实现方案之一(原理遇到数组或者对象,给他单独一个一个遍历出来)深拷贝:所有全部复制。
2024-03-28 22:27:34
172
1
原创 this指向,改变this方法(笔记)
箭头函数中的 this 与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 this!箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。3.bind(区别于call,apply,他改完之后不会立即执行而是相当于创建了一个新的改变this之后的函数,而call,apply立马执行)(1)使用 call 方法调用函数,同时指定函数中 this 的值.这里的bind(更改了定时器里面的this指向,不再是window而是btn调用者)都是函数的方法,只能用函数调用。
2024-03-28 19:33:24
513
1
原创 解构赋值(笔记)
解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构,对象解构两大类型。1.赋值运算符=左侧的{}用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量。1.赋值运算符=左侧[]用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量。4.变量的数量小于单元值数量时,可以通过…获取剩余单元值,但只能置于最末位。3.变量的数量大于单元值数量时,多余的变量将被赋值为 undefined。2.变量的顺序对应数组单元值的位置依次进行赋值操作。2.对象属性的值将被赋值给与属性名相同的变量。
2024-03-27 21:11:00
178
原创 箭头函数(笔记)
2.如果函数体只有一行代码,那么可以省略大括号,如果把大括号省略的话,会自动的返回结果,不需要写return。3.箭头函数认为不存在this,箭头函数中的this指向当前箭头函数所在作用域的this。1.箭头不存在预解析,所以必须先定义再调用。2.箭头函数中,不存在arguments。1.如果参数只有一个,那么可以省略小括号。
2024-03-27 20:43:54
84
原创 闭包,变量提升,预解析(笔记)
详细:闭包是一种比较特殊和函数,使用闭包能够访问函数作用域中的变量。JS会把申明的变量,提升到当前作用域的最前面,只申明不赋值。JS会把带有名字的函数,提升到当前作用域最前面,只定义不调用。2.闭包能够创建外部可访问的隔离作用域,避免全局变量污染,能够是变量的作用范围延伸。2.变量在声明之前即被访问,变量的值为 undefinedlet。3.let声明的变量不存在变量提升,推荐使用let。1.闭包本质仍是函数,只不是从函数内部返回的。代码在执行之前,要先预解析,解析变量和函数。变量:带有申明的变量。
2024-03-27 20:22:14
139
原创 作用域(笔记)
对象是由浏览器环境提供的,它在 JavaScript 运行时自动创建,你不需要手动定义它。当浏览器加载一个网页时,它会创建一个浏览器窗口,并在该窗口的 JavaScript 运行环境中创建一个全局的。对象代表了浏览器窗口(即浏览器的一个实例)。它是 JavaScript 的全局对象,提供了许多与浏览器窗口和文档相关的属性和方法,比如。这个对象代表了整个浏览器窗口,包括所有的标签页、框架(iframe)等。补充:window全局对象。
2024-03-27 19:50:32
123
原创 js三参剩余参数,动态参数,默认参数,加js的...展开运算符(笔记)
剩余参数:是es6推出...展开运算符中的功能之一,他是可以接受任意数量的参数,并将它们作为一个数组存储在剩余参数中。中,如果两个对象具有相同的属性名,则后面的对象中的属性会覆盖前面的对象中相同属性名的属性。来将数组展开成为独立的元素,或者将对象展开成为独立的属性。在es9中他推出的新功能剩余对象,它允许你在对象字面量中使用。...的功能还有展开语法它允许你在数组、对象等地方使用。其中他还有一些小细节,比如说:属性覆盖,对象展开语法。动态参数是提出的一个特殊的对象arguments,
2024-03-23 20:13:25
218
原创 array常见基础数组实现原理
因为源码中有很多内部函数做了很多的校验,所以我会先写一个简易的核心逻辑理解一下。:向数组的开头添加一个或多个元素,并返回新的长度。在数组末尾添加一个或多个元素,并返回新的长度。:移除并返回数组的最后一个元素。移除并返回数组的第一个元素。
2024-03-03 22:58:04
385
原创 原型,原型链
原型是什么:就是构建函数(函数)的一个属性,构建函数的prototype属性指向了一个对象,我们把这个对象称为原型对象或者原型,(每个构造函数都有这个属性 )。原型链是什么:由原型构成的一种链状结构。作用:共享方法,节省内存。
2024-02-29 22:41:45
377
原创 web布局方式全面理解
是一种布局方式,当你给一个元素设置了浮动属性后,该元素会脱离文档的正常流动,向左或向右移动,直到它的边缘碰到了包含它的容器边缘或其他浮动元素的边缘。是一种布局方案,概念是:结合以上多种布局方法,根据具体情况灵活应用,以实现更复杂的页面布局效果。是一种方案,概念是,一种单维度的布局模型,适用于在一个方向上排列元素,通常是水平方向或垂直方向。布局方案,概念是:定位布局是指通过定位元素的位置来控制其在页面上的显示方式。是一种布局方案,概念是:针对特定的设备或屏幕尺寸设计不同的布局方案。
2024-02-26 11:50:20
380
1
原创 div介绍
div是在1999年ajax刚出的那个时间HTML4引入的,当然你也可以叫他图层,division。出现原因:更灵活、更通用的方法来组织和布局网页的内容,相对于上个版本HTML3。功能:无任何意义的提供结构和背景的容器标签。
2024-02-21 17:18:38
323
原创 react深度理解更新流程
这个方法来调取render函数的,react在每个class上面都继承了这个方法,很大的优化了整个程序的流程。使用react给我们提供的生命周期方法。同时react也提出来高级组件。props 没有变化时不重新渲染,提高性能。当使用memo组件的时候可以使用在。
2024-02-01 22:37:33
433
1
原创 react生命周期方法 shouldComponentUpdate(源码中叫shallowEqual(浅层比较))
默认返回的是true,也就是只要state发生改变,就会调用render。返回值为false,那么久不需要调用render方法;返回值为true,那么就需要调用render方法;修改之后,最新的props属性。修改之后,最新的state属性。
2024-02-01 22:36:33
407
1
原创 diff算法深度解析(个人笔记)
vue的列表对比,采用的是两端到中间比对的方式,而react采用的是从左到右依次对比的方式。1.最长公共子序列算法,通过把文件拆成字符,然后给他存在一个2*2规划表格,然后动态的填写这个表格,通过比较两个文本文件的每一行(或字符),根据相似度进行填充动态规划表格。1.react使用顺序比较算法,它通过递归地比较新旧元素树的结构和属性,尽量减少实际DOM操作的次数,vue对比节点。当节点元素相同,但是classname不同,认为是不同类型的元素,删除重建,而react认为是同类型节点,只是修改节点属性。
2024-01-31 21:44:18
416
原创 url命令大全(个人笔记)
/ 协议部分(例如 "http:") console.log(window.location.host);// 主机部分(例如 "www.example.com") console.log(window.location.pathname);// 路径部分(例如 "/path/to/page") console.log(window.location.search);// 替换当前页面,不生成新的历史记录 location.replace('https://www.example.com');
2024-01-03 11:09:55
892
1
原创 length应用范围(个人笔记)
一些对象或集合,如 DOM 中的 NodeList 对象,也可能具有。length的计算方式不设计算法,是直接获取的。JavaScript 数组具有。属性,表示传递给函数的参数数量。属性,表示字符串中字符的数量。属性,表示数组中元素的数量。属性,表示数组中元素的数量。在函数内部,可以使用。
2023-12-27 16:41:31
353
1
原创 VMware点开虚拟机蓝屏重启问题(问题总结)
最终原因:15.5的兼容性问题,是VMware的bug,网上众说纷纭没有找到源码级解释,个人能力有限无法做到源码级别解释。解决方案:切换了17版本的VMware。(卸载一定要看教程卸载,要不会卸不干净)我看的教程是。因为版本问题,没有找到现成的系统,需要自己通过翻译找到系统相应的Virtualization。1.关闭Windows功能。4.修改bios配置。
2023-12-25 22:43:05
2425
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人