本文主要是介绍广州5k前端面试题惊呆我!!!(内容太肝,谨慎入内),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
🌟 前言
欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白:个人主页
🔥 个人专栏:✅前端技术 ✅后端技术
🏠 个人博客:洛可可白博客
🐱 代码获取:bestwishes0203
📷 封面壁纸:洛可可白wallpaper
文章目录
- 广州5k前端面试题惊呆我!!!(内容太肝,谨慎入内)
- 1. 浏览器渲染原理
- 2. https如何进行加密
- 3. spa首屏加载慢优化
- 4. vue双向绑定原理
- 5. vuex设计与实现
- 6. vue-router底层原理
- 7. mvvm设计与实现
- 设计原理:
- 实现方式:
- 示例实现:
- 8. async,await底层实现
- 9. promise底层实现
- 11. computea和watch的区别和应用场景
- `computed`(计算属性):
- `watch`(侦听属性):
- **应用场景**:
- 总结:
- 12. js垃圾回收机制
- 工作原理
- 13. 前端缓存机制
- 浏览器缓存
- Service Workers
- Local Storage 和 Session Storage
- IndexedDB
- 应用缓存(Application Cache)
- 缓存策略
- 🎉 往期精彩回顾
广州5k前端面试题惊呆我!!!(内容太肝,谨慎入内)
1. 浏览器渲染原理
浏览器渲染原理涉及将网页代码转换成用户可视界面的过程。以下是浏览器渲染页面的基本步骤:
-
加载:浏览器发起HTTP请求,从服务器获取HTML文档。
-
解析:浏览器解析HTML文档,创建DOM(文档对象模型)树。DOM树是由HTML元素构成的节点层次结构。
-
构建CSSOM:浏览器解析CSS文件和内联样式,构建CSSOM(CSS对象模型)树。CSSOM树包含了页面的样式信息。
-
合并DOM与CSSOM:浏览器将DOM树和CSSOM树合并,形成渲染树(render tree)。渲染树包含了所有需要显示在屏幕上的元素信息,包括样式属性。
-
布局:浏览器对渲染树进行布局计算,确定每个元素的位置和大小,这一过程也称为“重排”(reflow)。
-
绘制:浏览器将布局后的信息转换成像素,这个过程称为“重绘”(repaint)。随后,浏览器将像素数据发送到显卡,由显卡输出到显示器上。
-
合成:在某些情况下,浏览器会使用硬件加速来合成多个图层,这可以提高渲染效率。
在整个渲染过程中,浏览器可能会执行优化措施,如缓存、异步加载等,以提升页面加载和交互性能。了解这些原理对于前端开发者来说非常重要,它有助于诊断性能问题、优化页面加载速度和改善用户体验。
2. https如何进行加密
HTTPS(超文本传输安全协议)是一种安全的网络传输协议,它在HTTP的基础上通过SSL/TLS协议提供了数据加密、完整性验证和身份认证的功能。HTTPS的加密过程主要包括以下步骤:
-
握手阶段:
- 客户端向服务器发起HTTPS请求。
- 服务器响应并发送其SSL证书,该证书包含了服务器的公钥和由证书颁发机构(CA)签发的信息。
- 客户端验证服务器证书的有效性,包括证书是否过期、是否由可信CA签发等。
- 验证通过后,客户端会生成一个随机数(称为预主密钥),并使用服务器的公钥加密后发送给服务器。
-
密钥交换:
- 服务器使用自己的私钥解密收到的预主密钥。
- 客户端和服务器现在都有了相同的预主密钥,将使用它来生成一组对称加密的密钥(会话密钥),用于后续的数据加密通信。
-
加密通信:
- 使用生成的会话密钥,客户端和服务器之间的所有数据传输都将被加密。即使数据在传输过程中被拦截,攻击者也无法解密和读取数据内容,因为他们没有会话密钥。
-
会话结束:
- 一旦通信结束,会话密钥将被丢弃,确保每次会话都使用新的密钥,增加了安全性。
HTTPS的加密机制确保了数据传输的安全性,尤其适用于涉及敏感信息(如登录凭据、个人信息、支付信息等)的场合。通过这种方式,HTTPS提供了一种可靠的保护措施,防止数据在传输过程中被窃听或篡改。
3. spa首屏加载慢优化
SPA(单页应用)首屏加载慢是常见的性能问题,主要原因是JavaScript文件和依赖的加载、解析、执行过程可能导致渲染阻塞。以下是一些优化SPA首屏加载速度的策略:
-
代码分割:使用Webpack等打包工具进行代码分割,将代码拆分为多个块(chunk),按需加载,减少首屏加载时的JavaScript体积。
-
异步加载:将非关键的JavaScript和CSS资源设置为异步加载(例如,使用
async
或defer
属性),确保首屏渲染不受阻塞。 -
懒加载:实现图片和组件的懒加载,只有当用户滚动到页面的相应位置时才加载资源。
-
优化资源加载:使用HTTP/2减少连接数,启用Gzip或Brotli压缩资源,减少传输数据大小。
-
预加载关键资源:通过
<link rel="preload">
预加载关键CSS文件和字体,确保它们在渲染前已加载完毕。 -
服务端渲染(SSR):使用服务端渲染生成首屏HTML,减少客户端渲染时间。
-
缓存策略:利用浏览器缓存,对静态资源设置合理的缓存策略,减少重复加载。
-
优化DOM操作:减少首屏渲染所需的DOM操作,避免复杂的DOM树结构。
-
使用CDN:将静态资源部署到CDN上,减少资源加载时间。
-
性能监控:使用性能监控工具(如Lighthouse、WebPageTest)定期检查网站性能,找出瓶颈并进行优化。
通过这些策略的组合使用,可以显著提升SPA的首屏加载速度,改善用户体验。开发者应根据具体情况选择合适的优化方法,并持续监测优化效果。
4. vue双向绑定原理
Vue.js 的双向绑定是其核心特性之一,它允许开发者在表单输入和应用状态之间建立一个双向连接。Vue 实现双向绑定的原理主要依赖于响应式系统,该系统结合了观察者模式、依赖收集和发布订阅模式。以下是 Vue 双向绑定的基本原理:
-
数据劫持:
Vue 使用Object.defineProperty
方法对数据对象的属性进行劫持,将每个属性转换为 getter 和 setter。这样,每当属性被访问(getter 被调用)或属性值被修改(setter 被调用)时,Vue 都能够知道。 -
依赖收集:
当渲染函数或计算属性被执行时,它们会访问响应式数据的属性,触发这些属性的 getter。在 getter 中,Vue 会记录当前正在执行的渲染函数或计算属性作为依赖。这个过程称为依赖收集,确保 Vue 知道哪些组件需要在数据变化时重新渲染。 -
观察者模式:
Vue 的响应式系统是基于观察者模式实现的。每个组件实例都对应一个观察者对象,它会在数据变化时收到通知,并执行相应的组件更新。 -
发布订阅:
当属性的 setter 被调用时,意味着数据发生了变化。Vue 会触发该属性的 setter,通知所有依赖于这个属性的观察者(即组件),进行相应的更新。 -
指令(v-model):
Vue 提供了v-model
指令来实现表单输入和应用状态之间的双向绑定。当用户输入时,v-model
会更新对应的数据模型,反之,当数据模型变化时,v-model
也会更新 DOM 中的输入框显示。 -
虚拟DOM:
Vue 在内部使用虚拟DOM来提高性能。当数据变化时,Vue 会生成一个新的虚拟DOM树,并与旧的虚拟DOM树进行比较(diff)。Vue 会找出两棵树之间的差异,并计算出最小的更新操作来应用到实际的DOM上,从而实现高效的视图更新。
通过这些机制,Vue 能够在数据变化时自动更新视图,同时在视图变化时(如用户输入)更新数据,实现所谓的双向绑定。这种机制大大简化了数据与视图同步的复杂性,使得开发者能够更加专注于应用逻辑。
5. vuex设计与实现
Vuex 是 Vue.js 应用的状态管理模式和库,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的设计遵循了几个核心原则:
-
单一状态树:整个应用的状态被存储在一个对象树中,称为“state”。这使得状态的预测和管理变得更加简单。
-
状态管理:Vuex 提供了一套严格的规则和约定,使得状态的变化可追踪和调试。
-
数据流的单一方向: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 的底层原理可以从以下几个方面来理解:
-
路由映射:
Vue Router 允许开发者定义路由映射,即 URL 路径与组件的对应关系。在初始化时,Vue Router 会解析路由配置,创建一个路由表,用于匹配 URL 并找到对应的组件。 -
路由模式:
Vue Router 支持两种路由模式:Hash 模式和 History 模式。Hash 模式依赖 URL 的 hash 部分(例如#/
),而 History 模式利用 HTML5 History API 来实现干净的 URL,不需要 hash。 -
路由导航:
用户点击导航链接或使用编程式导航(如this.$router.push
)时,Vue Router 会根据当前 URL 和路由表来决定要渲染哪个组件。如果是 History 模式,Vue Router 还会通过 HTML5 History API 来改变 URL,而不影响页面的重新加载。 -
视图渲染:
Vue Router 使用一个<router-view>
组件作为渲染目标,根据当前路由的匹配结果动态地切换组件。同时,可以使用<router-link>
或<nuxt-link>
组件来创建导航链接,Vue Router 会自动处理链接的激活状态。 -
路由守卫:
Vue Router 提供了路由守卫(Route Guards),允许在路由进入或离开时执行逻辑,如验证用户权限、记录日志等。守卫可以在全局或局部使用,支持异步操作。 -
嵌套路由:
Vue Router 支持嵌套路由,允许子组件根据其所在的父路由动态地渲染。这通过路由配置中的children
属性实现,使得应用可以构建多层级的页面结构。 -
懒加载:
Vue Router 支持组件的懒加载,即组件直到需要渲染时才加载。这可以减少应用的初始加载时间,提升性能。 -
导航栈:
在某些情况下,Vue Router 会维护一个导航栈,记录用户的操作历史,支持前进和后退操作。
Vue Router 的设计使得开发者能够轻松地管理应用的路由,同时提供了丰富的功能来满足不同场景下的路由需求。通过上述原理,Vue Router 为 Vue.js 应用提供了强大的路由功能,使得开发者可以构建出具有复杂路由逻辑的单页应用。
7. mvvm设计与实现
MVVM(Model-View-ViewModel)是一种软件架构模式,广泛应用于现代前端框架中,如Vue.js、Angular和Knockout.js等。MVVM 的核心思想是将视图层(View)和业务逻辑层(Model)分离,通过ViewModel作为中介进行数据绑定和命令传递,从而实现视图和模型的自动同步。以下是MVVM设计的基本原理和实现方式:
设计原理:
-
模型(Model):代表应用的数据和业务逻辑,通常与后端数据源进行交互。Model 不直接与视图相关联,而是通过 ViewModel 间接与视图通信。
-
视图(View):展示数据给用户的界面。在MVVM模式中,视图只负责展示,不包含业务逻辑。视图通过数据绑定与 ViewModel 交互。
-
视图模型(ViewModel):连接视图和模型的中介。ViewModel 包含了视图中所有数据的副本,以及操作这些数据的命令。ViewModel 通过数据绑定将用户在视图上的操作转换为模型的更改,同时将模型的状态更新反映到视图上。
实现方式:
-
数据绑定:MVVM模式通常使用数据绑定技术,如Vue.js中的双向数据绑定,来自动同步视图和 ViewModel 的数据。数据绑定可以是双向的(双向绑定)或单向的(单向数据流)。
-
依赖属性和命令:ViewModel中的属性被标记为依赖属性(如Vue中的
data
函数返回的数据),当这些属性的值发生变化时,视图会自动更新。命令(如Vue中的methods
)则是ViewModel中定义的函数,用于处理用户的交互操作。 -
模板引擎:许多MVVM框架提供了模板引擎,允许开发者在HTML模板中使用简洁的语法来声明数据绑定和命令。例如,在Vue.js中,可以使用
{{ expression }}
进行文本插值,使用v-bind
进行属性绑定,使用v-on
或@
来监听事件。 -
编译模板:框架会在应用初始化时编译模板,将模板中的绑定转换为相应的数据监听器和更新函数。当ViewModel中的数据变化时,监听器会触发更新函数,从而更新视图。
-
组件化: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
的底层实现原理:
-
async 关键字:
- 当你在函数声明前使用
async
关键字时,该函数隐式返回一个 Promise 对象。 async
函数内部返回的任何值都会被包装成一个已解决(fulfilled)的 Promise。- 如果
async
函数内部抛出异常,该异常会被 Promise 捕获,并使得 Promise 变为拒绝(rejected)状态。
- 当你在函数声明前使用
-
await 关键字:
await
只能在async
函数内部使用,它后面通常跟随一个 Promise 对象。- 当执行到
await
表达式时,如果 Promise 已经解决,await
表达式的值就是 Promise 解决的值。 - 如果 Promise 还在等待中,
await
会暂停async
函数的执行,直到 Promise 完成(无论是解决还是拒绝)。 - 在等待 Promise 期间,控制权会返回给执行环境,允许其他代码运行(例如,事件循环可以继续进行)。
-
底层实现:
async
和await
的实现依赖于 Promise 的微任务(microtask)机制。- 当遇到
await
表达式时,当前的async
函数会暂停执行,并将当前执行上下文(包括局部变量等)保存在内存中。 - 一旦相关的 Promise 完成,之前暂停的
async
函数会恢复执行,并且await
表达式的值会被设置为 Promise 的结果。 - 如果
await
表达式抛出异常,异常会被包装成一个新 Promise 并拒绝,这个新 Promise 会替换原来的 Promise。
-
错误处理:
- 使用
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 底层实现的基本概念和步骤:
-
构造 Promise:
- 创建一个新的 Promise 对象时,需要提供一个执行器(executor)函数,该函数接收两个参数:
resolve
和reject
。 resolve
函数用于将 Promise 状态更改为已成功,传入成功的结果值。reject
函数用于将 Promise 状态更改为已失败,传入失败的原因。
- 创建一个新的 Promise 对象时,需要提供一个执行器(executor)函数,该函数接收两个参数:
-
异步操作:
- 执行器函数内部执行异步操作,如网络请求、文件读写等。
- 根据异步操作的结果,使用
resolve
或reject
来更新 Promise 的状态。
-
状态变化:
- 当
resolve
或reject
被调用时,Promise 的状态从待定变为已成功或已失败。 - 状态变化后,会触发相应的
.then()
或.catch()
回调函数。
- 当
-
链式调用:
- Promise 的
.then()
方法返回一个新的 Promise 对象,这允许将多个 Promise 操作链接在一起。 - 如果
.then()
或.catch()
回调函数内部返回一个值,这个值会被包装成一个新的 Promise,并作为链式调用的下一个 Promise。
- Promise 的
-
错误处理:
- 如果执行器函数抛出异常,或者
then
或catch
回调函数抛出异常,Promise 状态会变为已失败,并将异常作为失败原因传递。
- 如果执行器函数抛出异常,或者
-
微任务队列:
- 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
(计算属性):
-
用途:
computed
属性是基于其他响应式数据动态计算得出的值。- 它们是派生状态,即不需要直接修改
computed
属性的值,而是通过修改依赖的数据来间接改变。
-
工作方式:
- 当依赖的数据发生变化时,
computed
属性会自动重新计算其值。 computed
属性是惰性的,只有当它们的依赖项发生改变时才会重新计算。computed
属性具有缓存机制,只有当依赖的数据变化时才会重新计算,这有助于提高性能。
- 当依赖的数据发生变化时,
-
应用场景:
- 当你需要根据其他数据计算一个新值时,例如,根据两个输入字段计算结果。
- 当你需要执行复杂逻辑,而这些逻辑不应该在模板中直接编写时。
watch
(侦听属性):
-
用途:
watch
允许你观察 Vue 实例上的一个表达式或计算属性函数,监听其变化。- 当被侦听的数据变化时,执行一个自定义回调函数。
-
工作方式:
watch
可以侦听所有类型的数据变化,包括对象的属性和数组的索引。watch
可以非常精确地控制数据变化时执行的操作,例如,可以指定深度遍历来侦听对象属性的变化。watch
不具有缓存机制,每次数据变化都会执行回调函数。
-
应用场景:
- 当你需要在数据变化时执行异步操作或较复杂的逻辑时。
- 当你需要在数据变化时执行副作用(如滚动到视图顶部、显示消息等)时。
- 当你需要侦听多个数据源的变化,并根据这些变化执行操作时。
总结:
- 如果你需要根据两个数据属性计算一个新属性,那么
computed
是最佳选择。如果你需要在数据变化时执行异步请求或复杂的状态更新,那么watch
将更加合适。
12. js垃圾回收机制
JavaScript的垃圾回收机制是一种自动内存管理机制,它负责释放那些不再被使用的内存空间,以便这些空间可以被重新分配给新的变量或对象。这是通过垃圾回收器(Garbage Collector,简称GC)来实现的。垃圾回收器在JavaScript中是自动运行的,但了解其工作原理对于编写高效和内存优化的代码是非常重要的。
工作原理
JavaScript主要使用两种垃圾回收策略:标记-清除(Mark-Sweep)和分代回收(Generational Garbage Collection)。
-
标记-清除(Mark-Sweep):
- 标记阶段:垃圾回收器遍历所有的对象,从全局对象开始,通过引用链找到所有可达的对象,并将这些对象标记为“活动”状态。
- 清除阶段:垃圾回收器遍历内存,删除那些没有被标记为“活动”的对象,释放内存空间。
-
分代回收(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收藏
这篇关于广州5k前端面试题惊呆我!!!(内容太肝,谨慎入内)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!