- 博客(135)
- 收藏
- 关注
原创 隔离第三方npm包的JS代码
这里可以使用IIFE(立即调用的函数表达式)和代理(Proxy)来创建一个基本的沙箱环境,并在该环境中运行第三方库的代码。来隔离第三方npm包的JavaScript代码是一种有效的方法,以确保它们不会污染全局命名空间或与其他脚本产生冲突。在沙箱种运行第三方库。
2024-06-21 11:46:52
263
原创 前端性能优化
浏览器收到重定向响应后,会根据响应中的Location头部信息自动发起一个新的请求到新的URL,这个过程可能需要再次进行DNS解析(如果新URL的域名未被缓存)。白屏时间过长的原因:DNS查询时间长、建立TCP请求连接太慢,服务器处理请求速度太慢,客户端下载、解析、渲染时间太长,没有做Gzip压缩、缺乏本地离线化处理等等;的6个域名,每次请求随机选一个域名地址进行请求,因为有6个域名同时可用,最多可以并行36个连接;webServer接受到请求后,从数据存储层取到数据,再返回给前端的过程;
2024-05-14 22:20:40
917
原创 前端Vue架构
defineProperty:监听范围比较窄,只能通过属性描述符去监听已有属性的读取和赋值;兼容性较差,只能兼容支持ES6 的浏览器(要求监听数据是对象)这样写的话,依赖收集只能收集到属性c;如果访问的属性值还是一个对象,对属性值再次进行代理;创建视图的函数(render)和数据之间的关联;当数据发生变化的时候,希望render重新执行;下面的用法,只能收集到c,收集不到c1。依赖收集:a color: #f00。依赖收集:a color: #f00。如何知晓数据对应的函数;监听数据的读取和修改;
2024-05-12 22:40:26
363
原创 随便写点东西
如果A组件不使用高阶组件,this.testRef.current指的是A组件实例;服用的组件逻辑,互不影响;A组件使用了高阶组件,this.testRef.current指的是高阶组件实例;传递了初始值,JSX也只是指定了初始值,而非当前时刻的值,也属于非受控组件;获取非受控组件的值:通过获取元素document,再去获取元素的值;点击按钮,受控组件值会变,但是非受控组件值不变,不受状态影响;之前高阶组件传入一个组件,返回一个组件,返回的组件。那么如何获取受控组件和非受控组件的值?
2024-05-09 23:42:43
607
原创 前端深度扩展
确保了闭包中引用的总是最新的状态值,进而避免了闭包问题导致的数据似乎未更新的现象。注意,即使修复了闭包问题,由于setState的异步性质,console.log可能仍然打印出更新前的值,但这不影响UI的正确更新。调用setTodos更新状态后,todos的引用实际上没有变(因为数组和对象等引用类型在更新时不会改变地址),所以当两秒后setTimeout的回调执行时,它仍然操作的是原来那个数组的引用。在上面的代码中,即使调用了两次setState,状态count也只会增加1,而不是2。
2024-05-07 23:45:15
854
原创 前端—— 分层模型和应用协议
从网络中哪台计算机(domain)中的哪个程序(port)寻找哪个服务(path),并注明了获取服务的具体细节(path),以及要用什么样的协议通信(schema);URL (uniform resource locator)是一个固定格式的字符串。可以认为是计算机当前的【家庭地址】,动态唯一,家庭地址变化,举个例子,A 给 B 发消息说 “我想你了”;可以认为计算机专属,可以认为每台计算机的。A 发出的消息会依次经过。
2023-10-07 17:38:31
303
原创 浏览器渲染原理
reflow 的本质是重新计算 layout 树;当进行了会影响布局树的操作后,需要重新计算布局树,会引发 layout;为了避免连续的多次操作导致布局树反复计算,浏览器会合并这些操作,当JS代码全部完成后再进行统一计算;所以,改动属性造成的 reflow 是异步完成的;也同样因为如此,当 JS 获取布局属性时,就可能造成无法获取到最新的布局信息;浏览器在反复权衡下,最终决定获取属性立即 reflow;repaint 的本质是重新根据分层信息计算绘制指令。
2023-09-28 16:57:30
1583
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人