![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
文章平均质量分 64
batype
付出多少,回报就有多少,永远它们是成正比的。
展开
-
React 使用合成事件(SyntheticEvent)
合成事件对象具有与原生事件对象相似的属性和方法,但也有一些额外的属性和方法,用于处理 React 特定的功能。例如,您可以使用event.target来访问触发事件的元素,event.preventDefault()来阻止默认行为,以及event.stopPropagation()来阻止事件冒泡。请注意,由于合成事件是 React 提供的跨浏览器抽象,它并不是浏览器原生事件对象。合成事件是一个封装了原生事件的对象,提供了一致的跨浏览器接口,使您能够在不同浏览器中以一致的方式处理事件。原创 2023-09-11 16:54:44 · 561 阅读 · 2 评论 -
Fiber 架构的起源和含义
在过去的 React 版本中,渲染过程是基于递归的,即组件树的遍历是通过递归函数来完成的。Fiber 这个名字来源于计算机科学中的 “Fiber”(纤程)概念,指的是一种轻量级的执行单元,可以在多个任务之间切换,并且可以中断和恢复执行。React 中的 Fiber 也是类似的概念,表示渲染过程中的任务单元,可以根据任务的优先级和时间片进行灵活的调度和中断。值得一提的是,Fiber 架构的设计和实现是一个非常复杂的过程,并且在不同版本的 React 中可能会有一些细节上的差异。原创 2023-09-08 10:37:43 · 530 阅读 · 0 评论 -
FiberNode结构解析
FiberNode(也称为 Fiber 节点)是 React Fiber 架构中的核心概念之一,用于表示组件的层级结构和渲染过程中的任务。原创 2023-09-08 09:37:40 · 649 阅读 · 0 评论 -
Fiber 架构实现流程
构建 Fiber 树:在进行首次渲染时,React 会构建一棵 Fiber 树,用于表示组件的层级结构和渲染顺序。它的目标是提高渲染性能和用户体验,通过将渲染工作分割成多个小任务,在不阻塞主线程的情况下逐步完成整个渲染过程。任务拆分:在渲染过程中,React 根据时间片(Time Slicing)的概念将渲染任务拆分为多个小任务(Fiber),每个小任务执行时间有限,并且可以中断和恢复。增量更新:在执行每个小任务时,React 会比较前后两次渲染结果,找出需要更新的部分,并对其进行增量更新。原创 2023-09-07 17:57:21 · 261 阅读 · 0 评论 -
对浏览器的缓存机制的理解
下一次加载资源时,由于强制缓存优先级较高,先比较当前时间与上次返回 200 的时间差,如果没有超过 cache-control 设置的 max-age,则没有过期,并命中强缓存,直接从本地读取数据资源。服务器收到请求后,优先根据 Etag 的值判断被请求的文件有没有做修改,Etag 值一致则没有修改,命中协商缓存,返回 304;如果服务器收到的请求没有 Etag 值,则将 If-Modified-Since 和被请求文件的最后修改时间作对比,一致则命中协商缓存,返回 304;原创 2023-08-22 23:03:26 · 78 阅读 · 0 评论 -
如何实现浏览器内多个标签页之间的通信?
实现多个标签页之间的通信,本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信,因此我们可以找一个中介者,让标签页和中介者进行通信,然后让这个中介者来进行消息的转发。原创 2023-08-22 22:44:05 · 166 阅读 · 0 评论 -
浏览器渲染进程的线程有哪些
当界面需要重绘或由于某种操作引发回流时,该线程就会执行。需要注意的是,由于浏览器对跨域请求进行了限制,在异步 HTTP 请求线程中发起的跨域请求需要经过浏览器的安全机制进行处理,一般需要设置相关的请求头或者使用 JSONP 等技术来解决。:GUI 渲染线程和 JS 引擎线程是互斥的,当JS 引擎执行时GUI线程会被挂起,GUI 更新会被保存在一个队列中等到JS 引擎空闲时立即被执行。:GUI 渲染线程与 JS 引擎线程的互斥关系,所以如果JS 执行的时间过长,会造成页面的渲染不连贯,导致页面渲染加载阻塞。原创 2023-08-11 17:23:28 · 361 阅读 · 0 评论 -
var、let、const的区别
var、let、const的区别原创 2023-08-10 23:06:02 · 249 阅读 · 0 评论 -
有哪些可能引起前端安全的问题?
⼀种代码注⼊⽅式,为了与 CSS 区分所以被称作 XSS。早期常⻅于⽹络论坛, 起因是⽹站没有对⽤户的输⼊进⾏严格的限制, 使得攻击者可以将脚本上传到帖⼦让其他⼈浏览到有恶意脚本的⻚⾯, 其注⼊⽅式很简单包括但不限于 JavaScript / CSS / Flash 等;原创 2023-08-10 22:56:03 · 602 阅读 · 0 评论 -
什么是 XSS 攻击?
可以从浏览器的执行来进行预防,一种是使用纯前端的方式,不用服务器端拼接后返回(不使用服务端渲染)。对于 DOM 型的攻击,主要是前端脚本的不可靠而造成的,对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。XSS 的本质是因为网站没有对恶意代码进行过滤,与正常的代码混合在一起了,浏览器没有办法分辨哪些脚本是可信的,从而导致了恶意代码的执行。使用 CSP ,CSP 的本质是建立一个白名单,告诉浏览器哪些外部资源可以加载和执行,从而防止恶意代码的注入攻击。原创 2023-08-10 21:48:57 · 1211 阅读 · 0 评论 -
什么是 CSRF 攻击?
对 Cookie 进行双重验证,服务器在用户访问网站页面时,向请求域名注入一个 Cookie,内容为随机字符串,然后当用户再次向服务器发送请求的时候,从 cookie 中取出这个字符串,添加到URL参数中,然后服务器通过对 cookie 中的数据和参数中的数据进行比较,来进行验证。Samesite 一共有两种模式,一种是严格模式,在严格模式下 cookie 在任何情况下都不可能作为第三方 Cookie 使用,在宽松模式下,cookie 可以被请求是GET 请求,且会发生页面跳转的请求所使用。原创 2023-08-10 22:50:18 · 2031 阅读 · 0 评论 -
如何⽤webpack 来优化前端性能
⽤webpack 优化前端性能是指优化 webpack 的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。原创 2023-08-09 22:32:45 · 692 阅读 · 0 评论 -
如何对项目中的图片进行优化
如何对项目中的图片进行优化?原创 2023-08-09 21:54:01 · 179 阅读 · 0 评论 -
节流和防抖
节流可以使用在 scroll 函数的事件监听上,通过事件。函数防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件。又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因。函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发。事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只。为用户的多次点击向后端发送多次请求。节流来降低事件调用的频率。原创 2023-08-09 21:35:59 · 127 阅读 · 0 评论 -
浅谈回流与重绘
浏览器针对页面的回流与重绘,进行了自身的优化——渲染队列浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行批处理。上面,将多个读操作(或者写操作)放在一起,就会等所有的读操作进入队列之后执行,这样,原本应该是触发多次回流,变成了只触发一次回流。当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这个过程就是重绘。注意: 当触发回流时,一定会触发重绘,但是重绘不一定会引发回流。原创 2023-08-09 18:22:24 · 112 阅读 · 0 评论 -
前端哪些情况会导致内存泄漏
哪些情况会导致内存泄漏原创 2023-08-09 14:53:51 · 75 阅读 · 0 评论