前端知识体系
文章平均质量分 87
前端体系知识点总结
Web面试那些事儿
前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集,添加小助理yinke0036免费领取,和阿里p8大佬一起交流,更有一对一面试指导!!!
展开
-
【前端基础系列】CSS篇-选择器的优先级
在前端面试中,经常会遇到CSS选择器的问题三连:说一下CSS的选择器有哪些优先级是怎样的权重计算方式我们在上一篇 【前端基础系列】CSS篇-常用选择器介绍[1] 中已经对问题1进行了详细的解答,今天就来给大家介绍选择器的优先级和权重计算方式。原创 2024-01-02 10:00:00 · 1422 阅读 · 0 评论 -
【前端基础系列】CSS篇-你知道BFC是什么吗?
BFC是前端面试中经常会被问到的一个知识点,今天就来带大家深入了解下什么是BFC以及它的作用。原创 2024-01-02 10:00:00 · 880 阅读 · 0 评论 -
【前端基础系列】CSS篇-带你了解position:sticky
如果问,CSS 中 position 属性的取值有几个?大部分人的回答大概是staticrelativeabsolutefixed,实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍:粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢?原创 2024-01-01 14:36:58 · 3458 阅读 · 0 评论 -
前端内存优化知多少?内存泄露只是冰山一角
内存优化虽然是前端性能优化中比较冷门的方向,但通过对页面的内存分析,并尝试优化它,可以帮助我们更好的了解自己的项目当面试官问起:“你的页面内存有多少,有哪些方面去优化它?”时,可以结合自己的实践,深入的讲解我们关于内存优化的理解如果你现在正在找工作,可以私信“web”进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集,和p8大佬一起交流。原创 2023-12-02 10:54:10 · 1174 阅读 · 0 评论 -
如何从0到1搭建前端监控平台
常常会苦恼,平常做的项目很普通,没啥亮点;面试中也经常会被问到:做过哪些亮点项目吗?前端监控就是一个很有亮点的项目,各个大厂都有自己的内部实现,没有监控的项目好比是在裸奔文章分成以下六部分来介绍:自研监控平台解决了哪些痛点,实现了什么亮点功能?相比sentry等监控方案,自研监控的优势有哪些?前端监控的设计方案、监控的目的数据的采集方式:错误信息、性能数据、用户行为、加载资源、个性化指标等设计开发一个完整的监控SDK监控后台错误还原演示示例。原创 2023-12-03 10:52:23 · 1070 阅读 · 0 评论 -
你可能并不需要useEffect
相信大家在写react时都有这样的经历:在项目中使用了大量的useEffect,以至于让我们的代码变得混乱和难以维护。难道说useEffect这个hook不好吗?并不是这样的,只是我们一直在滥用而已。在这篇文章中,我将展示怎样使用其他方法来代替useEffect。useEffect允许我们在函数组件中执行副作用。它可以模拟 componentDidMount、componentDidUpdate 和componentWillUnmount。我们可以用它来做很多事情。原创 2023-11-20 17:53:41 · 131 阅读 · 0 评论 -
10 个值得掌握的 reduce 技巧
作为一个前端开发者,一定有接触过reduce函数,它是一个强大而实用的数组方法,熟练掌握reduce的使用可以在开发中提高开发效率和代码质量。本文介绍的reduce的 10 个技巧值得拥有,可以让你少写很多代码!reduce方法在数组的每个元素上执行提供的回调函数。它传入前一个元素计算的返回值,结果是单个值,它是在数组的所有元素上运行的结果。函数逐个遍历数组的元素,在每一步中,函数将当前数组值添加到上一步的结果中,直到没有更多元素要添加。原创 2023-11-20 17:54:25 · 111 阅读 · 0 评论 -
不数不知道,React已经有22个hook了
如果说CSR时期的hook都是面向开发者直接使用的。那么并发时期最初的2个hook)已经鲜有开发者使用了,而后期类似这样的hook,普通开发者则根本用不到。同样的,再往后的RSC时期的所有hook,普通开发者都用不到。他们都是为其他库、框架(比如Next.js)提供的。这标志着React发展方向的不断变化:早期,定位是前端框架,主要为了解决facebook自身问题,顺便开源,受众是开发者中期,定位是底层UI库,受众是开源库作者当前,定位是web底层操作系统,受众是上层全栈框架。原创 2023-11-21 11:39:58 · 57 阅读 · 0 评论 -
十个超级好用的Javascript技巧
下面示例用了极少的代码实现了动态的模板渲染引擎,不仅支持普通的动态变量的替换,还支持包含for循环,if判断等的动态的JS语法逻辑,具体实现逻辑在我的另外一篇文章做了非常详详尽的说明,感兴趣的小伙伴戳此链接【造轮子系列】面试官问:你能手写一个模板引擎吗?如果让我挑选一个用的最广泛的设计模式,我会选观察者模式,如果让我挑一个我所遇到的最多的算法思维,那肯定是递归,递归通过将原始问题分割为结构相同的子问题,然后依次解决这些子问题,组合子问题的结果最终获得原问题的答案。原创 2023-11-21 11:41:17 · 34 阅读 · 0 评论 -
为什么react中的hooks都要放在顶部?
在函数组件中调用Hook时,React会根据Hook的类型将其添加到当前组件的Hooks链表中。如果你在代码中多次调用同一个Hook,React会根据Hooks的顺序将其添加到当前组件的Hooks链表中。总结描述就是创建了一个链表,当在条件语句中使用hooks时可能会导致前后两次链表不同,从而导致错误,所以我们必须尽可能避免这种错误从而写在顶部。从源码的角度来说的话,React会在内部创建一个名为“Hooks”(中文为钩子)的数据结构来追踪每个组件的状态。中,我们调用自定义Hook并使用返回值来渲染UI。原创 2023-11-22 12:18:03 · 376 阅读 · 0 评论 -
面试官:如何防止重复提交订单?
在真正的生产环境下,我们最终选择了”方案四:从订单业务的本质入手“。原因很简单,整体改动范围比较小,测试的回归范围也比较可控,且技术方案复杂度最低。这样做技术选型的话,也比较符合百度一直倡导的”简单可依赖“原则。原创 2023-11-22 12:19:29 · 56 阅读 · 0 评论 -
一个 不用充钱 也能让你变强的 VSCode 插件!!!
之前一直使用的,虽然功能强大,但是收费相对来说有点贵,每个月收费在10美刀这样,一直想找一个免费的替代方案,之前也尝试使用Kite和TabNine等类似智能代码补全插件,但是效果都不尽人意。通义灵码(TONGYI Lingma),可以称之为copilot的替代甜品通义灵码(TONGYI Lingma),是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写自然语言生成代码单元测试生成代码注释生成代码解释研发智能问答异常报错排查等能力,并针对阿里云。原创 2023-11-23 12:15:35 · 577 阅读 · 0 评论 -
Vite 5 官宣!
11 月 16 日,Vite 5.0 正式发布,这是 Vite 道路上的又一个重要里程碑!Vite 现在使用 Rollup 4,这已经代表了构建性能的大幅提升。此外,还有一些新的选项可以改善开发服务器性能。Vite 4 发布于近一年前,它为生态系统奠定了坚实的基础。随着项目继续在共享基础设施上构建,每周 npm 下载量从 250 万跃升至 750 万。框架不断创新,除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等,还看到新的框架加入并使生态系统更加强大。原创 2023-11-27 10:59:36 · 1833 阅读 · 0 评论 -
webpack配置完全指南
对于入门选手来讲,webpack 配置项很多很重,如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单,基础的配置可以分为以下几个方面:entryoutputmoderesolvemodulepluginsource map等,本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期运行时提供有用的错误消息。原创 2023-11-28 10:50:52 · 1026 阅读 · 0 评论 -
前端性能优化——首页资源压缩63%、白屏时间缩短86%
async、defer 是 script 标签的专属属性,对于网页中的其他资源,可以通过 link 的 preload、prefetch 属性来预加载如今现代框架已经将 preload、prefetch 添加到打包流程中了,通过灵活的配置,去使用这些预加载功能,同时我们也可以审时度势地向 script 标签添加 async、defer 属性去处理资源,这样可以显著提升性能本文主要介绍的是代码层面。原创 2023-11-29 15:07:06 · 1123 阅读 · 0 评论 -
如何给所有的async函数添加try/catch?
阿里三面的时候被问到了这个问题,当时思路虽然正确,可惜表述的不够清晰后来花了一些时间整理了下思路,那么如何实现给所有的async函数添加try/catch呢?通过开发这个插件,了解很多 AST 方面的知识,掌握了一些 babel 的原理友情提醒:不要在生产环境中使用该插件,该插件的功能还太过简陋。实际开发中,大家可以结合具体的业务需求开发自己的插件,一起动手玩一玩 babel如果你现在正在找工作,可以私信“web”进群领取前端面试小册以及更多阿里、字节大厂面试真题合集,和p8大佬一起交流。原创 2023-11-30 12:30:49 · 1137 阅读 · 0 评论 -
前端性能优化——包体积压缩82%、打包速度提升65%
经过上面的一系列优化,可以看到:包体积由原来的2.25M减少到407KB,压缩了82%打包速度由原来的25386ms减少到8949ms,提升了65%这些方式虽然很常规,但确实可以有效地提升项目的性能本文主要介绍的是项目打包构建方面的优化方式,上一篇是业务代码层面的性能优化,其中有很多有趣的方案如果喜欢或有所启发,欢迎 star如果你现在正在找工作,可以私信“web”进群领取前端面试小册以及更多阿里、字节大厂面试真题合集,和p8大佬一起交流。原创 2023-12-01 12:18:55 · 1654 阅读 · 0 评论