ShaoKang Blog

人生在勤，不索何获.

鉴权方案

鉴权方案 互联网系统，安全问题一直是一个比较大的问题，所以鉴权方案也是互联网系统开发中比较重要的一个环节。下面介绍几种鉴权方案。 1. HTTP 基本认证 允许 HTTP 用户代理在请求时，通过用户提供用户名和密码的方式，实现对用户身份的验证。更多内容 用户名和密码都是通过 base64 编码后通过 HTTP 明文传输的，安全性较低。线上网络基本不会用这种方式。 2. Sessio...

Posted by shaokang on August 9, 2024

react hooks原理

背景 React Hooks 解决的痛点问题是组件复用状态逻辑很难、复杂的组件难以理解、难以理解的 class 等原因。 详见React Hooks 简介 设计目标和原则 无 Class 的复杂性 无生命周期的困扰 优雅地复用 对齐 React Class 组件已经具备的能力 概览 React Hooks 提供了以下 API： useState: 给组...

Posted by shaokang on August 6, 2024

揭秘 bundless

背景 随着前端项目复杂度的不断提升，项目启动速度逐渐变慢已成为一个亟待解决的问题。以 Webpack 为例，随着项目规模的扩大，其在构建方面的痛点愈发凸显，尤其是构建速度过慢的问题。这主要源于两方面原因：一是在项目冷启动时，Webpack 需要递归打包整个项目的依赖树，这个过程耗时较长；二是 JavaScript 语言本身的特性（如解释执行、单线程执行）限制了构建性能的提升，导致构建过程遇...

Posted by shaokang on July 24, 2024

React 优先级

优先级 React 更新过程中涉及到与优先级相关的处理，通过优先级的灵活运用，React 实现了可中断渲染，时间切片(time slicing)，异步渲染(suspense)等特性。 优先级架构下，高优先级任务可以打断低优先级任务。当用户操作界面时，例如搜索、点击、下拉等操作，为了避免页面卡顿，需要让出线程的执行权，先执行用户触发的事件（高优先级任务），其它不那么重要的事件（低优先级任务...

Posted by shaokang on July 23, 2024

React 位运算

位运算 位运算就是基于整数的二进制表示进行的运算。由于计算机内部就是以二进制来存储数据，位运算是相当快的，但不直观且只支持整数运算。 合理的运用位运算更能显著提高代码在机器上的执行效率。 特性 位运算 用法 描述 与(&) a & b 两个对应位都...

Posted by shaokang on July 9, 2024

日志埋点

概念 埋点是将用户在 App 或者网页上各种行为记录下来并且上报的机制。埋点能有效的记录用户各式各样的行为，帮助我们更好的了解用户在我们平台的上行为习惯和使用体验。 埋点类型 常见的埋点类型有： 行为埋点：页面/APP 上的各种操作行为。 性能埋点：页面/APP 加载、渲染、交互等性能指标。 页面埋点：PV、UV 统计。 点击埋点：用户点击的按钮、链接等。 上报...

Posted by shaokang on July 4, 2024

JS 沙箱

概念 沙箱（sandbox）是一个安全机制，用于隔离运行代码，以防止代码对其它部分的应用程序或系统造成不必要的影响或安全风险。沙箱提供了一个受控环境，在这个环境中，代码可以被执行而不影响外部环境，从而保护用户数据和系统安全。 使用场景 在 JavaScript 中，沙箱通常用于隔离和控制代码执行的环境，以确保代码运行在一个安全的、受限制的环境中，避免对主环境造成潜在的损害。 执...

Posted by shaokang on July 3, 2024

diff 算法

概念 前端框架中的 diff 算法主要用于高效地更新和渲染用户界面（UI）。React、Vue 这些框架中，diff 算法的核心目标就是比较虚拟 DOM（Virtual DOM）树的变化，并最小化实际 DOM 操作，从而提高性能。 虚拟 DOM (Virtual DOM)：前端框架常用一个轻量级的 JavaScript 对象来表示真实的 DOM 结构，这个对象称为虚拟 DOM。当状...

Posted by shaokang on June 6, 2024

原子化CSS

概念 原子化 CSS 是一种 CSS 架构，它通过将 CSS 样式拆分成更小的、可重用的组件来减少代码量。它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 例： 预置的 class 列表 .m-1 { margin-top: 0.25rem; } .p-1 { padding-top: 0.25rem; } 编码时直接在 class 中添加预置的 ...

Posted by shaokang on May 23, 2024

Mock

背景 开发环境下，前端往往需要调用后端接口，但是后端接口可能尚未开发完成，或者接口返回的数据格式有变动，导致前端无法正常运行。因此，我们需要模拟后端接口返回数据来进行前期的开发。 Mock 方案 平台工具 Yapi: 具备权限管理、Mock、数据导入、自动化测试等功能 Apifox，相当于 Postman + Swagger + Mock + JMeter 组合。 请求...

Posted by shaokang on March 29, 2024

Tags
babel 复习 Node React 工程化 读书笔记 react
About me

Better late than never

✉️kanglover00@outlook.com

Firends Links