自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

pingan8787

欢迎关注微信公众号【前端自习课】, 每日清晨,享受一篇前端优秀文章。

  • 博客(2271)
  • 收藏
  • 关注

转载 【总结】2324- 万字长文入门前端全球化

时间的往事--记一次与夏令时的斗智斗勇:https://jiangyixiong.top/2021/05/25/%E6%97%B6%E9%97%B4%E7%9A%84%E5%BE%80%E4%BA%8B%E2%80%94%E2%80%94%E8%AE%B0%E4%B8%80%E6%AC%A1%E4%B8%8E%E5%A4%8F%E4%BB%A4%E6%97%B6%E7%9A%84%E6%96%97%E6%99%BA%E6%96%97%E5%8B%87。了解的越多越发现这个世界的“多样性”。

2025-04-02 07:45:17 33

转载 【React】2323- 在React中,父子组件怎么通信?没有关联的组件呢?

常见的通信方式包括父组件向子组件传递数据(props)、子组件向父组件传递数据(回调函数),以及没有直接关系的组件之间的通信(Context API、全局状态管理库等)。和回调函数实现,而没有直接关系的组件之间的通信可以使用Context API、自定义Hooks或状态管理库(如Redux或Recoil)。父组件可以将一个回调函数作为prop传递给子组件,子组件在需要时调用这个回调函数,将数据传递回父组件。父组件可以将一个回调函数作为prop传递给子组件,子组件调用这个回调函数并传递数据给父组件。

2025-03-24 12:20:50 9

转载 【JS】2322- 深入解析前端插件机制:以埋点SDK与Webpack为例

最近在做前端监控的全链路项目, 刚好埋点SDK这边的架构设计需要用到插件机制, 就想着和之前学过的webpack插件机制进行一个类比, 看看有哪些共通和差异之处。在现代软件开发中,插件机制是实现系统扩展性和灵活性的核心设计模式之一。插件机制通过将核心功能与扩展功能分离,使得系统能够在不修改核心代码的情况下扩展能力。:ByteTop 的监控场景要求“永不中断”,Webpack 的构建场景允许“快速失败”。为例,深入探讨两者的插件机制设计异同,并揭示其背后的设计哲学。

2025-03-20 09:16:54 14

转载 WiseMindAI:本地 AI 知识库应用,集成 10+AI 模型,支持笔记、海报生成与AI对话等...

???? 工具名称:WiseMindAI???? 官方网址:https://wisemind-ai.com/???? 下载地址:https://wisemind-ai.com/download/???? 支持语言:简体中文、繁体中文和英文???? 支持平台:Windows 端、Mac 端WiseMindAI 是 Chris 开发的一款 AI 智能学习助手,本文会介绍比较详细,内容较多,也可以进官网查看完整介绍!视频介绍接下...

2025-03-05 08:17:21 187

转载 【总结】2321- 轻松实现同域标签页消息传递

本文转载于稀土掘金技术社区,作者:从谷底向上https://juejin.cn/post/7474962750701322277在浏览器中,两个同域的标签页(Tab)之间通信有多种实现方式,以下是常见的几种方法及其原理和代码示例:1.使用localStorage事件当修改localStorage时,会触发storage事件,其他同源页面可以监听该事件实现通信。// Tab A 发送消...

2025-03-03 07:58:35 19

转载 真心建议前端人冲一冲新兴领域,工资高前景好!

最近,Deepseek全球爆火让AI技术又一次进入了快速发展期!百度、字节、腾讯等等巨头互联网公司,纷纷接入DeepSeek,加速落地AI应用!这让「大模型应用开发工程师」一跃成为炙手可热的岗位!DeepSeeK甚至还开出154W的高薪,挖掘会大模型技术、懂落地的AI人才!作为技术人,如何不被时代抛弃,享受AI技术带来的就业红利?!????知乎知学堂特发起:行业前沿资源——「大模型应用开发工程师」????...

2025-03-01 22:01:03 25

转载 【总结】2320- 初探海报编辑器

