frontend_frank的博客

原创 揭秘webpack插件工作流程和原理

前言通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。本文将尝试探索 webpa...

转载 通过debug搞清楚.vue文件怎么变成.js文件

大家好，我是欧阳！本文约2400+字，整篇阅读大约需要8分钟。感谢关注微信公众号：“前端欧阳”，加我微信可以免费咨询vue相关的问题。前言我们每天写的vue代码都是写在vue文件中，但是浏览器却只认识html、css、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件，想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理...

转载 浅谈 Canvas 渲染引擎设计

用过 Canvas 的都知道它的 API 比较多，使用起来也很麻烦，比如我想绘制一个圆形就要调一堆 API，对开发算不上友好。为了解决这个痛点，诞生了例如 PIXI、ZRender、Fabric 等 Canvas 库，对 Canvas API 进行了一系列的封装。今天主要介绍一下社区几个比较有代表性的 Canvas 渲染引擎的设计原理。这篇文中不会从源码讲起，更像是一篇科普文章，介绍 Canvas...

转载 整理 17 个提高生产力的 Chrome 扩展程序

在快节奏的数字工作流程世界中，拥有触手可及的正确工具可以发挥重要作用。有人问我浏览时会用什么扩展，所以我决定编写一个列表，列出我最喜欢的一些扩展，它们对我的工作流程的生产力贡献最大。无论你是开发人员、设计师还是热衷于多任务处理的人，这些扩展都可能改善你的体验。我提供了直接链接、描述和视觉效果，以便您可以立即获得每个扩展的初步印象。希望这些对您有用！1.Hitab (赞助商)Hitab[1]是一个...

转载 12个快速学会 NextJS 的 Github 仓库

“从他人的代码中学习”今天的文章，我想分享一些不错的 GITHUB 仓库，这些项目都能帮助你更快学会 NextJS。NextJS 是一个流行的 JavaScript 框架，允许我们使用 React 构建动态站点和应用程序。让我们来查看并给这些优秀的项目start⭐首先是????1. Notion Clonegithub: https://github.com/webprodigies/webprodig...

转载 关于性能优化的9大策略和6大指标 | 网易四年实践

