前端 - 哈喽比特 - https://www.hellobit.com.cn

推荐

资讯

基础

前端

后端

人工智能

Android

iOS

Rust

Flutter

Shell

RFC文档

前端

WebSocket 从入门到入土

WebSocket 是基于 TCP 的一种新的应用层网络协议。它提供了一个全双工的通道，允许服务器和客户端之间实时双向通信。因此，在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。

发表于 25天以前 · 阅读量：74

前端

使用懒加载 + 零拷贝后，程序的秒开率提升至99.99%

今天在修改前端页面的时候，发现程序中有一个页面的加载速度很慢，差不多需要5秒，这其实是难以接受的，我也不知道为什么上线这么长时间了，没人提过这个事儿。我记得有一个词儿，叫秒开率。

发表于 25天以前 · 阅读量：83

前端

ESLint 团队即将废除所有格式化规则！

2023 年 ESLint 8.53 中，ESLint 官宣废除所有格式化规则，使用此类规则会收到警告。在官方博客中，ESLint 团队提及 ESLint 10 可能会完全废除所有规则，而目前最新的 ESLint 主版本已经到达 ESLint 9.2 了。

发表于 1月以前 · 阅读量：113

前端

一种适合H5屏幕适配方案

我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态调整根元素的 `font-size`。

发表于 1月以前 · 阅读量：114

前端

你为什么需要 useMount 和 useUnmount?

使用 React 类组件时，React 有明显的生命周期方法，可以在确定的生命周期方法里做确定逻辑，自从 React Hooks 推出后，React 没有推出明确的生命周期方法，更多的是使用 useEffect 去模拟生命周期方法，比如 useMount、useUnmount 等等。

发表于 1月以前 · 阅读量：188

React JavaScript

前端

React Router v6 实践

React Router 是 React 应用程序中用于处理路由的标准库。随着版本的不断更新，React Router v6 引入了许多重要的新特性和改进。

发表于 1月以前 · 阅读量：156

React JavaScript

前端

如何让网站离线也能工作

今天我们将详细介绍如何创建一个值得信赖的网站——始终为用户提供服务，即使是在离线的条件下。

发表于 1月以前 · 阅读量：121

前端

最适合程序员的编程字体，好看、优雅！

对于程序员来说，每天面对最多的就是代码了，选择一款赏心悦目的编程字体就显得尤为重要。那什么是好看的字体呢？基本要求就是相似符号要有明显区别，比如：0、O、o；l、I、1；全角和半角的（）等，并且得看着舒服。还有些人认为输入和显示不要有太大的差异，比如：!= 展示为 ≠；=== 展示为 ≡等，这个就仁者见仁智者见智了。下面就来分享一些好看的编程字体！

发表于 1月以前 · 阅读量：128

前端

逃离 HTML + CSS

当下，构建交互式应用程序的主流技术是 Web 技术，其中包括 HTML、CSS 与 JavaScript。在过去的 10 年，Web 技术生态发生了翻天覆地的变化，包括层出不穷的开发框架，诸如 React、Vue、Svelte，也包括日新月异的前端工程化工具，比如 Webpack、esbuild、Vite 等等。但归根结底，他们都逃不开 HTML、CSS、JavaScript 三剑客的范畴。

发表于 1月以前 · 阅读量：143

Vue React JavaScript

前端

阿里：写一个倒计时功能刷掉了80% 的人

阿里的大佬自己说的在面试时候必问的一个题目，其实这个问题不仅是在面试中，也在我们的业务里也会经常用到，所以才会写这么一篇文章，那么到底如何才能写一个完美的倒计时呢？首先我们在写倒计时的时候必须要考虑到两点：**准确性、性能**。接下来我们来一步一步实现一个准确的定时器。

发表于 1月以前 · 阅读量：137

面试

前端

深入剖析 Promise.withResolver

本文将着重探讨 ECMAScript 2024 年的新特性之一 -- "Promise.withResolvers"（由 Peter Klecha 提出）。该特性提供了一种直接创建 Promise 的新方法，可替代 new Promise(...)。

发表于 1月以前 · 阅读量：260

前端

JavaScript 语法问题

本文收集了100多个 JavaScript 的语法选择题，可以试试你是否真的了解这门语言。

