- 博客(138)
- 收藏
- 关注
RSS订阅原创 对静态资源进行hash命名，可以选择哪些方式？
本文探讨了项目打包中哈希命名的缓存优化策略。通过分析hash、chunkhash和contenthash三种方式，指出contenthash基于文件内容生成哈希值，能精准控制缓存更新：仅当文件内容变更时哈希才改变，其他文件缓存不受影响。相比hash（全项目构建生成）和chunkhash（模块树依赖生成），contenthash能最大化利用浏览器缓存，减少不必要的资源重复下载，是Webpack推荐的静态资源长期缓存最佳实践。文中还提供了Webpack配置示例，建议使用contenthash:8平衡安全性与性能
2025-12-09 11:47:27
416
原创 隔离第三方npm包的JS代码
这里可以使用IIFE（立即调用的函数表达式）和代理（Proxy）来创建一个基本的沙箱环境，并在该环境中运行第三方库的代码。来隔离第三方npm包的JavaScript代码是一种有效的方法，以确保它们不会污染全局命名空间或与其他脚本产生冲突。在沙箱种运行第三方库。
2024-06-21 11:46:52
366
原创 前端小课堂
qiankun 通过 import-html-entry 请求 http://localhost:7100，得到对应的html文件，解析内部的script和style标签，依次下载和执行它们；乾坤实现了 import-html-entry插件，允许以html文件为应用入口，然后通过html解析器从文件中提取js和css依赖，并通过fetch下载依赖；MD5：不可逆，它将任意长度的数据映射为一个固定长度（通常是128位）的散列值（后端验证，并不解密）RSA：后端生成密钥对，前端用公钥加密，后端用私钥解密；
2024-06-12 15:03:48
932
原创 前端性能优化
浏览器收到重定向响应后，会根据响应中的Location头部信息自动发起一个新的请求到新的URL，这个过程可能需要再次进行DNS解析（如果新URL的域名未被缓存）。白屏时间过长的原因：DNS查询时间长、建立TCP请求连接太慢，服务器处理请求速度太慢，客户端下载、解析、渲染时间太长，没有做Gzip压缩、缺乏本地离线化处理等等；的6个域名，每次请求随机选一个域名地址进行请求，因为有6个域名同时可用，最多可以并行36个连接；webServer接受到请求后，从数据存储层取到数据，再返回给前端的过程；
2024-05-14 22:20:40
997
原创 前端Vue架构
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
2024-05-12 22:40:26
405
原创 随便写点东西
如果A组件不使用高阶组件，this.testRef.current指的是A组件实例；服用的组件逻辑，互不影响；A组件使用了高阶组件，this.testRef.current指的是高阶组件实例；传递了初始值，JSX也只是指定了初始值，而非当前时刻的值，也属于非受控组件；获取非受控组件的值：通过获取元素document，再去获取元素的值;点击按钮，受控组件值会变，但是非受控组件值不变，不受状态影响；之前高阶组件传入一个组件，返回一个组件，返回的组件。那么如何获取受控组件和非受控组件的值？
2024-05-09 23:42:43
648
原创 前端深度扩展
确保了闭包中引用的总是最新的状态值，进而避免了闭包问题导致的数据似乎未更新的现象。注意，即使修复了闭包问题，由于setState的异步性质，console.log可能仍然打印出更新前的值，但这不影响UI的正确更新。调用setTodos更新状态后，todos的引用实际上没有变（因为数组和对象等引用类型在更新时不会改变地址），所以当两秒后setTimeout的回调执行时，它仍然操作的是原来那个数组的引用。在上面的代码中，即使调用了两次setState，状态count也只会增加1，而不是2。
2024-05-07 23:45:15
938
3原创 前端—— 分层模型和应用协议
从网络中哪台计算机（domain）中的哪个程序（port）寻找哪个服务（path），并注明了获取服务的具体细节（path），以及要用什么样的协议通信（schema）；URL （uniform resource locator）是一个固定格式的字符串。可以认为是计算机当前的【家庭地址】，动态唯一，家庭地址变化，举个例子，A 给 B 发消息说 “我想你了”；可以认为计算机专属，可以认为每台计算机的。A 发出的消息会依次经过。
2023-10-07 17:38:31
341
原创 浏览器渲染原理
reflow 的本质是重新计算 layout 树；当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout；为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行统一计算；所以，改动属性造成的 reflow 是异步完成的；也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息；浏览器在反复权衡下，最终决定获取属性立即 reflow；repaint 的本质是重新根据分层信息计算绘制指令。
2023-09-28 16:57:30
1672
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人