1、https和http区别

• 1. 协议安全性： HTTPS是HTTP的安全版，它使用了SSL/TLS协议来加密数据传输，确保数据在传输过程中的安全性。 HTTP则没有这样的加密功能，数据在传输过程中可能被截获或被篡改。
• 2. 连接方式： HTTP使用的是明文传输，这意味着传输的数据是未经加密的，可以被任何在传输路径上的设备读取或修改。 HTTPS则通过SSL/TLS协议进行加密传输，保护数据在传输过程中的安全，防止数据被窃取或篡改。
• 3. 证书管理： HTTPS需要使用CA（证书颁发机构）颁发的证书来进行加密和解密操作，以确保数据传输的安全性。这些证书用于验证服务器的身份，确保数据传输的完整性和加密性。 HTTP则不需要证书。
• 4. 连接状态： HTTPS连接在数据传输过程中始终保持加密状态，即使连接在传输过程中被截断，也不会影响数据的加密状态。 HTTP的连接是明文的，一旦被截断，数据就可能被窃取或篡改。
• 5. 端口号： HTTP通常使用80端口。 HTTPS则使用443端口，这是通过TCP/IP协议对网络通信进行管理的一种约定。
• 6. 资源消耗： 由于HTTPS使用了加密和解密操作，因此在数据传输过程中需要消耗更多的计算资源。 相比之下，HTTP的资源消耗较小。
• 7. 兼容性： 由于HTTPS需要使用CA证书，在某些情况下可能会出现兼容性问题。如，某些操作系统或浏览器可能不支持某些类型的证书或SSL/TLS协议。 HTTP的兼容性较好，可以在各种设备和操作系统上使用。
• 8. URL模式： HTTPS的URL以https://开头，而HTTP的URL则是http://开头。 总结来说，HTTPS和HTTP的主要区别在于安全性、连接方式、证书管理、连接状态、端口号、资源消耗、兼容性和URL模式等方面。在需要保证数据传输安全的情况下，应优先使用HTTPS协议。

2、http2和http1的区别

• 1. 传输格式： HTTP/1使用文本格式进行通信数据的传输，这使得它易于阅读和调试，但增加了数据传输时的开销。 HTTP/2则使用二进制格式来传输数据，与HTTP/1的文本格式相比，二进制格式可以更快地解析，更有效地传输数据，减少了传输过程中的开销和延迟。
• 2. 多路复用： HTTP/1的一个连接通常只能发送一个请求，要获取多个资源，需要多次请求。这导致了多次连接建立和关闭的开销，特别是在高负载情况下。 HTTP/2允许同时发送多个请求和响应，通过多路复用技术，可以在同一TCP连接上同时处理多个请求和响应，从而减少了延迟，提高了网络吞吐量。
• 3. 头部压缩： HTTP/1的头部信息带有大量信息，且每次都要重复发送，这增加了数据传输的大小和延迟。 HTTP/2使用HPACK算法对HTTP头部进行压缩，减少了头部传输的数据量，从而进一步减少了网络延迟。
• 4. 服务器推送： HTTP/1的通信是单向的，即客户端请求资源，服务器返回资源。 HTTP/2支持服务器推送，允许服务器在客户端请求之前推送相关资源，从而提高了页面加载速度和性能。
• 5. 安全性： HTTP/1的通信是明文传输的，存在安全风险。 HTTP/2默认使用TLS（Transport Layer Security）加密传输数据，提高了安全性。
• 6. 与HTTP/1.1的兼容性： HTTP/2可以与HTTP/1.1共存，服务器可以同时支持HTTP/1.1和HTTP/2。如果客户端不支持HTTP/2，服务器可以回退到HTTP/1.1。
• 7. 性能提升： 通过上述技术的改进，HTTP/2在性能、安全性和可用性方面都有显著的提升，可以使Web应用更加快速、高效和可靠。 综上所述，HTTP/2通过引入二进制传输、多路复用、头部压缩、服务器推送等特性，显著提高了Web应用的性能和安全性，是现代Web开发中的重要协议之一。

3、哪些情况会引起浏览器内存泄漏

