前端入门到入土？

最新推荐文章于 2024-06-04 14:04:24 发布
最新推荐文章于 2024-06-04 14:04:24 发布
阅读量197 收藏
点赞数 5
分类专栏： 前端面试 文章标签： 前端 状态模式 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68537796/article/details/134325777
版权

文章目录

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：前端面试
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

合成事件原理

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的

  • 所有的事件挂在document上，DOM 事件触发后冒泡到 document；React 找到对应的组件，造出一个合成事件出来；并按组件树模拟一遍 件冒泡。
  • event不是原生的，是SyntheticEvent合成事件对象
  • 和Vue事件不同,和DOM事件也不同

React 17 之前的事件冒泡流程图
在这里插入图片描述

所以这就造成了，在一个页面中，只能有一个版本的 React。如果有多个版本，事件就乱套了。值得一提的是，这个问题在 React 17 中得到了解决，事件委托不再挂在 document 上，而是挂在 DOM 容器上，也就是 ReactDom.Render 所调用的节点上。

React 17 后的事件冒泡流程图
在这里插入图片描述

那到底哪些事件会被捕获生成合成事件呢？可以从 React 的源码测试文件中一探究竟。下面的测试快照中罗列了大量的事件名，也只有在这份快照中的事件，才会被捕获生成合成事件。

// react/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
Array [
	  "abort",
	  "animationEnd",
	  "animationIteration",
	  "animationStart",
	  "auxClick",
	  "beforeInput",
	  "blur",
	  "canPlay",
	  "canPlayThrough",
	  "cancel",
	  "change",
	  "click",
	  "close",
	  "compositionEnd",
	  "compositionStart",
	  "compositionUpdate",
	  "contextMenu",
	  "copy",
	  "cut",
	  "doubleClick",
	  "drag",
	  "dragEnd",
	  "dragEnter",
	  "dragExit",
	  "dragLeave",
	  "dragOver",
	  "dragStart",
	  "drop",
	  "durationChange",
	  "emptied",
	  "encrypted",
	  "ended",
	  "error",
	  "focus",
	  "gotPointerCapture",
	  "input",
	  "invalid",
	  "keyDown",
	  "keyPress",
	  "keyUp",
	  "load",
	  "loadStart",
	  "loadedData",
	  "loadedMetadata",
	  "lostPointerCapture",
	  "mouseDown",
	  "mouseEnter",
	  "mouseLeave",
	  "mouseMove",
	  "mouseOut",
	  "mouseOver",
	  "mouseUp",
	  "paste",
	  "pause",
	  "play",
	  "playing",
	  "pointerCancel",
	  "pointerDown",
	  "pointerEnter",
	  "pointerLeave",
	  "pointerMove",
	  "pointerOut",
	  "pointerOver",
	  "pointerUp",
	  "progress",
	  "rateChange",
	  "reset",
	  "scroll",
	  "seeked",
	  "seeking",
	  "select",
	  "stalled",
	  "submit",
	  "suspend",
	  "timeUpdate",
	  "toggle",
	  "touchCancel",
	  "touchEnd",
	  "touchMove",
	  "touchStart",
	  "transitionEnd",
	  "volumeChange",
	  "waiting",
	  "wheel",
	]

如果DOM上绑定了过多的事件处理函数,整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用,同时屏蔽底层不同浏览器之间的事件系统的差异,实现了一个中间层 - SyntheticEvent

  1. 当用户在为onClick添加函数时,React并没有将Click绑定到DOM上面
  2. 而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装交给中间层 SyntheticEvent (负责所有事件合成)
  3. 所以当事件触发的时候, 对使用统一的分发函数 dispatchEvent 将指定函数执行

在这里插入图片描述
为何要合成事件

  • 兼容性和跨平台
  • 挂在统一的document上，减少内存消耗，避免频繁解绑
  • 方便事件的统一管理（事务机制）
  • dispatchEvent事件机制

