2024-11-05关于页面重构的经验，我在项目中经常处理旧版网站的优化升级，利用HTML5和CSS3的技术优势，调整结构，提升性能，同时保持兼容性。图片尺寸优化：只加载视口需要的部分图片，使用懒加载技术（如intersection Observer API），当图片进入用户的可视区域时才加载，减少初始加载时间。缓存管理：利用浏览器的缓存功能，如果用户再次访问已加载过的图片，可以从本地快速读取，而不是每次都从服务器获取。Web Workers：即使在后台运行，也可以处理耗时任务，避免阻塞主线程，提升用户感知的性能。

https://www.qianduange.cn//article/20029.html 分类：前端知识

2024-10-28这玩意利用了 union type 在 conditional type 中的 distributive 的特性，将 union 在第一个 condition 中 map 到多个具有单独类型参数 function，然后再 infer 到函数的参数上，就从 union 变成了 intersection。对上面这个合并的函数来说，我们要求他的参数类型一定是同时满足 union 中所有函数的参数类型的，所以一定是取交。函数中的参数，在上面的例子中，这个函数实际上是将 union 中的两个函数合在了一起。_ts interface合并

https://www.qianduange.cn//article/19322.html 分类：前端知识

2024-04-29TypeScript 的交叉类型（intersection Types）是将多个类型合并为一个新的类型的一种方式。通过交叉类型，可以创建一个包含了多个类型特性的类型。需要注意的是，当我们在使用联合类型的值时，需要进行类型检查和类型保护。联合类型（Union Types）是 TypeScript 中的一种高级类型，它允许一个变量可以存储多种类型的值。通过使用交叉类型，可以组合多个类型的特性，创建出更灵活、复合的类型。例如，类型 A & B 表示一个包含类型 A 和类型 B 特性的新类型。_联合类型

https://www.qianduange.cn//article/5982.html 分类：前端知识

2024-02-28在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。el . offsetTop - document . documentElement . scrollTop _react判断元素在可视区域内的组件

https://www.qianduange.cn//article/2874.html 分类：前端知识

2024-01-31其实上面两种方式已经大致实现懒加载，但是，它们都有一个缺点，就是一当发生滚动事件时，就发生了大量的循环和判断操作判断图片是否可视区里。这里就引入了一个叫 intersection Observer 观察器接口，它是是浏览器原生提供的构造函数，使用它能省到大量的循环和判断。这个构造函数的作用是它能够观察可视窗口与目标元素产生的交叉区域。简单来说就是当用它观察我们的图片时，当图片出现或者消失在可视窗口，它都能知道并且会执行一个特殊的回调函数，我们就利用这个回调函数实现我们的操作。_html 图片懒加载

https://www.qianduange.cn//article/883.html 分类：前端知识