- 博客(106)
- 资源 (4)
- 收藏
- 关注
原创 react核心知识
Fiber架构中处理副作用(side effects)时采用自下而上的方式,这是为了实现更高效的调度和渲染过程,以及更好地支持优先级调度和中断。在Fiber架构中,每个React组件都可以被视为一个fiber节点,这些节点以树状结构组织,形成了React组件树。在渲染过程中,React会遍历整个组件树,并根据需要执行各种操作,比如计算Virtual DOM、处理更新、执行副作用等。异步调度和优先级:自下而上的处理副作用可以更好地支持React的异步调度和优先级调度。
2024-04-29 17:00:19
1247
原创 2024前端40+场面试|实战盘点
根据我 2024 年 40+次的面试时间线,很明显能看出来,后半段的面试,基本都能过,主要是 4 月份离职状态有充足时间复习了,所以我总结一下心得首先请使用一下 4 点 自己总结一遍背景目标 期望目标(往往是比较模糊的)行动 (具体哪方面)结果(需要有实际案例和量化指标支撑)每一个项目都要有项目亮点,并且要知道底层原理哪怕你某个项目用了一点点微模块,那你微服务、微应用相关的知识必须熟练,不然这个项目不要写出来项目亮点就是你在网上几乎搜不到的东西,比如我对渲染引擎做了优化,白屏检测做了插件。
2024-04-29 16:58:01
3610
1
原创 前端性能监控(面试常见)
对于自定义加载逻辑(如使用加载库或组件),如果它们提供了加载完成的回调函数或状态指示器,可以直接使用这些接口来判断渲染完成。
2024-04-16 21:05:32
1506
原创 react 18更新知识盘点(2024面试)
这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。相反,React 会延迟渲染,直到有足够的数据,以防止出现加载状态错误。但是直接用axios或者fetch是无法进入suspense的fallback的,但是react提供了一个库供我们使用react-cache(暂不建议使用的),它具体是做什么的,原理是什么,我们后面在讨论,这里先体验一下效果如何。
2024-04-04 15:28:53
2043
原创 事件循环(2024 面试题)
定时器检测阶段(timers):本阶段执行 timer 的回调,即 setTimeout、setInterval 里面的回调函数。I/O事件回调阶段(I/O callbacks):执行延迟到下一个循环迭代的 I/O 回调,即上一轮循环中未被执行的一些I/O回调。闲置阶段(idle, prepare):仅系统内部使用。轮询阶段(poll):检索新的 I/O 事件;
2024-04-03 12:17:46
2329
1
原创 前端工程化理解 (2024 面试题)
历史背景出现原因主要工具现状未来展望前端工程化是指,使用软件工程的技术和方法,将前端的开发流程、技术、工具、经验等规范化和标准化,其主要目的,是为了提高效率和降低维护成本,即提高开发过程中的开发效率,减少不必要的重复工作时间。标准化,定义编码、目录结构、接口以及源码管理等规范;组件化,组件分为HTML、JS和CSS;模块化,功能封装;自动化,持续集成和持续部署。核心关键词: 标准规范 降本提效落地四大块:标准模块组件自动化。
2024-04-02 08:15:31
2165
原创 原型链-(前端面试 2024 版)
来讲一讲原型链1、引用类型,都具有对象特性,即可自由扩展属性。2、引用类型,都有一个,属性值是一个普通的对象。3、引用类型,。4、。
2024-03-28 14:09:32
1887
原创 react 面试题(2024 最新版)
生成新的虚拟DOM树当组件的state或props发生变化时,React会重新执行render方法,生成新的虚拟DOM树。虚拟DOM是一种轻量级的JavaScript对象表示,它模仿了实际DOM结构。比较(Diffing)React使用了一种优化过的算法(通常称为“ reconciliation algorithm”或“ diff算法”)来比较新的虚拟DOM树与上一次渲染后的虚拟DOM树。
2024-03-26 20:33:06
25340
2
原创 react-面试题
(1)受控组件在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state。这种组件在React中被称为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方式消除了组件的局部状态,使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值。
2024-03-13 07:54:35
923
原创 vue 和 react 比较
概括的说,React是最求简洁和函数式的,这两点也确实在跨平台方案和大型框架如Next.js中发挥了威力。还有一个重要的影响点就是,给项目中的React升级是容易的,也得益于React对自身暴露API的谨慎。Vue追求易用和上手,但在跨平台方案和大型框架落了下风。但如果是开发Web应用,Vue同样是值得选择的好技术栈。暂时总结到这里,后续再学习,有新的心得再补充进来。Vue本质是MVVM框架,由MVC发展而来;React是前端组件化框架,由后端组件化发展而来。
2024-03-12 13:30:00
1038
1
原创 VUE基础
Vue.js 是一个基于 MVVM(Model-View-ViewModel)架构的前端框架。在 Vue 中,MVVM 的实现主要依赖于数据劫持和发布-订阅模式。具体来说,Vue 在初始化时会将数据对象转换成响应式对象,通过 Object.defineProperty() 方法劫持各个属性的 getter 和 setter,从而在数据变动时发布消息给订阅者,触发视图的更新。同时,Vue 实例作为 ViewModel,连接了 Model(数据模型)和 View(视图),实现了数据和视图的双向绑定。
2024-03-12 09:09:19
874
原创 hook 面试题
每一个函数、每一个useEffect中的props和state都是独立的。不是state在不变的effect中变化,而是每一个effect中有不变的state函数组件的状态会停留在某个状态,改变后的状态跟前者不是同一个,所以不同时机不同状态;class组件中,状态始终指向this.state,不同时机但是同一个状态。
2024-03-12 09:08:33
508
原创 react 综合题-旧版
(1)受控组件在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state。这种组件在React中被称为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方式消除了组件的局部状态,使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值。
2024-03-12 09:07:18
730
原创 js操纵数组的技巧
操纵数组的技巧数组常用的方法一、数组更改方法常见的数组移入移除方法如以下,一般会用以下方法模拟数据结构中对栈和队列1、push()和pop()尾部操作push(): 在数组末尾添加元素,返回数组长度,会改变原数组pop(): 删除数组最后一项,返回删除的元素,会改变原数组会直接改变原数组2、shift()和unshift()头部操作shift(): 删除数组的第一项,返回删除元素的值,会改变原数组unshift(): 在数组第一项前面添加元素,返回添加后数组长度,会改变原数
2020-10-08 17:05:34
311
原创 前端代码规范(1)谈code review
前端谈code review 一、review代码的认知 1、code review目的 保证代码可读性,一致性 代码层面减少bug,最基本缺少控制判断、异常处理 传播知识+设计讨论。 相信很多人第一次提交 Code Review 都有类似的经历:短短几百行代码,却被提了密密麻麻几十条 comments,更新了十多次代码,才最终被 accept 。其实当代码被 accept,提交代码的工程师通过这次 review 就学习到了代码规范和很多好的实
2020-09-13 15:42:06
7497
原创 JavaScript函数式编程(3)
JavaScript函数式编程(1)内置方法灵活使用JavaScript函数式编程(2)前面两篇文章有提到几个原则尽量不要定义变量,就算定义也最好使用const且保证定义变量后不再更改尽量使用官方自带的API很多面试者或ES5重度使用者 长期使用for 循环,但是你在阅读一些优质框架源码时会发现基本会被map filter reduce forEach代替,尽管很多人证明for循环或者多次定义变量对性能并没什么影响,反而函数式编程会牺牲一点性能,并以此为理由排斥函数式编程。针对以上疑
2020-07-26 22:24:51
289
原创 JavaScript函数式编程(2)
函数式编程主要是利用函数等特性,即给一个确定的输入总能保证相同的输出,函数只做一件事情等等,让代码看起来更简短且维护性更高(但很容易出现反效果导致被喷)。上一篇文章主要介绍js中 map/filter/reduce/sort/some等js数组操作方法。我在最初接触函数式编程时,也感到很疑惑,函数式编程和这几个ES的API方法有啥关系,直到最近跳槽,公司内以为前端技术专家反复强调 一般情况不允许直接修改变量,尤其是一些数组和对象,尽可能不要使用深拷贝;主要有以下原因防止拷贝后的对象会..
2020-07-13 01:29:28
245
原创 程序员修炼之道关键点总结和个人感悟
程序员不得不读的书前二就是《程序员修炼之道》和《代码大全》大学时曾读过《程序员修炼之道》,最近换工作转正答辩前要求重新读此书以下是精华提炼,和个人总结(一)注重实效的哲学(二)注重实效的途径(三)基本工具(四)注重实效的偏执(五)弯曲或折断(六)当你编码时(七)在项目开始之前(八)注重实效的项目(一)注重实效的哲学对于我们的缺点—还有我们的无知和我们的错误—我们必须诚实正确认识已经发生的错误,对自己的职业生涯负责。对于已经发生的错误,重要的是如何处理来挽回局面,这样也
2020-06-14 18:18:29
738
原创 项目开发周期和项目管理
本文主要总结阐述目前经历的的开发周期和项目管理,阅读大概12分钟适合新手+项目管理新手+有经验进行自我总结身为前端开发,目前在三家公司做过开发两家上市公司+一家200人的小公司,这三家公司以下就简单简称A/B/C吧A公司的开发流程一个项目的生命周期1、开发组长和产品商量开发人员(需要哪些人,大概工期)2、产品建群发需求文档3、开始需求会议(此时UI基本完成,再次确定难度和事件)4、根据接口时间开始开发(一般前端在后端完成60%之后才开始)5、到测试时间开始发布测试环境开始测试.
2020-06-14 18:10:45
2985
原创 JavaScript函数式编程(1)内置方法灵活使用
学习函数式编程需要非常熟悉以下概念函数是一等公民定义最少的无关临时变量灵活使用函数作为函数的值JS数组原生方法中的函数式用法1、filter接收一个函数创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素案例var animals = [ {name:'apply0',species:'rabbit0'}, {name:'apply1',s...
2020-04-19 18:25:42
391
原创 前端自测的必要性和感想记录
前端自测适用于,前端开发前期《需求评审阶段》《UI评审阶段》《接口评审阶段》,中期《自测阶段》。末期《测试阶段》身为前端狗在提交测试时,产品往往容易出现一些完全可以避免的bug。写此文意在提高个人提测质量和软件整体质量目前前端角色处于软件开发过程中比较重要的节点,无论是产品经理,交互设计师还是UI设计师多需要前端交互来完善,前端是距离用户最近的开发,这也也意味着前端的责任:需要对产...
2019-08-18 22:07:08
873
原创 弃优快云
大学时很多知识都是csdn上面 学的,相对而言,优快云写博客是编辑器比较友好。可是最近随便刷刷,看到不少人瞎写的博客。想想当初自己也是被这波人带偏的。非常失望csdn就作为以后自己笔记(不公开)吧。博客主战场转为 掘金和segmentfault我会把其他平台文章转过来。...
2019-02-23 17:02:26
231
原创 CSS伪元素/伪类/清除浮动/居中等问题的总结
伪元素与伪类为什么css要引入伪元素和伪类 https://zhuanlan.zhihu.com/p/46909886css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素.伪类和伪元素可以理解为有一定逻辑能力的css伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个...
2019-02-14 21:53:34
803
原创 中高阶前端面试主要问题和工作必备知识点
以下记录的是,几个月以来收藏的部分中高级前端知识点第1章html+cssCSS中伪类与伪元素CSS的原理是什么呢?第2章javascriptJavaScript的工作原理:引擎,运行时和调用堆栈的概述JavaScript的工作原理:V8引擎内部+关于如何编写优化代码的5个技巧JS回调函数JavaScript 的黑暗时刻来了?一文带你看懂cookie,面试前端不用愁Ja...
2019-02-05 22:02:09
449
原创 《代码整洁之道》读书笔记
以下整理为:这次阅读看到对自己有帮助的个人体会和书中妙句的汇总。由于书中后半部分偏向于java,作为前端开发者,后半部分以后再总结。第0章前言5S哲学整理 seiri 或谓组织整顿 seiton 或谓整齐清楚 seiso 或谓清洁清洁 seiketsu 或谓标准化身美 shitsuke 或谓纪律(自律)主要句子整洁近乎虔诚 Cleanliness i...
2019-01-26 16:24:43
276
原创 前端开发者的自我反省
我愧对程序员这个称号愧对我已经当初的选择愧对自己深夜偶读前端前辈的课程,讲述前端技术发展、个人经历、个人状态、总结程序员的死胡同。恍然大悟。故总结记录下文。加黑为原文笔记,不加黑为自我反省所有学习是目标成长驱动的,不是项目我之前所有理念都是围绕着项目来学习新东西,现在觉得应该算是意识错误。程序员的追求不是完成某个产品,而是学习补充自己去解决问题有些知识点用不到?因为你没...
2018-10-27 14:13:04
3772
原创 CSS3 box-flex 弹性盒子布局
本文将从css3 box-flex的属性来讲解弹性布局所有demo的演示地址https://css-tricks.com/snippets/css/a-guide-to-flexbox/利用弹性布局五大金刚进行布局的的在线显示https://xluos.github.io/demo/flexbox/入门必备 实现弹性布局必备第一步:一般的布局首先html代码设置嵌套关系...
2018-10-14 11:19:21
2129
1
原创 前端难点汇总/面试高频知识点链接
js跨域https://www.jianshu.com/p/1b1842fdfd73web优化 https://www.cnblogs.com/liulilin/p/7245125.html前端知识点-面试技巧集合 http://www.fed123.com/2016_web_front/http协商缓存VS强缓存 https://www.cnblogs.com/wonyun/p/5524...
2018-10-13 17:07:19
1604
原创 Javascript中闭包的作用
闭包是什么干啥的 我就不细讲了 随便搜很多,我就一句话说下:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。目录闭包的参数传递函数节流中使用作用域作用域链高级排他中使用 具体的表现形式 就是一个函数尾部有return 输出一个函数,利用这个输出函数把当前函数的局部变量带出来,如下所示:function test1() ...
2018-10-13 16:44:04
848
1
转载 Javascript的内存管理、性能问题和垃圾回收
垃圾回收机制JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。 而在 C和 C++之类的语言中,开发人员的一项基本任务就是手工跟踪内存的使用情况,这是造成许多问 题的一个根源。在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无 用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单:找出那些不再继...
2018-10-13 14:12:42
226
转载 JavaScript总结学习一:js中构造函数与普通函数的区别
转自https://www.cnblogs.com/cindy79/p/7245566.html构造函数不仅只出现在JavaScript中,它同样存在于很多主流的程序语言里,比如c++、Java、PHP等等。与这些主流程序语言一样,构造函数在js中的作业一样,也是用来创建对象时初始化对象,并且总与new运算符一起使用。在js中,构造函数与普通函数的区别不是很大。接下来就主要讲讲两者的区...
2018-10-08 13:45:10
439
转载 js中call,apply和bind方法的区别和使用场景
原地址https://blog.youkuaiyun.com/yaojxing/article/details/71942496在js中,所有的函数再被调用的时候都会默认传入两个参数,一个是this,还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向,也就是说使函数可以被其他对象来调用,那么我们应该怎样做呢?这时候我们就可以使用call,...
2018-10-07 12:58:51
237
转载 Html5移动端布局及(rem布局)页面自适应布局详解(转)
转载自https://www.cnblogs.com/yanayana/p/7066948.html有部分改动和我的总结笔记常见的页面布局方式有,静态布局 px布局 流式布局(Liquid Layout) 主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用) 自适应布局(Adaptive Layout) 即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围 ...
2018-10-06 21:36:02
26624
1
转载 HTML5系列(01)WebStorage是什么以及 和 Cookie的区别
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接 https://blog.youkuaiyun.com/wkyseo/article/details/51452303 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。h...
2018-10-04 17:27:07
948
微博案例看利用jq对ajax的使用
2018-09-23
VUE入门小项目总结
2018-08-20
Linux版本浙江闪讯拨号连接
2018-06-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人