12场景题
- BigInt js自带
- Decimal 库
浮点数精度
- 转换成整形
- 转换成字符串
- decimal库
大文件上传
- 切片上传：切片取名：hash+index，后端组合切片，切片时主线程卡顿：web-worker多线程切片。上传完成后通知后端合并切片
- 断点续传：选择文件后先请求后端是否有相同文件已上传一部分
- 断开重传：
- 资源嗅探：切片完后将blob存储到IndexedDB，下次用户进来后嗅探一下是否有未上传完的切片
截图
- canvans
- puppeteer
- html2canvas
移动端适配
- 不同端使用不同的网址
- 根据不同端加载不同的css
- 使用响应式（媒体查询）
水印功能
- 明水印（肉眼可见） 使用Canvas或css设置中背景图片水印。 svg动态水印
- 暗水印（肉眼不可见） 将水印内容写入到到二进制文件，读取时从文件中读取
静态资源失效
- 图片 占位图或out，图片失效时显示 重试、上报
- sss 重要的样式使用html内联的写法。
- cdn 本地备份，动态切换.
- 字体 降低字体（兜底）.
图片加载性能优化
- 懒加载 在html中将图片的src属性更改为自定义的属性，这样浏览器遇到这个属性时就不会像默认的属性进行处理，当需要加载时将自定义属性的值赋值给src属性
获取到图片的dom，添加监听滚动事件，判断自身与视口的距离，达到一定距离就加载图片 这种方法的缺点是：不停的监听滚动事件，即使已经加载了图片，还是不断地触发事件，性能开销大 IntersectionObserver观察dom元素可视口的交叉区域，每次视口进入dom的显示区域都会调用回调函数。当图片加载后取消观察。
- 上拉加载和下拉刷新 监听滚动事件如果新的视口和原视口位置有一定的距离就请求数据并添加到数据列表中 监听触摸事件，下划的矩离与原距离有一定距离就请空教据列表并将请求的数据添加的到表中 同时也要实现节流，防抖
页面加载优化
代码优化
- 减少HTTP请求：合并文件、使用雪碧图、压缩资源。
- 优化代码结构：避免重复代码，使用函数和组件提高复用性。
- 懒加载：延迟加载非首屏资源，如图片、视频、组件。
资源优化
- 压缩资源：使用Gzip等压缩算法减小文件体积。
- 缓存资源：利用浏览器缓存，减少重复下载。
- 使用CDN：加速资源加载。
渲染优化
- 减少重排和重绘：避免频繁操作DOM，使用
DocumentFragment或虚拟DOM。 - 使用异步加载：如
async和defer加载脚本，不影响页面渲染。 - 服务端渲染（SSR）：减少首屏加载时间，提升用户体验。
预加载和懒加载的区别
预加载
- 定义：在页面加载时或用户操作前，提前加载可能需要的资源。
- 优点：减少用户等待时间，提升体验。
- 缺点：增加初始加载时间，可能加载无用资源。
懒加载
- 定义：延迟加载非首屏或暂时不需要的资源，在需要时再加载。
- 优点：减少初始加载时间，优化性能。
- 缺点：可能增加用户等待时间，需要合理控制加载时机。
在window对象上绑定数据的问题
- 命名冲实 后绑定的重名数据系把前面的覆盖
- 安全风险 任何人可以获取和修改。
- 性能问题， 占用的存如果不解绑也不会清除
- 全局污染 任何人都可以获取到也可以修改
解决：模块化、命名空间、IIFE、开启严格模式、qiankun代理沙箱
实现sleep
基于时间戳的实现
开始时获取当前时间戳，将当前时间戳加上目标时间获得结束时间戳 开启while循环，每次循环获取当前时间戳，当前时间戳大于等于目标时间戳时返回
缺点： 程序一直在执行，程序不会让线程休眠的，而且所有任务都会暂停，一直执行循环 在sleep过程中程序处于假死状态，不会执行其他任务的
基于promise实现
创建一个新的promise，在promise中执行settimeout定时器
如何判断是否是数组
有以下几种方法可以判断一个值是否为数组：
Array.isArray()方法
- 最常用和推荐的方法，直接判断一个值是否为数组。
- 示例：
Array.isArray(arr)
Object.prototype.toString.call()
- 利用Object的原型方法toString，通过call改变上下文，获取对象的类型信息。
- 示例：
Object.prototype.toString.call(value) === '[object Array]'
原型链判断
- 通过检查对象的
__proto__或prototype属性是否为Array的原型。 - 示例：
value.__proto__ === Array.prototype或Object.getPrototypeOf(value) === Array.prototype
instanceof操作符
- 判断对象是否是某个构造函数的实例。
- 示例：
value instanceof Array
贡献者
PinkDopeyBug版权所有
版权归属：