发表于 2月以前 · 阅读量：508

JavaScript

前端

大模型RAG入门及实践

在大语言模型（LLM）飞速发展的今天，LLMs 正不断地充实和改进我们周边的各种工具和应用。如果说现在基于 LLM 最火热的应用技术是什么，检索增强生成（RAG，Retrieval Augmented Generation）技术必占据重要的一席。RAG 最初是为了解决 LLM 的各类问题的产生的，但后面大家发现在现阶段的很多企业痛点上，使用RAG好像是更好的解决方案。在介绍 RAG 之前，我们先来看一下现在LLM存在的问题。

发表于 2月以前 · 阅读量：345

人工智能（AI）

前端

webpack原理与优化

webpack会从入口文件（entry）开始，根据模块依赖关系将模块串联在一起形成chunk，打包成bundle（包）,entry->chunk->bundle。

发表于 2月以前 · 阅读量：226

前端

APP如何与H5通信？

postMessage可以安全地实现跨源通信。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 `MessageEvent`[1] 消息。

发表于 2月以前 · 阅读量：263

前端

一个Level 0富文本编辑器的进化历程

富文本编辑器是我们在生活中常用到的编辑工具，本文将为大家介绍富文本编辑器技术成长的历程，在最后会带大家利用document.execCommand实现一个简单的传统编辑器。

发表于 3月以前 · 阅读量：559

前端

更轻巧的状态管理工具——Hookstate

作为 React 开发人员，管理中型应用程序的状态可能很困难。在开发小型应用程序时，将状态从一个组件传递到另一个组件相对简单。当应用程序的规模发生变化时，就会变得不方便，因为你需要无层级关系组件状态的互相访问支持。

发表于 3月以前 · 阅读量：333

React JavaScript

前端

【5000字】带你了解透彻浏览器缓存！

如果没有缓存机制，刷新页面的时候，不管是以什么样的形式刷新（前进/后退/普通刷新/强制刷新），那么每次浏览器都会去请求服务器的资源，想想是有多么的可怕，这样会大大的增加服务器的压力和带宽。

发表于 3月以前 · 阅读量：285

前端

Web 端 RTL 适配实践

在业务全球化的进程中，我们会面对产品本地化的需求。在中东地区，许多国家使用阿拉伯语、希伯来语等语言，其书写和阅读习惯是从右向左（简称 RTL），与我们日常使用的中、英文环境中的从左向右（简称 LTR）阅读习惯相反。为了确保我们的产品在 RTL 语言用户中依然能够提供良好的体验，需要进行 RTL 适配。

发表于 3月以前 · 阅读量：236

前端

前端与AI的结合：识别图像中的物体

当前端与人工智能（AI）相结合，可以实现一系列强大的图像处理和分析功能。通过利用现代浏览器的能力以及强大的AI模型，我们可以开发出能够识别图像中的物体、场景和特征的前端应用程序。

发表于 3月以前 · 阅读量：268

人工智能（AI）

前端

MongoDB索引使用总结

MongoDB 是目前最流行的文档型数据库。MongoDB 的采用类 json 的存储格式对开发者来说非常友好。本文梳理了 MongoDB 索引的底层结构以及使用经验，不足之处欢迎大家指正。

发表于 3月以前 · 阅读量：282

前端

前端面试：你以为这只是一个简单的数组去重吗？

之前面试过程被问到数组去重有哪些方式？心想这个问题我会，随便也能说出好几种，也不带多思考的。巴拉巴拉巴拉巴拉。说完，面试官好像不太满意的样子，还问了句，没了吗。我想，咋滴，就这些还不不够用吗。然后就下一题了。

发表于 3月以前 · 阅读量：316

面试

前端

JS程序设计的常用套路

亲尝百草，方知甘苦。套路，通常有助于提升代码的可读性、扩展性和效率。以下是作者工作中总结出来的一部分代码套路，分享给大家。

发表于 3月以前 · 阅读量：300

前端

使用React Context的一些优化建议

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

发表于 3月以前 · 阅读量：434

React JavaScript

前端

面试心得分享：手写前端面试题全记录

几个面试题目，分享给大家。

发表于 3月以前 · 阅读量：432

面试

前端

面试官居然要我用JS代码计算LocalStorage容量！

