【华为OD技术面试真题 - 技术面】- 前端面试题(6)

华为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 值,表示元素会按照正常的文档流进行排列,不会受到 toprightbottomleft 属性的影响。
  • 特点:元素的位置由其在 HTML 中的顺序决定。即使你设置了 topleft 等属性,它们也不会生效,因为 static 下元素的位置是不可调整的。

2. relative(相对定位)

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

3. absolute(绝对定位)

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

4. fi

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法大师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值