• 1. 未释放DOM对象引用： JavaScript代码中，如果未正确释放对DOM元素的引用，例如使用闭包、事件监听器或者全局变量持有DOM对象的引用，这些对象将无法被 回收，导致内存泄漏。
• 2. 循环引用： 当两个或多个对象彼此保持对彼此的引用（例如对象A引用对象B，对象B又引用对象A），如果这些对象之间的引用形成了一个闭环，并且没有其他代码可以访问这些对象，那么这些对象将无法被垃圾回收。
• 3. 定时器和回调函数未正确管理： 如果使用setTimeout或setInterval创建了定时器，但忘记使用clearTimeout或clearInterval清除定时器，这些定时器可能会持续执行，并保持对相关对象的引用，阻止它们被垃圾回收。
• 4. 大量未使用的缓存数据： 在JavaScript中，如果大量数据存储在缓存中（例如数组、对象等），但随后未使用并且没有被释放，这些数据将占用内存，导致内存泄漏。
• 5. 未释放的XHR对象： 如果使用XMLHttpRequest（XHR）对象进行网络请求，但未正确释放XHR对象或取消请求，这些对象可能会保持活动状态并继续占用内存。
• 6. 闭包未释放： JavaScript中的闭包（函数和其周围的作用域）可能会保持对外部作用域中对象的引用，如果这些闭包长时间存在而未被清除，可能会导致内存泄漏。

• 4、常见的http状态码 1xx 2xx 3xx 4xx 5xx

• 1xx（信息性状态码）：服务器接收到请求，需要进一步操作才能完成请求。

• • 100 Continue：请求的一部分已经收到，客户端可以继续发送剩余部分。
• • 101 Switching Protocols：服务器将遵循客户端的请求切换协议。

• 2xx（成功状态码）：请求被成功接收、理解和处理。

• • 200 OK：请求成功，正常返回。
• • 201 Created：请求已成功，并创建了新资源。
• • 202 Accepted：请求已被接受，但处理尚未完成。
• • 204 No Content：请求成功处理，但服务器不返回任何内容。

• 3xx（重定向状态码）：需要客户端进一步操作才能完成请求。

• • 301 Moved Permanently：请求的资源已永久移动到新位置。
• • 302 Found：请求的资源临时移动到新位置。
• • 304 Not Modified：客户端的缓存资源是最新的，服务器不返回内容。

• 4xx（客户端错误状态码）：客户端请求包含错误或无法完成请求。

• • 400 Bad Request：服务器无法理解请求的格式。
• • 401 Unauthorized：请求需要用户验证。
• • 403 Forbidden：服务器拒绝执行请求。
• • 404 Not Found：请求的资源未找到。

• 5xx（服务器错误状态码）：服务器无法完成有效请求。

• • 500 Internal Server Error：服务器遇到了未预期的情况，无法完成请求。
• • 502 Bad Gateway：服务器作为网关或代理，从上游服务器接收到无效响应。
• • 503 Service Unavailable：服务器暂时无法处理请求，通常是因为维护或过载。
• • 504 Gateway Timeout：服务器作为网关或代理，在等待上游服务器响应时超时。

5、localstorge存储容量，cookie存储容量

• 1. localStorage存储容量：
• • 存储容量限制：localStorage的存储容量限制因浏览器而异，但通常情况下，每个域名的存储限制大约为5MB到10MB。这个限制通常是以UTF-16字符计算的，因此非ASCII字符可能会占用更多的空间。
• • 超过限制的处理：如果尝试存储超出限制的数据，浏览器通常会抛出一个错误。
• 2. cookie存储容量：
• • 单个cookie的限制：每个cookie的存储容量限制为4KB。
• • 站点cookie数量的限制：大多数浏览器只允许每个站点存储20个cookie。如果试图存储更多cookie，则最旧的cookie便会被丢弃。
• • 浏览器总cookie数量的限制：有些浏览器还会对它们将接受的来自所有站点的cookie总数作出绝对限制，通常为300个。
• • 安全性和隐私性：由于cookie的限制，它们通常用于存储少量数据，如用户ID等标识符。此外，用户还可以将其浏览器设置为拒绝接受cookie。

6、cookie 有哪些属性

Name、Value、Domain、Path、Expires/Max-age、Size、HttpOnly、Secure、SameSite和Priority

