广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

已于 2024-03-22 01:34:53 修改
阅读量910 收藏 24
点赞数 29
分类专栏： 程序员 文章标签： 前端 经验分享 职场和发展 面试
于 2024-03-22 01:28:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interest_ing_/article/details/136925277
版权

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

在这里插入图片描述

文章目录

广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

1. 浏览器渲染原理

浏览器渲染原理涉及将网页代码转换成用户可视界面的过程。以下是浏览器渲染页面的基本步骤：

  1. 加载：浏览器发起HTTP请求，从服务器获取HTML文档。

  2. 解析：浏览器解析HTML文档，创建DOM（文档对象模型）树。DOM树是由HTML元素构成的节点层次结构。

  3. 构建CSSOM：浏览器解析CSS文件和内联样式，构建CSSOM（CSS对象模型）树。CSSOM树包含了页面的样式信息。

  4. 合并DOM与CSSOM：浏览器将DOM树和CSSOM树合并，形成渲染树（render tree）。渲染树包含了所有需要显示在屏幕上的元素信息，包括样式属性。

  5. 布局：浏览器对渲染树进行布局计算，确定每个元素的位置和大小，这一过程也称为“重排”（reflow）。

  6. 绘制：浏览器将布局后的信息转换成像素，这个过程称为“重绘”（repaint）。随后，浏览器将像素数据发送到显卡，由显卡输出到显示器上。

  7. 合成：在某些情况下，浏览器会使用硬件加速来合成多个图层，这可以提高渲染效率。

在整个渲染过程中，浏览器可能会执行优化措施，如缓存、异步加载等，以提升页面加载和交互性能。了解这些原理对于前端开发者来说非常重要，它有助于诊断性能问题、优化页面加载速度和改善用户体验。

2. https如何进行加密

HTTPS（超文本传输安全协议）是一种安全的网络传输协议，它在HTTP的基础上通过SSL/TLS协议提供了数据加密、完整性验证和身份认证的功能。HTTPS的加密过程主要包括以下步骤：

  1. 握手阶段：

    • 客户端向服务器发起HTTPS请求。
    • 服务器响应并发送其SSL证书，该证书包含了服务器的公钥和由证书颁发机构（CA）签发的信息。
    • 客户端验证服务器证书的有效性，包括证书是否过期、是否由可信CA签发等。
    • 验证通过后，客户端会生成一个随机数（称为预主密钥），并使用服务器的公钥加密后发送给服务器。

  2. 密钥交换：

    • 服务器使用自己的私钥解密收到的预主密钥。
    • 客户端和服务器现在都有了相同的预主密钥，将使用它来生成一组对称加密的密钥（会话密钥），用于后续的数据加密通信。

  3. 加密通信：

    • 使用生成的会话密钥，客户端和服务器之间的所有数据传输都将被加密。即使数据在传输过程中被拦截，攻击者也无法解密和读取数据内容，因为他们没有会话密钥。

  4. 会话结束：

    • 一旦通信结束，会话密钥将被丢弃，确保每次会话都使用新的密钥，增加了安全性。

HTTPS的加密机制确保了数据传输的安全性，尤其适用于涉及敏感信息（如登录凭据、个人信息、支付信息等）的场合。通过这种方式，HTTPS提供了一种可靠的保护措施，防止数据在传输过程中被窃听或篡改。

3. spa首屏加载慢优化

