- 博客(12)
- 收藏
- 关注
RSS订阅原创 页面重绘和回流
重绘是指浏览器根据元素的样式重新绘制像素的过程。重绘不会改变元素的几何属性，因此不会影响页面布局。回流是指浏览器重新计算元素的几何属性（如宽度、高度、位置等），并重新构建页面布局的过程。重绘（Repaint）**是浏览器渲染页面时的两个关键过程，它们直接影响页面的性能。**回流（Reflow）
2025-03-16 02:37:13
840
原创 link标签的加载模式：preload，prefetch以及默认的同步加载
提供了一种灵活的方式来优化资源的下载，而不必强制网页所有内容都同步加载，这样能够更好地平衡用户体验与资源的高效加载。，开发者可以确保在不显著增加初始渲染时间的情况下提前获取和存储资源，为进一步的交互或更新增加平滑的体验。：当用户正在浏览当前页面时，可以预先加载用户可能会点击的下一个页面的资源（例如样式表、脚本或其他媒体）。是异步加载，但它确实是一种带有优先级的策略，能够在不阻碍页面渲染的情况下，尽可能高效地获取重要资源。都是用于优化网页性能的，可以提前加载资源，但它们的目的和行为有所不同。
2025-03-13 17:46:52
577
原创 TypeScript实现状态模式
首先，我们定义一个State接口，定义了不同状态所需的方法。在这个示例中，我们展示了如何在 TypeScript 中实现状态模式。我们定义了状态接口和多个具体状态类，以及一个上下文类来管理状态的转换。通过这种方法，系统在不同状态下的行为是清晰的，易于扩展和维护。如果需要添加新的状态，只需创建新的状态类并实现State接口，然后在类中进行相应的状态转换即可。这使得整个系统灵活且具有良好的可维护性。
2025-03-13 17:18:44
212
原创 不能尽信AI代码助手，关于浏览器事件传播的探究
捕获阶段和冒泡阶段是事件流的重要组成部分。你可以控制事件在这两个阶段的处理方式。在事件处理程序中，你可以使用捕获或冒泡阶段来实现不同的业务逻辑。理解这两个概念对构建复杂的用户界面和事件处理逻辑至关重要，特别是在涉及多个嵌套组件或元素时。
2025-03-12 17:32:33
884
原创 react实现vue中的keep-alive
在 Vue 中，keep-alive 是一个内置组件，用于缓存组件状态并防止组件的卸载。当组件被缓存时，其状态将保持不变，从而提高性能和用户体验。你可以在 React 中自己实现类似功能的 keep-alive 组件，以便于在组件之间切换时，保持其状态。以下是一个在 React 中实现 keep-alive 的示例，并使用 React Hooks 来管理状态。
2025-03-11 15:46:50
158
原创 自定义滚动条样式
关于自定义滚动条样式<style>/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width:8px; // 纵向滚动条生效 height:16px; // 横向滚动条生效 background-color: #000926; // 待确认}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,
2022-01-20 17:30:17
1085
原创 解决vue多组件页面中，组件内部遮罩层的层级问题
解决vue多组件页面中，组件内部遮罩层的层级问题在vue项目中遇到了一个问题： 某个多组件页面中有多个组件，组件内部做了遮罩样式，出现了A组件中遮罩总是无法遮盖B组件的问题。对此问题进行研究关于z-index需要注意的一些问题<template> <div class="content"> <div> 我想象在黄昏和黑夜的边界，有一条极窄的缝隙，另一个世界的阴风从那里刮过来。坐了几个黄昏，我似乎有点明白了。有一种消沉的力量，一种广大的消沉，在黄昏时来。
2022-01-18 11:59:45
5793
原创 js实现点击复制功能
通过创建DOM节点并即时删除的方法实现$copy(val) { console.log(val) let myInput = document.createElement('input') myInput.value = val document.body.appendChild(myInput) myInput.select() document.execCommand('Copy') document.body.removeChild(myInput) alert(`成功复制 <
2021-12-22 13:40:20
354
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人