• 1. name和value： Name和Value是一个键值对。Name是Cookie的名称，Cookie一旦创建，名称便不可更改，一般名称不区分大小写；Value是该名称对应的Cookie的值，如果值为Unicode字符，需要为字符编码。如果值为二进制数据，则需要使用BASE64编码。
• 2. Domain： Domain决定Cookie在哪个域是有效的，也就是决定在向该域发送请求时是否携带此Cookie，Domain的设置是对子域生效的，如Doamin设置为 .a.com,则b.a.com和c.a.com均可使用该Cookie，但如果设置为b.a.com,则c.a.com不可使用该Cookie。Domain参数必须以点(".")开始。
• 3. Path： Path是Cookie的有效路径，和Domain类似，也对子路径生效，如Cookie1和Cookie2的Domain均为a.com，但Path不同，Cookie1的Path为 /b/,而Cookie的Path为 /b/c/,则在a.com/b页面时只可以访问Cookie1，在a.com/b/c页面时，可访问Cookie1和Cookie2。Path属性需要使用符号“/”结尾。
• 4. Expires/Max-age： Expires和Max-age均为Cookie的有效期，Expires是该Cookie被删除时的时间戳，格式为GMT,若设置为以前的时间，则该Cookie立刻被删除，并且该时间戳是服务器时间，不是本地时间！若不设置则默认页面关闭时删除该Cookie。 Max-age也是Cookie的有效期，但它的单位为秒，即多少秒之后失效，若Max-age设置为0，则立刻失效，设置为负数，则在页面关闭时失效。Max-age默认为 -1。
• 5. size： Szie是此Cookie的大小。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。各个浏览器对Cookie的最大值和最大数目有不同的限制，整理为下表(数据来源网络，未测试)：
• 6. HttpOnly： HttpOnly值为 true 或 false,若设置为true，则不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见，但在发送请求时依旧会携带此Cookie。
• 7. Secure： Secure为Cookie的安全属性，若设置为true，则浏览器只会在HTTPS和SSL等安全协议中传输此Cookie，不会在不安全的HTTP协议中传输此Cookie。
• 8. SameSite： SameSite用来限制第三方 Cookie，从而减少安全风险。它有3个属性，分别是：
• • Strict：Scrict最为严格，完全禁止第三方Cookie，跨站点时，任何情况下都不会发送Cookie
• • Lax：Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。
• • None：网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。
• 9. Priority： 优先级，chrome的提案，定义了三种优先级，Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先清除。

7、html语义化标签有哪些

HTML5新增了许多语义化标签，如 header, nav, main, article, section, aside, 和 footer等

8、语义化标签对搜索引擎有帮助吗

语义化标签对搜索引擎是有帮助的。以下是几个关键的原因：

• 1. 更好的可访问性：语义化标签能够更好地定义文档结构和内容，使得屏幕阅读器等辅助技术更容易理解网页内容，这有助于搜索引擎蜘蛛更好地理解网页内容。
• 2. 更好的搜索引擎优化：由于语义化标签的使用，搜索引擎可以更准确地理解网页的内容和结构，从而提高搜索结果的相关性。这有助于网站在搜索引擎结果页面（SERP）中获得更高的排名。
• 3. 更易于维护的代码：使用语义化标签可以使代码更易于理解和维护，这对于搜索引擎优化（SEO）人员来说是一个重要的优势。因为当网站需要进行修改或更新时，更易于找到和理解需要更改的代码
• 4. HTML5新增元素属性的影响：HTML5新增了许多语义化标签，如, , , , , , 和 等。这些标签不仅使得页面的内容结构化，表达意思更明确，语义清晰易懂，还有助于搜索引擎更好地理解网页的层次结构和内容分布。
• 5. 增强型表单的影响：HTML5的新表单输入类型（如email、url、number等）提供了更好的输入控制和验证，这不仅提升了用户体验，还有助于搜索引擎更准确地理解表单数据的类型和用途。

9、vue双向绑定的实现原理

Vue双向绑定的实现原理主要基于MVVM（Model-View-ViewModel）模式，其核心在于数据劫持和发布-订阅模式。以下是Vue双向绑定实现原理的详细解析：

