前端ms笔记_前端控制浏览器缓存-CSDN博客

本文链接：https://blog.csdn.net/webuni/article/details/136376170

1.前端设置浏览器缓存

前端可以通过设置HTTP响应头来控制浏览器的缓存行为。以下是一些常用的设置：

1. 设置"Cache-Control"头字段：Cache-Control头字段用于指定浏览器缓存的行为。常用的取值包括：
- "no-cache"：表示每次请求都要向服务器验证资源是否有更新。
- "no-store"：表示不缓存任何资源。
- "public"：表示资源可以被缓存，并且可以被共享缓存。
- "private"：表示资源仅能被个人用户缓存，不能被共享缓存。
- "max-age"：表示资源在多少秒内有效，可以设置一个时间间隔，比如 "max-age=3600" 表示资源在一小时内有效。

2. 设置"Expires"头字段：Expires头字段用于指定资源的到期时间，即资源在浏览器缓存中的有效期。它的值是一个GMT格式的日期字符串。例如，"Expires: Mon, 30 Sep 2022 12:00:00 GMT" 表示资源在2022年9月30日12:00:00之前有效。

3. 设置"Last-Modified"头字段：Last-Modified头字段告诉浏览器资源的最后修改时间。浏览器在下次请求资源时，会发送一个"If-Modified-Since"头字段，服务器可根据该字段的值来判断资源是否有更新。如果资源没有更新，服务器可以返回一个304 Not Modified状态码，浏览器就可以使用本地缓存副本。

4. 设置"ETag"头字段：ETag头字段是一个资源的唯一标识符，通常是一个哈希值或版本号。浏览器在下次请求资源时，会发送一个"If-None-Match"头字段，服务器可根据该字段的值来判断资源是否有更新。如果资源没有更新，服务器可以返回一个304 Not Modified状态码，浏览器就可以使用本地缓存副本。

需要注意的是，缓存是由浏览器控制的，所以在开发过程中，我们可以使用开发者工具来观察缓存的情况。另外，不同的浏览器对缓存的行为也可能有所不同，所以需要在不同浏览器中进行测试和兼容。

2.http（2,0）和https

HTTP/2.0 和HTTPS 是两个不同的概念，下面分别进行解释：

1. HTTP/2.0（简称HTTP2）:
HTTP/2.0是HTTP协议的一种进化版本，在性能和效率方面有所提升。相对于旧版的HTTP/1.x，HTTP2 带来了以下主要改进：

- 多路复用：HTTP/2可以在同一个TCP链接上同时发送多个请求和响应，避免了HTTP/1.x中每个请求都需要建立和关闭一次TCP连接的开销。
- 二进制协议：HTTP/2使用二进制格式进行数据传输，取代了HTTP/1.x的文本格式。这样做的好处是提高传输效率和解析的性能。
- 头部压缩：HTTP/2使用首部压缩算法来减少请求和响应的头部大小，减少网络传输的数据量。
- 服务器推送：HTTP/2允许服务器在客户端请求之前，主动向客户端推送相关的资源，提高页面加载速度。

需要注意的是，HTTP/2是在HTTP协议的基础上进行的更新，与HTTPS没有直接的关联。

2. HTTPS:
HTTPS（Hypertext Transfer Protocol Secure）是通过使用加密协议（通常是TLS/SSL）对HTTP进行安全传输的一种方式。HTTPS通过对HTTP的通信内容进行加密，确保传输过程中的数据无法被第三方窃听或篡改。

与HTTP相比，HTTPS主要增加了以下内容：

- 通过将数据加密传输，确保数据的安全性和保密性。
- 通过使用数字证书对通信双方进行身份验证，确保通信双方的真实性。
- 通过提供完整性校验机制，可以检测数据在传输过程中是否被篡改。

需要注意的是，HTTPS是在HTTP协议的基础上添加了安全性的改进，而HTTP/2是一种协议级别的改进，它们可以在一起使用，也可以单独使用。一般情况下，建议在部署Web应用时将HTTP/2与HTTPS结合使用，以获得更好的用户体验和安全性。

3.内存泄漏

内存泄漏是指程序在动态分配内存后，无法再次释放已经不再使用的内存，导致内存占用逐渐增加，最终达到系统的内存极限，影响程序的性能和稳定性。

以下是一些常见的导致内存泄漏的情况：

1. 循环引用：当两个或多个对象彼此引用，形成一个循环引用的链条时，即使这些对象在程序中没有被使用，它们也无法被垃圾回收器回收，从而发生内存泄漏。

