HTML面试题(一)

一、什么时候返回304状态码?谈谈H5缓存机制(浏览器缓存机制)。

Q1:304状态码,Not Modified。所请求的资源未修改,服务器不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。
Q2:H5缓存机制。一共有6种,分别是
1)http缓存机制
WEB 中最早的缓存机制了,是在 HTTP 协议中实现的。通过 HTTP 协议头里的 Cache-Control(或 Expires)和 Last-Modified、 Etag等字段来控制文件缓存的机制。
2)Dom Storgage(Web Storage)存储机制
Dom Storage 存储字符串的 Key/Value 对, 在本地存储数据,并提供 5MB (不同浏览器可能不同,分 HOST)的存储空间。DOM Storage 分为 sessionStorage 和 localStorage。sessionStorage 用来存储与页面相关的数据,它在页面关闭后无法使用。而 localStorage 则持久存在,在页面关闭后也可以使用。
3)Web SQL Database 存储机制(不再推荐使用)
基于 SQL 的数据库存储机制,提供了一组 API 供 Web App 创建、存储、查询数据库,用于存储适合数据库的结构化数据。
4)Application Cache(AppCache)机制(不再推荐使用)
浏览器在首次加载 HTML 文件时,会解析 manifest 属性,并读取 manifest 文件,获取 Section:CACHE MANIFEST 下要缓存的文件列表,再对文件缓存。下次加载时,除了会默认使用缓存外,还会在后台检查 manifest 文件有没有修改(byte by byte)。发现有修改,就会重新获取 manifest 文件,对 Section:CACHE MANIFEST 下文件列表检查更新。manifest 文件与缓存文件的检查更新也遵守浏览器缓存机制。
5)Indexed Database (IndexedDB)
IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API。
IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用,但是还没有被任何浏览器所实现。异步 API 在 Web Workers 内部和外部都可以使用,另外浏览器可能对indexDB有50M大小的限制,一般用于保存大量用户数据并要求数据之间有搜索需要的场景。
6)File System API
是 H5 新加入的存储机制。它为 Web App 提供了一个虚拟的文件系统,可以进行文件(夹)的创建、读、写、删除、遍历等操作。
浏览器给虚拟文件系统提供了两种类型的存储空间:临时的和持久性的。临时的存储空间是由浏览器自动分配的,但可能被浏览器回收;持久性的存储空间需要显式的申请,由 WebApp 自己管理,浏览器不会回收,也不会清除内容。持久性的存储空间大小是通过配额来管理的,首次申请时会一个初始的配额,配额用完需要再次申请。

HTML面试题(一)_第1张图片
H5中各缓存机制对比

H5 缓存机制浅析 移动端 Web 加载性能优化
浏览器端的九种缓存机制介绍

二、

你可能感兴趣的:(HTML面试题(一))