华为OD面试真题精选
专栏：华为OD面试真题精选
目录: 2024华为OD面试手撕代码真题目录以及八股文真题目录
1.浏览器的缓存机制，涉及浏览器是怎么存放缓存的，强制缓存的概念
1. 浏览器缓存机制
浏览器缓存机制是指浏览器为了提高页面加载速度、减少服务器负载，将已经访问过的资源（如 HTML、CSS、JS 文件，图片等）保存在本地的一种策略。当用户再次访问同一资源时，浏览器可以直接从缓存中读取数据，而不需要再次向服务器请求。
2. 浏览器缓存的存储位置
浏览器通常会将缓存存储在以下几个地方：
- Memory Cache（内存缓存）：存储在浏览器的内存中，速度非常快，适合存储一些较小的资源。通常在关闭浏览器时清空。
- Disk Cache（磁盘缓存）：存储在本地磁盘中，存储量较大，可以长期保存，适合大文件和长期需要缓存的资源。
- Service Workers Cache：借助 Service Workers API，可以在本地保存特定的资源，甚至支持离线访问。
- IndexedDB、LocalStorage、SessionStorage：这些 Web 存储机制主要用于结构化的数据。
3. 强制缓存的概念
强制缓存是指浏览器直接从缓存中读取资源，而不需要向服务器发起请求确认资源的有效性。强制缓存的实现依赖于 HTTP 响应头中的以下两个字段：
- Expires：使用一个具体的时间戳（如 “Wed, 21 Oct 2023 07:28:00 GMT”）来指定资源的过期时间。在过期时间之前，浏览器会直接使用缓存的资源，不会向服务器发送请求。
- Cache-Control：这是一个更现代的缓存控制方式，通常替代 Expires。它可以包含多个指令，如
max-age（指定资源的最大缓存时间，单位为秒）、no-cache（不使用缓存，每次都向服务器确认资源是否有效）、no-store（不缓存资源）等。
4. 协商缓存
如果强制缓存失效，浏览器会向服务器发送请求，询问资源是否有更新。这时会用到协商缓存机制。常见的协商缓存字段有：
- Last-Modified / If-Modified-Since：浏览器发送请求时会附带
If-Modified-Since头部，如果资源自上次请求后没有更新，服务器会返回304 Not Modified状态码，并且不返回资源的内容。 - ETag / If-None-Match：ETag 是服务器为每个资源生成的唯一标识符。浏览器请求时带上
If-None-Match，如果资源未修改，服务器同样返回304 Not Modified。
5. 缓存更新策略
浏览器缓存机制的核心目标是平衡性能和资源的实时性。通常，前端开发者会根据业务需求，利用 HTTP 头部来控制缓存策略，以达到最佳的用户体验。例如：
- 对于静态资源（如图片、CSS 文件），可以设置长时间的强制缓存，并通过文件名的变化来触发缓存更新。
- 对于频繁变化的资源，可以使用
Cache-Control: no-cache来确保资源的实时性。
2.CSS position属性的值有哪几种分别介绍区别
static：默认定位，元素按文档流排列，不受top等影响。relative：相对定位，基于原始位置偏移，但仍占据原空间。absolute：绝对定位，相对于最近的定位祖先元素脱离文档流定位。fixed：固定定位，相对于浏览器窗口固定，不随页面滚动。sticky：粘性定位，在特定条件下从相对变为固定定位。
1. static（默认值）
- 定义：这是所有元素默认的
position值，表示元素会按照正常的文档流进行排列，不会受到top、right、bottom、left属性的影响。 - 特点：元素的位置由其在 HTML 中的顺序决定。即使你设置了
top、left等属性，它们也不会生效，因为static下元素的位置是不可调整的。
2. relative（相对定位）
- 定义：相对定位的元素仍然保留在文档流中，但可以通过
top、right、bottom、left属性相对于它在文档流中的原始位置进行偏移。 - 特点：
- 元素在页面上的空间依然被保留（即它仍然占据原来位置的空间）。
- 相对定位主要用于对元素进行微调而不影响文档流的其他部分。
- 其他元素仍会按照该元素原来的位置排列。
3. absolute（绝对定位）
- 定义：绝对定位的元素脱离了文档流，通过
top、right、bottom、left属性相对于最近的定位祖先元素（即设置了relative、absolute或fixed的父级元素）进行定位。如果没有找到这样的父级元素，则相对于浏览器窗口（或文档的<html>元素）定位。 - 特点：
- 元素不再占据原始位置的空间，因此不会影响其他元素的布局。
- 绝对定位常用于创建悬浮元素、模态框或自定义组件。
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
