编程
文章平均质量分 75
码农巧克零
这个作者很懒,什么都没留下…
展开
-
理解 Next.js 的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念
本篇我们讲解 Next.js 项目所涉及到的等名词概念,帮助大家正确理解 Next.js。本篇已收录到掘金专栏《Next.js 开发指北》系统学习 Next.js,欢迎入手小册《Next.js 开发指南》。基础篇、实战篇、源码篇、面试篇四大篇章带你系统掌握 Next.js!RSC 与 SSR、Streaming 这些技术其实并不冲突,在 Next.js 中其实是结合这些技术的一个综合实现。比如所有组件,无论客户端组件还是服务端组件都会在服务端进行渲染,Streaming 流式传输 HTML。原创 2024-08-28 10:56:19 · 756 阅读 · 0 评论 -
BVH 层次包围结构
这一篇我们说了BVH的原理和代码实现,它适合在元素较多的场景里做选择。原文链接:https://juejin.cn/post/7407621980574875711。原创 2024-08-28 10:54:55 · 253 阅读 · 0 评论 -
react的15个hook汇总
react16有10个react18是5个。原创 2024-08-28 10:45:29 · 386 阅读 · 0 评论 -
Vue的响应式实现
本文为《Vue.js设计与实现》响应系统的作用与实现一章的学习记录与梳理,实现了一个较为基础的响应系统。原文链接:https://juejin.cn/post/7407644269995245608。原创 2024-08-28 10:35:45 · 530 阅读 · 0 评论 -
vite构建Vue3组件并发布npm包
entry: path.resolve(__dirname, "./src/components/index.js"), //指定组件编译入口文件。arduino 代码解读复制代码npm config set registry=https://registry.npmjs.org。js 代码解读复制代码import TestButton from './button/index.vue'import 'vue3-cron/style.css' //引入组件相关样式。原创 2024-08-28 10:28:10 · 672 阅读 · 0 评论 -
前端实习手记(9):修修修修bug
主要就讲一下修复的一些bug还有新写的一个组件思路。原创 2024-08-27 10:44:39 · 324 阅读 · 0 评论 -
前端如何监控用户访问界面时发生了卡顿
监控用户访问界面时发生的卡顿可以帮助前端开发人员识别和解决性能问题。以下是一个详细的代码示例,展示如何使用 JavaScript 监控用户界面卡顿并记录相关信息。原创 2024-08-27 10:41:24 · 148 阅读 · 0 评论 -
前端常用算法集合
假设在今日头条里面,有很多工作人员检查新闻是不是属于虚假新闻,所有新闻真实率到达了98%,工作人员在检验一个真实的新闻把它检验为一个虚假的新闻的概率为2%,而一个虚假的新闻被检验为真实的新闻的概率为5%. 那么,一个被检验为真实的新闻确实是真实的新闻的概率是多大?从[a, b]到[a, b, c],结果其实是[a, b]的结果加上c元素,然后将[a, b]结果中的每一个元素和c进行组合,得到[a, b, ab, c, ac, bc, abc],总数为3+1+3 = 7。这步做完后,最后的元素会是最大的数。原创 2024-08-27 10:39:36 · 659 阅读 · 0 评论 -
前端并发请求控制实践
/ 创建一个副本,以免修改原始数组,原formDatas数据数组。原文链接:https://juejin.cn/post/7406697002539483176。// 正在执行的任务数量。// 向请求池添加新的请求,直到达到最大值。数组用于存储当前正在执行的请求,以及。// 依次执行任务队列里的任务。// 等待最先完成的请求。// 等待所有请求完成。原创 2024-08-27 10:14:05 · 448 阅读 · 0 评论 -
我把前端部署用户提醒做成了一个npm包
2. 我们需要写一个webpack或者vite插件在打包构建完成后拿到hash生成文件,然后输出到/dist目录里,还好我们有。如果webpack或vite调整了公共目录,您应该新建AppUpdate({url:'your/customer/path')首先我们需要有一个获取config.json配置文件的方法,为了不引入axios直接使用。3. 然后前端通过轮询这个文件,对比hash有变化则打开一个弹窗提醒用户有新功能发布。在本地开发时,需要在公共目录中放置一个config.json文件。原创 2024-08-27 10:11:59 · 393 阅读 · 0 评论 -
Tapable: a little module for plugin
Tapable 本质上提供了很多生命周期钩子,方便我们去进行事件注册,比哦那个在不同的时机进行触发。webpack 中的 plugin 正式基于这个机制所以可以在不同的编译阶段调用不同的插件从而影响编译结果。使用例子。原创 2024-08-26 10:59:14 · 805 阅读 · 0 评论 -
怎么满屏的console.log(...)
有兴趣的可以自己拓展学习一些,例如不对node_model下的进行处理,或者是在正式环境打包的时候删除掉 console.log()。在 Webpack 中,Loader 是一种转换工具,它的主要功能是对模块的源代码进行转换处理。这里接受一个到传入来的变量,判断是否是字符串,如果直接打印的字符串的话直接返回就可以了,如果不是的话,那么就进行分割遍历结果就会如下了。这样所有的console.log(...)就会带上你所传入的特殊符号,这样的话其实是没什么太大的用处的,所以下一步需要实现这样的效果。原创 2024-08-26 10:50:57 · 384 阅读 · 0 评论 -
比 setTimeout 强一百倍的 requestAnimationFrame
requestAnimationFrame是一个浏览器的宏任务,它的用法与setTimeout很相似,只是不需要设置时间间隔。使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给用于取消这个函数的执行。原创 2024-08-26 10:41:20 · 337 阅读 · 0 评论 -
if-else嵌套太深怎么办?
if-else嵌套过深的问题是前端开发中常见的挑战。通过本文提供的多种解决方案,如早返回、对象字面量、策略模式、多态和函数式编程技巧,开发者可以根据实际需求选择合适的优化方案,从而提高代码的可读性、可维护性和性能。原文链接:https://juejin.cn/post/7406538050228633641。原创 2024-08-26 10:37:06 · 747 阅读 · 0 评论 -
探讨微信小程序与H5骨架屏的实现方式
骨架屏作为提升用户体验的重要手段,在微信小程序和 H5 开发中都有着广泛的应用。本文通过对两者的实现方式进行详细讲解,希望能为前端开发者提供一些参考和思路。通过合理使用骨架屏,不仅可以优化用户体验,还能提升整个应用的响应速度和用户满意度。原文链接:https://juejin.cn/post/7406269938008244251。原创 2024-08-26 10:33:48 · 404 阅读 · 0 评论 -
前端性能优化 - 提升 LCP(Largest Contentful Paint)
是一个关键的 Web 性能指标,用于衡量网页的加载性能。具体来说,LCP 是指从用户请求页面开始到页面主体内容(如大图像、视频或大块文本)完全加载并显示在视口中所需的时间。LCP 越短,用户感受到的页面加载速度就越快,这对提升用户体验和页面留存率至关重要。为了获得良好的用户体验,Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒,则需要进行优化。三个关键指标中其它两个指标是FID(First Input Delay,首次输入延迟)和。原创 2024-08-24 16:17:28 · 713 阅读 · 0 评论 -
JavaScript Sets中关于union、intersection、difference等功能介绍
JavaScriptSet是在 ES2015 规范中引入该语言的,但它似乎总是不完整的。这种情况即将改变。集合是值的集合,其中每个值只能出现一次。在 ES2015 版本的Set中,可用功能主要围绕创建、添加到Set中、从 中删除以及检查 的成员资格。如果您想对多个集合进行操作或比较,就必须编写自己的函数。值得庆幸的是,为制定 ECMAScript 规范而成立的 TC39 委员会和浏览器一直在努力解决这一问题。我们现在可以在 JavaScript 实现中看到union和difference等函数。原创 2024-08-24 16:14:19 · 722 阅读 · 0 评论 -
我的常用 Rxjs API
这里是我平常会用到的 Rxjs 中的 API。先介绍 pipe 以及 pipe 中高频使用 Operator。原创 2024-08-24 16:02:28 · 653 阅读 · 0 评论 -
纠结多年终于决定彻底放弃Tailwindcss
文章还会更新,想当什么补充什么。以上几个最大的痛点是导致我对这个库关注多年,尝试多次,却迟迟没有投入使用,最终决定放弃的原因。我相信肯定很多同学会有同感,也会有很多持反对意见,非常欢迎评论区讨论,如果真能解决这几个大痛点,我会毅然决然All in tw。↓↓↓↓🆕 以下为更新内容 时间升序↓↓↓↓。原创 2024-08-24 15:58:01 · 574 阅读 · 0 评论 -
前端性能优化 - 提升 FID(First Input Delay)
FID 是的三个关键指标之一,FID 是用户在加载页面后与页面进行第一次交互时的延迟时间。这个延迟时间主要由主线程上的任务阻塞造成的。如果主线程在处理其他任务(如解析和执行 JavaScript)时,用户的输入将被延迟响应,导致较高的 FID 值。因此,降低主线程的阻塞时间是优化 FID 的核心。为了获得良好的用户体验,Google 建议 FID 时间在 100 毫秒以内。如果 FID 超过 300 毫秒,则需要进行优化。优化 FID 是提升用户体验和页面性能的重要一环。原创 2024-08-24 15:49:17 · 681 阅读 · 0 评论 -
使用 YApi 管理 API 文档,测试, mock
自定义脚本可根据请求的参数,cookie 信息,使用 javascript 脚本自定义返回的数据。我们假设有个场景,我希望通过 cookie "_type" 控制列表页面数据显示,假设 _type 是 error,那么列表显示异常错误信息;假设 _type 是 empty ,列表显示为空。可使用下面代码实现:代码解读复制代码。原创 2024-08-23 14:51:13 · 315 阅读 · 0 评论 -
超越 Nginx!号称下一代 Web 服务器,用起来够优雅!
Caddy是一款功能强大,扩展性高的Web服务器,目前在Github上已有38K+Star。Caddy采用Go语言编写,可用于静态资源托管和反向代理。对比Nginx复杂的配置,其独创的Caddyfile配置非常简单;可以通过其提供的Admin API实现动态修改配置;默认支持自动化HTTPS配置,能自动申请HTTPS证书并进行配置;能够扩展到数以万计的站点;可以在任意地方执行,没有额外的依赖;采用Go语言编写,内存安全更有保证。原创 2024-08-23 14:49:16 · 776 阅读 · 0 评论 -
【前端词典】提高幸福感的 9 个 CSS 技巧
在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用,觉得挺高效实用,所以也就有了这篇文章。原创 2024-08-23 14:47:25 · 607 阅读 · 0 评论 -
JavaScript 中 Signals 的演变
以上简单介绍了 Javascript 中 Signals 的演变,希望对正在学习前端的你有所帮助。当然,这并不是所有的内容,后续我还会一直更新这篇文章,从更多方面去探讨前端中的 Signals。作者:D哥AI前端链接:https://juejin.cn/post/7207365636695031865来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。原创 2024-08-23 14:37:45 · 906 阅读 · 0 评论 -
前端Nginx知识梳理
Nginx(engine x) 是一个高性能的HTTP和反向代理web服务器。Nginx以事件驱动的方式编写,所以有非常好的性能,同时也是一个非常高效的反向代理、负载平衡服务器。在性能上,Nginx占用很少的系统资源,能支持更多的并发连接,达到更高的访问效率;在功能上,Nginx是优秀的代理服务器和负载均衡服务器;在安装配置上,Nginx安装简单、配置灵活。Nginx支持热部署,启动速度特别快,还可以在不间断服务的情况下对软件版本或配置进行升级,即使运行数月也无需重新启动。原创 2024-08-23 14:36:32 · 387 阅读 · 0 评论 -
2024金九银十前端高频面试八股文(精选重点题型)
为了尽量多给出一些知识点,所以不会针对问题进行机械式的回答,可能更多的需要大家自行理解和抽象。其中大部分面试题或许是我自己以前写过的,或者是我觉得别人写的不错的题型。希望能给准备跳槽或者面试的朋友有所帮助。由于篇幅原因 完整版请看文末。第四部分: 计算机基础。第五部分: 高频考点。原创 2024-08-22 11:54:08 · 191 阅读 · 0 评论 -
初中级前端高频面试题(精选高频)
从前端学习到找一份合适的工作,大大小小的面试必不可少,所以我对初级前端面试题进行了初步整理,也方便自己查阅,这些题型针对于初入职场根基不稳的小白,初级前端面试题和高级题型完整版。5 如何创建块级格式化上下文(block formatting context),BFC有什么 用。6 display 、float 、position的关系。1 css sprite是什么,有什么优缺点。7 清除浮动的几种方式,各自的优缺点。8 new操作符具体干了什么呢?4 什么是FOUC?9 css3有哪些新特性。原创 2024-08-22 11:40:53 · 137 阅读 · 0 评论 -
前端面试考点多?看这些重点就够了
1. Vue3.0 所采⽤的 Composition Api 与 Vue2.x 使⽤ 的 Options Api 有什么不同。6. 说说Node中的EventEmitter?3. ⽤Vue3.0 写过组件吗?5. 说说对 Node 中的 process 的理解?6. 说说Vue 3.0中Treeshaking特性?2. 说说对 Node 中的 fs模块的理解?3. 说说对 Node 中的 Buffer 的理解?4. 说说对 Node 中的 Stream 的理解?1. 说说你对Node.js 的理解?原创 2024-08-22 11:26:38 · 305 阅读 · 0 评论 -
一名【合格】前端工程师面试必备八股文
以前我在各平台上看到面试贴就直接刷掉的,从不会多看一眼,直到今年我开始准备面试时,才发现很多面试经验贴特别有用,看这些帖子的过程中对我的复习思维形成影响很大,所以我现在把最近自己整理好的一些前端高频面试题分享出来,希望能帮到接下来要找工作的朋友。9. react异步渲染的概念,介绍Time Slicing 和 Suspense。22. sum(2, 3)实现sum(2)(3)的效果。2. 介绍冒泡排序,选择排序,冒泡排序如何优化。7. ES6中的map和原⽣的对象有什么区别。5. 介绍⼆叉搜索树的特点。原创 2024-08-22 11:12:41 · 389 阅读 · 0 评论 -
写给初中级前端的高级进阶指南
这篇文章会提到非常非常多的学习路线和链接,如果你还在初中级的阶段,不必太焦虑,可以把这篇文章作为一个进阶的路线图。准备跳槽或者找工作的小伙伴同样可以借鉴参考,会对自己入职大厂有很大的帮助,由于篇幅原因,⼀ 、HTML 、HTTP 、web综合问题。2 bind 、call 、apply 区别。,在未来的时日里朝着这个方向努力就好。5 如何实现⼀个 apply 函数。4 如何实现⼀个 call 函数。3 HTTP的几种请求方法用途。3 如何实现⼀个bind 函数。1 前端需要注意哪些SEO。原创 2024-08-22 10:55:41 · 159 阅读 · 0 评论 -
现代前端框架的重要概念
尽可能多地去学以让更好的你理解它们所基于的概念。你将需要了解基本数据类型、函数、基本运算符和文档对象模型 ( DOM ),这是 HTML 和 CSS 在 JS 中的表示。除此之外的一切也都 OK,但并不严格要求某个精通框架或库。如果你是一个完完全全的新手,应该是一个不错的入门资料。持续学习,直到你感到自信为止,然后继续前进,直到你再次感到自信为止。当掌握了足够的 JS / TS 知识后,你就可以开始学习框架。其他的知识你可以并行学习。转载 2024-08-22 10:24:57 · 7 阅读 · 0 评论 -
掌握这20个JS技巧,做一个不加班的前端人
在我们的日常任务中,我们会编写诸如排序、搜索、查找唯一值、传递参数、交换值等功能,所以在这里我列出了我的速记技巧列表!大多数这些 JavaScript Hacks 使用 ECMAScript6(ES2015) 以后的技术,尽管最新版本是 ECMAScript11(ES2020)。转载 2024-08-22 10:22:37 · 6 阅读 · 0 评论 -
10个常见的前端手写功能,你全都会吗?
万丈高楼平地起,地基打的牢,才能永远立于不败之地。今天给大家带来的是10个常见的 JavaScript 手写功能,重要的地方已添加注释。有的是借鉴别人的,有的是自己写的,如有不正确的地方,欢迎多多指正。转载 2024-08-22 10:20:25 · 3 阅读 · 0 评论 -
前端如何设置定时触发查询?setInterval
方法来设置定时触发一个查询方法。你可以将这个定时器放在 Vue 组件的生命周期钩子。在 Vue.js 中,你可以使用 JavaScript 的。中,这样当组件被挂载到 DOM 上后,定时器就会开始运行。通过这种方式,你可以定期触发一个查询方法,执行相应的操作。,在清除定时器之前它可能是。,表示这个方法不返回任何值。转载 2024-08-22 10:17:49 · 5 阅读 · 0 评论 -
前端 封装 SCSS 多行省略
这个 mixin 是一个强大的工具,用于处理多行文本溢出时的显示效果,特别适用于需要在有限空间内展示文本的场景。通过使用这个 mixin,你可以保持代码的简洁性和可读性,同时实现复杂的文本处理效果。更多详解点此。转载 2024-08-22 10:16:21 · 4 阅读 · 0 评论 -
一些常被人轻视的前端面试题
最近面试的时候发现,有一些题不是特别难,但是突然问起很多人又答不上来,在这里我为大家整理了一部分常见但又经常被忽视的问题及答案,希望大家可以多看一看,不要再被面试官打个措手不及了。原创 2024-08-21 18:48:04 · 97 阅读 · 0 评论 -
2024年我的前端面试八股文总结
金九银十,因为各种原因我离职了,然后开始步入找工作的情况,下面简单复盘一下多家公司被问到的一些面试题。后面的题目很多都是重复性的或者相关的,我只是简单说说自己回答,具体答案你要自己去学习去理解,这样才是你的。a. var a = {name: "前端开发"};var b = a;33. a,b两个按钮,点击aba,返回顺序可能是baa,如何保证是。c. var a = {b: {c: 1}}存放在哪⾥。b. var a = {b: 1}存放在哪⾥。b. setState什么时候是同步的。原创 2024-08-21 18:27:34 · 292 阅读 · 0 评论 -
2024最新高频有答案的前端面试题
最近我花了一些时间,为大家整理了2024年各一、二线互联网公司的前端面试题,内容包括JavaScript、算法、网络&安全、Vue、React等大量的前端知识点和相关面试题。答案和解析也整理在文中了.网上的面试题一大堆,鱼龙混杂,一方面多数题目质量不高,另一方面有答案的很少,即使拿到面试题对自己的帮助也不大。正在跳槽和找工作的小伙伴快来背吧,高薪职位再向你们招手。原创 2024-08-21 18:21:48 · 148 阅读 · 0 评论 -
最近两周出去面试遇到的面试题(前端初级、长更)
近期整理了一下高频的前端面试题,大家一起来学习。如有问题,欢迎指正!5. rudux和全局管理有什么区别(数据可控、数据响应)3. 介绍下表单提交,和formData有什么关系。2. formData和原⽣的ajax有什么区别。1. 使⽤canvas绘图时如何组织成通⽤组件。15. npm2和npm3+有什么区别。也希望这些题帮助大家早日找到高薪工作。12. 服务端怎么做统⼀的状态处理。13. 如何对相对路径引⽤进⾏优化。14. node⽂件查找优先级。7. 介绍MVP怎么组织。11. 常⽤的中间件。原创 2024-08-21 18:12:03 · 141 阅读 · 0 评论 -
前端下载文件so easy ,你还可以这样做
通常情况,下载文件我们需要让后端构建文件,然后将文件流返回进行下载。本文将介绍一种不需要后端构建文件流,前端自行下载文件的方式。在开发中。比如:将一个对象数据下载到文件中。数据已经在前端展示了,这个时候如果没有特殊需求,我们可以直接通过上述方式在前端就可以搞定。更多八股文信息【点击此处】转载 2024-08-21 18:05:30 · 15 阅读 · 0 评论