SPA（单页应用）首屏加载慢是常见的性能问题，主要原因是JavaScript文件和依赖的加载、解析、执行过程可能导致渲染阻塞。以下是一些优化SPA首屏加载速度的策略：

  1. 代码分割：使用Webpack等打包工具进行代码分割，将代码拆分为多个块（chunk），按需加载，减少首屏加载时的JavaScript体积。

  2. 异步加载：将非关键的JavaScript和CSS资源设置为异步加载（例如，使用async或defer属性），确保首屏渲染不受阻塞。

  3. 懒加载：实现图片和组件的懒加载，只有当用户滚动到页面的相应位置时才加载资源。

  4. 优化资源加载：使用HTTP/2减少连接数，启用Gzip或Brotli压缩资源，减少传输数据大小。

  5. 预加载关键资源：通过<link rel="preload">预加载关键CSS文件和字体，确保它们在渲染前已加载完毕。

  6. 服务端渲染（SSR）：使用服务端渲染生成首屏HTML，减少客户端渲染时间。

  7. 缓存策略：利用浏览器缓存，对静态资源设置合理的缓存策略，减少重复加载。

  8. 优化DOM操作：减少首屏渲染所需的DOM操作，避免复杂的DOM树结构。

  9. 使用CDN：将静态资源部署到CDN上，减少资源加载时间。

  10. 性能监控：使用性能监控工具（如Lighthouse、WebPageTest）定期检查网站性能，找出瓶颈并进行优化。

通过这些策略的组合使用，可以显著提升SPA的首屏加载速度，改善用户体验。开发者应根据具体情况选择合适的优化方法，并持续监测优化效果。

4. vue双向绑定原理

Vue.js 的双向绑定是其核心特性之一，它允许开发者在表单输入和应用状态之间建立一个双向连接。Vue 实现双向绑定的原理主要依赖于响应式系统，该系统结合了观察者模式、依赖收集和发布订阅模式。以下是 Vue 双向绑定的基本原理：

  1. 数据劫持：
    Vue 使用 Object.defineProperty 方法对数据对象的属性进行劫持，将每个属性转换为 getter 和 setter。这样，每当属性被访问（getter 被调用）或属性值被修改（setter 被调用）时，Vue 都能够知道。

  2. 依赖收集：
    当渲染函数或计算属性被执行时，它们会访问响应式数据的属性，触发这些属性的 getter。在 getter 中，Vue 会记录当前正在执行的渲染函数或计算属性作为依赖。这个过程称为依赖收集，确保 Vue 知道哪些组件需要在数据变化时重新渲染。

  3. 观察者模式：
    Vue 的响应式系统是基于观察者模式实现的。每个组件实例都对应一个观察者对象，它会在数据变化时收到通知，并执行相应的组件更新。

  4. 发布订阅：
    当属性的 setter 被调用时，意味着数据发生了变化。Vue 会触发该属性的 setter，通知所有依赖于这个属性的观察者（即组件），进行相应的更新。

  5. 指令（v-model）：
    Vue 提供了 v-model 指令来实现表单输入和应用状态之间的双向绑定。当用户输入时，v-model 会更新对应的数据模型，反之，当数据模型变化时，v-model 也会更新 DOM 中的输入框显示。

  6. 虚拟DOM：
    Vue 在内部使用虚拟DOM来提高性能。当数据变化时，Vue 会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较（diff）。Vue 会找出两棵树之间的差异，并计算出最小的更新操作来应用到实际的DOM上，从而实现高效的视图更新。

通过这些机制，Vue 能够在数据变化时自动更新视图，同时在视图变化时（如用户输入）更新数据，实现所谓的双向绑定。这种机制大大简化了数据与视图同步的复杂性，使得开发者能够更加专注于应用逻辑。

5. vuex设计与实现

Vuex 是 Vue.js 应用的状态管理模式和库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的设计遵循了几个核心原则：

  1. 单一状态树：整个应用的状态被存储在一个对象树中，称为“state”。这使得状态的预测和管理变得更加简单。

  2. 状态管理：Vuex 提供了一套严格的规则和约定，使得状态的变化可追踪和调试。

  3. 数据流的单一方向：Vuex 应用的状态变化是可预测的，所有的状态变更都显式地通过变更状态的函数进行。