http1.0和http2.0和http3.0的版本之间的差异？

  • HTTP 0.9

    • 1991年，最最最开始的版本，功能比较少，只有一个命令GET，只支持纯文本内容，该版本已经过时。

  • HTTP 1.0

    • 任何格式都可以发送，这使得互联网不仅可以传输文字，还能传输图像，视频，二进制等文件
    • 新增了POST和HEAD命令
    • http请求回应的格式改变，除了数据部分，每次通信必须包括头信息(HTTP header)，用来描述一些头信息的元数据
    • 只使用 header 中的 If-Modified-Since 和 Expires 作为缓存失效的标准。
    • 不支持断点续传，也就是说，每次都会传送全部的页面和数据。
    • 通常每台计算机只能绑定一个 IP，所以请求消息中的 URL 并没有传递主机名（hostname）

  • HTTP 1.1

    • 引入了持久连接（ persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。长连接的连接时长可以通过请求头中的 keep-alive 来设置
    • 引入了管道机制（ pipelining），即在同一个TCP连接里，客户端可以同时发送多个 请求，进一步改进了HTTP协议的效率。
    • HTTP 1.1 中新增加了 E-tag，If-Unmodified-Since, If-Match, If-None-Match 等缓存控制标头来控制缓存失效。
    • 支持断点续传，通过使用请求头中的 Range 来实现。
    • 使用了虚拟网络，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。
    • 新增方法：PUT、 PATCH、 OPTIONS、 DELETE。

  • http1.x版本问题

    • 传输数据的过程中所有内容都是明文的，无法验证对方身份，无法保证数据的安全性
    • HTTP/1.1 版本默认允许复用TCP连接，但是在同一个TCP连接里，所有数据通信是按次序进行的，服务器通常在处理完一个回应后，才会继续去处理下一个，这样子就会造成队头阻塞。
    • http/1.x 版本支持Keep-alive，用此方案来弥补创建多次连接产生的延迟，但是同样会给服务器带来压力，并且的话，对于单文件被不断请求的服务，Keep-alive会极大影响性能，因为它在文件被请求之后还保持了不必要的连接很长时间。

  • HTTP 2.0

    • 二进制分帧 这是一次彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"：头信息帧和数据帧。
    • 头部压缩 HTTP 1.1版本会出现 User-Agent、Cookie、Accept、Server、Range 等字段可能会占用几百甚至几千字节，而 Body 却经常只有几十字节，所以导致头部偏重。HTTP 2.0 使用 HPACK 算法进行压缩。
    • 多路复用 复用TCP连接，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，且不用按顺序一一对应，这样子解决了队头阻塞的问题。
    • 服务器推送 允许服务器未经请求，主动向客户端发送资源，即服务器推送。
    • 请求优先级 可以设置数据帧的优先级，让服务端先处理重要资源，优化用户体验。
特点HTTP/1.0HTTP/1.1HTTP/2HTTP/3
并发请求不支持支持有限引入多路复用，支持更高级别并发请求引入QUIC协议，通过多路复用和UDP传输支持更高级别的并发请求
请求头压缩不支持支持有限HPACK算法压缩QPACK算法压缩
二进制转换不支持不支持支持支持
服务器推送不支持不支持支持，服务器可以主动推送资源给客户端支持，服务器可以主动推送资源给客户端
连接复用不支持持久连接多路复用，多个请求可以通过单个连接表并行处理多路复用，多个请求可以通过单个连接表并行处理
安全性不支持HTTPS，支持加密传递HTTPS，支持加密传递HTTPS，支持加密传递
可靠性不支持不支持支持头部压缩，流控制和服务器推送，可靠性强QUIC协议，通过UDP传输提升传输的可靠性
开发复杂性简单友好新概念和协议，相对复杂QUIC协议，相对负责
底层协议tcptcpTCP和TCS的加密传递QUIC
对丢包和延迟的影响力恢复较慢，容易堵塞恢复较快，使用流方式并行处理请求恢复较快，使用流方式并行处理请求恢复较快，QUIC通过UDP传输有利于降低延迟和丢包的影响
适用场景静态Web页面和静态资源大多数Web应用程序复杂Web应用程序更为复杂Web应用程序

http状态码？

1xx（信息性状态码）：表示请求已被接受，需要继续处理。

  • 100 Continue：服务器已经收到请求的部分，客户端可以继续发送剩余部分。
  • 101 Switching Protocols：服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议。

2xx（成功状态码）：表示请求被成功接收、理解、接受或处理。

  • 200 OK：请求成功。
  • 201 Created：请求已经被实现，而且有一个新的资源已经依据请求的需要而建立。
  • 204 No Content：服务器成功处理了请求，但没有返回任何内容。

3xx（重定向状态码）：表示需要进行更多操作才能完成请求。

  • 301 Moved Permanently：请求的资源已被永久移动到新位置。
  • 302 Found：请求的资源现在临时从不同的URI响应请求。
  • 304 Not Modified：自从上次请求后，请求的资源未发生更改。

4xx（客户端错误状态码）：表示客户端发送的请求有误。

  • 400 Bad Request：服务器无法理解请求格式。
  • 403 Forbidden：服务器拒绝请求。
  • 404 Not Found：请求的资源不存在。

5xx（服务器错误状态码）：表示服务器无法完成明显有效的请求。

  • 500 Internal Server Error：服务器遇到了一个未曾预料的状况，导致它无法完成对请求的处理。
  • 503 Service Unavailable：服务器目前无法处理请求。