2. 未释放资源：例如打开文件、数据库连接、网络连接、定时器等，如果在使用完后没有正确释放资源，就会导致内存泄漏。

3. 长生命周期的对象：某些对象存在于整个程序的生命周期中，但在过长时间内被持有，无法被垃圾回收器回收，也会导致内存泄漏。

4. 缓存问题：如果缓存中的对象没有定期地清理或更新，就会导致内存不断累积。

以下是一些常用的检测和防止内存泄漏的方法：

1. 使用合适的垃圾回收机制：现代编程语言和运行环境通常都提供自动垃圾回收机制，能够自动释放不再使用的内存，开发人员要熟悉垃圾回收机制的工作原理，并且避免创建循环引用的对象。

2. 及时释放资源：在使用完文件、网络连接、数据库连接等资源后，要手动关闭和释放它们，确保资源可以被回收。

3. 使用适量的缓存：避免无限制地缓存大量对象，及时清除不再需要的缓存对象。

4. 使用性能分析工具：使用性能分析工具来检测内存泄漏问题，定位具体引起内存泄漏的源代码位置，如Chrome DevTools、Firefox Developer Tools等。

5. 定期进行代码审查和测试：通过定期的代码审查和测试，及时发现和解决潜在的内存泄漏问题。

内存泄漏问题对系统的性能和稳定性有着较大的影响，开发人员需要重视内存管理，并采取相应的措施来避免和解决内存泄漏问题。

4.js垃圾回收机制

JavaScript中的垃圾回收机制是一种自动管理内存的过程，无需用户手动释放不再使用的内存。JavaScript具有自动垃圾回收机制，它负责检测和释放不再使用的对象，以便回收内存供其他对象使用。

JavaScript中的垃圾回收器通常使用以下两种策略来确定哪些对象可以被回收：

1. 引用计数算法：
引用计数算法是一种最简单的垃圾回收机制。每个对象都会有一个引用计数器，当一个对象被引用时，计数器加1；当引用被释放或者重指向其他对象时，计数器减1。当计数器为0时，表示该对象不再被引用，可以进行回收。但是引用计数器无法解决循环引用的情况，即两个或多个对象相互引用，导致计数器一直不为0，即使它们已经不再被使用。

2. 标记-清除算法：
标记-清除算法是一种常用的垃圾回收算法。它通过一系列的遍历来确定哪些对象是活动的（仍然被引用），哪些对象是垃圾（不再被引用）。算法分为两个阶段：
- 标记阶段：从根对象（通常是全局对象）开始，通过遍历对象引用关系，标记所有活动对象。未被标记的对象即为垃圾对象。
- 清除阶段：遍历整个堆，释放未被标记的垃圾对象所占用的内存。清除后的内存可以被后续的对象使用。

在现代的JavaScript引擎中，通常使用更复杂的垃圾回收算法，例如分代回收和增量标记等，以提高垃圾回收的效率和性能。

总之，JavaScript的垃圾回收机制通过自动追踪和释放不再使用的内存，并在必要时回收内存，减少了开发人员手动管理内存的复杂性，提高了代码的健壮性和性能。

5.vue(3.0)Proxy

在Vue 3.0中，引入了Proxy作为其响应式系统的底层机制，用于代替Vue 2.x中的Object.defineProperty。

Proxy是ES6中的一个特性，它可以拦截并自定义对象上的操作。在Vue 3.0中，Proxy被用于劫持对象的访问和修改，并且提供了更优雅、灵活和高效的响应式特性。

使用Proxy可以将一个普通的JavaScript对象转换为一个可以拦截并监听变更的响应式对象。当对象的属性被访问、修改或删除时，Proxy会拦截这些操作，并触发相应的响应。

Vue 3.0使用Proxy来代理组件中的响应式数据，它可以更准确地追踪属性的访问和修改，从而实现更精确的依赖追踪和派发更新。相比于Vue 2.x的Object.defineProperty，Proxy有以下一些优势：

支持代理数组和动态新增属性：Proxy可以直接拦截数组操作，如push、pop等，并支持动态新增属性，而无需像Object.defineProperty一样需要特殊处理数组和新增属性。
更好的性能：Proxy的性能优于Object.defineProperty，尤其是对大型响应式对象时，其性能更为出色。
更全面的拦截操作：Proxy可以拦截对象上更多的操作，如has、deleteProperty等，比Object.defineProperty更具灵活性。
更好的错误提示：Proxy提供了更详细的错误提示，可以帮助我们更快地定位到代码的问题。

