长度单位px、em和rem
区别：
1.px是固定单位，一旦设置了就无法因为适应页面大小而改变
2.em和rem相对于px更具有灵活性，它们是相对长度单位（长度不是定死了的，适用于响应式布局）
3.em是相对于其父元素来设置字体大小的，它存在问题：进行任何元素设置可能都需要知道它的父元素的大小
rem是相对于根元素<html>，只需要在根元素确定一个参考值即可
任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px
1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。 2、em 单位基于使用他们的元素的字体大小。 3、rem 单位基于 html 元素的字体大小。 4、em 单位可能受任何继承的父元素字体大小影响。 5、rem 单位可以从浏览器字体设置中继承字体大小。 6、使用 em 单位应根据组件的字体大小而不是根元素的字体大小。 7、在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。 8、使用rem单位，除非你确定你需要 em 单位，包括对字体大小。 9、媒体查询中使用 rem 单位 10、不要在多列布局中使用 em 或 rem 改用 %。 11、不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
null和undefined的区别
null和undefined都代表空值，undefined表示没有初始化变量；null表示该变量没有对象指向
undefined：从根本上就没有定义；隐藏式 空值
null：定义了但是为指向任何内存中的对象；声明式 空值
webpack和vite打包工具
都是现代化打包工具
1.启动方式不同：
webpack：先分析各个模块之间的依赖，然后编译打包，最后交给本地服务器进行渲染
vite：先启动开发服务器，请求模块时按需动态编译显示。
2.关注的层级不同：
vite关注的层级更高：vite是 high level api，关注的是如何快速方便的搭建项目，相比webpack，减少了很多配置量。
webpack关注的层级更低：webpack是low level api，因为webpack更关注的是各种功能的实现，重点放在构建上。
3.启动项目和热更新vite更快
4.vite开发阶段打包快，但是vite相关生态没有webpack完善，vite可以作为开发的辅助
vite为构建项目而生 webpack为构建工具而生
前端浏览器兼容性问题
1.浏览器屏幕适配：
媒体查询+rem布局：媒体查询动态修改根元素的大小，使rem跟着变化，具有响应式
2.浏览器版本兼容问题：通过引入一些文件（html5shiv.js、response.js、渐进增强、优雅降级等）
TCP和UDP
TCP基于连接，UDP基于非连接
TCP：
1.三次握手：是建立连接的过程，客户端向服务端发送SYN包，服务端同意连接则回复客户端SYN+ACK包，客户端收到后再回复服务端ACK 包然后连接建立；经过三次握手之后客户端和服务端进入数据传输状态
//三次握手防止已失效的请求报文突然又传到服务器引起错误
2.四次挥手：假设客户端主动请求关闭连接，先向服务端发送FIN包表示要关闭连接，此时客户端进入终止等待状态（第一次挥手）；服务 端收到后回复ACK包，表示进入关闭等待状态，客户端接到进入终止等待2状态（第二次挥手）；此时服务端还可以发送未发送 的数据，客户端也还可以接收数据，待服务端发送完数据之后会再发送给客户端FIN包，服务端进入最后确认状态（第三次挥 手）；客户端收到之后回复ACK包，此时客户端进入超时等待状态，经过超时等待时间后关闭连接，服务端收到ACK包后立即 关闭连接（第四次挥手）
三次握手和四次挥手都是：为了保证在不可靠的网络链路中进行可靠的连接/连接断开确认
TCP：传输数据稳定可靠，适用于对网络通讯质量要求较高、需要准确无误的传输给对方（传输文件、发送邮件、浏览网页）的场景
UDP：速度快、性能损耗小、资源占用少但是会产生丢包，适用于对实时性要求较高但是对少量丢包没有太大要求的场景（域名查询、语音通话、视频直播、隧道网络）
script 标签中 defer 和 async 的区别
<script src="script.js'></script> 按照顺序来加载并执行脚本，在脚本加载及执行过程中，会阻塞后续 html 文档的解析 <script defer src="script.js"></script> 加载过程不会影响 html 文档解析，并在 html 文档解析成功后，DOMContentLoaded 事件触发之前执行脚本。 <script async src="script.js"></script> 加载过程不会影响 html 文档解析，加载成功后会立即执行脚本内容，这个过程会阻塞后续 html 文档的解析
变量提升
变量声明提升：变量声明会被提升到作用域的顶部；可以在变量声明前使用变量，值是undefined
函数声明提升：函数声明会被完整的提升到所在作用域的顶部；可以在函数声明之前调用函数
get和post的区别
1. 数据传输位置：GET请求将数据附加在URL的查询参数中，例如`https://example.com?page=1&limit=10`，而POST请求将数据包含在请求主体中，不会直接暴露在URL中。 2. 数据长度限制：GET请求对URL的长度有限制，因为URL的长度受到浏览器、服务器和网络设备的限制。而POST请求没有严格限制请求主体的大小。 3. 安全性：GET请求的数据暴露在URL中，因此它们对于传递敏感信息不太安全。POST请求将数据放在请求主体中，相对更安全一些，但仍然推荐使用HTTPS来加密传输的数据。 4. 可缓存性：GET请求可以被浏览器缓存，因为它们具有幂等性（多次请求产生相同结果）。POST请求一般不会被浏览器缓存，因为它们可能对服务器产生副作用（如创建、更新、删除）。 5. 幂等性：GET请求是幂等的，多次相同的GET请求产生的结果是相同的，不会对服务器产生副作用。POST请求可以是非幂等的，多次相同的POST请求可能会每次都创建新的资源或修改资源的状态。 6. 使用场景：GET请求适用于获取资源、查看页面和查询操作，而POST请求适用于提交表单、创建资源和执行需要对服务器产生副作用的操作。 总结起来，GET和POST方法在数据传输的位置、长度限制、安全性、可缓存性、幂等性和使用场景等方面存在区别。正确选择使用GET或POST取决于你要实现的功能和需求。
Object.freeze()冻结对象的一级属性 通过Object.defineProperty()不让对象属性更改
const obj = {name:'ch',age:17,}
Object.freeze(obj)
obj.name = 'ccc'
console.log(obj);
通过defineProperty()不让对象属性更改
const obj = {a:1,v:2}
Object.defineProperty(obj,'name',{
value:'cccc',
writable:false, //writable设置为false，这意味着这个属性是只读的
configurable:false //onfigurable属性用于控制是否允许修改属性的配置
})
obj.name = 'xxx'
obj.a = 222
console.log(obj)
组件化的原理
组件化是一种软件开发的架构模式，通过将应用程序拆分为独立的可重用组件，以实现模块化和组件复用，从而提高开发效率和可维护性。下面是组件化的一般原理： 拆分为独立组件：将应用程序拆分成多个独立的组件，每个组件都具有特定的功能和责任。组件应该是独立的、可组合的，并且关注单一的功能领域。 封装和接口定义：每个组件应该封装自己的实现细节，并且通过定义接口暴露必要的方法和属性，以便其他组件可以与之交互。 组件通信：组件之间可能需要进行通信和传递数据。这可以通过组件之间的接口方法、事件发布订阅、全局状态管理等方式实现。 可重用和可扩展：组件应该设计为可重用的，以便在不同的应用场景中复用。同时，组件也应该支持扩展，以便在需要新增功能或修改现有功能时进行调整。 组件化架构管理：在组件化架构中，通常会设计一个管理器或容器，用于组织、创建和管理组件的生命周期和依赖关系。 组件化的主要目标是提高代码的可维护性、重用性和可扩展性。通过将复杂的应用程序拆分成多个独立的组件，开发人员可以更好地分工合作、并行开发和单独测试每个组件。同时，也可以将已开发的组件轻松地集成到其他应用程序中，提高开发的效率。 各种前端框架都提供了组件化的实现方式，例如React的组件、Vue的组件、Angular的组件等。框架提供了组件创建、组件通信、生命周期管理等功能，使得组件化开发更加便捷和高效。
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
