教育机构网站源码,7x7x7x7x8黄全场免费,做电子的外单网站有哪些的,淮安网站设计公司#x1f90d; 前端开发工程师、技术日更博主、已过CET6 #x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 #x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 #x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E… 前端开发工程师、技术日更博主、已过CET6 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到网站。 文章目录 一、引言二、浏览器缓存一内存缓存二磁盘缓存三浏览器缓存控制策略 三、本地存储Local Storage 和 Session Storage一Local Storage二Session Storage 四、应用缓存Application Cache一原理与机制二适用场景与优势三局限性与问题 五、CDN 缓存一原理与机制二适用场景与优势三缓存更新与同步问题 六、总结 一、引言
在前端开发中缓存技术对于提升应用性能、减少网络请求、优化用户体验具有至关重要的作用。随着互联网应用的复杂性和规模不断增加合理使用缓存成为前端开发人员必须掌握的技能。本文将详细分析前端常用的缓存技术。
二、浏览器缓存
一内存缓存
原理与机制 内存缓存是将资源临时存储在浏览器的内存中。当浏览器请求资源时会首先检查内存中是否存在该资源的缓存。如果存在且缓存未过期就直接从内存中获取。这种缓存方式利用了内存的快速读写特性能够实现极快的资源获取速度。适用场景与优势 适用于频繁访问且体积较小的资源如 JavaScript 代码片段、CSS 样式表的部分内容等。其优势在于读取速度快可在短时间内为页面渲染提供所需资源提升页面加载的初始速度。例如在单页应用SPA的多次页面切换中如果相关脚本和样式已经在内存缓存中就能迅速渲染新页面。局限性 内存缓存的空间有限且其生命周期与浏览器会话相关。当浏览器关闭时内存中的缓存资源会被清空无法长期保存资源。
二磁盘缓存
原理与机制 磁盘缓存将资源存储在用户计算机的磁盘上。浏览器在请求资源时会先检查磁盘缓存。磁盘缓存通过文件系统来存储资源其存储容量相对较大。与内存缓存类似磁盘缓存也依据缓存控制头信息如 Cache - Control、Expires 等来判断资源是否有效。适用场景与优势 对于各种类型的资源尤其是体积较大的图像、音频、视频以及一些不常变化的大型脚本库等磁盘缓存非常适用。它能够在浏览器多次启动过程中持续发挥作用减少重复网络请求。例如网站的 logo 图片、常用的 JavaScript 框架文件等可以长期存储在磁盘缓存中提高后续访问的速度。缓存更新问题 磁盘缓存可能存在缓存更新不及时的问题。如果服务器上的资源已经更新但磁盘缓存中的旧版本未过期浏览器可能仍然使用旧资源。这需要合理的缓存控制策略来解决如通过版本号更新或服务器端推送缓存更新通知等方式。
三浏览器缓存控制策略
基于时间的控制Expires 和 Cache - Control Expires这是 HTTP 1.0 中用于指定缓存过期时间的头信息。服务器在响应资源请求时会在响应头中设置 Expires 值格式为一个具体的日期和时间如 Expires: Thu, 01 Jan 2025 12:00:00 GMT。浏览器根据本地时间与 Expires 指定的时间对比来判断缓存是否有效。然而这种方式存在一定缺陷因为如果用户修改了本地时间可能会导致缓存判断错误。Cache - Control在 HTTP 1.1 中广泛使用它提供了更灵活的缓存控制指令。常见的指令包括“public”表示资源可被任何中间缓存和用户浏览器缓存、“private”资源只能被用户浏览器缓存、“max - age”指定缓存的最长有效时间以秒为单位如 Cache - Control: public, max - age 3600表示资源可被公共缓存且 1 小时内有效等。Cache - Control 的优先级高于 Expires。 基于验证的控制Last - Modified 和 ETag Last - Modified服务器在响应资源时会在响应头中包含该资源最后一次修改的时间。当浏览器再次请求该资源时会在请求头中带上 If - Modified - Since 头信息其值为上次缓存的 Last - Modified 时间。服务器收到请求后若资源在该时间之后未修改则返回 304Not Modified状态码浏览器继续使用缓存资源若资源已修改则返回新资源和更新后的 Last - Modified 值。ETagEntity Tag这是服务器为资源生成的一个唯一标识符。当浏览器再次请求资源时会在请求头中带上 If - None - Match 头信息其值为上次缓存的 ETag。服务器根据 ETag 判断资源是否变化若未变化返回 304 状态码浏览器继续使用缓存若变化则返回新资源和新的 ETag。ETag 比 Last - Modified 更精确因为它可以检测到资源内容在文件修改时间未变情况下的变化。
三、本地存储Local Storage 和 Session Storage
一Local Storage
原理与特点 Local Storage 是一种以键值对形式将数据持久存储在用户浏览器中的机制。它允许前端应用在用户本地存储大量数据一般每个域名下可存储 5MB 左右数据不会随着浏览器会话结束而丢失除非用户手动清除或通过代码删除。适用场景 常用于存储用户的个性化设置、登录凭证在安全措施到位的情况下、应用的状态信息等。例如一个新闻阅读应用可以使用 Local Storage 存储用户选择的新闻类别偏好、字体大小设置等下次用户打开应用时能自动恢复这些设置。与浏览器缓存的区别 与浏览器缓存不同Local Storage 中的数据不会自动参与到 HTTP 请求和响应的缓存机制中。它主要是为前端应用提供一种持久化数据存储的方式由前端代码主动进行读写操作。
二Session Storage
原理与特点 Session Storage 同样是以键值对形式存储数据但它的生命周期与浏览器会话相关。当用户关闭浏览器窗口或标签页时Session Storage 中的数据会被自动清除。它的存储容量一般也在 5MB 左右。适用场景 适用于存储当前会话相关的数据如购物车中的临时商品信息在未登录的情况下、多步骤表单填写过程中的中间数据等。例如在一个在线购物流程中用户在添加商品到购物车但未完成购买的过程中购物车数据可以临时存储在 Session Storage 中。
四、应用缓存Application Cache
一原理与机制
应用缓存是一种允许网页在离线状态下仍然可以访问的缓存技术。通过在网页的 HTML 文件中使用 manifest 文件来指定需要缓存的资源列表。当用户首次访问页面时浏览器会根据 manifest 文件下载并缓存指定的资源。此后即使用户处于离线状态浏览器也可以从缓存中加载页面和相关资源。
二适用场景与优势
对于一些需要在离线环境下使用的 Web 应用如文档编辑应用、地图应用等应用缓存非常有用。它可以提高应用的可用性和用户体验使用户在网络连接不稳定或离线时仍能继续使用部分功能。例如用户在飞机上可以继续查看之前在在线地图应用中缓存的地图信息。
三局限性与问题
应用缓存的更新机制相对复杂。如果 manifest 文件更新浏览器可能需要重新下载整个缓存资源这可能会导致较长的加载时间。而且如果缓存管理不当可能会出现用户一直使用旧版本应用的问题需要开发者谨慎处理缓存更新策略。
五、CDN 缓存
一原理与机制
内容分发网络CDN缓存是在 CDN 服务器上存储用户经常访问的静态资源。CDN 服务器分布在全球各地当用户请求资源时会从距离用户最近的 CDN 服务器获取资源。这些 CDN 服务器会缓存经常被请求的资源从而减少了对源服务器的请求压力加快了资源的获取速度。
二适用场景与优势
适用于各种类型的静态资源如图片、CSS 文件、JavaScript 文件等。对于流量较大的网站或应用CDN 缓存可以显著提高资源的分发速度改善全球范围内用户的访问体验。例如一个国际知名的电商网站可以利用 CDN 缓存来确保不同地区的用户都能快速加载商品图片和页面样式。
三缓存更新与同步问题
CDN 缓存的更新需要一定的时间来在各个 CDN 节点之间同步。当源服务器上的资源更新时需要采取适当的策略如缓存清除指令、版本控制等来确保 CDN 缓存也能及时更新以避免用户获取到旧版本的资源。
六、总结
前端常用的缓存技术在提升性能、优化用户体验方面各有其独特的作用。浏览器缓存通过在用户本地存储资源减少网络请求本地存储为前端应用提供持久化或会话相关的数据存储应用缓存支持离线应用CDN 缓存则在全球范围内加速资源分发。开发人员需要深入理解这些缓存技术的原理、适用场景和局限性根据应用的特点合理选择和组合使用缓存技术并制定有效的缓存更新策略以充分发挥缓存的优势同时避免因缓存问题导致的用户体验下降或数据不一致等问题。在不断发展的前端技术环境中缓存技术的合理应用将持续是优化前端应用的关键环节之一。