• MVVM模式： MVVM模式将视图（View）、模型（Model）和视图模型（ViewModel）三者分离，其中View和Model之间没有直接联系，它们通过ViewModel这个桥梁进行交互。当Model数据发生变化时，ViewModel会自动更新View；而当用户操作View时，ViewModel也会自动更新Model，从而实现数据的双向绑定。
• 实现原理

1. 数据劫持 Vue使用Object.defineProperty()方法实现对数据的劫持。在Vue实例初始化时，它会遍历data选项中的每个属性，并使用Object.defineProperty()为这些属性添加getter和setter。这样，当数据发生变化时，就会触发setter函数，从而通知依赖该数据的视图进行更新。 具体来说，Vue会为每个被劫持的属性创建一个Dep对象（订阅者列表），用于收集所有依赖该属性的Watcher对象。当数据发生变化时，Dep会通知所有Watcher对象进行更新。
2. 发布-订阅模式 Vue通过发布-订阅模式实现数据更新和视图更新的自动同步。当数据发生变化时，Vue会触发一个“数据变化”的事件，所有订阅了该事件的Watcher对象都会收到通知并执行相应的更新操作。这样，视图就能根据最新的数据进行渲染。 在Vue中Watcher对象是一个核心概念，它负责监听数据的变化并触发视图的更新。每个Watcher对象都与一个或多个Dep对象相关联，当Dep对象触发更新操作时，会通知所有关联的Watcher对象进行更新
3. 响应式系统 Vue的响应式系统是基于数据劫持和发布-订阅模式实现的。当数据发生变化时，Vue会自动跟踪所有依赖该数据的Watcher对象，并触发相应的更新操作。这种通过getter和setter来实现双向绑定的方式被称为响应式系统，它使得开发者可以更加方便地处理数据与视图之间的关系。
   • 实现步骤 创建Vue实例，并指定data选项中的数据。 Vue遍历data选项中的每个属性，并使用Object.defineProperty()方法进行数据劫持。 当数据发生变化时，触发setter函数，并通知Dep对象。 Dep对象收集所有依赖该数据的Watcher对象，并通知它们进行更新。 Watcher对象执行更新操作，并触发视图的重新渲染。

10、类组件和函数组件有什么不同，各有什么优缺点

主要区别

1. 设计思想：

• 类组件：基于面向对象编程（OOP）的思想，它包含了状态（state）和生命周期方法，并通过继承React.Component来创建。
• 函数组件：基于函数式编程的思想，它是一个纯函数，接收props并返回一个React元素。

2. 状态管理：

• 类组件：内置状态管理，可以直接使用this.state来声明和管理状态。
• 函数组件：本身没有状态，但可以通过React Hooks（如useState）来添加状态。

3. 生命周期：

• 类组件：通过生命周期钩子函数（如componentDidMount、componentDidUpdate等）来处理组件的挂载、更新和卸载等过程。
• 函数组件：没有生命周期钩子函数，但可以通过React Hooks（如useEffect）来模拟生命周期。

4. 性能优化：

• 类组件：主要通过shouldComponentUpdate来避免不必要的渲染，提升性能。
• 函数组件：通过React.memo或React 18的自动批处理等功能来优化性能。

5. 优缺点
   1. 类组件

   • 优点： 支持更多的React特性，如状态、生命周期方法和refs。 可以在任何生命周期中使用this.setState来更新状态。 可以复用状态逻辑和生命周期逻辑，通过高阶组件等方式。

   • 缺点： 需要使用this关键字，可能会导致this指向问题。 在每次渲染时都会创建一个新的实例，可能会影响性能。 代码可能会更复杂，因为需要处理this和生命周期方法。

   2. 函数组件
   • 优点： 更简单的代码，无需使用this关键字。 更容易理解和调试，因为它们是纯函数。 更好的性能，因为它们不支持shouldComponentUpdate生命周期钩子。默认的性能优化（如React Fiber的diff算法）会更好地处理函数组件。
   • 缺点： 缺乏状态，需要使用Hooks API（如useState）来添加状态。 缺乏生命周期方法，需要使用Hooks API（如useEffect）来模拟生命周期。 不支持refs（但可以通过forwardRef和useImperativeHandle来模拟）。