1. BigInt js自带
2. Decimal 库

大文件上传

场景：

1. ai自定义模型
2. 长视频网站
3. 建模网站

需求： 3. 断点续传 4. 断开重传 5. 切片上传

方案：

1. 分片，切片取名：hash+index，后端组合切片
2. 切片时主线程卡顿：web-worker多线程切片
3. 切片完后将blob存储到IndexedDB，下次用户进来后嗅探一下是否有未上传完的切片
4. 上传完毕后使用websocker通知

截图

1. canvans
2. puppeteer
3. html2canvas

移动端适配

1. 不同端使用不同的网址
2. 根据不同端加载不同的css
3. 使用响应式（媒体查询）

水印功能

1. 明水印（肉眼可见） 使用Canvas或css设置中背景图片水印。 svg动态水印
2. 暗水印（肉眼不可见） 将水印内容写入到到二进制文件，读取时从文件中读取

静态资源失效

1. 图片 占位图或out，图片失效时显示 重试、上报
2. sss 重要的样式使用html内联的写法。
3. cdn 本地备份，动态切换.
4. 字体 降低字体（兜底）.

函数式编程

以函数封装的方式解决问题，将大问题拆方为多个小问题。 设计函数用于解决小问题，最后通过组合的方式解决问题

1. 纯函数：相同输入得到相可输出
2. 不可变性
3. 高阶函数（函数柯里化）

优点：

1. 可测试性（更好地单元测试）
2. 可维护性（组合优于继承）
3. 并发和简洁

图片加载性能优化

1. 懒加载 在html中将图片的src属性更改为自定义的属性，这样浏览器遇到这个属性时就不会像默认的属性进行处理，当需要加载时将自定义属性的值赋值给src属性

获取到图片的dom，添加监听滚动事件，判断自身与视口的距离，达到一定距离就加载图片 这种方法的缺点是：不停的监听滚动事件，即使已经加载了图片，还是不断地触发事件，性能开销大 IntersectionObserver观察dom元素可视口的交叉区域，每次视口进入dom的显示区域都会调用回调函数。当图片加载后取消观察。

2. 上拉加载和下拉刷新 监听滚动事件如果新的视口和原视口位置有一定的距离就请求数据并添加到数据列表中 监听触摸事件，下划的矩离与原距离有一定距离就请空教据列表并将请求的数据添加的到表中 同时也要实现书流，防抖

SEO优化

1. 使用语义化标签（便于爬虫区分信息）
2. 标题和描述内容
3. 内容优化，关键词覆盖
4. 技术向，站点地图告诉爬虫站点内容（Robot.txt）

防抖和节流

节流

为防止一个事件短时间内的重复触发一般在开始执行任务的时候设置一个时间间隔，在这个时间间隔内再次触发此任务将不会执行

防抖

当一个事件触发时设置一个计时器，在计时器计时的时间内再次触发这个事件将重置计时且不会执行，只有计时器计时结束才触发事件

页面加载优化

**代码优化

• 减少HTTP请求：合并文件、使用雪碧图、压缩资源。
• 优化代码结构：避免重复代码，使用函数和组件提高复用性。
• 懒加载：延迟加载非首屏资源，如图片、视频、组件。

资源优化

• 压缩资源：使用Gzip等压缩算法减小文件体积。
• 缓存资源：利用浏览器缓存，减少重复下载。
• 使用CDN：加速资源加载。

渲染优化

• 减少重排和重绘：避免频繁操作DOM，使用DocumentFragment或虚拟DOM。
• 使用异步加载：如async和defer加载脚本，不影响页面渲染。
• 服务端渲染（SSR）：减少首屏加载时间，提升用户体验。

预加载和懒加载的区别

预加载

• 定义：在页面加载时或用户操作前，提前加载可能需要的资源。
• 优点：减少用户等待时间，提升体验。
• 缺点：增加初始加载时间，可能加载无用资源。

懒加载

• 定义：延迟加载非首屏或暂时不需要的资源，在需要时再加载。
• 优点：减少初始加载时间，优化性能。
• 缺点：可能增加用户等待时间，需要合理控制加载时机。

贡献者

pinkdopeybug

版权所有

版权归属：PinkDopeyBug

许可证：署名 4.0 国际 (CC-BY-4.0)