ShaoKang Blog

人生在勤，不索何获.

React Server Components

概述 React Server Components（RSC）是 React 团队引入的一项新技术，旨在优化应用的性能和开发体验。它允许开发者在服务器端渲染部分组件，而不是将所有组件都运行在浏览器端。这样可以减少客户端需要下载和执行的 JavaScript 代码量，同时提高页面加载速度和用户体验。 什么是 React Server Components？ React Server Co...

Posted by shaokang on February 20, 2025

JS 四舍五入并保留两位小数

前言 前端经常需要将一个数字进行四舍五入并保留两位小数，如何实现并保证精确不存在问题？下面将介绍几种常见的方式。 Math.round 直接用 Math.round 函数只能将其四舍五入为整数，并不能保留小数 Math.round(0.4); // 0 Math.round(0.5); // 1 Math.round(1.1); // 1 Math.round(1.5); // 2 ...

Posted by shaokang on February 17, 2025

语义化版本号（Semantic Versioning）

语义化版本号（Semantic Versioning） SemVer 是一种用于软件版本的命名约定，根据语义进行版本控制，使得版本号更加明确和易于理解。它可以帮助开发者和团队更好地管理代码版本，避免代码的不一致性和混乱。npm 的版本策略就是依赖 node-semver 来控制的。 版本格式：主版本号.次版本号.修订号，版本号递增规则如下： 主版本号：当你做了不兼容的 API 修...

Posted by shaokang on February 8, 2025

资源加载优化

引言 在 HTML 中，标签可以用于加载各种外部资源，而通过设置不同的 rel 属性值，可以实现对资源加载的优化。本文介绍 preload、prefetch、preconnect 和 prerender 的作用及其适用场景。 preload MDN 作用: 提前加载当前页面需要的资源。使用 preload 可以告诉浏览器某个资源是当前页面必需的，并应尽早加载。 适用场景: ...

Posted by shaokang on October 17, 2024

浏览器跨Tab通信

背景 浏览器跨标签页通信是指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。 跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。 实现方式 1. LocalStorage、Se...

Posted by shaokang on October 15, 2024

前端 Web Workers

前言 SharedWorker、WebWorker 和 ServiceWorker 是现代浏览器中用于处理多线程任务的三种不同类型的 Web Workers，各自有不同的应用场景和特性。 区别 WebWorker 特点: 允许创建独立于主线程的后台线程。 不能直接操作 DOM，需要通过 postMessage 方法与主线程通信。 每个 WebWorker 在创建时都是...

Posted by shaokang on October 15, 2024

跨平台开发

简介 随着移动应用的发展，出现了很多的跨平台开发方案，接下来我们来介绍不同的跨平台方案。 原生编程和跨平台编程是两种主要的应用开发方式。原生应用主要利用开发平台和操作系统官方提供的编程语言和工具进行开发。比如，iOS 原生应用主要采用 Objective-C 和 Swift，而 Android 原生应用则主要使用 Java 或 Kotlin。 相对而言，跨平台应用则采用非官方提供的编程...

Posted by shaokang on September 23, 2024

react requestIdleCallback

前言 React 为优化页面性能，会在浏览器空闲时巧妙地执行代码，这其中涉及到了 requestIdleCallback API 的运用。本文将深入探讨 requestIdleCallback API 的工作原理，并剖析 React 是如何模拟实现这一 API 的。 requestIdleCallback API 详解 requestIdleCallback 是一个允许开发者在浏览器空...

Posted by shaokang on September 19, 2024

前端实现动画的几种方式

引言 前端开发过程中，动画是必不可少的，但是实现动画有哪些方式呢？这里我总结以下几种前端实现动画的方式。 1. JS 实现动画 JS 实现动画的方式有很多，通过 setTimeout、setInterval 和 requestAnimationFrame 都可以实现动画。 let elem = document.getElementById('elem'); setInterval...

Posted by shaokang on September 14, 2024

浏览器架构

浏览器架构 进程和线程 进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位，线程（thread）是 CPU 调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。 单进程架构 2007 年以前，市面上的浏览器基本都是单进程的，浏览器所有的功能模块都是运行在同一个进程， 这导致一些问题： 不稳定：进程...

Posted by shaokang on August 16, 2024

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

Better late than never

✉️kanglover00@outlook.com

Firends Links