我们可以根据http状态码返回的code来迅速定位到我们项目中是发生了什么问题。方便我们调试程序中出现的bug

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力

鋜斗
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端从入门到入土
weixin_73958978的博客
10-20 1314
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
java入门到入土.md
02-20
java入门到入土.md
前端从入门到入土
m0_62102386的博客
07-04 65
p>标签是一个块级标签，主要来描述一个段落。有序列表和无序列表的列表项标签为
前端，从入门到入土
qq_40272238的博客
11-29 223
前端，从入门到入土   写在前面，更是写给自己：        2020年11月16日，我发表了我的第一篇博客，主要是为了自己学习，给自己看的一篇博客，希望能坚持下去，记录我学习前端时的点点滴滴，希望不要成为黑历史2333，希望我每次打开我的博客看到这段话时，能保持第一次编程的好奇。        加油！     &nb
新人JS从入门到入土（一）
dongshan14quan17的博客
12-02 311
新人JS学习
HTML+CSS从入门到入土
zihao_fu的博客
10-16 3287
基础HTML
前端布局flex从入门到入土
凌康的博客
02-28 1211
前端布局flex从入门到入土 作为一个后端，谈不上多会前端，但是一些常见的布局都可以做到，例如flex布局。推荐菜鸟教程的布局：https://www.runoob.com/w3cnote/flex-grammar.html 例如某网站布局： 场景一 左中右布局，并且要求上下页铺满 <body> <div style="position: absolute;top: 0;bottom: 0;"> <div style="display: flex;flex-di
前端路线-从入门到入土
dianxunma2886的博客
05-15 110
自学前端学习路线图 推荐github 前端很火，想自学前端的人也多。作为过来人，知道自学的辛苦。特来给大家分享这份学习路线图，让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦！无论你是刚入门的小白，还是已经工作的前端开发者都能从中获取到你想要的资料！先附上前端思维导图一张，自己下功夫一点点总结的呢。 我已经给大家分好阶段...
Vue学习之从入门到入土
weixin_54232686的博客
09-04 901
Vue学习笔记（尚硅谷天禹老师）
精讲typescript从入门到入土
前端程序员、项目经理、人工智能博主
03-08 619
在 JavaScript 中，有两种特殊的值，分别是null和undefined。在 TypeScript 中，它们分别对应了null和undefined两种类型。在这个示例中，我们定义了两个变量x和y，分别赋值为null和undefined。
python从入门到入土练习习题
05-30
python从入门到入土练习习题
java从入门到入土第一卷
11-08
没事复习一遍
Spring从入门到入土——快速上手Spring
12-21
快速入门HelloSpring编写代码编写一个Hello实体类编写Spring文件，命名为beans.xml测试结果以及...Spring从入门到入土——概述以及IOC理论推导 Spring从入门到入土——快速上手Spring HelloSpring ​ 我们要想使用Sprin
c＋＋入门与入土
07-03
初学者c语言 入门与入土 打算覅是uodf佛教会iofhnwihnfhwio 飞哦iwho
前端开发记录
qq_25806839的博客
05-31 263
【代码】前端开发记录。
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
最新发布
lianmindiandi
06-04 156
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
从CSV到数据库(简易)
qq_31856061的博客
05-31 401
需求：客户上传CSV文档，要求CSV文档内容查重/插入/更新相关数据。框架：jdbcTemplate、commons-io、DB：oracle相关依赖：这里本来打算用的2.11.0，无奈正式项目那边用老版本1.3.1，新版本对类型支持和转换好一点。不过无伤大雅。
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 808
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
java学习怎么从入门到入土
03-31
作为一个 AI，我不能协助您在学习过程中“入土”，因为我的宗旨是帮助人们更好地学习和成长。以下是一些建议，可以帮助您更好地学习 Java。 1. 学习基础：首先，您需要了解 Java 的基础知识，例如变量、数据类型、控制结构、循环等。可以通过阅读书籍或在线教程来学习这些基础知识。 2. 练习编程：学习编程最好的方法是通过编写代码来进行实践。可以使用练习题或者参与开源项目来锻炼编程能力。 3. 学习面向对象编程：Java 是一种面向对象编程语言，因此学习面向对象编程是非常重要的。学习类、对象、继承、封装、多态等概念，并且在实践中应用这些概念。 4. 学习 Java 库和框架：Java 有许多库和框架，可以帮助您更高效地编写代码。例如，学习 Java 的标准库、Spring 框架等。 5. 继续深入学习：Java 是一种非常广泛应用的编程语言，因此需要不断地深入学习并跟上技术的发展。可以学习 Java 8 新特性、Java EE、Android 开发等。 总之，学习 Java 需要不断地努力和实践，并且需要持续学习并跟上技术的发展。祝您学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鋜斗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值