跳到主要内容

· 阅读需 47 分钟
Oxygen

Shadcn ui 是最近比较火的一个 React 组件库,官方介绍其并非组件库,因为它并非基于 npm package 的形式来维护,而是通过 nodejs 命令支持将组件源码直接复制到你的项目中。

本篇文章从使用到分析 shadcn cli 命令源码的实现,来深入了解这个组件库内部的一些原理。

· 阅读需 13 分钟
Oxygen

当我们说到图片懒加载、页面数据的滚动加载这些体验设计时,一般能够想到基于scroll事件,通过getBoundingClientRect方法获取元素相对于视口偏移量top,来判断元素是否可见,demo 如下

Edit jovial-snowflake-e42869

这种实现方式较为繁琐,但是现在我们有了IntersectionObserver API,可以大大简化这些通过计算元素偏移量来判断可视性的逻辑。

· 阅读需 29 分钟
Oxygen

无损压缩

无损压缩目前使用最广泛的图像格式是 PNG,但是近几年也出现了许多新的压缩算法标准,以期望替代 PNG,提供更好的图像压缩效果。

· 阅读需 17 分钟
Oxygen

背景

根据 httpachive 的统计数据,在统计的 5,431,533 个 PC 页面中:

  • 图像流量平均占页面的 44.5%(1032.0 KB -> 2317.8 KB)

  • 请求数量平均占页面的 33%(25 -> 76)

所以图像数据在网站内容部分占比巨大,使用合适的图像格式能有效降低网站的流量带宽,同时降低网络传输延时,提升用户体验。

· 阅读需 6 分钟
Oxygen

背景

这两天又遇到一个图片问题,具体就是在 HTTPS 协议网页请求完的 HTTP 图片会被限制下载,这...,web 静态资源的问题还挺多坑。

· 阅读需 11 分钟
Oxygen

背景

上一篇 blog 提到了跨域访问图像资源引起的 canvas 污染的问题,其实当时我在查看跨域请求到的图像资源时,还无意中发现了一个新的 HTTP 响应头Access-Control-Allow-Private-Network,这篇文章就来简单探讨一下这个非常新的跨域请求的特性。

· 阅读需 10 分钟
Oxygen

背景

前端时间实现了一个用canvas往模板图片绘制数据的功能点,遇到了一个跨域引起canvas污染的问题,仔细发掘下去发现不少的技术点。