八了个戒-CSDN博客

原创前端性能优化：理论与实战「强烈建议实践收藏慢慢看，干货太多」

前端性能优化一直是开发过程中不可忽视的重要环节，尤其是随着前端技术的不断进化，性能的提升不仅仅是让页面“快一点”，更是让用户在各种网络环境下都能获得流畅的体验。作为一名高级前端开发工程师，我将从理论和实践结合的角度，详细阐述性能优化的各个方向。前端性能优化贯穿了网络、页面渲染、JavaScript执行、图片处理、打包构建和框架使用等多个环节，最终目的是提升用户体验，减少加载时间，提升交互响应速度。网络优化。

2024-10-22 10:40:44 1212

原创 Vue3应用之使用Vite搭建Vue3项目以及TypeScript、Vue Router、Vuex、Ant Design的使用

尤大的 Vue3.0 已经发布有一阵子了，已经很成熟了。今天想起来，是时候该上手体验分享一波了。前言大家都知道，在 Vue3 生态系统中有一个新构建工具 Vite ，它的开发服务器比 Vue CLI 快 10 ~ 100倍，是不是很好奇？具体的内容可以移步至：迟到的 Vue3.0 与 Vite 的体验学习总结的七、Vite 与 Vue CLI 阅读。本文将主要分享如何使用 Vite 来创建一个 Vue3.0 的项目，并且结合相关内容（TypeScript、Vue Router、Vuex、An.

2021-01-05 18:06:59 16151 11

原创 2024最新最全的前端面试题集锦（2024 持续更新中...敬请关注）

工作以来，感觉自己接触到的东西还是挺多的，但是当我面试的时候，就会发现各种问题，很多知识点都是模棱两可，答得不全面。究其原因，还是没有吃透这些内容。所以我决定，用几个月的时间，将我们大前端的大部分精选面试题进行整理，将大部分知识点进行归纳总结，为自己也为其他小伙伴们提供一份面试学习参考。

2020-12-17 14:10:34 23444 11

原创高级Web前端必会面试题知识点，大厂面试必备

高级Web前端工程师必会面试题，这里只是整理一些范围知识点，并没有特别具体的面试题目，只要把这些知识点搞明白了，面试题都不是问题。文档持续更新中。。。加油骚年！！

2020-08-30 23:30:24 6266 1

原创「JavaScript深入」Socket.IO：基于 WebSocket 的实时通信库

Socket.IO 作为 WebSocket 的增强版本，在实时通信领域具有广泛的应用。它提供了事件驱动、自动回退、广播机制等功能，使其在即时聊天、协作编辑、多人游戏等场景中表现出色。如果需要低功耗 IoT 设备通信，可以考虑 MQTT；如果是高效的音视频通信，WebRTC 是更好的选择。不同的应用场景需要选择合适的实时通信技术，以保证系统的稳定性和性能。

2025-03-20 14:38:11 1126

原创「JavaScript深入」轮询（Polling）：基础的实时通信方式

轮询技术作为实时通讯的基础方案，虽然在新一代技术面前略显陈旧，但在特定场景下仍具有实用价值。开发者应充分理解各种技术的优缺点，根据实际需求选择最合适的解决方案。随着HTTP/3和WebTransport等新技术的发展，实时通讯领域将迎来更多创新和突破。

2025-03-20 11:00:41 915

原创「JavaScript深入」WebSocket：高效的双向实时通信技术

在现代 Web 开发中，实时通信是许多应用的核心需求，例如在线聊天、实时协作、游戏对战等。WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间建立持久连接，并在双方之间高效地传输数据。

2025-03-19 16:12:08 1311

原创「JavaScript深入」Server-Sent Events (SSE)：轻量级实时通信技术

在现代 Web 应用中，实时数据推送成为了关键需求之一。例如，在股票行情、天气更新、社交通知等应用场景中，客户端需要能够持续接收服务器端的最新数据。Server-Sent Events (SSE) 是一种基于 HTTP 协议的轻量级实时通信技术，能够让服务器主动向客户端推送消息。

2025-03-19 15:33:19 931

原创「JavaScript深入」Web Components：构建可重用的跨框架组件

