如何学好Web前端开发?浏览器缓存是怎么回事

随着互联网的蓬勃发展，Web前端开发成为了一个备受关注的领域。然而，要想在这个领域取得成功，需要掌握一系列关键知识和技能，其中包括了一些比较深奥的概念，比如浏览器缓存。在本文中，我们将为您介绍如何有效学习Web前端开发，并解释浏览器缓存的工作原理，帮助您在这个领域取得更好的成就。

Web缓存有什么作用?

1、减少网络带宽消耗。无论对于网站运营者或者用户，带宽都代表着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。

2、降低服务器压力。给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。

3、减少网络延迟，加快页面打开速度。带宽对于个人网站运营者来说是十分重要，而对于大型的互联网公司来说，可能有时因为钱多而真的不在乎。那Web缓存还有作用吗?答案是肯定的，对于最终用户，缓存的使用能够明显加快页面打开速度，达到更好的体验。

浏览器端的缓存规则

对于浏览器端的缓存来讲，这些规则是在HTTP 头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是直接使用缓存中的副本，还是需要去源服务器获取更新的版本。

1)新鲜度(过期机制)：也就是缓存副本有效期。一个缓存副本必须满足以下任一条件，浏览器会认为它是有效的，足够新的，而直接从缓存中获取副本并渲染：

含有完整的过期时间控制头信息(HTTP 报头)，并且仍在有效期内;

浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度。

2)校验值(验证机制)：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag)，它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。

哪些请求不能被缓存?

1)HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告诉浏览器不用缓存的请求;

2)需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的;

3)经过HTTPS安全加密的请求(有人也经过测试发现，ie其实在头部加入Cache-Control：max-age信息，firefox在头部加入Cache-Control:Public之后，能够对HTTPS的资源进行缓存，参考《HTTPS的七个误解》);

4)POST请求无法被缓存;

5)HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存。

缓存使用流程

1)本地缓存阶段：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器;

2)协商缓存阶段：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器，然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源;

3)缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200，当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。

如果你想了解更多Web浏览器缓存的知识，或者想要快速掌握Web前端工程师所需技能，你可以选择专业学习一下，尽快入门Web前端行业，为自己搭建一个职场高起点！