XH_jing的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在项目开发中，良好的代码编写规范是项目组成的重要元素。本文将详细介绍在项目开发中如何集成相应的代码规范插件及使用方法。

无论在面试还是内部晋升，webpack 构建优化方案 一直都是非常重要的部分。

koa (中文网) 是基于 Node.js 平台的下一代 web 开发框架，致力于成为应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石；利用 `async 函数` 丢弃回调函数，并增强错误处理，koa 没有任何预置的中间件，可快速的编写服务端应用程序。

这些属性其实并没有多么新，但受限于固有的浏览器兼容思维，可能在日常开发中用的不多，随着 IE11 都已经是小众浏览器后，可以大胆用起来了。

大部分 HTML 标签都是可以互相嵌套使用的，但为了确保文档结构的正确性和语义的清晰性，某些标签有特定的嵌套规则，违反这些规则刘然浏览器会尝试自动修复，但可能会导致非开发者预期的页面渲染错误或意想不到的行为

高级前端面试题之浏览器模块「精选篇」

2024 前端面试题之HTML「精选篇」

在CSS flex布局中，使用来控制列表的水平对齐方式，使用或者对齐时，如果最后一行的列表的个数不满，就会出现最后一行没有完全垂直对齐的问题。👇 如下示例：

根据使用浏览器提供的原生功能 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文本到剪贴板。在本地开发，或者说是在使用http://127.0.0.1:8088 或者 http://localhost:8088 本地调试时，是没有问题的，但是如果使用绑定 host 或者使用不安全域（域名+http）时，使用此功能，就会发生下面的报错：Cannot read properties of undefined (reading 'writeText')

在JavaScript中，事件流和事件模型是处理用户交互的关键概念。深入理解这些概念将使你能够更好地处理和响应用户的动作。本文将详细介绍JavaScript的事件流和事件模型。

Sass 是一种CSS预处理器，它引入了许多增强和扩展CSS的功能，使样式表的编写更加灵活和可维护。与纯粹的CSS相比，Sass提供了嵌套规则、变量 (nesting)、混合器（mixins）、继承等功能，大大提高了样式表的可读性和可维护性。

数组扁平化，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组。

上面主要总结了 Redis 的安装、启动停止的使用方式，如果哪里写的有问题，还请大佬指正。希望上面的内容对你的工作学习有所帮助！欢迎各位一键三连哦～各位 加油！✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下👍⭐️✏️评论，你的意见是我进步的财富！\textcolor{green}{评论，你的意见是我进步的财富！评论，你的意见是我进步的财富！

requireexports和importexport本质上的区别，实际上也就是 CommonJS 规范与 ES Module 的区别。浏览器在不做任何处理时，默认是不支持import和require；babel会将 ES6 模块规范转化成 CommonJS 规范；webpackgulp以及其他构建工具会对 CommonJS 进行处理，使之支持浏览器环境它们有三个重大差异。CommonJS 模块输出的是一个值的拷贝，ES Module 输出的是值的引用。

在JS最早出现的时候，是为了实现一些简单的功能，但随着浏览器的不断发展，对于JS的要求也越来越高，需要实现一些较为复杂的功能。这个时候开发者为了维护方便，会把不同功能的模块抽离出来写入单独的 js 文件里，但是当项目更为复杂的时候，html 可能会引入很多个js文件，而这个时候就会出现命名冲突，污染全局作用域，代码库混乱不堪等一系列问题，这个时候模块化的概念及实现方法应运而生。

在进行页面切换时，如果页面中存在异步执行操作 `setState` 或其他操作时，在未执行完成即进行页面切换（此时 react 组件将被销毁），便会抛出此异常信息。Can't perform a React state update on an unmounted component

前段时间更新升级 Mac 版本之后，使用 VS code 终端时出现 `xcrun: error: invalid active developer path` 的问题。xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

最近需要新开一个基于 React 移动端的项目。由于网上完整的 H5 初始化项目比较少，所以在此总结一下如何从 0—1 开发一套基于 React 框架的 H5 初始化项目，下载就可以直接进行开发，欢迎大家点赞收藏。............

在配置中找不到方法，所以在点击响应时，会有警告，但是程序运行不会报错。这也是小白在学习小程序时经常容易犯的错误，今天竟然把一个开发了多个小程序的我给呆住了，现在就来分析一下产生这个问题的原因有哪些。

写在最前最近在做一个项目，碰到一个问题，其应用场景十分常见，类似于发微博的效果。问题比如我在编辑时：在内容编辑时，使用简单的 <textarea> 进行内容的获取，其中添加分段、空格等样式。需求我需要将编辑的内容原样展示，如果一行内容过多时，进行自动换行处理，且可以实现 \n 的手动换行比如这样展示：解决方案使用 <pre> 标签<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。

在 16.8 版本之后的 React 发布了新特性 Hooks。 本篇文章主要对该新特性进行了详细讲解，并对一些常用的 Hooks 进行代码演示，希望可以对需要的小伙伴提供一些帮助。

时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～前言今天我们开启第三个专题：React 中函数组件和类组件的区别。一、函数组件 和 类组件1. 函数组件函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props.

时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～前言今天我们开启第二个专题：React 中生命周期钩子的使用。我们在学习每个框架的生命周期的时候，都不是去死记硬背他们的顺序和作用，而是应该去结合我们在实际应用开发过程中对这些生命周期的需求，来帮助我们完成一些事情。在新环境下，我们默认都是基于 React 16.4 之后的生命周期进行开发学习，下面的内容也是基于 16.4 版本的生命周期钩子，如果觉得有问题，可.

时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～前言今天我们开始第一个专题：React 中 关于 props 和 state。当然我们不是对 props 和 state 基本用法的介绍，而是尝试由浅入深的来解释 props 和 state，并且归纳使用它们时的注意事项。我们在开发应用时，必然是要与数据进行频繁交互的。React 的核心思想是组件化的思想，所有的页面会被切分成一些独立的、可复用的组件。那么数据.

最近项目终于忙完了，在开发时就会暴露出一堆问题，正好趁着这个时间给自己充充电。下面总结了一些关于 JavaScript 常用字符串的操作方法，它可以让我们更高效的处理数据，而不必使用时每次都去查询每个方法怎么用，可以大大提高我们的开发效率哦。正餐开始，来看看 JavaScript 中有哪些常用的字符串方法！1. 获取字符串长度JavaScript 中的字符串有一个 length 属性，该属性可以用来获取字符串的长度const str = 'hello world';str.length .

什么是hosts？hosts 是一个没有扩展名的系统文件，其基本作用就是将一些常用的域名与其对应的 IP 地址建立一个关联“ 数据库 ”。当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从hosts文件中寻找对应的 IP 地址，一旦找到，系统就会立即打开对应网页，如果没有找到，则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。Mac 电脑设置hosts的方法？一、打开终端，找到如下图标二、在打开的窗口中输入 sudo vim /ect/hosts 然后按下回车，并输入电脑的