在现代 Web 开发中，组件化开发已经成为一种主流趋势。无论是 React、Vue 还是 Angular，组件化开发都极大地提高了代码的可维护性和可重用性。然而，这些框架的组件通常只能在特定的框架生态中使用，跨框架的组件复用一直是一个挑战。Web Components 的出现为这一问题提供了一个原生解决方案。下面将深入探讨 Web Components 的核心概念、技术细节以及其在实际开发中的应用。

2025-03-13 18:45:44 1091

原创「JavaScript深入」Canvas 全面指南

Canvas 是 HTML5 引入的一个用于绘制图形的元素，通过 JavaScript 可以动态地在网页上绘制和操作图像、图形、动画等。Canvas 提供了一块可编程的位图区域，开发者可以通过绘图上下文对其进行绘制

2025-03-13 10:38:31 1101

原创「JavaScript深入」二进制数据处理详解「Blob、File、FileReader、ArrayBuffer、Typed Arrays、DataView」

JavaScript 主要用于处理文本数据，但在更复杂的应用（如图像、音频、视频处理）中，二进制数据的操作变得尤为重要。是一种用于表示通用、固定长度的原始二进制数据缓冲区，它是处理二进制数据的基础，可以用于存储各种类型的数据，必须通过。在 JavaScript 中都是用于处理二进制数据的对象，在部分场景两者都能胜任，但擅长的场景有所区别。Blob 代表不可变的二进制数据块，通常用于处理文件、图像、音频等类型的数据。中的数据，允许以任意的字节序（大端或小端）读写不同类型的数据。

2025-03-12 17:57:33 840

原创「JavaScript深入」理解 JavaScript 中的不可变对象（Immutable Object）

不可变对象是 JavaScript 中管理状态的关键概念，特别是在 React、Redux 和函数式编程中。它可以提升代码的可预测性、可维护性，并优化性能。

2025-03-12 15:43:33 917

原创「JavaScript深入」解析 Fetch API

Fetch API 是 JavaScript 提供的基于 Promise 的现代化网络请求接口，它提供了比 XMLHttpRequest 更加强大和灵活的方式来处理 HTTP 请求。

2025-03-11 14:27:30 465

原创「JavaScript深入」理解 Object.defineProperty 与 Proxy

在 JavaScript 中，Object.defineProperty 和 Proxy 是两种强大的机制，用于拦截和处理对象属性的读写操作。Vue.js 的响应式系统正是基于它们实现的。本文将详细介绍这两者的基础用法、区别以及它们在 Vue 响应式系统中的应用。

2025-03-11 11:22:32 956

原创「Echarts 实践」Echarts 柱状图点击事件的实现方法【超实用方案建议点赞收藏】

在前端开发过程中，柱状图举例应用突出：例如点击柱形区域时，完成相关操作或跳转至指定界面。尽管Echarts提供了丰富的事件监听机制，但在实现过程中，不同场景对点击调用的需求不完全相同。本文将详细介绍如何实现柱状图点击事件，并提供实现整条柱形区域点击的方法。

2025-01-10 11:19:31 1797

原创记一次 Vue3 中 ref 初始化未完成导致方法未触发的解决方案

在 Vue3 项目中，ref 的使用需要注意其初始化时机，以避免在值未赋值时调用方法。通过使用 nextTick、onMounted 等技术，可以有效避免此类问题。

2024-11-29 14:45:22 508

原创「JavaScript深入」熟悉事件循环Event Loop吗？说说事件循环机制和宏任务微任务「拿走不谢」

「JavaScript深入」熟悉事件循环吗？说说事件循环机制和宏任务微任务

2024-10-17 09:36:39 1169

原创「JavaScript深入」彻底搞懂JS原型与原型链

「JavaScript深入」彻底搞懂JS原型与原型链：原因、使用class实现继承、原型、原型链、prototype和proto

2024-09-28 16:20:13 1247

原创「JavaScript深入」聊一聊 new操作符具体干了什么？

「JavaScript深入」聊一聊 new操作符具体干了什么：概念「在JavaScript中，`new` 操作符用于创建一个给定构造函数的实例对象」、流程、手写一个new

2024-09-27 17:42:37 635

原创「JavaScript深入」谈谈 JS 的垃圾回收机制

谈谈JS的垃圾回收机制：内存管理、可达性、内存回收机制、V8对于垃圾回收机制的优化