Vuex 的基本实现包括以下几个部分：

  • State：存储所有应用级别的状态。

  • Getters：允许你从 state 中派生出一些状态，例如过滤列表、计算属性值等。

  • Mutations：更改 Vuex 的 state 的唯一方法是提交 mutation。Mutation 是同步函数，其目的是修改 state。

  • Actions：类似于 mutations，但可以包含任意异步操作。Action 提交的是 mutation，而不是直接变更状态。

  • Mutations 和 Actions 的区别：Mutations 必须是同步函数，而 Actions 可以是异步的。Mutations 直接变更状态，而 Actions 通过提交 Mutations 来间接变更状态。

  • Modules：当应用变得复杂时，状态管理也会变得很复杂。Vuex 允许将 store 分割成模块（module）。每个模块拥有自己的 state、getters、mutations、actions，甚至是嵌套子模块。

在实现 Vuex 时，首先需要创建一个 store 实例，定义好 state、getters、mutations 和 actions。然后在 Vue 实例中注入 Vuex store，通过 this.$store 访问 state 和 getters，通过 this.$store.commit 和 this.$store.dispatch 触发状态变更。

例如，创建一个简单的 Vuex store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOdd({ state, commit }) {
      if (state.count % 2 !== 0) {
        commit('increment');
      }
    }
  }
});

export default store;

在 Vue 组件中使用：

export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementIfOdd() {
      this.$store.dispatch('incrementIfOdd');
    }
  }
};

通过这种方式，Vuex 提供了一个清晰、结构化的方式来管理应用的状态，使得状态变化可预测、可追踪，并且易于维护。

6. vue-router底层原理

Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 核心深度集成，使得在单页应用中构建复杂的页面路由变得简单。Vue Router 的底层原理可以从以下几个方面来理解：

  1. 路由映射：
    Vue Router 允许开发者定义路由映射，即 URL 路径与组件的对应关系。在初始化时，Vue Router 会解析路由配置，创建一个路由表，用于匹配 URL 并找到对应的组件。

  2. 路由模式：
    Vue Router 支持两种路由模式：Hash 模式和 History 模式。Hash 模式依赖 URL 的 hash 部分（例如 #/），而 History 模式利用 HTML5 History API 来实现干净的 URL，不需要 hash。

  3. 路由导航：
    用户点击导航链接或使用编程式导航（如 this.$router.push）时，Vue Router 会根据当前 URL 和路由表来决定要渲染哪个组件。如果是 History 模式，Vue Router 还会通过 HTML5 History API 来改变 URL，而不影响页面的重新加载。

  4. 视图渲染：
    Vue Router 使用一个 <router-view> 组件作为渲染目标，根据当前路由的匹配结果动态地切换组件。同时，可以使用 <router-link> 或 <nuxt-link> 组件来创建导航链接，Vue Router 会自动处理链接的激活状态。

  5. 路由守卫：
    Vue Router 提供了路由守卫（Route Guards），允许在路由进入或离开时执行逻辑，如验证用户权限、记录日志等。守卫可以在全局或局部使用，支持异步操作。

  6. 嵌套路由：
    Vue Router 支持嵌套路由，允许子组件根据其所在的父路由动态地渲染。这通过路由配置中的 children 属性实现，使得应用可以构建多层级的页面结构。

  7. 懒加载：
    Vue Router 支持组件的懒加载，即组件直到需要渲染时才加载。这可以减少应用的初始加载时间，提升性能。

  8. 导航栈：
    在某些情况下，Vue Router 会维护一个导航栈，记录用户的操作历史，支持前进和后退操作。

Vue Router 的设计使得开发者能够轻松地管理应用的路由，同时提供了丰富的功能来满足不同场景下的路由需求。通过上述原理，Vue Router 为 Vue.js 应用提供了强大的路由功能，使得开发者可以构建出具有复杂路由逻辑的单页应用。

7. mvvm设计与实现

MVVM（Model-View-ViewModel）是一种软件架构模式，广泛应用于现代前端框架中，如Vue.js、Angular和Knockout.js等。MVVM 的核心思想是将视图层（View）和业务逻辑层（Model）分离，通过ViewModel作为中介进行数据绑定和命令传递，从而实现视图和模型的自动同步。以下是MVVM设计的基本原理和实现方式：

