- 博客(23)
- 收藏
- 关注
RSS订阅原创 pinia的基本使用
Pinia 是 Vue.js 的轻量级状态管理库，专为 Vue 3 设计，同时兼容 Vue 2。它提供了一种简单、直观的方式来管理应用程序的状态，取代了 Vuex 在部分场景下的使用。
2025-09-02 20:29:15
903
原创 浏览器渲染原理深度解析（浏览器的事件循环机制）（三）
本文深入解析了浏览器的事件循环机制和渲染原理。首先介绍了浏览器的进程模型，包括浏览器进程、网络进程和渲染进程的分工。重点讲解了渲染主线程通过事件循环处理任务的过程，即不断检查消息队列并执行任务。随后详细剖析了"一帧16.67ms"内浏览器的工作流程，包括宏任务执行、微任务清空、UI渲染和空闲时间调度的优先级顺序，并总结了"宏任务->微任务->rAF->渲染->rIC"的核心关系。最后结合Vue和React的异步更新机制，说明框架如何利用事件循环
2025-08-27 16:39:56
1997
原创 浏览器渲染原理深度解析（二）
浏览器渲染管线分为解析、样式、布局、绘制和合成五个阶段。性能优化的核心是减少管线中的昂贵阶段：最高效的方式是只触发合成（改变transform/opacity），其次是只触发重绘（改变颜色），最差是触发回流（改变布局）。强制同步布局和布局抖动会破坏浏览器的优化机制，应通过读写分离和FastDOM库来避免。will-change可将元素提升到独立合成层优化动画性能，但滥用会增加内存消耗。requestAnimationFrame能确保动画与浏览器刷新率同步，是实现流畅动画的最佳选择。
2025-08-26 23:01:44
963
原创 浏览器渲染管线深度解析（一）
浏览器渲染管线深度解析 浏览器渲染过程分为7个关键阶段：1）解析HTML/CSS生成DOM和CSSOM树；2）样式计算合并二者生成渲染树；3）布局阶段计算几何位置；4）分层处理堆叠上下文；5）绘制阶段生成像素数据；6）光栅化将矢量转为位图；7）合成层最终输出到屏幕。其中回流（布局改变）和重绘（样式改变）最耗性能，优化建议包括：使用transform替代位置属性、will-change创建独立图层、避免布局抖动。Chrome DevTools可分析各阶段耗时，理解管线原理是前端性能优化的基础。 （149字）
2025-08-26 16:41:53
1764
原创 TypeScript 命名空间与混入
TypeScript提供了命名空间和混入两种代码组织方式。命名空间通过namespace关键字隔离代码，避免全局污染，支持嵌套和模块化组织，适合大型项目模块划分。混入则通过动态注入方法实现多重继承效果，突破单继承限制，便于行为复用与组合。两者各有特点：命名空间侧重静态代码组织，混入强调运行时功能扩展。现代开发中，ES6模块和组合式API可替代这两种方式，但理解其原理对处理遗留代码仍有价值。实际应用中，命名空间适合工具库封装，混入常用于UI组件增强。
2025-08-22 14:13:27
297
原创 TypeScript 装饰器
TypeScript 装饰器是一种特殊语法，允许你在不修改类、方法、属性或参数本身代码的情况下，动态添加元数据或修改其行为。它基于装饰器模式，常用于实现日志记录、验证、依赖注入等功能。装饰器在 TypeScript 中通过。以下是一个简单的日志装饰器实现，它会在方法调用时输出日志信息。的语法应用，并需要在。
2025-08-22 10:08:29
371
原创 TypeScript 泛型详解
TypeScript泛型是一种强大的特性，允许创建可复用组件而不丢失类型安全。它通过类型变量（如T）实现类型占位，支持显式指定或自动推断类型。泛型可应用于函数、接口和类，并通过extends添加约束条件。常见用法包括API响应封装、集合类实现等，提供类型安全、代码复用和智能推导等优势。泛型避免了any类型的滥用，帮助开发者构建更健壮的类型系统。
2025-08-22 09:49:34
298
原创 React oninput与onchange区别
都是在用户输入时持续触发，如果要达到原生onchange事件的效果，需要onBlur事件配合使用。在React中的onInput与onChange事件并没有什么区别，React oninput与onchange区别。
2023-09-07 23:51:09
387
原创 微前端micro-app
micro-app 是由京东零售 iPaaS 前端研发团队推出的一款微前端框架，它从组件化的思维，基于类 WebComponent 进行微前端的渲染，它旨在降低上手难度、提升工作效率，并且无关技术栈，也不和业务绑定，可以用于任何前端框架。
2023-03-21 16:23:41
965
原创 HTNL CSS基础概要
HTML（网页设计）必用的设计模式 —css网页编程CSS的基本介绍简介：CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。1.直接采用style属性：<!-- html与css相结合
2020-07-03 21:39:55
248
原创 浅谈flask的发布订阅
浅谈flask的发布订阅发布-订阅模式首先 顾名思义 就像订阅报纸一样，出版社发布不同类型的报纸杂志不同的读者根据不同的需求预定符合自己口味的的报纸杂志,付费之后由邮局安排人员统一派送由上图可卡因看到三个比较重要的点：1.发布者：报社2.订阅者：读者3.调度中心: 邮局不难看出上述过程中出版社和读者完全没有任何接触,在他们没有感知到对方的情况下通过邮局完成了整个流程,邮局就是传说中...
2020-04-12 20:34:54
537
原创 python正则表达式
python正则表达式详解 首先正则表达式是一个很强大的字符串处理工具，几乎任何关于字符串的操作都可以使用正则表达式来完成，作为一个爬虫工作者，每天和字符串打交道，正则表达式更是不可或缺的技能，正则表达式的在不同的语言中使用方式可能不一样，不过只要学会了任意一门语言的正则表达式用法，其他语言中大部分也只是换了个函数的名称而已，本质都是一样的。下面，我来介绍一下python中的正则表达式是怎么使用...
2020-02-23 11:16:10
166
原创 anjularjs简介（一）
1.什么时候用anjularjsAngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标...
2020-02-15 18:58:12
454
转载 Python多态和多态性
Python多态和多态性Python 中的多态是指一类事务有多种形态。比如动物有多种形态，人，狗，猫，等等。import abcclass Animal(metaclass=abc.ABCMeta): #同一类事物:动物@abc.abstractmethoddef talk(self):passclass People(Animal): #动物的形态之一:人def talk(se...
2020-02-08 18:00:30
258
原创 RabbitMQ学习笔记
##RabbitMQ学习笔记（一）##1什么是RabbitMQ消息队列（Message Queue,简称MQ）本质上是个队列 FIFO陷入先出，只不过在队列存放的是message主要用途：不同进程Process/线程Thread之间的通信2为什么会产生消息队列：1不同进程之间传递消息时，两个进程之间的耦合程度过高，改动一个进程，引发必须修改另一个进程，为了隔离这两个进程，在两个进程间抽离...
2019-12-29 22:52:08
128
原创 JQuery + webcam 简单学习心得
JQuery + webcam 简单学习心得本人还是小白 刚刚接触了浏览器拍照 目前讲一下自己的心得首先需要的js和swf控件可以在官网上下载http://www.xarg.org/project/jquery-webcam-plugin/这个是链接后面的代码逻辑学习心得 稍后提供...
2019-06-26 11:21:16
678
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人