作者中心 - 哈喽比特 - https://www.hellobit.com.cn

量子前端

作者就职于阿里，曾获得过各大厂Offer，这里将不定期分享包含但不限于前端知识、面试分享相关内容，且提供内推服务，希望能对你有所帮助。

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

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

发表于 7月以前 · 阅读量：478

webpack原理与优化

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

发表于 6月以前 · 阅读量：412

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

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

发表于 8月以前 · 阅读量：517

提升自己的架构思维

“架构”，即架设、构建。完成对于平台的合理架设，包括其首当其冲的可用，到可扩展、容易被开发、产品、业务、销售等全面接受的一个整体的设计。

发表于 9月以前 · 阅读量：482

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

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

发表于 9月以前 · 阅读量：534

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

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

发表于 9月以前 · 阅读量：536

你想要的图片优化方案都在这里！

当谈到前端性能优化，不得不提图片资源的优化，图片可谓是网站的主要构成部分，尤其是对于商城类的网站。

发表于 9月以前 · 阅读量：604

一篇文章带你看懂Node.js

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能。可以理解为 Node.js 就是一个服务器端的、非阻塞式I/O的、事件驱动的JavaScript运行环境。

发表于 9月以前 · 阅读量：524

伪造请求怎么办？看这篇就够了

JWT身份鉴权方案，token会作为主要的鉴权方式来作为前后端通信校验的凭证，当该token被篡改或者直接被第三方拿到，就可以伪造该用户做一系列业务操作，是一种非常严重的安全漏洞。

发表于 9月以前 · 阅读量：509

快速打开Nest.js的世界

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

发表于 8月以前 · 阅读量：510

你为什么需要 useMount 和 useUnmount?

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

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

APP如何与H5通信？

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

发表于 6月以前 · 阅读量：468

WebSocket 从入门到入土

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

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

大厂都使用webp图片提速降本，必须安排！

站点性能优化一个很重要的方向是图片压缩，一方面能提升客户端访问性能，另外一方面因为图片体积变小，能大大减少站点的流量成本，特别是博客，相比文本内容，大量的图片占了流量成本的大头。

发表于 9月以前 · 阅读量：496

前端如何生成临时链接？

前端基于文件上传需要有生成临时可访问链接的能力，我们可以通过URL.createObjectURL和FileReader.readAsDataURAPI来实现。

发表于 9月以前 · 阅读量：457

Promise中这四个API原来这么简单！

不管你是否还学的动，JS语言依然在以自己的节奏飞快的进化。Promise中的any()、race()、all()方法都是比较常见的；转眼间，Promise 的工具包里又多了一个方法Promise.allSettled 供你选择，它看起来像是对 Promise.all 的一种补充，缓解了使用 Promise.all 碰到reject 的痛点问题。

发表于 9月以前 · 阅读量：488

认识&对比 React、Vue2、Vue3 三者的 diff 算法

React 是 Fiber 架构的，Fiber 其实是一个链表的结构，但是由于没有设置反向指针，因此没有使用双端比对的方式去优化 Diff 算法（没有反向指针，从右往左遍历链表会很困难）。这一点在 React 源码 reconcileChildrenArray 函数的注释中也有说明。