设计原理：

  1. 模型（Model）：代表应用的数据和业务逻辑，通常与后端数据源进行交互。Model 不直接与视图相关联，而是通过 ViewModel 间接与视图通信。

  2. 视图（View）：展示数据给用户的界面。在MVVM模式中，视图只负责展示，不包含业务逻辑。视图通过数据绑定与 ViewModel 交互。

  3. 视图模型（ViewModel）：连接视图和模型的中介。ViewModel 包含了视图中所有数据的副本，以及操作这些数据的命令。ViewModel 通过数据绑定将用户在视图上的操作转换为模型的更改，同时将模型的状态更新反映到视图上。

实现方式：

  1. 数据绑定：MVVM模式通常使用数据绑定技术，如Vue.js中的双向数据绑定，来自动同步视图和 ViewModel 的数据。数据绑定可以是双向的（双向绑定）或单向的（单向数据流）。

  2. 依赖属性和命令：ViewModel中的属性被标记为依赖属性（如Vue中的data函数返回的数据），当这些属性的值发生变化时，视图会自动更新。命令（如Vue中的methods）则是ViewModel中定义的函数，用于处理用户的交互操作。

  3. 模板引擎：许多MVVM框架提供了模板引擎，允许开发者在HTML模板中使用简洁的语法来声明数据绑定和命令。例如，在Vue.js中，可以使用{{ expression }}进行文本插值，使用v-bind进行属性绑定，使用v-on或@来监听事件。

  4. 编译模板：框架会在应用初始化时编译模板，将模板中的绑定转换为相应的数据监听器和更新函数。当ViewModel中的数据变化时，监听器会触发更新函数，从而更新视图。

  5. 组件化：MVVM模式支持将视图和ViewModel进一步分解为可复用的组件。每个组件都有自己的视图模板和ViewModel逻辑，这使得应用的开发和维护更加模块化。

示例实现：

以Vue.js为例，一个简单的MVVM实现可能如下所示：

// ViewModel
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello MVVM!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

<!-- View -->
<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

在这个例子中，message是ViewModel中的数据，通过{{ message }}在视图中显示。点击按钮时，reverseMessage方法被触发，ViewModel中的数据更新，视图随之更新。

MVVM模式通过解耦视图和模型，简化了前端开发，使得业务逻辑和用户界面的变更更加独立和易于管理。

8. async,await底层实现

async 和 await 是 JavaScript 中用于简化异步编程的关键字。它们在 ES2017（ES8）中被引入，基于 Promise 实现，提供了一种更加直观和易于理解的方式来处理异步操作。以下是 async 和 await 的底层实现原理：

  1. async 关键字：

    • 当你在函数声明前使用 async 关键字时，该函数隐式返回一个 Promise 对象。
    • async 函数内部返回的任何值都会被包装成一个已解决（fulfilled）的 Promise。
    • 如果 async 函数内部抛出异常，该异常会被 Promise 捕获，并使得 Promise 变为拒绝（rejected）状态。

  2. await 关键字：

    • await 只能在 async 函数内部使用，它后面通常跟随一个 Promise 对象。
    • 当执行到 await 表达式时，如果 Promise 已经解决，await 表达式的值就是 Promise 解决的值。
    • 如果 Promise 还在等待中，await 会暂停 async 函数的执行，直到 Promise 完成（无论是解决还是拒绝）。
    • 在等待 Promise 期间，控制权会返回给执行环境，允许其他代码运行（例如，事件循环可以继续进行）。

  3. 底层实现：

    • async 和 await 的实现依赖于 Promise 的微任务（microtask）机制。
    • 当遇到 await 表达式时，当前的 async 函数会暂停执行，并将当前执行上下文（包括局部变量等）保存在内存中。
    • 一旦相关的 Promise 完成，之前暂停的 async 函数会恢复执行，并且 await 表达式的值会被设置为 Promise 的结果。
    • 如果 await 表达式抛出异常，异常会被包装成一个新 Promise 并拒绝，这个新 Promise 会替换原来的 Promise。

  4. 错误处理：

    • 使用 try...catch 语句可以捕获 async 函数中由 await 抛出的异常。
    • 如果 async 函数内部没有捕获到异常，它会冒泡到外部调用者，就像普通的 Promise 一样。

