摘要：
浏览器缓存是一种在客户端缓存资源的机制,可以有效减少网络请求,提高页面加载速度。通过合理利用浏览器缓存,可以缓存静态资源如CSS、JavaScript、图片等,在下次访问时直接从缓... 浏览器缓存是一种在客户端缓存资源的机制,可以有效减少网络请求,提高页面加载速度。通过合理利用浏览器缓存,可以缓存静态资源如CSS、JavaScript、图片等,在下次访问时直接从缓存中加载,避免重复请求。还可以利用强缓存和协商缓存机制,进一步优化缓存策略,提高缓存命中率。合理使用浏览器缓存不仅可以提升页面性能,还可以减轻服务器压力,从而提高整体的用户体验。
DOM结构优化主要包括减少DOM元素数量、优化DOM层级结构、利用事件委托等方式。减少DOM元素数量可以降低内存占用和渲染开销,优化DOM层级结构可以提高页面加载速度和渲染效率。事件委托则可以减少事件绑定数量,提高事件处理性能。
页面渲染优化包括合理使用虚拟DOM、懒加载技术、骨架屏等方式。虚拟DOM可以减少不必要的DOM操作,提高渲染效率。懒加载技术则可以延迟加载非必需资源,提升初始渲染速度。骨架屏可以在数据加载完成前展示静态占位元素,提升用户感知体验。
合理利用浏览器缓存和优化页面的DOM结构及渲染,是前端性能优化的两大重点。浏览器缓存可以减少网络请求,提高页面加载速度,而DOM优化和渲染优化则可以降低内存占用,提升页面响应性能。通过综合运用这两方面的优化手段,可以显著提升前端页面的整体性能,为用户带来更好的体验。
前端缓存的理解 或者 前端数据持久化的理解(强制缓存、协商缓存)
缓存可以说是性能优化中简单高效的一种优化方式了。 一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于 缓存文件可以重复利用 ，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起 网络请求、后端处理、浏览器响应 三个步骤。 浏览器缓存可以帮助我们在第一和第三步骤中优化性能。 比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 ①不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求 ②存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存 ③存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。 Cache-Control、Expires都是缓存到期时间，Cache-Control是相对值，Expires是绝对值，即再次发送请求时，如果时间没到期，强制缓存生效。 注：在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效。 ①协商缓存生效，返回304 ②协商缓存失效，返回200和请求结果 这里我们以博客的请求为例，状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。 那么from memory cache 和 from disk cache又分别代表的是什么呢？什么时候会使用from disk cache，什么时候会使用from memory cache呢？ from memory cache代表使用 内存中的缓存 ，from disk cache则代表使用的是 硬盘中的缓存 ，
前端缓存及性能优化
前端缓存概述缓存（Cache）的概念广泛应用于计算机系统中，主要目的是通过预先存储数据以减少访问速度较慢的存储设备的请求，从而提升系统的性能。 随着互联网技术的发展，缓存的应用已从硬件层面扩展至软件层面，如在CPU与主内存之间、内存与硬盘之间、以及在硬盘与网络之间。 现代网页开发中，前端缓存扮演着关键角色，主要包含HTTP缓存和浏览器缓存。 前端缓存能够加快页面加载速度、减轻服务器负担、提高用户体验，同时解决离线使用的问题，但同时也面临缓存过期、用户安全、缓存清除等挑战。 前端缓存分类前端缓存主要分为HTTP缓存和浏览器缓存两部分。 HTTP缓存在HTTP缓存中，对于一些重复性请求，例如每次请求数据都相同，可以将请求-响应数据缓存在浏览器中。 这样，下次请求时可以直接从浏览器缓存读取数据，无需再次请求服务器。 HTTP缓存通过HTTP头部字段实现，包括强缓存和协商缓存两种方式。 强缓存强缓存允许浏览器在判断缓存未过期时，直接使用本地缓存数据。 通过Expires和Cache-Control字段，可以指定缓存的有效期。 Expires字段提供绝对过期时间，而Cache-Control字段提供相对过期时间，如max-age指令。 协商缓存协商缓存通过Last-Modified和Etag字段实现。 Last-Modified字段记录资源的最后修改时间，而Etag字段代表资源的唯一标识，服务器会根据资源变动更新Etag。 浏览器通过携带If-Modified-Since或If-None-Match请求头验证资源是否过期。 HTTP缓存案例强缓存的实现使得资源加载更快。 例如，首次加载页面时，浏览器需要从服务器获取大量资源，导致加载速度较慢。 但再次访问时，浏览器可以优先读取磁盘缓存中的数据，显著提高加载速度。 浏览器行为浏览器提供三种加载模式，包括正常加载、硬性加载和清除缓存加载。 正常加载时，浏览器会优先使用缓存，硬性加载会禁用缓存，而清除缓存加载则会清空浏览器缓存，重新向服务器请求资源。 浏览器缓存浏览器缓存分为内存缓存和磁盘缓存。 内存缓存获取速度快，但生命周期短；磁盘缓存生命周期长，但获取速度较慢。 存储型缓存包括Cookie、Web Storage和IndexedDB等，用于网页数据的存储。 存储型缓存优化Cookie存储方案限制了数据容量，而Web Storage提供了更大的存储空间，但数据类型限制导致存储复杂性。 IndexedDB则是一个大规模的NoSQL存储系统，适用于存储大量数据。 前端缓存性能优化策略Web缓存性能优化涉及使用缓存策略，如强缓存和协商缓存，减少服务器负载和网络延迟，提高页面加载速度。 同时，合理使用存储型缓存，如Cookie、Web Storage和IndexedDB，以提高用户体验和网站性能。
前端知识｜浏览器缓存篇
浏览器缓存是前端开发中优化网页性能的重要技术，它允许浏览器在访问网页时将数据存储在客户端的临时存储空间中。 这样，当用户再次访问相同页面时，浏览器可以直接从缓存加载数据，无需重新从服务器下载。 浏览器缓存在前端开发中的作用主要包括优化网页性能和提升用户体验。 开发者可以通过设置缓存策略、版本控制和文件指纹技术来控制文件的缓存时间、级别和更新策略，从而实现更好的资源管理。 浏览器缓存分为强缓存和协商缓存两种方式。 强缓存优先级较高，当生效时，浏览器直接使用缓存，不发送请求至服务器。 协商缓存则根据服务器与浏览器间的通信，决定是否使用缓存。 若协商缓存生效，服务器会返回较小的响应结果，节省带宽。 在缓存策略中，Cache-Control 和 Expires 是关键指令。 Cache-Control 是 HTTP/1.1 标准，提供更灵活的缓存控制选项，而 Expires 是 HTTP/1.0 的字段。 Cache-Control 可以单独或结合使用，灵活控制缓存有效期、级别和访问权限。 同时，如果同时使用两者，Cache-Control 的优先级更高，因为它提供了更多的缓存控制选项。 ETag 是用于标识资源的唯一标识符，它在缓存中作为协商的一部分。 浏览器发送请求时，将上一次请求返回的 ETag 通过 If-None-Match 请求头字段发送给服务器。 服务器比较资源的 ETag 和浏览器发送的值，判断资源是否发生变化。 如果资源未变，服务器返回状态码 304 Not Modified，浏览器从缓存获取资源，无需重新下载。 相比 Last-Modified，ETag 更精确地确定资源变化，能捕捉更小的修改。