2024-09-25 09:53:23 1201

原创「JavaScript深入」彻底理解JS中的闭包

彻底理解JS的闭包问题：概念、示例、实用的闭包、用闭包模拟私有方法、一个常见错误：在循环中创建闭包、优劣、图解闭包、闭包在实际中的应用

2024-09-25 09:44:21 1543

原创「JavaScript深入」一文说明白JS的执行上下文与作用域

一文说明白JS的执行上下文与作用域：上下文执行、上下文、生命周期、执行栈、作用、作用域等内容

2024-09-24 11:17:30 1274

原创「JavaScript深入」深拷贝与浅拷贝，如何手写实现？

「JavaScript进阶」深拷贝与浅拷贝，如何手写实现？浅拷贝：浅拷贝得到的对象会受原对象的影响（同样可以影响原对象）深拷贝：深拷贝得到的对象不会受到原对象影响

2024-09-24 08:53:56 735

原创「JavaScript深入」一文吃透JS的基本数据类型 Symbol

一文吃透JS的基本数据类型Symbol：概念、Symbol.prototype.description、作为属性名的Symbol、实例：消除魔术字符串、属性名的遍历、Symbol.for()，Symbol.keyFor()、内置的Symbol值

2024-09-23 13:41:23 1187

原创【TypeScript入坑】TypeScript 的declare关键字、d.ts类型声明文件

【TypeScript入坑】TypeScript 的declare关键字、d.ts类型声明文件

2024-09-23 09:03:17 515

原创【TypeScript入坑】TypeScript 的装饰器

装饰器（Decorator）是一种语法结构，用来在定义时修改类（class）的行为。在语法上，装饰器有如下几个特征。第一个字符（或者说前缀）是，后面是一个表达式。后面的表达式，必须是一个函数（或者执行后可以得到一个函数）。这个函数接受所修饰对象的一些相关值作为参数。这个函数要么不返回值，要么返回一个新对象取代所修饰的目标对象。

2024-09-20 15:13:35 974

原创【TypeScript入坑】TypeScript 的复杂类型「Interface 接口、class类、Enum枚举、Generics泛型、类型断言」

【TypeScript入坑】TypeScript 的复杂类型「Interface 接口、class类、Enum枚举、Generics泛型、类型断言、namespace」

2024-09-20 09:17:08 1594

原创【TypeScript入坑】TypeScript 的类型系统「any、unknow、never类型、数组、元组 tuple、函数、Symbol类型、对象」

TypeScript 数组有一个根本特征：所有成员的类型必须相同，但是成员数量是不确定的，可以是无限数量的成员，也可以是零成员。元组（tuple）是 TypeScript 特有的数据类型，JavaScript 没有单独区分这种类型。它表示成员类型可以自由设置的数组，即数组的各个成员的类型可以不同。元组必须明确声明每个成员的类型。函数的类型声明，需要在声明函数时，给出参数的类型和返回值的类型。Symbol 值通过Symbol()函数生成。在 TypeScript 里面，Symbol 的类型使用。

2024-09-20 08:54:38 440

原创【TypeScript入坑】什么是TypeScript？

TypeScript：是 JavaScript 的超集，拥有类型机制，不会再浏览器直接执行，而是编译成 JavaScript 后才会运行。超集（superset）：比如 ES6 包含了 ES5 所有的内容，还有一些独特的语法特性，就可以理解为 ES6 是 ES5 的超集类型：指的是静态的类型，js 中一个存放字符串的变量，后续依旧可以将数字、对象、数组等类型赋值到该变量，这是动态类型。而 ts 则是静态类型，后续不可更改类型。

2024-09-20 08:45:29 498

原创记一次 npm cache clean --force 时报错 Your cache folder contains root-owned files, due to a bug in...的解决方案

因为默认情况下，npm不允许完全清空缓存。这个命令会删除所有缓存数据，确保你的后续安装使用的是最新的包。这段字面描述很清楚，你的缓存目录中包含 root 权限的文件，所以因为你没有权限操作这个文件就报错了。首先删除 node_modules 目录和 package-lock.json 文件，以确保从头开始。最后的安装完依赖，项目成功跑起来了，哦耶✌️。安装依赖包下载依赖的时候报错。执行此命令，问题解决。

2024-09-19 14:14:16 1590