不吃虾米虾皮虾酱
前端
获得徽章 8
- #每天一个知识点#
![[强]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
web 虚拟滚动和无限滚动是一样的吗？不一样有什么区别？
虚拟滚动和无限滚动是不同的概念，它们的实现方式和应用场景也有所不同。
虚拟滚动（Virtual Scroll）
虚拟滚动是一种优化列表性能的技术，它使用可视区域的概念，只渲染当前可见的列表项，而不是将整个列表渲染到页面上。当用户滚动列表时，虚拟滚动会动态地加载新的列表项，并卸载已经不可见的列表项。虚拟滚动通常用于渲染大型的数据集，能够提高页面的性能，避免页面卡顿或者响应变慢。
虚拟滚动的实现方式有很多种，例如使用 react-window 库、使用 Intersection Observer API 等。
无限滚动（Infinite Scroll）
无限滚动是一种加载数据的技术，它可以在用户滚动到页面底部时，自动加载下一页的数据。无限滚动通常用于加载大量的数据集，例如社交媒体中的帖子、图片库中的图片等。
无限滚动的实现方式也有很多种，例如使用 Intersection Observer API、监听页面滚动事件等。
区别和应用场景
虚拟滚动和无限滚动虽然都与滚动有关，但是它们的实现方式和应用场景不同。
虚拟滚动主要用于优化列表性能，避免渲染大量的数据导致页面卡顿或者响应变慢。虚拟滚动通常用于渲染大型的数据集，例如电商网站中的商品列表、音乐播放器中的歌曲列表等。
无限滚动主要用于加载大量的数据集，避免用户需要手动翻页或者点击加载更多按钮。无限滚动通常用于加载社交媒体中的帖子、图片库中的图片等。
总之，虚拟滚动和无限滚动是两种不同的技术，它们的实现方式和应用场景也有所不同。在实际应用中，需要根据具体的需求选择合适的技术。展开等人赞过 评论5 - #每天一个知识点# 设置 outline: 0 的目的是什么？
outline 是一个 CSS 属性，用于设置一个元素的轮廓线。在某些情况下，当一个元素被选中或获取焦点时，浏览器会自动给它添加一个默认的 outline 样式。这种默认的 outline 样式通常是蓝色的，对于一些设计风格比较严谨的网站可能会不太美观。
因此，一些前端开发者会选择使用样式重置工具或直接在 CSS 中将 outline 样式设置为 0，以消除默认的 outline 样式。这样做主要有以下几个目的：
提升页面美观性：去掉默认的 outline 样式可以让页面看起来更加整洁和美观，特别是对于那些设计风格比较严谨的网站。
提升可访问性：对于一些残障人士，如视觉障碍者、键盘用户等，outline 样式可以帮助他们更容易地识别当前选中的元素或焦点所在的元素。因此，如果你在使用 outline:0 样式，你需要确保你的网站在可访问性方面没有任何问题。
需要注意的是，outline 样式虽然对于一些网站来说可能不太美观，但它在一些情况下也是很有用的。因此，在使用 outline:0 样式时，你需要权衡美观性和可访问性，并根据实际情况做出决策。展开赞过 评论2 - #每天一个知识点# 在 CSS in JS 中，hash ID 通常用作样式类名或样式属性名的唯一标识符，以避免样式冲突。
当使用 CSS 样式表时，样式类名或样式属性名通常是在 HTML 中定义的，这意味着它们必须是全局唯一的。如果多个样式表使用相同的名称，则可能会导致样式冲突，从而破坏应用程序的外观和行为。
CSS in JS 通过使用 hash ID 来解决这个问题。每个样式类名或样式属性名都会根据其内容生成一个唯一的 hash ID，这个 hash ID 可以确保每个样式类名或样式属性名都是唯一的，从而避免样式冲突。
另外，使用 hash ID 还可以提高应用程序的性能。由于每个样式类名或样式属性名都是唯一的，当使用服务器端渲染或构建工具时，可以将它们的样式代码合并在一起，从而减少页面加载时需要下载的 CSS 文件的数量和大小，提高页面加载速度。
总之，hash ID 在 CSS in JS 中的作用是确保每个样式类名或样式属性名都是唯一的，从而避免样式冲突，并提高应用程序的性能。展开评论点赞 - #每天一个知识点#
![[疑问]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
什么时候用em，什么时候用px，各自优缺点是什么呢？
在CSS中，我们可以使用不同的单位来指定样式的尺寸，像素（px）和相对单位（em）是最常用的两个单位。下面是它们的使用时机和各自的优缺点：
像素（px）：
像素是最常用的单位之一，它的优点是：
精确度高：像素是一个固定的单位，它可以精确地控制元素的大小和位置，使得设计更加精确。
浏览器支持好：几乎所有的浏览器都支持像素单位，且在不同的设备上呈现效果一致。
像素的缺点是：
不灵活：像素是一个固定的单位，与设备分辨率无关，这意味着当用户缩放浏览器或使用不同分辨率的设备时，像素单位的元素大小将保持不变。
不适合移动端：在移动设备上，像素单位可能会导致页面在不同尺寸和密度的设备上出现问题。
因此，像素单位通常用于需要精确控制元素大小和位置的情况，例如设计稿中的尺寸和布局。
相对单位（em）：
相对单位是相对于父元素的字体大小来计算的，它的优点是：
灵活性高：相对单位可以根据父元素的字体大小来进行相对调整，这使得元素的大小可以灵活地适应不同的设备和分辨率。
支持响应式设计：相对单位可以帮助实现响应式设计，即使在不同的设备上也可以保持一致的比例和布局。
相对单位的缺点是：
精确度较低：由于相对单位是相对于父元素的字体大小来计算的，因此可能会出现一定的误差。
浏览器兼容性问题：早期版本的浏览器不支持相对单位，但现在大多数浏览器都已经支持相对单位。
因此，相对单位通常用于需要灵活适应不同设备和分辨率的情况，例如文本大小和响应式布局。展开2点赞 - #每天一个知识点# 静态模块打包器与动态模块打包器区别：
静态模块打包器和动态模块打包器是两种不同的打包方式，它们的主要区别在于如何处理模块的引用和依赖。
静态模块打包器（例如 webpack）在打包时会将所有模块的依赖关系都解析出来，并将它们打包成一个或多个静态的 bundle 文件。这些 bundle 文件包含了所有的 JavaScript 代码、CSS 样式、图片等资源，以及它们之间的依赖关系。当页面加载时，浏览器会下载并解析这些 bundle 文件，以构建出完整的应用程序。
相对地，动态模块打包器（例如 SystemJS）则允许在运行时动态加载模块，以满足应用程序的需求。在动态模块打包器中，模块的依赖关系是在运行时处理的，而不是在打包时处理的。因此，应用程序可以根据需要加载所需的模块，以减少加载时间和提高性能。
总的来说，静态模块打包器适合构建大型、复杂的应用程序，因为它可以将所有模块和资源打包成一个或多个 bundle 文件，以便更好地管理和优化应用程序。而动态模块打包器则适合构建需要动态加载模块的应用程序，因为它可以在运行时根据需要加载所需的模块，以提高性能和用户体验。展开评论点赞 - #每天一个知识点# TCP 建立为什么需要三次握手，为什么不是两次？
TCP协议使用三次握手来建立一个可靠的、双向通信的连接。具体来说，三次握手的过程如下：
客户端向服务器发送一个SYN（同步）报文，表示客户端请求建立连接，并选择一个随机的初始序列号（ISN）。
服务器接收到SYN报文后，向客户端发送一个SYN-ACK（同步-确认）报文，表示服务器已收到请求，并确认客户端的ISN。同时，服务器也选择了一个随机的ISN。
客户端接收到SYN-ACK报文后，向服务器发送一个ACK（确认）报文，表示客户端已经收到了服务器的确认，并向服务器发送了一个确认序列号（ACK number），该序列号是服务器ISN加1。服务器接收到ACK报文后，连接就建立成功了。
这个三次握手的过程，是为了保证建立的连接是可靠的、双向的，确保数据能够在客户端和服务器之间可靠地传递。具体来说，三次握手的目的是：
确保双方都能够接收到对方的数据。在第一次握手中，客户端向服务器发送了一个SYN报文，但此时客户端并不知道服务器是否能够接收到该报文。在第二次握手中，服务器向客户端发送了一个SYN-ACK报文，确认了客户端的请求，并告诉客户端自己能够接收到数据。在第三次握手中，客户端向服务器发送了一个ACK报文，确认了服务器的能力。这样就确保了双方都能够接收到对方的数据。
防止因为网络延迟而导致连接建立失败。在第一次握手中，客户端向服务器发送了一个SYN报文，但该报文可能因为网络延迟而没有到达服务器。如果没有第二次握手，服务器就认为客户端并没有请求建立连接，这样就会导致连接建立失败。通过第二次握手，服务器向客户端发送了一个SYN-ACK报文，告诉客户端已经接收到了请求，如果客户端没有收到该报文，就会重新发送SYN报文。这样就能够防止因为网络延迟而导致连接建立失败。
防止因为重复的请求而导致连接建立失败。如果没有第三次握手，客户端可能会误认为连接已经建立成功，向服务器发送数据。但是，如果第二次握手的SYN-ACK报文在传输过程中遇到了网络延迟，可能会导致服务器重发SYN-ACK报文，此时客户端就可能会误认为这是一个新的请求，重新发送SYN报文。通过第三次握手，客户端向服务器发送了一个ACK报文，告诉服务器已经确认了连接，这样就能够防止因为重复的请求而导致连接建立失败。展开评论点赞
![[强]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
web 虚拟滚动和无限滚动是一样的吗？不一样有什么区别？![[衰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
![[疑问]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
什么时候用em，什么时候用px，各自优缺点是什么呢？![[发怒]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_12.0f24f23.png)