以下是一个简单的 async 和 await 示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData().then(data => {
  console.log('Fetched data:', data);
});

在这个例子中，fetchData 函数使用 async 关键字声明，内部使用 await 等待网络请求完成。如果请求成功，它会解析响应并返回数据。如果请求失败，它会捕获异常并记录错误。

async 和 await 的引入使得异步代码的编写和阅读更加直观，减少了回调函数和链式 Promise 的复杂性，是现代 JavaScript 异步编程的重要特性。

9. promise底层实现

Promise 是 JavaScript 中用于异步编程的一个对象，它代表了一个尚未完成但预期将来会完成的操作的最终结果。Promise 可以处于以下三种状态之一：待定（pending）、已成功（fulfilled）或已失败（rejected）。以下是 Promise 底层实现的基本概念和步骤：

  1. 构造 Promise：

    • 创建一个新的 Promise 对象时，需要提供一个执行器（executor）函数，该函数接收两个参数：resolve 和 reject。
    • resolve 函数用于将 Promise 状态更改为已成功，传入成功的结果值。
    • reject 函数用于将 Promise 状态更改为已失败，传入失败的原因。

  2. 异步操作：

    • 执行器函数内部执行异步操作，如网络请求、文件读写等。
    • 根据异步操作的结果，使用 resolve 或 reject 来更新 Promise 的状态。

  3. 状态变化：

    • 当 resolve 或 reject 被调用时，Promise 的状态从待定变为已成功或已失败。
    • 状态变化后，会触发相应的 .then() 或 .catch() 回调函数。

  4. 链式调用：

    • Promise 的 .then() 方法返回一个新的 Promise 对象，这允许将多个 Promise 操作链接在一起。
    • 如果 .then() 或 .catch() 回调函数内部返回一个值，这个值会被包装成一个新的 Promise，并作为链式调用的下一个 Promise。

  5. 错误处理：

    • 如果执行器函数抛出异常，或者 then 或 catch 回调函数抛出异常，Promise 状态会变为已失败，并将异常作为失败原因传递。

  6. 微任务队列：

    • Promise 的处理通常在微任务（microtask）阶段执行，这意味着在当前任务执行完成后，事件循环的下一次迭代之前，Promise 的状态变化和回调函数的执行会被处理。

以下是一个简单的 Promise 实现示例：

function myPromiseExecutor(resolve, reject) {
  setTimeout(() => {
    const success = true; // 假设异步操作成功
    if (success) {
      resolve('Operation successful');
    } else {
      reject('Operation failed');
    }
  }, 1000);
}

const myPromise = new Promise(myPromiseExecutor);

myPromise.then(
  (result) => {
    console.log(result); // 'Operation successful'
  },
  (error) => {
    console.error(error); // 'Operation failed'
  }
);

在这个例子中，myPromiseExecutor 函数模拟了一个异步操作，myPromise 是一个 Promise 对象，它在异步操作完成后调用 resolve 或 reject。.then() 方法用于指定异步操作成功或失败时的回调函数。

Promise 的引入简化了异步编程的复杂性，使得异步操作的控制流程更加清晰和易于管理。

11. computea和watch的区别和应用场景

computed 和 watch 是 Vue.js 中的两个响应式系统特性，它们都与数据的响应式处理有关，但用途和工作方式有所不同。