在Vue 3.0中，我们无需直接操作Proxy，而是通过使用Vue提供的响应式函数（reactive）来创建响应式的对象。Vue会自动使用Proxy来代理这些响应式对象，从而实现数据的响应式更新。

总结而言，Proxy作为Vue 3.0的底层响应式机制，可以提供更好的性能、更全面的拦截操作和更好的错误提示，从而提高开发体验和性能。

6.虚拟dom

虚拟DOM（Virtual DOM）是Vue和其他前端框架如React等使用的一种性能优化技术。它是一个虚拟表示页面的对象树，存在于内存中，用于描述当前页面的状态。

使用虚拟DOM的目的是为了在数据变更时，能够高效地更新页面。传统的DOM操作会涉及到大量的直接DOM操作，包括创建、查询和修改DOM元素，这些操作会引起性能问题。而虚拟DOM可以通过对比新旧虚拟DOM树的差异，然后批量更新真实的DOM，从而减少直接对DOM进行操作的次数。

虚拟DOM的工作原理如下：

初始化：首先，在应用程序的初始渲染时，会创建一个初始的虚拟DOM树。这个虚拟DOM树是一个轻量级的JavaScript对象，它以类似DOM元素的方式来描述页面结构。
更新：当应用程序的状态改变时，会重新生成一个新的虚拟DOM树。新旧虚拟DOM树之间会进行比较，找出差异。这个过程叫做虚拟DOM的diff算法，也被称为协调算法。
批量更新：在比较差异之后，虚拟DOM会生成一系列的DOM操作指令。这些指令表示了需要对真实DOM进行的操作，比如创建新的节点、删除不需要的节点、更新已有节点的属性等。
渲染：最后，将这些DOM操作指令应用到真实的DOM上，完成页面的更新。

使用虚拟DOM的好处是可以最小程度地操作真实DOM，从而提高渲染性能。通过将差异操作批量应用到真实DOM上，减少了直接操作DOM的次数，从而提高了性能。

需要注意的是，虚拟DOM只是一种中间层，它并不会完全消除真实DOM操作的开销。更新虚拟DOM也需要时间和计算资源。但是相对于直接操作真实DOM，使用虚拟DOM可以更好地管理和优化DOM操作，提高应用程序的性能和用户体验。

7.diff算法

diff算法是虚拟DOM更新的核心算法，用于比较新旧虚拟DOM树的差异，并生成相应的DOM操作指令，以便进行批量的DOM更新。

以下是一个简单的diff算法的步骤：

比较根节点：首先，比较新旧虚拟DOM树的根节点。如果根节点类型不同，直接替换旧的根节点，如果类型相同，则进行下一步的比较。
比较子节点：对比新旧虚拟DOM树的子节点。首先，遍历新虚拟DOM的子节点列表，在旧虚拟DOM的子节点列表中寻找同类型的节点。如果找到了相同类型的节点，则进行下一步的递归比较；如果没有找到，则说明新节点是一个新的节点，需要创建一个新的DOM元素。
递归比较子节点：对比新旧虚拟DOM树的同类型子节点。递归比较它们的属性并更新。如果属性有变化，则更新相应的DOM元素的属性；如果子节点有变化，则进行下一步的精细化比较。
精细化比较：对比新旧虚拟DOM树的子节点的顺序和数量。通过一些启发式算法，比如“最长递增子序列（LIS）”算法，来找到最小的操作步骤。这些操作可能包括插入、移动和删除DOM元素。
生成DOM操作指令：根据比较的结果，生成一系列DOM操作指令，用于真实DOM的更新。这些指令可能包括创建新的DOM元素、删除不需要的DOM元素、更新现有DOM元素的属性或移动DOM元素的位置等。
批量DOM更新：将生成的DOM操作指令应用到真实的DOM上，完成页面的更新。

diff算法根据虚拟DOM结构的特点，通过最少的操作来实现DOM的更新，以提高性能和效率。具体的diff算法实现可能会有所不同，各个框架可能会采用不同的优化策略，但核心思想通常都是基于以上的步骤。

8.前端设计模式

在前端开发中，也有一些常用的设计模式，可以帮助解决前端项目中的设计问题。以下是一些常见的前端设计模式：

1. 模块模式（Module Pattern）：将相关的函数、变量和对象封装成单个模块，避免全局污染。通过使用闭包来创建私有变量和方法，提供公共接口供外部访问。

2. 单例模式（Singleton Pattern）：确保一个类只有一个实例，并提供一个全局的访问点。常用于管理全局状态数据、资源池等。

