华为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>
元素)定位。 - 特点:
- 元素不再占据原始位置的空间,因此不会影响其他元素的布局。
- 绝对定位常用于创建悬浮元素、模态框或自定义组件。