【华为OD技术面试真题 - 技术面】- 前端面试题（6）

算法大师

已于 2025-03-29 14:27:05 修改

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签：华为od 面试前端 c语言职场和发展

于 2024-08-16 10:28:40 首次发布

71 篇文章 ¥49.90 ¥99.00

订阅专栏

华为OD面试真题精选

浏览器缓存机制是指浏览器为了提高页面加载速度、减少服务器负载，将已经访问过的资源（如 HTML、CSS、JS 文件，图片等）保存在本地的一种策略。当用户再次访问同一资源时，浏览器可以直接从缓存中读取数据，而不需要再次向服务器请求。

浏览器通常会将缓存存储在以下几个地方：

强制缓存是指浏览器直接从缓存中读取资源，而不需要向服务器发起请求确认资源的有效性。强制缓存的实现依赖于 HTTP 响应头中的以下两个字段：

Expires：使用一个具体的时间戳（如 “Wed, 21 Oct 2023 07:28:00 GMT”）来指定资源的过期时间。在过期时间之前，浏览器会直接使用缓存的资源，不会向服务器发送请求。
Cache-Control：这是一个更现代的缓存控制方式，通常替代 Expires。它可以包含多个指令，如 max-age（指定资源的最大缓存时间，单位为秒）、no-cache（不使用缓存，每次都向服务器确认资源是否有效）、no-store（不缓存资源）等。

如果强制缓存失效，浏览器会向服务器发送请求，询问资源是否有更新。这时会用到协商缓存机制。常见的协商缓存字段有：

Last-Modified / If-Modified-Since：浏览器发送请求时会附带 If-Modified-Since 头部，如果资源自上次请求后没有更新，服务器会返回 304 Not Modified 状态码，并且不返回资源的内容。
ETag / If-None-Match：ETag 是服务器为每个资源生成的唯一标识符。浏览器请求时带上 If-None-Match，如果资源未修改，服务器同样返回 304 Not Modified。

浏览器缓存机制的核心目标是平衡性能和资源的实时性。通常，前端开发者会根据业务需求，利用 HTTP 头部来控制缓存策略，以达到最佳的用户体验。例如：

定义：这是所有元素默认的 position 值，表示元素会按照正常的文档流进行排列，不会受到 top、right、bottom、left 属性的影响。
特点：元素的位置由其在 HTML 中的顺序决定。即使你设置了 top、left 等属性，它们也不会生效，因为 static 下元素的位置是不可调整的。

定义：相对定位的元素仍然保留在文档流中，但可以通过 top、right、bottom、left 属性相对于它在文档流中的原始位置进行偏移。
特点：
- 元素在页面上的空间依然被保留（即它仍然占据原来位置的空间）。
- 相对定位主要用于对元素进行微调而不影响文档流的其他部分。
- 其他元素仍会按照该元素原来的位置排列。

定义：绝对定位的元素脱离了文档流，通过 top、right、bottom、left 属性相对于最近的定位祖先元素（即设置了 relative、absolute 或 fixed 的父级元素）进行定位。如果没有找到这样的父级元素，则相对于浏览器窗口（或文档的 <html> 元素）定位。
特点：
- 元素不再占据原始位置的空间，因此不会影响其他元素的布局。
- 绝对定位常用于创建悬浮元素、模态框或自定义组件。