橙晨成
获得徽章 0
- #每天一个知识点# 打卡第三十天
![[紫薇别走]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_87.f741137.png)
![[嘿哈]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
![[强]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
WebSocket 和 WebRTC 区别：
通信方式：WebSocket 是基于 TCP 的双向通信协议，而 WebRTC 允许更复杂的点对点通信，可以使用 UDP，这对于实时通信应用（如视频聊天）很有用，因为它可以减少延迟。
应用场景：WebSocket 主要用于实时消息传递和同步，如聊天应用；WebRTC 更多的是用于音视频通话和数据共享。
中间服务器：虽然 WebRTC 的目标是点对点通信，但在某些情况下，如 NAT 穿透，可能需要中间服务器 (STUN/TURN)。WebSocket 通信始终通过服务器。
数据类型：WebRTC 不仅支持数据，还支持音视频流；而 WebSocket 主要是用来发送文本或二进制数据。
总结：WebSocket 和 WebRTC 都是为了满足现代 Web 应用中实时通信的需求而出现的技术。选择哪一种技术取决于你的具体需求和应用场景。展开赞过 评论1 - #每天一个知识点# 打卡第二十九天WebSocket 和 WebRTC 都是 Web 技术，但它们解决的问题和应用场景有所不同。下面我们来探讨它们的区别和各自的作用：
WebSocket
定义：WebSocket 是一个协议，它在单个 TCP 连接上提供全双工的通信渠道。
作用：
实时数据传输：允许服务器主动向客户端发送数据，而无需客户端先发出请求。
减少延迟：与传统的 HTTP 轮询相比，WebSocket 可以显著减少数据传输的延迟。
常见应用：在线聊天、实时股票报价、在线游戏等。
特点：
基于 TCP 的持久连接。
可以发送文本或二进制数据。
更低的延迟和开销。
起始握手基于 HTTP，但随后的数据传输不再是 HTTP。展开赞过 评论1 - 打卡二十七天 #每天一个知识点#
CSS布局技巧是前端开发的核心部分，决定了网页的结构和视觉表现。以下是一些主要的CSS布局技巧及其简要总结：
块级元素和内联元素：
块级元素（如div、h1-h6、p等）独占一行，而内联元素（如span、a等）则在行内显示。
使用display属性可以更改元素的显示方式。
盒模型（Box Model）：
CSS布局的基础，包括内容、填充、边框和外边距。
使用box-sizing可以改变盒模型的计算方式。
浮动（Floats）：
使元素浮动到其容器的左或右侧。
经常用于创建多列布局。
clear属性用于控制浮动的影响。
定位（Positioning）：
static、relative、absolute、fixed和sticky是五种主要的定位方法。
定位可以用来创建覆盖、工具提示或固定头部等效果。
弹性盒子布局（Flexbox）：
现代的一维布局方法，适用于复杂布局和对齐。
主要属性包括display: flex、justify-content、align-items等。展开赞过 评论1 - #挑战每日一条沸点# 打卡第二十六天
续——
AJAX:
允许前端代码异步请求数据，不需要刷新整个页面。常与XMLHttpRequest对象或现代的Fetch API一起使用。
Progressive Web Apps (PWA):
使用HTTP相关技术（例如Service Workers）使web应用具有类似于原生应用的体验，例如离线可用和推送通知。
WebSockets:
与HTTP不同，WebSockets提供了一个持久的、双向的通信通道。经常用于需要实时功能的应用，如聊天应用。
HTTP/2 和 HTTP/3:
是HTTP协议的新版本，旨在提高性能，减少延迟，并提供更高效的请求/响应处理。
前端工具与HTTP:
常见的HTTP客户端库，如Axios，使前端开发者更容易与后端API交互。
开发者工具，如Chrome DevTools，使开发者能够检查、调试和优化HTTP请求。
性能优化:
缓存：使用HTTP头（如ETag或Last-Modified）来缓存数据，减少不必要的请求。
内容压缩：使用gzip或brotli等技术压缩HTTP响应，减少传输时间。
理解HTTP和与其相关的技术是前端开发中的关键组件。随着技术的进步，前端开发者不仅需要掌握HTTP的基础，还需要关注新的技术和标准。展开赞过 评论1 - 打卡二十五天 #每天一个知识点#HTTP (HyperText Transfer Protocol) 是一个基于请求-响应模型的协议，允许客户端和服务器之间进行通信。在前端开发中，HTTP 是与后端服务交互的关键组件。以下是关于HTTP在前端的一些关键点总结：
基本概念:
HTTP请求方法：常用的有 GET（获取资源）、POST（提交数据）、PUT（更新资源）、DELETE（删除资源）。
状态码：HTTP响应返回的状态码可以告诉我们请求的结果。例如，200表示成功，404表示资源未找到，500表示服务器错误。
请求和响应:
请求头：包含了关于请求的元数据，如 User-Agent（告诉服务器浏览器的类型）或 Authorization（用于身份验证）。
响应头：包含了关于响应的元数据，如 Content-Type（告诉客户端内容的类型，如 text/html 或 application/json）。
安全和跨域:
CORS（跨来源资源共享）：一个安全特性，允许或拒绝跨域请求。前端开发者需要理解CORS，特别是当与不同的后端API交互时。
HTTPS：HTTP的安全版本，使用TLS/SSL进行加密，确保数据传输的安全性。
Cookie和Session:
Cookie：小块的数据，存储在用户的浏览器上，通常用于跟踪用户信息或状态。
Session：服务器上存储的用户数据，通常使用cookie来标识特定的会话。展开赞过 评论1 - 打卡第二十四天 #每天一个知识点#
![[惊喜]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)
Node.js用途：
Web 服务器
实时应用 (例如聊天应用)
命令行工具
数据库查询
工具和框架等
异步编程：由于 Node.js 的非阻塞特性，开发者需要熟悉回调函数、promises 和 async/await 等异步编程概念。
社区和生态系统：Node.js 有一个巨大且活跃的社区，这为开发者提供了大量的库和框架，以帮助快速开发应用。
性能：对于 I/O 密集型任务，Node.js 可以提供非常出色的性能，但对于计算密集型任务，可能不是最佳选择，因为它是单线程的。
跨平台：Node.js 可以在多种操作系统上运行，如 Windows、Mac OS X 和 Linux。
与数据库的集成：Node.js 可以与许多数据库系统集成，包括 MongoDB、MySQL、PostgreSQL 等。
应用案例：许多大公司，如 Netflix、Walmart 和 LinkedIn，都在其生产环境中使用 Node.js。
总的来说，Node.js 是一个强大的工具，为开发者提供了在服务器端使用 JavaScript 的能力，使其在某些用例中变得特别有吸引力，特别是那些需要高并发和低延迟的应用。
展开赞过 评论1 - #每天一个知识点# 打卡第二十三天
Node.js 是一个开源的、跨平台的 JavaScript 运行环境，让开发者可以在服务器端执行 JavaScript 代码。而之前，JavaScript 主要是在浏览器中执行的。以下是关于 Node.js 的总结：
运行环境：Node.js 不是一种编程语言，而是一个让 JavaScript 在服务器端运行的环境。
V8 引擎：Node.js 使用 Google 的 V8 JavaScript 引擎，这是 Chrome 浏览器所使用的同一引擎。
非阻塞 I/O：Node.js 是事件驱动的，能够非阻塞地处理许多并发连接。这使其非常适合 I/O 密集型应用。
单线程：虽然 Node.js 是单线程的，但由于其非阻塞的特性，它可以处理大量的并发连接。
模块系统：Node.js 有一个模块系统，你可以使用 require() 方法加载不同的模块。这使得代码的组织和复用变得非常容易。
NPM：Node.js 附带了一个包管理器，叫做 npm。这使得安装、分享和分发代码变得非常容易。展开赞过 评论1 - #每天一个知识点# 打卡第二十二天设计一个类似QQ的网页聊天个人信息页需要以下功能：
用户信息展示
聊天功能
用户信息编辑功能
路由配置
我们首先概述每个功能模块，然后详细讨论路由配置。
1. 用户信息展示：
你需要一个用户信息展示的组件，它会从后端获取数据并展示给用户。这可能会包括用户的头像、昵称、状态等。
2. 聊天功能：
你需要一个聊天界面，能够显示消息历史，同时用户可以输入和发送新的消息。如果使用实时通信，考虑使用socket.io或类似技术。
3. 用户信息编辑功能：
用户需要一个界面或模态框来编辑他们的信息，如更改头像、昵称等。完成编辑后，这些更改应该发送到后端以进行持久化存储。
4. 路由配置：
如果你使用的是React，推荐使用react-router-dom库进行路由管理。展开赞过 评论1
![[紫薇别走]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_87.f741137.png)
![[嘿哈]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
![[强]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
WebSocket 和 WebRTC 区别：![[惊喜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)