computed（计算属性）：

  1. 用途：

    • computed 属性是基于其他响应式数据动态计算得出的值。
    • 它们是派生状态，即不需要直接修改 computed 属性的值，而是通过修改依赖的数据来间接改变。

  2. 工作方式：

    • 当依赖的数据发生变化时，computed 属性会自动重新计算其值。
    • computed 属性是惰性的，只有当它们的依赖项发生改变时才会重新计算。
    • computed 属性具有缓存机制，只有当依赖的数据变化时才会重新计算，这有助于提高性能。

  3. 应用场景：

    • 当你需要根据其他数据计算一个新值时，例如，根据两个输入字段计算结果。
    • 当你需要执行复杂逻辑，而这些逻辑不应该在模板中直接编写时。
watch（侦听属性）：

  1. 用途：

    • watch 允许你观察 Vue 实例上的一个表达式或计算属性函数，监听其变化。
    • 当被侦听的数据变化时，执行一个自定义回调函数。

  2. 工作方式：

    • watch 可以侦听所有类型的数据变化，包括对象的属性和数组的索引。
    • watch 可以非常精确地控制数据变化时执行的操作，例如，可以指定深度遍历来侦听对象属性的变化。
    • watch 不具有缓存机制，每次数据变化都会执行回调函数。
  3. 应用场景：
    • 当你需要在数据变化时执行异步操作或较复杂的逻辑时。
    • 当你需要在数据变化时执行副作用（如滚动到视图顶部、显示消息等）时。
    • 当你需要侦听多个数据源的变化，并根据这些变化执行操作时。
总结：
  • 如果你需要根据两个数据属性计算一个新属性，那么 computed 是最佳选择。如果你需要在数据变化时执行异步请求或复杂的状态更新，那么 watch 将更加合适。

12. js垃圾回收机制

JavaScript的垃圾回收机制是一种自动内存管理机制，它负责释放那些不再被使用的内存空间，以便这些空间可以被重新分配给新的变量或对象。这是通过垃圾回收器（Garbage Collector，简称GC）来实现的。垃圾回收器在JavaScript中是自动运行的，但了解其工作原理对于编写高效和内存优化的代码是非常重要的。

工作原理

JavaScript主要使用两种垃圾回收策略：标记-清除（Mark-Sweep）和分代回收（Generational Garbage Collection）。

  1. 标记-清除（Mark-Sweep）:

    • 标记阶段：垃圾回收器遍历所有的对象，从全局对象开始，通过引用链找到所有可达的对象，并将这些对象标记为“活动”状态。
    • 清除阶段：垃圾回收器遍历内存，删除那些没有被标记为“活动”的对象，释放内存空间。

  2. 分代回收（Generational Garbage Collection）:

    • JavaScript的内存被分为几个“代”（Generation），每个代包含特定生命周期的对象。
    • 新生代（Young Generation）：新创建的对象首先被分配在这里。这些对象通常生命周期短，频繁创建和销毁。
    • 老生代（Old Generation）：长时间存活的对象会被移动到老生代。这些对象通常更稳定，不会频繁地被回收。
    • DOM代：专门用于存储DOM元素和相关的事件处理器等。

13. 前端缓存机制

前端缓存机制是一种在客户端（如浏览器）上存储网页数据的技术，旨在提高用户体验和网站性能。通过缓存，可以减少重复的数据请求，加快页面加载速度，降低服务器负载，并在没有网络连接时提供离线访问的能力。前端缓存主要通过以下几种方式实现：

浏览器缓存

浏览器缓存是最常用的前端缓存形式。它利用HTTP协议的缓存控制头部（如Cache-Control、Expires、Last-Modified和ETag）来确定资源是否可以从本地缓存中加载，或者是否需要从服务器重新获取。

  • Cache-Control：这个头部可以指定资源的缓存策略，例如no-cache（资源可以缓存，但每次使用前都需要验证）、no-store（不缓存）、max-age（资源在指定时间内有效）等。
  • Expires：提供一个日期/时间，之后资源就被认为是过期的。
  • Last-Modified/ETag：服务器可以发送这些头部，以便在后续请求中，客户端可以通过If-Modified-Since或If-None-Match头部来验证资源是否已经被修改。