3. 观察者模式（Observer Pattern）：定义对象间的一对多依赖关系，当一个对象状态发生改变时，所有依赖它的对象都会收到通知并自动更新。在前端中，常用于事件、订阅-发布模式等。

4. 发布-订阅模式（Publish-Subscribe Pattern）：定义了一种一对多的依赖关系，让多个订阅者同时监听某一个主题（或者事件对象），当主题发生变化时，会通知所有订阅者。常用于解耦组件间的通信。

5. 适配器模式（Adapter Pattern）：将一个类的接口转换成客户端所期望的另一个接口，使原本不兼容的类可以一起工作。在前端中，常用于兼容不同浏览器之间的差异，或者对外部API进行封装。

6. 装饰器模式（Decorator Pattern）：动态地给一个对象添加额外的职责，同时不改变其结构。在前端中，常用于在不修改原有代码的情况下，给组件添加新的功能或修改现有功能。

7. 策略模式（Strategy Pattern）：定义一系列的算法类，让它们可以相互替换，使得算法可以独立于使用它的客户端而变化。在前端中，常用于实现不同的业务策略，根据特定条件选择不同的处理方式。

这些设计模式能够帮助前端开发者提高代码的可读性、可维护性和可扩展性，同时也有助于解决一些常见的前端设计问题。在应用设计模式时，需要结合具体的项目需求和场景进行选择和灵活运用。

9.vue路由hash模式和history模式

Vue路由可以使用两种模式：hash模式和history模式。这两种模式决定了URL中路由的呈现方式。

1. Hash模式：
- URL中会有一个特殊字符“#”（hash），后面跟着路由路径。例如：http://example.com/#/home
- hash部分的改变不会导致浏览器向服务器发送请求，因此可以用来实现前端路由。
- Hash模式在兼容性方面表现较好，支持所有现代浏览器。
- 使用Hash模式时，可以通过监听hashchange事件来处理路由的跳转和监听。

2. History模式：
- URL中没有特殊的字符，只有真实的路由路径。例如：http://example.com/home
- 使用History模式时，需要后端服务器配置，使所有路由指向同一个HTML文件，用于处理动态路由，避免404错误。
- History模式在使用浏览器前进后退按钮时表现良好，并且URL更加友好。
- 使用History模式时，可以通过路由导航守卫、浏览器的前进后退按钮等机制来处理路由的跳转和监听。

在Vue中，默认使用hash模式，可以通过创建Vue Router实例时的mode配置项来切换到history模式。例如：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

new Vue({
  router,
  ...
}).$mount('#app');

需要注意的是，当使用history模式时，如果用户直接访问某个路由的URL，而不是通过点击链接或路由跳转，服务器可能会返回404错误。这时需要后端服务器做相应的配置来处理这种情况，以确保路由正常显示。

10.this指向

在JavaScript中，关键字this指向当前执行代码的上下文对象，它的值是动态的，根据代码的使用方式和上下文来决定。

1. 全局上下文：如果在全局环境中使用this，它将指向全局对象（通常是window对象在浏览器中）。

console.log(this); // 在浏览器中输出window对象

2. 函数上下文：在函数内部，函数的this值取决于如何调用该函数。

- 作为函数调用：当函数作为普通函数调用时，this指向全局对象（非严格模式下）或undefined（严格模式下）。

function sayHello() {
  console.log(this);
}

sayHello(); // 浏览器下输出window对象或undefined

- 作为方法调用：当函数作为对象的方法调用时，this指向调用该方法的对象。

const person = {
  name: 'John',
  sayHello: function() {
    console.log(this.name);
  }
};

person.sayHello(); // 输出John

- 作为构造函数调用：当函数作为构造函数使用时，this将指向正在创建的新对象。

function Person(name) {
  this.name = name;
}

const john = new Person('John');
console.log(john.name); // 输出John

- 使用apply、call或bind方法调用：通过apply、call或bind方法调用函数时，可以手动指定this的值。

function sayHello() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: 'John' };

sayHello.call(person); // 输出Hello, John
sayHello.apply(person); // 输出Hello, John

const greet = sayHello.bind(person);
greet(); // 输出Hello, John

3. 箭头函数：箭头函数没有自己的this绑定，它会捕获当前上下文中的this值。

const person = {
  name: 'John',
  sayHello: () => {
    console.log(this.name);
  }
};

person.sayHello(); // 输出undefined（在浏览器中）或null（在node.js中）

在使用this时，需要根据代码的上下文和使用方式来理解和确定this的指向，以避免错误或意外的结果。