本文作者系360奇舞团前端开发工程师最近在调研海报编辑器 想要做到对一张图片进行添加文本 图片之类的操作 我就去调研了一些开源的海报编辑器。其实在web上关于图片的编辑器还是很多的,种类也很丰富,比如 miniPaint基本复刻了 ps,基于 farbic.js的 Pintura.和 tui.image-editor,基于 Konva的 polotno等等。那我们的现阶段是实现一个轻量级图文编辑器...

2025-02-28 21:42:41 44

转载 【总结】2319- 如何在前端开发中实现零停机部署

前言探讨了在前端开发中实现零停机部署的实用策略,帮助开发者在不影响用户体验的情况下平滑地交付更新。今日文章由 @Manav Saha 分享,前端早读课@飘飘翻译。在前端开发领域,更新期间保持无缝的用户体验至关重要。零停机部署可确保用户在新功能和改进推出时不会遇到任何中断。实现这一点能够显著提升用户体验和运营效率。在本文中,我们将探讨在前端开发中实施零停机部署的实用策略,帮助你平稳地交付更新,而不影...

2025-02-27 12:25:04 42

转载 【总结】2318- 纯前端怎么实现检测版本更新,请看这篇!

背景单页应用(Single Page Application,简称SPA)是一种现代Web应用程序架构,通过动态重载页面中的部分内容来提供更流畅和更响应式的用户体验。由于SPA在客户端(用户的浏览器)运行大量的JavaScript代码,并且与传统的多页应用不同,它不会每次操作都从服务器重新加载整个页面内容,因此在性能和用户体验上有显著优势。然而这种应用也存在一定弊端,譬如当服务端更新时(接口请求体...

2025-02-23 22:44:53 41

转载 【面试】2317- 字节前端校招一面

今天带来一篇字节跳动的前端工程师一面面经,针对校招(包括实习生招聘),主要还是考察候选人常规的前端相关技能,这些知识点很多都在我们的刷题小程序里,除此之外的算法和项目经验,就得靠大家自己去积累和挖掘了。下面是正文部分。字节前端工程师一面 面试分享给大家哈喽哈喽,大家好,我是你们的金樽清酒。在一个平常的一天,我上着班,突然接到一个电话。您好,我是字节跳动的hr,我们这边是抖音电商部门,请问您还在考...

2025-02-21 07:42:20 38

转载 【CSS】2316- 10 个非常有用的 CSS 单行代码,你可能没有使用过它们

以下可能是你没有使用过,但绝对有用的 10 个 CSS 功能!1. 创建布局您是否曾尝试过制作类似 Pinterest 的布局,而有的项目具有不同的高度?网格和弹性框经常会留下尴尬的间隙,看起来不太好看。解决方法:使用 columns 属性。columns:300pxauto;这会将您的内容拆分为响应式列。每列宽度至少为 300 像素,浏览器将根据屏幕尺寸决定适合多少列。没有间隙,没有压力!2...

2025-02-19 07:44:19 11

转载 【总结】2315- 深入探讨浏览器渲染过程

原文地址:Exploring the browser rendering process[1],2024.11.03byAbhishek Saha浏览器的渲染过程是多个线程、进程和阶段的复杂编排,它将原始的 HTML、CSS 和 JavaScript 转换为屏幕上的交互像素。虽然讨论浏览器的渲染过程的话题已经并不是什么新鲜事了,而且关于这方面的内容也是足够多了。对我来说,它依然是一个有趣的话题,...

2025-02-18 07:35:04 19

转载 【总结】2314- Chrome 推出全新的 DOM API!

今天来聊 Chrome 最新推出的一个 DOM API智能总结:这篇文章讨论了在 Web 开发中操作 DOM 结构时使用insertBefore()的潜在问题,并介绍了 Chrome 133 引入的新 APImoveBefore()。传统的insertBefore()会导致元素状态重置,因为它在底层执行的是删除然后插入的操作,这在处理<video>、<iframe&...

2025-02-17 22:03:24 32

转载 【总结】2131- 前端加载超大图片(100M以上)实现秒开解决方案

前言前端加载超大图片时,一般可以采取以下措施实现加速:图片压缩:将图片进行压缩可以大幅减小图片的大小,从而缩短加载时间。压缩图片时需要注意保持图片质量,以免影响图片显示效果。图片分割:将超大图片分割成多个小图块进行加载,可以避免一次性加载整个图片,从而加快加载速度。这种方式需要在前端实现图片拼接,需要确保拼接后的图片无缝衔接。CDN 加速:使用 CDN(内容分发网络)可以将图片缓存在离用户更近的节...

2025-02-15 15:35:08 13

转载 【AI】2312- DeepSeek 使用指南:从 API Key 到本地部署,一步到位,推荐 3 款 AI 客户端...

关注 “AI 工具派”探索最新 AI 工具,发现 AI 带来的无限可能性!近期推荐????2024 热门 AI 工具????2024 热门 AI 工具???? AI视频生成工具|AIPPT工具|AI代码编辑器???? AI文本转语音|AI音视频转录|AI翻译插件最近 DeepSeek 不仅在 AI 圈子内大火,还成功“出圈”,成为全民热议的话题,这非常好,AI 技术正在走进了大众生活,2025 年 AI 的普及将更加...

2025-02-11 21:44:55 160

转载 【TS】2311- TypeScript 5.8 带来哪些改变?一文读懂新版本亮点

学习要点条件类型推断:TypeScript 5.8 改进了条件类型推断,自动推断函数返回类型,减少手动检查。ESM 和 CommonJS 互操作性:支持在 --module nodenext 下从 CommonJS 模块 require() ECMAScript 模块。--erasableSyntaxOnly 选项:确保代码中仅使用可删除的 TypeScript 语法,提高兼容性。计算属性名保留:...

2025-02-10 07:49:03 85

转载 【JS】2310- JavaScript 中处理 null 和 undefined 的演进

在 JavaScript 引入可选链(optional chaining)和空值合并运算符(nullish coalescing operator)之前,开发者需要使用多种方法来安全地访问对象的嵌套属性以及处理可能为null或undefined的值。这些方法虽然有效,但存在一些痛点。ES2020 引入的可选链和空值合并运算符则极大地简化了这些问题的处理。1. 使用逻辑与运算符 (&...

2025-02-09 20:48:48 18

转载 【JS】2309- 为什么我推荐使用智能化 async ?

作者:FuncJinhttps://juejin.cn/post/7121853787794325512摘要开发中无论怎样都会产生网络请求,这样一来自然也就避免不了大量使用then、catch或try catch来捕获错误,而捕获错误的代码量是随着网络请求的增多而增多,那应该如何优雅的系统性捕获某个网络请求中所产生的所有错误呢?首先最常用的两种处理网络请求的形式即Promise与async(事实上...

2025-02-07 22:37:17 44

转载 【总结】2308- 2025,重新认识 HTML!

好久没更新 HTML 相关的内容了,最近关注了下实际上 HTML 也一直在高速发展,今天我们一起来看看 HTML 最近有哪些值得关注的新特性。可以定制样式的下拉菜单浏览器为了保持向后兼容性,并不会贸然改变像 <select> 和 <option> 这些元素的样式。这时候,一个巧妙的引入便是“选择加入”机制,它让开发者在可控的情况下,自由施展创意。起初,大家期待的解决方案是新...

2025-02-05 22:45:18 24

转载 【JS】2307- setTimeout是准时的吗?

本文转载于稀土掘金技术社区,作者:半壳椰子https://juejin.cn/post/7420059840971980834引言最近在一些论坛上,有人讨论setTimeout的准确性。因此,我进行了探索,以解答这个问题。结果发现,setTimeout并不完全可靠,因为它是一个宏任务。所指定的时间实际上是将任务放入主线程队列的时间,而不是任务实际执行的时间。`setTimeout(callb...

2025-02-01 12:11:51 22

转载 【总计】2306- html2canvas 图片跨域问题的解决方案及其原理

本文转载于稀土掘金技术社区,作者:小小小小宇https://juejin.cn/post/7402845471646285864html2canvas是一个用于将 HTML 元素渲染为画布(Canvas)的库。然而,当你尝试将包含跨域图片的页面渲染为画布时,可能会遇到跨域问题。这个问题通常会导致画布被标记为“已污染”,从而无法导出图像数据。解决方案及其原理使用CORS头:确保跨域图片的服务器...

2025-01-27 21:46:56 195

转载 【JS】2305- JavaScript 冷知识合集:这些特性你都知道吗?

JavaScript有很多奇怪的不容易理解的特性(bug?),想要写出比较健壮的JavaScript代码,又不能不去了解这些知识点。今天带来 一篇短文,介绍了一些常见的冷知识。另外,推荐大家都去看看《Javascript: The Good Parts》这本书,薄薄的一本,也不会耽误刷小视频的时间下面是正文部分。JavaScript 冷知识合集:这些特性你都知道吗?JavaScript 作为一门动...

2025-01-26 23:51:55 24

转载 【React】2304- React 首次推出原生的动画支持!

React 一直是前端开发者最受欢迎的框架之一。但是 React 的动画支持似乎一直是个短板。虽然 Vue 和 Svelte 等其他框架相继推出了便于实现动画的 API ,React 开发者长期以来不得不依赖于第三方库,如 Motion for React 和 React Spring 来补足这一缺陷。最近,这种情况终于迎来了转机。React 团队即将推出了一个名为 <ViewTransit...

2025-01-24 21:58:10 26

转载 【Web技术】2303- 前端在本地开发还能用https?

前言一般情况下,前端在开发本地项目的时候大都用不到https,但有些特殊情况不同,比如你需要使用service worker,又或者需要使用cookie而后端又设置了secure。nextjs本身提供了直接通过https启动项目的方法,所以假如『https://localhost:port[1]』 这种域名就能满足需求的话,建议直接按照nextjs官方提供的方法进行配置即可。API Refere...

2025-01-22 08:08:54 24

转载 【总结】2302- 10年前端的一些开发经验总结

今天带来一位10年老前端的一些思考,看看10年的经验总结下来,有哪些是我们可以学习和借鉴的。作者的观点也不一定适合每个团队或者每个场景,大家还是要结合实际情况来具体分析哈。下面是正文部分。开发注意事项考虑边界值:如果要展示一个列表,就要考虑列表为空、列表长度超过一页的情况;如果展示的是文字,则要考虑文字为空、文字超长的情况;访问a.b.c时,a或b是否可能为undefined。考虑特殊场景:如交互...

2025-01-19 22:50:19 18

转载 【总结】2301- 目前最快的 Node.js HTTP 客户端库 Undici 发布 v7 版本!

最初发布于 2018 年的现代 Node.js HTTP 客户端库 —— Undici,在 2024 年取得了显著的增长。下载量从 2023 年的超过 1.89 亿次飙升至 2024 年(1 月至 11 月)的惊人的 4.37 亿次以上,这突显了它在 Node.js 生态系统中的关键作用。今天,Node.js Undici 工作组欣然宣布 Undici v7 的发布。此版本引入了对 fetch()...

2025-01-18 21:06:57 50

转载 【总结】2300- Web端接入第三方微信登录

一、微信开放平台申请网站应用1、微信开放平台[1]中注册开发者账号,在管理中心选择网站应用,创建相关应用。按照要求准备好资料,提交审核即可,一般2天左右就会有审核结果。注意:基本信息-应用官网:填写公司官网即可;开发信息-授权回调域:只能填写一个回调域,无需带上http或者https,这个配置十分重要,用户扫码成功后,会跳转到这个回调域;2、应用审核通过后,会显示相关详情信息,在后面的接入流程中会...

2025-01-17 20:05:11 30

转载 【总结】2299- 矢量图SVG应用探索

随着计算机技术的不断发展,图形设计和多媒体制作领域对图像质量、可编辑性和跨平台兼容性的要求越来越高,而矢量图作为一种强大的图像类型,正好满足了这些需求。在软件开发中,基于矢量图无限缩放性、小文件体积、高度可编辑性、跨平台兼容性和透明背景等独特优势,也会被大家广泛使用。01矢量图与SVG矢量图,也称为向量图,是一种基于数学方程和几何属性的图形表示方法。它不同于位图,位图由像素组成,缩放时可能出现失真...

2025-01-16 08:24:19 36

转载 【总结】2298- 关于window.open 被浏览器拦截解决方案

本文转载于掘金社区,作者:keer6https://juejin.cn/post/7414305106825019402前言在项目开发中,点击支付按钮后需要发送支付请求,并在请求完成后的回调中,经过一系列判断,符合某种条件下弹出一个新窗口页面。自然想到使用window.open,但发现该操作会被浏览器拦截。分析原因当浏览器检测到非用户操作产生的新弹出窗口时,会对其进行阻止,因为浏览器认为这可能是...

2025-01-15 08:02:29 40

转载 【总结】2297- 前端金额运算精度丢失问题及解决方案

前言前端开发中难免会遇到价格和金额计算的需求,这类需求所要计算的数值大多数情况下是要求精确到小数点后的多少位。但是因为JS语言本身的缺陷,在处理浮点数的运算时会出现一些奇怪的问题,导致计算不精确。本文尝试从现象入手,分析造成这一问题原因,并总结和整合一些通用的解决方案,以供大家参考。现象回顾下面的是JS进行数值运算过程中常见的问题,这个问题有个专业的名称叫精度丢失。在 JavaScript 中整数...

2025-01-12 20:27:27 32

转载 【总结】2296- 一文彻底说清楚SSR渲染

服务器端渲染(Server-side rendering,简称 SSR)已经存在了一段时间,但值得深入了解。这种技术可以让你的网页应用更快,同时更具 SEO 友好性。在本指南中,我们将解释什么是 SSR、为什么你可能需要使用它,以及如何轻松实现它。我们会覆盖基础知识,比较 SSR 和客户端渲染(CSR),并讨论一些实际案例。什么是服务器端渲染?从本质上讲,服务器端渲染是指在服务器上渲染网页,而不是...

2025-01-11 22:10:49 83

转载 【JS】2295- JavaScript 冷知识合集:这些特性你都知道吗?

JavaScript有很多奇怪的不容易理解的特性(bug?),想要写出比较健壮的JavaScript代码,又不能不去了解这些知识点。今天带来 一篇短文,介绍了一些常见的冷知识。另外,推荐大家都去看看《Javascript: The Good Parts》这本书,薄薄的一本,也不会耽误刷小视频的时间下面是正文部分。JavaScript 冷知识合集:这些特性你都知道吗?JavaScript 作为一门动...

2025-01-10 22:10:15 33

转载 【总结】2294- 太神奇了,仅使用彩色字体实现代码高亮

通常情况下,我们要实现代码高亮功能,需要借助复杂的语法高亮库,例如Prism[1]或highlight.js[2]这些库的基本原理是扫描代码,并将关键词包裹一层标签,然后通过CSS样式改变代码颜色。但是,这种实现会导致页面非常臃肿,增加了很多额外的标签,就像这样那么,有没有办法可以在不改变页面HTML结构的情况下高亮一段代码呢?其实也是有的,之前写过一篇文章,可以利用 CSS Custom Hig...

2025-01-09 23:55:06 82

转载 【总结】22931 JavaScript 实现电子签名

签名板在网页应用中扮演着重要角色,它们能够记录用户的手写签名或者绘图,从而提升了用户体验。在接下来的内容中,我将指导你如何利用 JavaScript 来开发一个功能丰富的签名板。这个签名板不仅支持自定义和响应式设计,还具备对触摸设备的兼容、多样的笔触样式选择,以及将签名导出为不同格式图片的能力。此外,我们还将探索如何整合像 signature_pad 这样的先进工具来增强签名板的功能。最终效果如下...

2025-01-08 23:41:25 37

转载 【面试】2292- 为什么前端打包出来的静态文件名字是一串 Hash 值 ?

前端打包出来的静态文件名带有一串 Hash 值,主要是为了实现以下几个目的:缓存有效性:当文件内容发生变化时,Hash 值也随之改变,这意味着浏览器能够识别文件的更新。如果文件内容没有变化,Hash 值保持不变,浏览器可以从缓存中加载文件,节省网络带宽和提高加载速度。避免缓存问题:在开发和部署过程中,可能会遇到浏览器缓存旧的文件版本的问题。引入 Hash 值后,即使文件的路径没有变化,当文件内容...

2025-01-07 08:35:03 28

转载 【总结】2291- 聊聊前端技术调研到底应该怎么做?

由于某次需求的需要,我进行了一次技术调研,内容是调研前端将 pdf 文件转为图片的解决方案,我接到这个需求的第一时间,立马打开搜索引擎,翻看了十分钟后,~很快啊~得出了一个口头结论但这肯定是不行的,十分钟就能整明白的事情就不叫技术调研了,也无需技术调研,然而如何摆好一个技术调研的正确姿势,也没有啥标准模板,让开发人员写文档本来就够痛了,再加上一个没有标准的场景,痛上加痛,既然我想做好这次技术调研,...

2025-01-06 23:31:50 22

转载 【总结】2290- 聊聊前端常见的数据加密

前言你是否有过这样的经历?在注册一个新网站时,需要填写个人信息,例如姓名、邮箱、手机号码,甚至身份证号码。你可能会担心,这些信息会被泄露,被不法分子利用。前端数据加密,就是解决这个问题的关键技术之一。它可以在数据传输到服务器之前,对其进行加密处理,即使数据被窃取,也无法被轻易破解。什么是前端数据加密?前端数据加密是指在数据从用户浏览器传输到服务器之前,对其进行加密处理的技术。它将明文数据转换为密文...

2025-01-05 21:29:09 60

转载 【面试】2289- 如何回答出让面试官满意的前端性能优化?

相信大家在平常的面试过程中或多或少都被问到过前端性能优化如何实现,但是大部分同学的回答可能说一说自己做了aa、bb、cc...配置;亦或是说了这些配置之后,没有量化的结果去衡量自己的优化到底有没有用。这时候面试官可能就会想:“这位同学的性能优化知识,不成体系,想到哪儿说到哪儿,并且他没有的量化指标,谁知道他是不是从网上背的配置呢。”本篇文章不会提及过多的具体实现,只会提方向,如何回答问题,具体的每...

2025-01-03 23:55:53 73

转载 【总结】2288- 如何回答出让面试官满意的前端性能优化?

相信大家在平常的面试过程中或多或少都被问到过前端性能优化如何实现,但是大部分同学的回答可能说一说自己做了aa、bb、cc...配置;亦或是说了这些配置之后,没有量化的结果去衡量自己的优化到底有没有用。这时候面试官可能就会想:“这位同学的性能优化知识,不成体系,想到哪儿说到哪儿,并且他没有的量化指标,谁知道他是不是从网上背的配置呢。”本篇文章不会提及过多的具体实现,只会提方向,如何回答问题,具体的每...

2025-01-02 23:31:53 38

转载 【总结】2287- TS 超越 JS,成为新的标准

最近,TSH 发布了一年一度的前端状态调查结果,本文将探讨 2024 年前端的现状。前端框架过去一年使用过的前端框架:过去一年使用过的渲染框架:当前前端框架现状:React与Next.js的主导地位:React凭借其强大的社区支持和生态系统,在前端开发中持续占据主导地位。同时,Next.js作为React应用的全栈框架,因其服务端渲染、高效的路由以及对React 19新特性的早期采用,而备受开发者...

2025-01-01 21:52:40 32

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除