Service Workers

Service Workers是一种在用户的浏览器后台运行的脚本，它们可以拦截和处理网络请求，包括管理缓存。Service Workers使得开发者可以创建自定义的缓存策略，即使在没有网络连接的情况下，也能够提供离线体验。

  • Cache API：Service Workers使用Cache API来存储和检索请求的响应。
  • Fetch API：Service Workers可以监听和处理Fetch事件，决定是否直接从缓存中提供响应，或者从网络获取数据。
Local Storage 和 Session Storage

这两种Web存储API允许网站存储数据在用户的浏览器中。它们提供了一个简单的键值存储系统，可以用于缓存数据。

  • Local Storage：提供没有过期时间的存储，数据会一直保留直到被明确清除。
  • Session Storage：数据仅在浏览器会话期间存在，当浏览器窗口或标签页关闭时，数据会被清除。
IndexedDB

IndexedDB是一个低级API，用于在用户的浏览器中创建和操作大量结构化数据。它提供了一个异步的、非阻塞的数据库，适合于复杂的数据缓存和存储。

应用缓存（Application Cache）

虽然现在已经被大多数现代浏览器废弃，但应用缓存（AppCache）曾经是一种允许网站离线工作的技术。它通过一个清单文件（manifest）来定义哪些资源需要缓存以及如何缓存。

缓存策略

有效的前端缓存策略应该考虑数据的更新频率、重要性以及用户对数据新鲜度的需求。例如，不经常变化的静态资源（如图片、CSS和JavaScript文件）可以设置长时间的缓存，而频繁更新的内容（如新闻文章）则应该更频繁地从服务器获取。

在这里插入图片描述

如果本文对您有所启发，不妨点赞👍、收藏🌟、关注🔔，您的支持是我更新的动力！

🎉 往期精彩回顾

爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析

  • 878阅读 · 13点赞 · 20收藏

打造精美响应式CSS日历：从基础到高级样式

  • 781阅读 · 9点赞 · 13收藏

Ubuntu系统下C语言开发环境搭建与使用教程

  • 764阅读 · 17点赞 · 7收藏

Vue 3响应式系统详解：ref、toRefs、reactive及更多

  • 1029阅读 · 23点赞 · 14收藏

爆肝两千字！掌握CSS选择器与响应式设计：从基础到高级应用

  • 1056阅读 · 27点赞 · 28收藏

图文并茂！在Oracle VM VirtualBox上安装Ubuntu虚拟机的详细步骤指南

  • 1087阅读 · 36点赞 · 29收藏

在Vue中使用wangeditor创建富文本编辑器的完整指南

  • 1126阅读 · 20点赞 · 13收藏

Vue项目中使用ECharts构建交互式中国地图的详细指南

  • 781阅读 · 22点赞 · 10收藏

米哈游一面前端开发岗面试题，你会做几道?

  • 1237阅读 · 22点赞 · 24收藏
