前端 Source Map 原理与结构详解
在现代前端开发中，源码通常需要经过打包、压缩、转译等多个构建步骤，最终输出的 JavaScript 代码往往与原始代码相去甚远。这虽然对性能有利，却带来了一个问题： 调试困难 。 为了解决这个问题，浏览器引入了 Source Map 技术，可以将压缩或转译后的代码映射回原始源代码。本文将深入介绍 source map 的原理、文件结构、编码方式，并通过一个实际例子进行详细分析，甚至手动解码其中关键字段。 一、什么是 Source Map...
git之代码提交错误解决
我 add 错误文件了，怎么办？ 这个就比较简单了，执行 该命令的作用是： 撤销暂存 ：所有已经 的文件会变成未暂存状态。 保留工作区的修改 ：文件内容保持不变，仍然在工作区。你可以继续提交文件或者做一些修改之后再提交文件。 我不但 add 了还 commit 了，怎么办？ 只能说你还没推送，还行！！！ 其实也不难，执行一下 其中的HEAD 1是将 （当前分支的最新提交）回退到 前一个提交 （ 表示“当前提交的前一个”）。 如果你做了两...
H5 如何 C 端唤起导航高德百度 APP
可使用https://github.com/suanmei/callapp lib URL Scheme Protocol 定义 SchemeURL（通常指 URL Scheme 协议）是一种在移动操作系统中实现应用间通信的机制，允许应用程序通过自定的 URL 格式调用其他应用的功能或传递数据。 格式与参数 它的典型格式如下： scheme://host:port/path?query#fragment ：协议标识（如 、 或自定义名称...
吃透前端项目优化系列（一）：从构建提速开始，分节拆解工程化方案
引言 前端项目越做越大，加载慢、打包久、体验差成了通病？别慌，这个系列会分节拆解 7 大优化方向，从工程化角度帮你逐个击破。第一节先聚焦构建与打包优化，用 Vite 和 Webpack 的实战技巧提速，后续还会解锁其他优化模块，关注追更不迷路～ 优化不是一次性动作，而是分阶段深耕的过程 —— 跟着系列文章一步步来，让项目性能持续升级。 开始 🚀整个系列将按 7 大优化方向逐步展开，每节聚焦一个核心模块，帮你系统掌握前端项目优化： |...
吃透前端项目优化系列（二）：首屏渲染优化 + 性能指标拆解首屏加载慢、性能指标看不懂
引言 首屏加载慢 1 秒，用户流失率可能上涨 20%！这节专门解决 “首屏渲染” 和 “性能指标” 两大痛点 —— 从资源加载怎么排优先级，到页面渲染阻塞怎么破，再到核心 Web 指标怎么看，连 Vue3 特有的编译优化都拆成了实操步骤，帮你让页面加载又快又稳～ 性能优化不是 “凭感觉提速”，而是看懂指标、精准发力 开始 本节聚焦第二模块，专注首屏渲染与性能指标： | 序号 | 优化方向 | 本节聚焦 | 核心价值 | | | | |...
new操作
new操作符做了以下工作 手写new操作符（适用于Class类和Function构造函数） 1. 使用 ： 创建了一个新的空对象，并将其原型设置为 。这等同于手动设置 的效果，但更符合标准和规范。 2. 泛型类型参数 ： 定义了 是一个构造函数类型，它接受任意数量的参数并返回任意类型的实例。 InstanceType 是 TypeScript 中的一个类型操作符，用于从一个构造函数类型中提取其实例类型 表示 构造函数所创建的实例类型，这...
懒加载：让网页像优雅的绅士
懒加载：让网页像优雅的绅士，只展示该展示的内容 你是否曾打开一个图片密集的网页，等待加载时焦虑地敲打桌面？今天，让我们一起探索懒加载技术如何解决这个痛点！ 为什么需要懒加载？ 想象一下：你打开一个电商网站，页面瞬间请求 50多张大图 ！这就像早高峰地铁站所有乘客同时挤向闸机，结果必然是拥堵不堪。传统图片加载方式带来的问题显而易见： 带宽浪费 ：用户可能只看前几张图，却加载了所有图片 性能瓶颈 ：同时发起大量请求导致页面卡顿 用户体验差...
Ubuntu 22.04下Docker安装
Ubuntu22.04下Docker的安装 为什么要安装Docker，在这里就不用多说了，在我的另一篇文章里有告诉大家原因。大家可以去看看 下面是具体的步骤： 准备条件 准备安装 安装Docker 安装Docker 命令补全工具 允许非Root用户执行docker 命令 当我们安装好了Docker之后，有两种方式来执行docker 命令 在docker命令前加上sudo, 比如：sudo docker ps sudo i 切换至root...
vue3源码解析：ref原理
今天我们来看看 ref 的具体实现。ref 是 Vue 3 中最基础的响应式 API 之一，它可以将任何值转换为响应式对象。 实例引入 首先通过一个例子来看看 ref 的用法: 这个例子展示了 ref 的基本使用: 1. 通过 ref() 创建响应式引用 2. 通过 .value 访问和修改值 3. 在模板中会自动解包,不需要 .value 核心数据结构 下面通过源码来看看 ref 的核心数据结构和方法: 1\. 类型系统设计 首先看看...