「链接和长图失效，请大家点击阅读原文查看详情」前言笔者近半年一直在参与项目重构，在重构过程中大量应用「性能优化」和「设计模式」两方面的知识。「性能优化」和「设计模式」两方面的知识不管在工作还是面试时都是高频应用场景，趁着这次参与大规模项目重构的机会，笔者认真梳理出一些常规且必用的性能优化建议，同时结合日常开发经验整理出笔者在网易四年来实践到的认为有用的所有性能优化建议，与大家一起分享分享！(由于篇...

转载 基于源码的 Webpack 结构分析

分享背景即使目前优秀的构建工具层出不穷，Webpack 还是保持着其在现代前端开发工具链中不可替代的地位。这主要得益于其优秀的灵活性以及强大的生态系统。然而，随着版本更替，Webpack 的功能越来越庞大，整体的代码量日渐夸张，大大提高了学习难度。与此同时，大多数人对 Webpack 的使用都停留在配置层面，这容易陷入几个问题：想实现某个功能，但是不清楚原理，只能花大量时间调研方案。简历上写了用 ...

转载 汇总几个不错的前端大佬，涵盖css，react，3d等领域

推荐几个前端领域的公众号，他们不仅拥有丰富的技术内涵，还具备引人深思的原创能力。我相信，他们的文章总能给你带来启发和思考，关注他们，了解前端领域的前沿技术和最新动态，激发你对前端的热情和持续探索!#初识Threejs欢迎来到「初识Threejs」，我是一名一线前端开发者，热爱记录分享。在这个公众号里，我将分享Three.js的研究、实践和感悟，所以，不管你是初入前端的新手，还是有一定经验的开发者，...

转载 一个微信小程序的优化之路

本文字数：24677字预计阅读时间：60分钟一个微信小程序的渐进式优化之路❝来个大的！前言入职搜狐后我开展的第一个项目就是微信小程序。谈起小程序开发，生态封闭、坑多路滑、开发工具难用等槽点是一定不能被忽视的，因此市面上也涌现了一大批诸如 mpvue、taro 这样的抽象程度更高的小程序开发框架。我负责的这个小程序项目并没有采用这些第三方框架，而是选择在原生技术栈的基础上进行了一系列的优化和定制...

转载 8则实用的纯CSS布局排版技巧 | 网易4年实践

「链接和长图失效，请大家点击阅读原文查看详情」前言开发每一张网页都离不开布局排版，基于良好布局排版打下基础，才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上，没办法解决的布局排版都用JS实现????。今时不同往日，现代CSS属性能更好地快速实现各种布局排版，节约更多时间去摸鱼????。不过按照笔者目前了解的情况来看，大部分同学即使在无需兼容IExplorer的情况下还是遵循CSS+J...

转载 45*15，今年爆火的前端突击手册

前几天下午摸鱼，无聊翻了下粉丝群，发现群里找了三个月工作的哥们儿拿到了字节45k+的offer！（个人信息厚码，转发已经过粉丝同意）交流了一下上岸心得，他说：（头像厚码，转发已经过粉丝同意）为了造福粉丝，我把他的面试资料全部要过来了！也是深藏不漏哈，没想到他收集的资料超全，还满满都是干货。全部资料已打包，内含前端八股文+大厂面试题库+算法题需要的朋友扫码找小助手领（高清pdf版）01八股文 | 基...

转载 20个惊艳的React组件库，每一个都值得收藏

在上一篇文章中，20个惊艳的React组件库，每一个都值得收藏（上），我们一起探索了10款令人惊艳的React组件库，它们各自以独特的功能和优势，极大地丰富了我们的React开发工具箱。今天，我们将继续这一系列的分享，从React Markdown到React Copy to Clipboard，为大家介绍另外10个同样值得收藏的React组件库。这些组件库覆盖了从文本处理到布局管理，再到交互增强...

转载 JavaScript高级系列（十五） - ES6~ES13-ES7~ES12知识点

这个章节中我们讲解ES7~ES12中重要的核心语法。一. ES7知识点 1.1. Array Includes在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。语法如下：arr.includes(va...

转载 记录一次有挑战的经历：使用xgplayer拉流端直播

一、背景介绍为了强化官方验的心智，平台要做一版新的质检直播间，将我们的质检车间全方位透明的展现给用户。按照产品的设计来实现的话，其实就是将各个镜头的内容同时在一个页面内进行播放，除了工作时间的直播，还有休息时间的录播播放。不过直播和录播的生成都是在后端实现，前端只负责视频资源的播放。二、前期调研对于简单的直播场景，我们需要关注的主要是「编解码格式」和「直播协议」，因为这两点直接决定直播能否播放。「...

转载 React 之 Refs 的使用和 forwardRef 的源码解读

三种使用方式React 提供了 Refs，帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素。React 提供了三种使用 Ref 的方式：1. String RefsclassAppextendsReact.Component{constructor(props){super(props)}componentDid...

转载 一名默默无闻前端大佬的职业成长之路

大家好，我是 「范文杰」，一个前端从业者，最近刚写完我的第一本小册《Webpack 核心原理与实践应用》，这对我是一个不小的职业突破，所以不能免俗地想做个总结，分享我这九年工作的成长经历，以及我对前端这个职业的思考与成长建议，希望能帮到哪些还在路上的朋友。???? 起源我的职业起点算不上高，6 线海边小镇出身，不知名二本院校毕业，没背景没人脉，所幸在我毕业那会(13 年)就业市场相对还比较宽松，加上大二...

转载 45k！这是我见过最强的前端面经！

前天加完班，回家路上翻了下粉丝群。发现群里最近在疯传一份叫《前端offer收割机养成指南》的资料。本来感觉这个title看起来有点离谱，结果没想到仔细一看，这份资料竟然真的有点东西。内容收纳的很全，而且融合了很多今年的新玩意。据我所知有人靠它拿下了45k+的offer…后来我辗转找到了这份资料的整理人，果然是位大佬！他是现任字节前端Leader，在前端行业深耕近十年，见证了互联网的飞速发展，也见证...

转载 NPM 依赖管理的复杂性

这是一个很少被提及的话题 —— 「依赖管理」(Dependencies Management) 。在开源文化盛行的现代，多数时候我们都不必从零开始搭建一套软件系统，转而可以借助诸多开放的代码片段及其他资源更快速高效开发软件应用，这算的上软件工程发展史上一次巨大革命，因为它能大幅提升软件工业的生产效率，我们不必再从底层开始编写所有代码，大部分问题与常见的编程模式都能在社区找到相应的解决方案，且这些被...

转载 提升编码效率的 7 款必备 VS Code 插件

前端开发时，选择合适的工具是事半功倍的关键。Visual Studio Code（VS Code）作为一款轻量级、强大且高度可定制的集成开发环境（IDE），拥有强大的插件系统，能够满足各种开发需求。在本文中，我们将深入探讨 7 款必备的VS Code插件，通过更多实际例子和代码片段，让你更好地理解它们如何优化你的编码体验。1. REST ClientREST Client插件的魅力在于它能够直接在...

转载 让你熟悉React 的 7 个 Github 仓库

总结如果你想掌握 React，这 7 个 Github 仓库是宝贵的学习资源，有大量示例代码和设计模式可供学习。让我们开始吧 ????krasimir/react-in-pattern[1]这个仓库包含演示常见 React 设计模式的代码示例。它涵盖了状态管理、异步数据获取、认证等方面的模式。学习这些模式将让你对如何构建可扩展的 React 应用有更深刻的理解。jeromedalbert/real-wo...

转载 预测一波，这份Web面试题库即将爆火…

最近正值跳槽热潮，我与一位在大厂做前端开发的技术大牛朋友聊天，他透露今年的面试趋势已经不仅限于考察基本的八股文了，而是越来越多地聚焦于实际项目中所应用的框架和技术、以及相关的算法难题。现在的情况已经和前几年完全不一样了，以前随便写写简历，背诵几周八股文就可以去参加面试，现在估计一面都过不了。为了帮助大家快速了解现在的面试动向，我整理了一份《2024 前端面试通关秘籍》，内含前端八股文+热门大厂真题...

转载 枯燥但实用的干货文章：掌握 TS 高级类型编程

原文地址：github.com/Nealyang/PersonalBlog前言或许现在很多同学都在用 TypeScript，但是更可能大多数的同学并不会 TypeScript，他们用的，只不过是给 js 加了一些“注释”，然后洋洋得意“TypeScript 不过如此”但是偶尔看到一些“别人的代码”又会虎躯一震~ “什么？这还是我用的 TypeScript 嘛？”exportinterfaceS...

转载 尤雨溪官宣正式推出 VitePress 1.0

今天给大家介绍VitePress 1.0。是的没错，那个男人又双叒叕出手了。不久前，尤大在推特上十分鸡冻地分享，VitePress 1.0 正式发布，这也是 VitePress 诞生以来升级的第一个语义化主版本，一个值得纪念的里程碑。这是尤大在推特上分享VitePress 1.0发布的消息，他宣布正式发布VitePress 1.0版本，并声称其 “基于 Vite 和 Vue 构建，是 VueP...

转载 three.js做一个3D汉诺塔游戏

入门 three.js 也有一阵子了，我发现用它做 3D 挺有趣的，而且学习门槛也不算高。在这篇博文中，我想分享一下利用 three.js 做一个 3D 版汉诺塔（河内塔）的过程，以及对 three.js 相关知识点进行一次较为全面的实战总结。希望能与大家交流技术心得和经验，一起共同进步。效果展示游戏规则：将串在左边柱杆（A柱）上的盘子全部挪进右边柱杆（C柱）即可获胜；一次只能挪动最上面的一个盘子...

转载 前端面试真题，有需要的可以看看

转载 前端如何准备，才能破局拿高薪

正文前段时间，掘金热帖《放心，前端死不了》在前端圈疯传。百度前端大佬表明：“前端技术是依托于互联网行业的，只要行业还在，它就会有用武之地，就会有价值。”总的来说，技能跟上发展，前端就不会死。谁掌握得更深、应用得更好，谁就更容易脱颖而出。为此，我特意与几位大厂前端技术专家，一起整理出了一套非常实用的——《2024前端开发进阶秘籍》，其中包含了前端必备八股文、超火Vue3面试题、前端卷王算法题和大厂高...

转载 跨平台开发的实践与原理

????这是第 404篇不掺水的原创，想要了解更多，请戳下方卡片关注我们吧～引言在如今不断增长的小程序市场中，小程序的数量迅速增多。这是因为小程序具有诸多优势，例如轻量化、便捷性和良好的用户体验，吸引了越来越多的开发者和企业加入这一领域。随着小程序的普及，各个行业都纷纷推出自己的小程序，以满足用户的多样化需求。然而，正是因为小程序市场的多样性和快速发展，每个小程序客户端的 Api 差异也变得十分显...

转载 Flutter-Web从0到部署上线(实践+埋坑)

本文字数：7743字预计阅读时间：60分钟01前言首先说明一下，这篇文章是给具备Flutter开发经验的客户端同学看的。Flutter的诞生虽然来自Google的Chrome团队，但大家都知道Flutter最先支持的平台是Android和iOS，至今最核心的维护平台依然是Android和iOS。由于dart语言的学习成本不高，Flutter的响应式UI与Comp...

转载 Three.js实现3D推箱子小游戏

最近一直在学 Three.js ，看到别人做出那么多炫酷的效果，觉得太厉害了，于是决定从一些简单的效果开始做。所以打算借这个 小游戏[1] 来认真学习一下 Three.js 。在线预览https://liamwu50.github.io/three-sokoban-live/游戏介绍"推箱子" 游戏最早是由日本游戏开发者Hiroyuki Imabayashi 于1982年开发和发布的。这款游戏的日...

转载 今年的情形，劝大家多做一手准备

前天加完班，回家路上翻了下粉丝群。发现群里最近在疯传一份叫《前端offer收割机养成指南》的资料。本来感觉这个title看起来有点离谱，结果没想到仔细一看，这份资料竟然真的有点东西。内容收纳的很全，而且融合了很多今年的新玩意。据我所知有人靠它拿下了45k+的offer…后来我辗转找到了这份资料的整理人，果然是位大佬！他是现任阿里前端Leader，在前端行业深耕近十年，见证了互联网的飞速发展，也见证...

转载 《现代JavaScript库开发》：一年回顾与展望

从2013年至今，我陆续创作了多个库，关于如何开发JavaScript库，我也做了一些总结和分享，借这个机会，下面做个简要回顾。2015年，我发布了zepto.fullpage，一款轻量级的全屏滚动插件。2016年，我发布了前端模板template.js。2018年是一个里程碑，我给公司搭建了Util.js，同时开源了jslib-base v1，并撰写了《如何写一个现代的JavaScript库》一...

转载 简单聊聊React18事件系统

前言在进入正题之前，我们先思考一个问题，那就是事件系统重要吗？事实上，前端应用因为离用户最近，所以会有很多交互逻辑，就会有很多事件与之绑定。正是有这些事件，才让页面‘活’起来，才能让用户通过浏览器完成想要做的事情。所以事件系统对于用户是非常重要的。一、React事件系统介绍对于不同的浏览器，对事件存在不同的兼容性，React 想实现一个兼容全浏览器的框架， 为了实现这个目标，就需要创建一个兼容全浏...

转载 快速上手rust

在我的交流群里有许多人在讨论 rust。所以陆续有人开始尝试学习 rust，不过大家的一致共识就是：rust 上手很困难。当然，这样的共识在网上也普遍存在。这篇文章，就是专门为想要学习 rust 的前端开发而写，为大家抛开 rust 的迷雾，让大家感受到，上手 rust，其实没有那么难。从本质上来说，他跟 JavaScript 是非常相似的。大家可以将这篇文章作为 rust 学习的先导片，我将会提...

转载 字体文件瘦身（前端字体优化）

日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。本文主要从字体格式、按需提取、统一渲染三个方面来谈...

转载 呜呼，前端这波起飞！

前天加完班，回家路上翻了下粉丝群。发现群里最近在疯传一份叫《前端offer收割机养成指南》的资料。本来感觉这个title看起来有点离谱，结果没想到仔细一看，这份资料竟然真的有点东西。内容收纳的很全，而且融合了很多今年的新玩意。据我所知有人靠它拿下了45k+的offer…后来我辗转找到了这份资料的整理人，果然是位大佬！他是现任字节前端Leader，在前端行业深耕近十年，见证了互联网的飞速发展，也见证...

转载 React useEffect()的无限循环是怎样来的

前言我们都知道useEffect()用来引入具有「副作用」的操作，例如AJAX请求、DOM操作、启动与结束倒计时和监听与接触事件等，这些都可以在useEffect钩子去做。那么，是不是就真的那么简单的可以直接使用了呢？不是的，你可能会遇到一个陷阱，那就是组件渲染的无限循环，本文将为各位同学详细介绍无限循环的常见场景以及如何避免。副作用副作用指的是当调用函数时，除开返回函数值之外，还对主调用函数产生...

转载 Web Audio API 太强了，让我们一起领略音频之美

在浏览器中，我们通常使用 audio 标签来播放音频：<audiocontrols><sourcesrc="myAudio.mp3"type="audio/mpeg"><sourcesrc="myAudio.ogg"type="audio/ogg"></audio>虽然 audio 标签使用起来很简单，但也存在一些局限。比如它...

转载 6000字解读 JS 构造函数、原型、类与继承

本文字数：6602字预计阅读时间：30分钟01前言众所周知，JavaScript 是一门面向对象的语言，而构造函数、原型、类、继承都是与对象密不可分的概念。在我们日常前端业务开发中，系统和第三方库已经为我们提供了大部分需要的类，我们的关注点更多是在对象的使用和数据处理上，而比较少需要去自定义构造函数和类，对原型的直接接触就更少了。然而，能深度理解并掌握好构造函数、原型、类与继承，对我们的代码设计大...

转载 最近面试，还是vue3问的多

前言新年开工后的第二周，就收到很多小伙伴的反馈，前端的就业市场似乎透露出了一丝暖意。相较于去年，机会多了一些，但竞争依然相当激烈，BOSS 上很多 HR 依旧是已读不回，没有充足的准备很难找到一份满意的工作。除此之外，很多公司开年就传出了裁员的消息，在这个大环境下，我们还是要多一手准备，以随时应对未来的不确定性。为了帮助小伙伴们梳理前端知识体系，充分的准备面试，今天就来分享一份爆肝两个月整理出的《...

转载 找了几个比较火的国产开源前端项目推荐给大家

本文将分享国产的 Github Star 数量 Top 10 的前端开源项目，你用过哪些？Ant Design蚂蚁集团开源的一套企业级 UI 设计语言和 React 组件库。Github（89.5k）：https://github.com/ant-design/ant-designvue-element-adminvue-element-admin 是一个后台前端解决方案，它基于 Vue 和 e...