wanglei1900

摘要： 大文件性能优化方向 参考文章 1 文件压缩 1.1 服务器端压缩： 1.2 客户端解压缩： 2 文件分割与懒加载 2.1 文件分割： 2.2 懒加载： 3 缓存策略 3.1 浏览器缓存： 3.2 缓存更新机制： 4 优化加载顺序 4.1 关键资源优先加载： 4.2 异步加载： 5 CDN 加速 5. 阅读全文

摘要： gzip 压缩 常见的压缩技术包括 gzip、Brotli (br) 和 Zstandard (zstd)。gzip兼容性最好，后文讲的都是gzip压缩。 gzip 是一种基于 LZ77 算法的通用数据压缩算法。它通过查找重复的字符串模式来减少数据冗余，从而实现压缩。 1 理解网络传输数值 在浏览器 阅读全文

摘要： 当图片的父容器设置的flex:1来撑满容器时，子元素如果切换图片会导致溢出父容器。将父容器设置为flex:auto; height:0; 为什么要添加height:0, 添加 height: 0 是为了确保父容器的高度为 0，然后使用 flex: auto 将父容器的高度撑开 阅读全文

摘要： const optimization = { /** * runtimeChunk可选值有：true或'multiple'或'single' * true或'multiple'会有每个入口对应的chunk。不过一般情况下 * 考虑到要模块初始化，设置为single就够多数情况下使用啦。 * 详情见官 阅读全文

摘要： tree shaking 树摇 Tree Shaking 指基于 ES Module 进行静态分析，通过 AST 将用不到的函数进行移除，从而减小打包体积。 1 前置知识 webpack 打包产物js文件夹下主要分为三个主要模块（css其实也同理） 打包工具将node_modules 里的三方库压缩 阅读全文

摘要： open(url, target, features) open(url?: string | URL, target?: string, features?: string): WindowProxy | null; url 新url地址 或者 临时生成bolbUrl 预览 target 可选 _ 阅读全文

摘要： 1 前置知识 用户直接与图表内容的交互（鼠标） 用户直接与图表组件的的交互（鼠标） 代码层面控制与图表的交互，外部区域的事件统一触发图表区域的事件或者自动执行图表行为 区分事件与行为，所有事件名称均小写 绑定事件通过实例的 on 和 off 方法，代码触发用 dispatchAction 需要更进阶 阅读全文

摘要： 浏览器触发垃圾回收（GC）的时机通常是由其内部的垃圾回收机制自动决定的，这些机制旨在优化内存使用和性能。以下是一些常见的触发垃圾回收的时机： 内存使用达到阈值： 浏览器会设定一个内存使用的阈值，当应用程序或网页使用的内存达到或超过这个阈值时，浏览器可能会触发垃圾回收以释放不再使用的内存。 内存分配请 阅读全文

摘要： MutationObserver应用于水印制作时，之所以能够有效防止用户篡改数据，主要归因于其对DOM（文档对象模型）元素变化的强大监视能力。以下是对此现象的详细解释： 一、MutationObserver的工作原理 MutationObserver是一个监视DOM变动的接口，它能够监听DOM树的变 阅读全文

摘要： 在Web开发中，处理视频内容的缓存是一个常见的需求，尤其是在视频播放过程中管理缓存（buffer）以优化用户体验。HTML5 的 <video> 元素及其相关的 JavaScript API 提供了一些方法来管理和监控视频的缓存状态。 HTMLMediaElement 缓存（Buffer） <vid 阅读全文