- 博客(1967)
- 收藏
- 关注
转载 【性能优化】1999- 浏览器跨域带来的一些性能问题
由于 Web 的开放特性,同样是糊页面,Web 前端工程师往往要和 CORS(跨域请求)做一些斗争,例如我之前遇到的一个 《SVG 图片字体失效问题》 就是 CORS 引起的。????对 CORS 不太了解的同学,可以看我之前翻译的这篇文章《15 张精美动图全面讲解 CORS》,图文并茂,基本上可以对 CORS 有个大致的理解CORS 除了会带来一些资源加载失败的问题,它其实还会对一些性能场景带来一些干...
2024-03-28 13:11:29 2
转载 45k*16薪,进字节了!
正文前段时间,掘金热帖《放心,前端死不了》在前端圈疯传。百度前端大佬表明:“前端技术是依托于互联网行业的,只要行业还在,它就会有用武之地,就会有价值。”总的来说,技能跟上发展,前端就不会死。谁掌握得更深、应用得更好,谁就更容易脱颖而出。为此,我特意与几位大厂前端技术专家,一起整理出了一套非常实用的——《2024前端开发进阶秘籍》,其中包含了前端必备八股文、超火Vue3面试题、前端卷王算法题和大厂高...
2024-03-27 10:20:58 1
转载 【总结】1998- Vite为什么比Webpack快
本文作者为 360 奇舞团前端开发工程师一.引言Vite和Webpack作为两个主流的前端构建工具,在近年来备受关注。它们的出现使得前端开发变得更加高效和便捷。然而,随着前端项目规模的不断增大和复杂度的提升,构建工具的性能优化也成为了开发者关注的焦点。在性能方面,Vite相比于Webpack表现出了明显的优势,尤其是在本地开发时冷启动速度、HMR性能和构建速度等方面。本文将深入解析Vite为什么比...
2024-03-27 10:20:58 2
转载 【Web技术】1997- 纯前端实现 JPG 图片压缩 | canvas
在线 Demo 体验地址 →: https://demos.sugarat.top/pages/jpg-compress/前言在迭代图床应用时,需要用到图片压缩,在之前分享了使用 UPNG.js 压缩 PNG 图片[1],这里记录分享一下如何处理 JPG 图片。搜罗调研了一圈,JPG 图片的处理,基本都是围绕 canvas 展开的。掘金:前端实现图片压缩技术调研[2]相关开源库(近期还有迭代维护的...
2024-03-26 18:09:37 10
转载 【AI】1996- 2024 年必备的 9 款 AI PPT 生成工具
关注 “AI 工具派”探索最新 AI 工具,发现 AI 带来的无限可能性!近期推荐PPT:Tome|美图PPT|AiPPT|Gamma图片处理:Pikaso|图片修复|DeOldify|BgSub|Dreamina学习工具:据意查句|Grammarly|灵动翻译|Wiseone|Hama|DeepL编程工具:Codeium|通义灵码|SafurAI其他工具:TinyWow|PixVerse|...
2024-03-25 17:37:57 28
转载 【CSS】1995- 15个CSS 常见错误,请一定要注意避免
在不断发展的 Web 开发领域,掌握 CSS(层叠样式表)对于制作视觉上令人惊叹且响应迅速的网站至关重要。然而,陷阱比比皆是,即使是经验丰富的开发人员也可能会发现自己陷入了常见的 CSS 错误中。本文剖析了 15 个常见错误,提供分步说明和代码示例,帮助您创建完美的网页设计。1. 过度依赖!important:问题:过度使用 !important 会导致代码混乱。解决方案:对于更干净和可维护的样式...
2024-03-24 18:29:24 7
转载 【实战】1994- 前端加载超大图片(100M以上)实现秒开解决方案
转自:vjmaphttps://juejin.cn/post/7212270321622106170前言前端加载超大图片时,一般可以采取以下措施实现加速:图片压缩:将图片进行压缩可以大幅减小图片的大小,从而缩短加载时间。压缩图片时需要注意保持图片质量,以免影响图片显示效果。图片分割:将超大图片分割成多个小图块进行加载,可以避免一次性加载整个图片,从而加快加载速度。这种方式需要在前端实现图片拼接,需...
2024-03-23 19:17:49 26
转载 【TS】1992- as const 5 种使用技巧
在 TypeScript 中,as const 是一种类型断言,它将变量标记为 “常量”。使用 as const 可以告诉 TypeScript 编译器,某个对象的所有属性都是只读的,并且它们的类型是字面量类型,而不是更通用的类型,比如 string 或 number 类型。接下来,我将介绍 TypeScript 中 as const 类型断言的 5 个使用技巧。1.确保对象的属性不可变在下面代码...
2024-03-22 08:03:24 20
转载 【JS】1993- 盘点和 toggle 相关的几个 JS API
toggle的意思很简单,表示“切换”,适用于两个状态之间的变化,不会出现第三者,就像这样web中也有很多类似的api,一起看看有哪些吧一、toggle首先是最常用的DOMTokenList.toggle方法,这里的的DOMTokenList表示一组空格分隔的标记,最常见的就是Element.classList,比如除了classList还有relList,不过应该更少见了<div cla...
2024-03-21 10:20:17 6
转载 【Vuejs】1991- 总结 Vue 中常用的4种高级特性!
1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术,它可以将数据注入到一个组件中,然后让它的所有子孙组件都可以访问到这个数据。通常情况下,我们在父组件中使用 provide 来提供数据,然后在子孙组件中使用 inject 来注入这个数据。使用 provide/inject 的好处是可以让我们在父组件和子孙组件之间传递数据,而无需手动...
2024-03-20 11:00:49 6
转载 【总结】1990- 前端接口防止重复请求实现方案
前言前段时间老板心血来潮,要我们前端组对整个的项目都做一下接口防止重复请求的处理(似乎是有用户通过一些快速点击薅到了一些优惠券啥的)。。。听到这个需求,第一反应就是,防止薅羊毛最保险的方案不还是在服务端加限制吗?前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子,行吧,搞就搞吧,you happy jiu ok。虽然大部分的接口处理我们都是加了loading的,但又不能确保真的是每个接口都...
2024-03-19 13:04:23 7
转载 字节面试官:你让我见识到了前端基础的天花板!
前几天下午摸鱼,无聊翻了下粉丝群,发现群里找了三个月工作的哥们儿拿到了字节45k+的offer!(个人信息厚码,转发已经过粉丝同意)交流了一下上岸心得,他说:(头像厚码,转发已经过粉丝同意)为了造福粉丝,我把他的面试资料全部要过来了!也是深藏不漏哈,没想到他收集的资料超全,还满满都是干货。全部资料已打包,内含前端八股文+大厂面试题库+算法题需要的朋友扫码找小助手领(高清pdf版)01八股文 | 基...
2024-03-18 10:20:59 10
转载 【JS】1989- 大大提高开发效率的10个JavaScript技巧
JavaScript 是前端开发中的必备语言。但是我发现很多同学对于 JavaScript 的技巧使用却并不熟悉。所以,今天咱们就来分享一下 JavaScript 的10个好用的技巧,帮你更好地使用 JavaScript,提升开发效率!1. 使用 flatMap有些 JavaScript 方法尽管鲜为人知,但它们解决独特挑战的潜力能够增强编码效率, 比如 flatMap()数组方法 flatMap...
2024-03-18 10:20:59 13
转载 【JS】1988- 有了这 5 个方法,轻松处理异步任务
在 JavaScript 中,许多操作都是异步的,比如发起网络请求、读取文件、定时器等。Promise 提供了一种更加结构化和易于理解的方式来处理异步操作,使得异步代码更加清晰易读,避免了回调地狱的问题。本文我将介绍 Promise 对象上 5 个非常有用的方法,掌握这些方法之后,可以让你更好地解决工作遇到的一些异步问题。Promise.all()当你需要并行执行多个异步操作,并且只有当所有异步操...
2024-03-17 20:21:00 6
转载 【JS】1987- JavaScript 中5个重要的Observer函数,你知道几个?
作者:MapleSyrupxhttps://juejin.cn/post/7302344328243773450前言浏览器为开发者提供了功能丰富的Observer,在这篇文章中,我们将深入研究这些常见的浏览器 Observer,剖析它们的作用、用法以及它们在 Web 开发中的应用场景。MutationObserverMutationObserver用于监听DOM对象的变更(包括子节点),当节点属...
2024-03-16 21:51:22 4
转载 【总结】1986- 使用 JavaScript 和 Canvas 渲染 PDF 内容
本文作者:@yuanyxh原文:https://zhuanlan.zhihu.com/p/631442533最近研究了 Web 的 FileSystemAccess Api,它弥补了 Web 长期以来缺少的能力:操作用户设备中的文件;而如今通过这个 Api 我们能够实现常见的文件操作:创建、删除、修改、移动等。研究 FileSystemAccess 与其他相关的知识,我才发现如今的 Web 不单单...
2024-03-15 16:13:49 10
转载 【总结】1985- 前端文件下载的正确打开方式
作者:田八https://juejin.cn/post/7156427561302982670前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1. a 标签通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:<ahref="http://www.baidu.com"d...
2024-03-14 21:59:27 4
转载 【分享】1984- 分享一款基于web的开源word文档编辑器
hi, 大家好, 我是徐小夕, 最近在研究基于 web 的文档编辑器,在网上调研了很多方案, 刚好看到了一款非常有意思的开源编辑器——canvas-editor, 它底层基于 canvas 实现, 我们使用它可以实现类似于 word文档编辑器类似的效果, 同时还支持很多灵活可配置的 API, 可以帮助我们定制属于自己的文档编辑平台, 如果你刚好也想着手实现, 这个项目将非常适合你.同时, 作者是国...
2024-03-13 10:18:16 17
转载 【总结】1893- 前端文件流、切片下载和上传:优化文件传输效率与用户体验
作者:狗头大军之江苏分军https://juejin.cn/post/7255189826226602045文件传输是一个常见的需求。对于大文件的下载和上传,直接使用传统的方式可能会遇到性能和用户体验方面的问题。幸运的是,前端技术提供了一些高效的解决方案:文件流操作和切片下载与上传。本文将深入探讨这些技术,帮助你理解它们的原理和实现方法,以优化文件传输效率和提升用户体验。一、前端文件流操作在前端开...
2024-03-12 20:50:19 20
转载 【Vite】1982- Vite 未来使用的打包工具,正式开源了!
3 月 8 号,Rolldown[1] 正式开源了,它是一个基于 Rust[2] 语言开发的 JavaScript 打包器,其设计目标是成为 Vite 在未来将要采用的核心打包工具。它不仅提供了与 Rollup 兼容的 API 和插件体系,而且在功能范围上,它更加贴近于 esbuild[3] 的设计理念。Rolldown 基于 Rust 语言开发,并且是在 Oxc[4] 基础架构上构建的。目前,R...
2024-03-11 08:09:56 9
转载 【React】1981- React 的 8 种条件渲染的方法
条件渲染是React中的一个强大功能,它允许开发人员根据某些条件控制组件的显示。它在创建动态和交互式用户界面方面发挥着至关重要的作用。然而,了解条件渲染在 React 中的工作原理并掌握其实现对于开发人员来说可能具有挑战性,尤其是那些刚接触该框架的开发人员。今天这篇文章可以为您提供帮助。无论您是初学者还是希望提高技能的经验丰富的开发人员,本文都将为您详细解释 React 中的条件渲染,并提供实际示...
2024-03-10 19:19:25 9
转载 【JS】1980- 一文搞定 EventLoop、宏任务、微任务
作者:Sailinghttps://juejin.cn/post/7318619321421217832面试官:你了解JavaScript事件循环吗,掌握多少,把你知道的都说一下。今天我们就来说一下,JavaScript作为一门单线程语言,如何通过事件循环(Event Loop)和任务队列(Task Queue)的机制,高效地处理异步任务,保证用户体验的流畅性。在本文中,我们将详细探讨事件循环、任...
2024-03-09 21:16:07 11
转载 【Vue】1979- 实现Vue3响应式系统核心-MVP 模型
简介2023 年 12 月 31 日,vue2 已经停止维护了。你还不会 Vue3 的源码么?手把手带你实现一个 vue3 响应式系统,你将获得:Vue3 的响应式的数据结构是什么样?为什么是这样?如何形成的?Proxy 为什么要配合 Reflect 使用?如果不配合会有什么问题?Map 与 WeakMap的区别响应式数据以及副作用函数响应式系统基本实现依赖收集派发更新依赖清理支持嵌套实现执行调...
2024-03-08 18:46:21 8
转载 【Vue】1978- Vue 官方语言工具2.0 来了,已正式更名!
近日,Vue 官方语言工具发布了 2.0 版本,该版本已经将 VS Code 插件名称由Volar Language Features (Volar) 改为了 Vue - Official,TypeScript Vue Plugin扩展也已经被弃用。下面就来看看该版本都带来了哪些更新。新功能支持通过拖拽导入组件混合模式:弃用了 Takeover 模式,但扩展现在默认拥有与 Takeover 模式相...
2024-03-07 10:20:49 30
转载 【总结】1977- 关于虚拟DOM(面试必看)
什么是虚拟 DOM虚拟 DOM(Virtual DOM)本质上是 JS 和 DOM 之间的一个映射缓存,它在形态上表现为一个能够描述DOM 结构及其属性信息的 JS对象虚拟 DOM 在 React 组件的挂载阶段和更新阶段都会作为“关键人物”出镜,其参与的工作流程如下:•挂载阶段,React 将结合 JSX 的描述,构建出虚拟 DOM 树,然后通过 ReactDOM.render 实现虚拟 D...
2024-03-06 09:59:07 177
转载 【TS】1976- 如何声明 Currying 函数的类型?
Challenge在本次挑战中,您需要为 Currying 函数声明相应的类型,以帮助 TypeScript 编译器推断出正确的类型。declarefunctionCurrying(fn:any):anyconstcurried1=Currying((a:string,b:number,c:boolean)=>true)constcurried2=Cu...
2024-03-05 19:04:49 9
转载 【TS】1975- TS 5.4:Object.groupBy 和 Map.groupBy
2 月 22 日,TypeScript 团队发布了 TypeScript 5.4 RC 版本。即将发布的 TypeScript 5.4 为 Object.groupBy 和 Map.groupBy 方法添加了类型声明。通过以下命令,你就可以体验最新的 TypeScript 5.4 RC 版本:npminstall-Dtypescript@rc本文我将介绍 Object.groupBy 和 M...
2024-03-04 10:20:25 31
转载 【总结】1974- 前端实现电子签名(web、移动端)通用组件
作者:桃小瑞https://juejin.cn/post/7174251833773752350前言在现在的时代发展中,从以前的手写签名,逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。举个常用的例子,大家都用过钉钉,钉钉上面就有电子签名,相信大家这肯定是知道的。那作为前端的我们如何实现电子签名呢?其实在html...
2024-03-03 20:26:20 36
转载 【React】1973- React高阶组件(HOC)的入门及实践
高阶组件的基本概念(是什么?)高阶组件(HOC,Higher-Order Components)不是组件,而是一个函数,它会接收一个组件作为参数并返回一个经过改造的新组件:constEnhancedComponent=higherOrderComponent(WrappedComponent);需要区分的是,组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。高阶组件是 ...
2024-03-02 17:46:59 22
转载 【AI】1972- 推荐 3 款免费 AI 搜索工具,让信息检索更高效
关注 “AI 工具派”探索最新 AI 工具,发现 AI 带来的无限可能性!近期推荐PPT:Tome|美图PPT|AiPPT|Gamma图片处理:Pikaso|Visual Electric|图片修复工具|DeOldify学习工具:据意查句|Grammarly|灵动翻译|Wiseone|Hama|DeepL编程工具:Codeium|通义灵码|SafurAI其他工具:TinyWow|PixVers...
2024-03-01 18:06:59 164
转载 【React】1971- React 跨平台开发指日可待!
最近,Meta 开源了一个项目:React Strict DOM,在一周的时间新增了超过 2200 Star。其官方介绍如下:React Strict DOM(RSD)是 React DOM 和 StyleX 的实验性集成,旨在改进和标准化 Web 和原生平台的 React 组件的开发。RSD 的目标是提高React开发的速度和效率,同时不牺牲性能、可靠性或质量。使用 RSD 进行构建有助于 Me...
2024-02-29 10:20:50 29
转载 【面试题】1970- 移动端适配介绍
分享一篇移动端适配的多个方案,也可以说说你是怎么做的。正文自适应:根据不同的设备屏幕大小来自动调整尺寸、大小响应式:会随着屏幕的实时变动而自动调整,是一种更强的自适应为什么要做移动端适配?目前市面上移动端屏幕尺寸非常的繁多,很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图:当我们针对一个手机进行布局设计时,设置了一个 200 * 200 大小的盒子但在不同的设备上,由于逻...
2024-02-28 09:20:03 17
转载 【Vuejs】1969- Vue 项目构建优化汇总
本文作者为 360 奇舞团前端开发工程师宁航在开发大型前端项目时,往往是一个需求对应一个分支,当完成需求后,就需要将代码打包、部署。代码通常需要部署到多个环境中,这些环境包括:日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试,生产环境是用户访问的版本。随着时间的推移,项目中会不断引入许多新的依赖(如第三方库、插件等)和图片资源,代码数量也会逐渐增多,从而导致构建项目更加耗时,...
2024-02-27 09:59:58 12
转载 【AI】1968- 谷歌最新开源的 Gemma 模型,秒杀 Llma-2!
Gemma 是什么Gemma 是一个轻量级、最先进的开放式模型系列,采用了与创建 Gemini 模型相同的研究和技术。Gemma 由 Google DeepMind 和 Google 的其他团队共同开发,其灵感来源于双子座,名字反映了拉丁语 gemma,意为 "宝石"。在发布模型权重的同时,谷歌还将发布相关工具,以支持开发人员创新、促进协作,并指导负责任地使用 Gemma 模型。以下是需要了解的关...
2024-02-26 10:20:57 65
转载 【总结】1967- 前端重新部署如何通知用户刷新网页?
1.目标场景有时候上完线,用户还停留在老的页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。2.思考解决方案如何去解决这个问题 思考中...如果后端可以配合我们的话我们可以使用webSocket跟后端进行实时通讯,前端部署完之后,后端给个通知,前端检测到Message进行提示,还可以在优化一下使用EvnentSource这个跟so...
2024-02-25 16:21:01 14
转载 【总结】1966- 深入浅出微前端(qiankun)
作者:Hello_AlexCchttps://juejin.cn/post/724262320884159286对微前端的理解微前端的核心理念是将前端应用程序看作是一个整体,由多个独立的部分组成。每个部分被视为一个微前端应用,它们可以具有自己的技术栈、开发流程和团队组织。这种方式使得团队可以独立开发和部署各个子应用,减少了协调和合并的复杂性。为什么 Iframe 无法胜任微前端的工作?IFrame...
2024-02-24 16:46:29 16
转载 【CSS】1965- 分享10个超实用的高级 CSS 技巧
CSS(层叠样式表)是一个强大的工具,可以让开发人员设计出漂亮的网页。在今天这篇本文章中,我们将分享10个 CSS 高级技巧,它们可以将你的网页设计技能提升到一个新的水平。那么,我们现在开始探索这些酷酷的CSS技巧吧。1.使用CSS获取HTML属性值CSS attr() 函数允许开发人员检索样式表中HTML属性的值。在下面的示例中,我使用 attr() 函数使用其 data-value 属性来显...
2024-02-23 09:31:37 17
转载 【React】1964- React 19 即将迎来大更新!
近日, React 团队发布消息称,不会再发布v18.3版本了,而是将重点放在React v19 版本。新版本将推出四个新的 hook,旨在解决 React 中痛点:数据获取表单处理虽然这些 hook 目前作为实验性 API 在 React 预览版本中可用,但它们预计将成为 React 19 的稳定功能,但是最终发布React v19之前,API 可能会有所变化。新的 Hooks 包括:useus...
2024-02-22 10:21:01 22
转载 【CSS】1963- 两行 CSS 轻松实现明暗模式
在 Web 开发中,为了根据用户的偏好模式(明暗模式)调整网页颜色,我们以前可能会使用媒体查询(prefers-color-scheme)。如今,CSS提供了一种更为简便的方法:light-dark()函数。此函数能够根据当前颜色方案自动选择两种颜色中的一种进行输出,从而实现颜色的自适应显示。以前的明暗模式实现要根据所使用的浅色模式或深色模式更改颜色值,可以使用 prefers-color-sch...
2024-02-21 09:25:14 9
转载 【优化】1962- 京东快递小程序分包优化实践
前言—随着项目规模增大,小程序分包优化是必须要面对的问题。分包不合理,不仅影响项目迭代和上线计划,还关乎用户体验,甚至因此导致 C 端用户流失。本文主要介绍京东快递小程序分包过程中踩过的坑,以及小程序分包优化的一些建议。小程序简介小程序是一种不需要下载安装即可在各类宿主环境(手机 APP、车载系统、IOT 设备等)中使用的应用程序。小程序使用了双线程模型,包括逻辑层和渲染层:逻辑层 JSCore ...
2024-02-20 09:14:19 11
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人