`localStorage`的容量大家都知道是`5M`，但是却很少人知道怎么去验证，而且某些场景需要计算`localStorage`的剩余容量时，就需要我们掌握计算容量的技能了~~

发表于 3月以前 · 阅读量：239

前端

实践总结｜前端架构设计的一点考究

本文总结了作者在日常/大促业务的“敏捷”开发过程中产生的疑惑，并尝试做出思考得到一些解决思路和方案。在前端开发和实践过程中，梳理了一些简单设计方案可以缓解当时 “头疼” 的几个敏捷迭代问题，并实践在项目迭代中。

发表于 3月以前 · 阅读量：372

前端

解读vue中的solt

在 Vue.js 中，插槽（slot）的原理是利用组件的内容分发机制。当一个组件包含插槽时，Vue.js 会将组件内部的内容根据插槽的定义分发到相应的位置。

发表于 4月以前 · 阅读量：371

Vue JavaScript

前端

Redux Toolkit

阅读本文章前，需要先了解下 redux 的基本概念与用法，Redux Toolkit 是建立在 Redux 基础之上的工具包，因此需要对 Redux 的基本概念有一定的了解，包括 Action、Reducer、Store、Middleware 等。理解 Redux 的工作原理和数据流程有助于更好地理解和使用 Redux Toolkit。

发表于 4月以前 · 阅读量：1757

前端

昨天的题目是最近字节面试的手写题，实现有些问题，现配上相应的注释、码上掘金的 Playground 以及相关源码，修正如下

发表于 4月以前 · 阅读量：333

面试

前端

Webpack 动态设置 devServer 的 proxy 配置项

在本地进行项目开发时候，有些时候需要使用代理来访问某些测试环境的数据，这就要在 Webpack 对 devServer 的 proxy 做相关的配置。

发表于 4月以前 · 阅读量：342

前端

年度代码翻车现场｜前端代码评审问题总结

代码评审于技术团队的工程师文化建设非常有意义，它是形成团队统一代码风格最有效的方式，作者把自己团队在一年的CR中常见的那些小问题做了一些梳理，希望能对大家起到一点小帮助。

发表于 4月以前 · 阅读量：401

前端

快速打开Nest.js的世界

从引用官方介绍开始： Nest（NestJS）是一个用于构建高效、可扩展的Node.js服务器端应用程序的框架。它使用渐进式JavaScript，使用TypeScript构建并完全支持TypeScript（但仍然允许开发人员使用纯JavaScript编码），并结合了OOP（面向对象编程）、FP（功能编程）和FRP（功能反应编程）的元素。

发表于 4月以前 · 阅读量：344

Node.js JavaScript

前端

【面试题】1970- 移动端适配介绍

目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图。

发表于 4月以前 · 阅读量：317

前端

一个SSE（流式）接口引发的问题

最近我们公司也是在做认知助手，大模型相关的功能，正在做提示词，机器人对话相关功能。想要提高用户体验，使用SSE请求模式，在不等数据完全拿到的情况下边拿边返回。

发表于 4月以前 · 阅读量：401

前端

【滴滴】如何判断某一个值是数组

完美实现一个月下载量超过一个亿的包: isarray。

发表于 5月以前 · 阅读量：321

前端

基于Animate.css让你的网站眼前一亮吧

当你想要吸引用户的注意力，动画是一个强大的工具。Animate.css是一个功能丰富的库，用于在网页上快速轻松地添加动画。无需深入JavaScript或复杂的CSS，你可以给元素添加预设的动画效果。本文将指导你如何使用Animate.css为你的网站增添活力。

发表于 5月以前 · 阅读量：346

JavaScript

前端

最主流系统权限模块设计？五分钟搞定！

对于后台管理系统，权限控制、千人千面是必须的，例如超级管理员可以看到所有的页面；普通用户能看到A、B页面；VIP用户可以看到A、B、C、D页面，诸如此类，这些业务的逻辑背后就是三种概念的设计。

发表于 5月以前 · 阅读量：367

前端

Vue项目构建优化

在开发大型前端项目时，往往是一个需求对应一个分支，当完成需求后，就需要将代码打包、部署。代码通常需要部署到多个环境中，这些环境包括：日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试，生产环境是用户访问的版本。随着时间的推移，项目中会不断引入许多新的依赖（如第三方库、插件等）和图片资源，代码数量也会逐渐增多，从而导致构建项目更加耗时，这也意味着部署项目需要消耗更长的时间。