洛可可白
关注
  • 29
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python面试常见问题和数据分析师、算法工程师可能会问到的问题、简历的写法、自我定位等的认知
weixin_55579895的博客
11-16 6728
汇总了本人收集的python面试问题还有对于0经验非行业从事着转行数据分析岗位时机构就业老师给予的一些面试建议
H5实现3D旋转照片墙教程
interest_ing_的博客
03-28 1065
CSS的`transform`属性允许我们对元素进行2D或3D的转换。这包括旋转、缩放、移动和倾斜等操作。在3D转换中，`rotateX`、`rotateY`和`translateZ`是常用的函数，它们分别用于围绕X轴和Y轴旋转以及沿Z轴移动。
Element-Plus下拉菜单边框去除教程
interest_ing_的博客
03-26 1436
Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在使用 Element-Plus 进行开发时，我们可能会遇到需要自定义组件样式的情况，比如去除下拉框在聚焦时的默认边框。本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框，并简要介绍 Element-Plus 以及 Vue 的相关概念。
前端社招第一次面试问到的题【面试通过5k】
01-08
前端社招第一次面试问到的题【面试通过，工资5k】 1、px跟em的区别？ 答：px就是一个绝对像素单位，是固定值，而em是相对单位值，如果自身定义了font-size，则em会根据font-sizefont-size的大小变化而变化 2、get跟...
亏了？面试时薪资我要一万，HR 只给八千！
01-07
当时我找了一份运维相关的工作，我告诉对方期望薪资是6K，但最终HR跟我谈的薪资是5k，比我预期的少了1K，当时我也不会和对方谈判，默默地接受了这个薪资。 并且在未来一年多的时间里，我的薪资没变过。 对于绝大多数...
应聘软件开发工作的相关笔试题！.doc
10-18
这篇文档主要记录了作者在应聘软件开发工作时遇到的笔试和面试经历，涉及到多家公司，包括北大青鸟、北大方正、广东北电、深圳同洲电子、青岛海信和上海汉略。以下是这些公司笔试和面试中涉及的知识点总结： 1. **...
超详细！基于 Apriori 关联规则挖掘算法实现商品购物篮分析（数据+代码+5k字项目报告）
03-15
在数据分析领域，关联规则挖掘是一种常用的技术，用于发现数据集中不同项之间的有趣关系。Apriori 算法是关联规则挖掘的经典算法之一，尤其在零售业中的商品购物篮分析中应用广泛。本项目深入探讨了如何利用 Apriori...
JAVA找工作面试题大全
04-14
JAVA找工作面试题大全，背会这些面试题，找个每月5K+工作so easy
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 862
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1079
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
Vue前端打包
weixin_63680330的博客
07-04 266
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
JWT（JSON Web Token）
Casual_Lei的博客
07-03 1263
JWT 提供了一种简洁而强大的方式来进行身份验证和授权，特别适用于分布式系统和微服务架构。Spring Security 通过其强大的扩展机制，使得与 JWT 的集成变得非常简单和高效。通过了解和应用这些技术，开发者可以构建出安全、可靠的现代 Web 应用。
ESP32-Web-Server编程- 使用 mDNS 建立域名系统
wangyx1234的博客
07-02 241
1）本节首先介绍了 DNS 域名服务系统，然后引出了 mDNS（multicast DNS，组播 DNS）系统的基本原理。 2）在 ESP32 Web Server 系统中部署 mDNS 服务，并演示了通过建立的域名访问 Web 服务器的方法。
react自定义hooks---useCounter
weixin_73098736的博客
07-02 279
【代码】react自定义hooks---useCounter。
黑马点评学习过程汇总——Cookie \ Session \ Token的区别
weixin_45791946的博客
07-02 376
在后续的请求中，前端发往后端的请求中都携带token，后端拿到token后进行jwt的解密并验证signature，如果检验成功信息没有被篡改，就会放行。，自动存储session信息到cookie中。Token不依赖于session和cookie，对集群和前后端分离架构友好。前端发起登录请求到后端，后端对前端携带来的信息进行认证，认证成功后会生成。我们往session中存储用户信息，服务器端保存session并通过。头部，Payload负载，Signature签名 ）并以。（4）Session的弊端。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 83
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
JS混淆基本类型和原理
最新发布
朴拙科技的博客
07-06 493
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 文件下载
猫脸码客的博客
07-03 235
【代码】Vue 文件下载。
java 面试宝典
11-24
Java面试宝典是一本涵盖Java企业级开发技术的书籍，它包含了大量的面试题目和答案，对于想要在Java领域找到好工作的人来说，是一本非常有价值的参考资料。这本书涵盖了很多Java开发相关的知识点，包括EJB、RMI等技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛可可白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值