发表于 5月以前 · 阅读量：396

Vue JavaScript

前端

【1S 战役】飞天服务平台首页-秒开优化

Web 的性能优化有很多方法论可以来讨论，这里我先介绍一下飞天服务平台首页的业务背景，以及在业务过程中做的有针对性的优化方法。

发表于 5月以前 · 阅读量：342

前端

单线程JavaScript为何如此高效

JavaScript 中的异步任务通常是通过回调函数、Promise、async/await 等机制来处理。通过合理使用异步任务和任务队列，可以实现非阻塞的代码执行，提高代码的性能和响应能力。

发表于 5月以前 · 阅读量：394

JavaScript

前端

正则表达式不用背

正则表达式是一个强大的文本匹配工具。但是，对于初学者来说，众多的符号和规则可能让人难以理解。其实，你不需要记住所有的正则表达式语法！本文将分享一些简单而实用的技巧，帮助理解正则表达式的核心概念，轻松使用正则表达式！

发表于 5月以前 · 阅读量：399

前端

解决前端跨团队统一的隐性拦路虎

过去多年无论是一款插件推广，还是组件库统一，无论是一次机制流程制定，还是前端工程化体系建设，相信很多同学与我一样，在跨团队方案推广统一过程中，前期无论做好多详实的准备，最终都会有一种未竟全功的感觉。

发表于 5月以前 · 阅读量：422

前端

面试官：一套代码如何同时搞定cmd，umd，esm模块代码？

在日常开发中，我们难免会遇到一些重复的工作，例如我们编写的工具函数，可能多个项目之间都有可能使用到，就好像我写的这个脚手架一样，在脚手架中使用到的工具函数和在 webpack 配置中使用到的工具函数是一样的，但是他们一个是使用 cjs 模块开发的，一个是使用 esm 模块开发的，这样的话，我们就需要有一个东西可以使我们在编写工具类库的同时，将一份代码编译成多个不同的模块。

发表于 5月以前 · 阅读量：370

前端

使用debug进行Node.js调试

在Node.js开发过程中，调试是一个非常重要的环节。调试工具可以帮助我们快速定位问题、追踪代码执行过程、查看变量值等。而debug是一个轻量级的调试工具，它提供了一套简单而强大的调试功能，可以帮助开发者更加高效地进行调试工作。本文将介绍如何使用debug包进行Node.js调试，并深入解析debug的设计理念和特点。

发表于 5月以前 · 阅读量：339

Node.js

前端

前端部署真的不简单

本文介绍大型前端项目的部署，涉及到灰度，缓存等知识点。

发表于 5月以前 · 阅读量：347

前端

如何实现一个Canvas渲染引擎(二)：Graphics类

本文将会补充Graphics类支持的所有图形，一些简单的图形，将会使用比较短的篇幅来介绍，重点将会放在曲线等复杂图形的绘制上。鉴于我们已经讲过了矩形的绘制，所以本文将会从圆开始。

发表于 5月以前 · 阅读量：377

前端

面试必备HTML知识点

在HTML中，src 和 href 是两个不同的属性，用于引用外部资源，它们有不同的用途和适用于不同类型的HTML元素。

发表于 5月以前 · 阅读量：370

面试

前端

刘谦春晚魔术揭秘：约瑟夫环的数学魅力，JS实现下！

今年春晚刘谦的魔术堪称惊艳全场，那么他这个魔术实现的原理是什么呢？今天，就让咱们使用 JS 是实现这个魔术。

发表于 5月以前 · 阅读量：382

前端

一看就懂的TypeScript工具类型

TypeScript是一种静态类型检查的编程语言，它内置了许多基本数据类型，如字符串、数字和布尔型等。除了基本数据类型，当某种类型对于大多数代码来说都非常有用时，它们就会被添加到TypeScript中并且被大家使用而无需担心它们的可用性。这些内置在TS中的类型我们称之为工具类型，这些工具类型位于TS安装目录typescript/lib/lib.es5.d.ts，熟悉这些工具类型，可以帮助我们提高开发效率。

发表于 5月以前 · 阅读量：431