今日洞见 文章作者、部分图片来自ThoughtWorks：陈计节。 本文所有内容，包括文字、图片和音视频资料，版权均属ThoughtWorks公司所有，任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。已经本网协议授权的媒体、网站，在使用时必须注明"内容来源：ThoughtWorks洞见"，并指定原文链接，违者本网将依法追究责任。 当AngularJS应用程序变大时，很多问题就开始显现出来了，比如多层级视图的加载问题。如果在子视图显示之前没有预加载，则可能在需要展示时发生视
网络篇—浏览器缓存（一） 一、缓存类型 有两种，强缓存和协商缓存 强缓存 不会向服务器发送请求，直接从缓存中读取资源； 协商缓存 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源； 异同 共同点：都是从客户端缓存中读取资源； 区别：强缓存不会发请求，协商缓存会发请求； 二、和缓存有关的header 强缓存 Expires：response he
很多网站的资源后面都加了版本号，这样做的目的是：每次升级了JS或者CSS文件后，为了防止浏览器进行缓存，强制改变版本号，客户端浏览器就会重新下载新的JS或CSS文件，以保证用户能及时获得网站的最新更新。
标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
在日常网页建设时，如遇到更新页面css的时候，需要Apache进行清除以清除所有浏览器上的缓存,从而强制完全重新加载站点。
最近在项目开发中遇到一个需求：项目打包后，可以根据修改配置文件，进而动态替换页面上的文本。由于项目基本不涉及到后端，因此不考虑通过接口来修改。这就需要前端项目打包后需要暴露一个配置文件，每次页面刷新时会获取到最新的配置，达到动态替换页面文本的目的。
原文出处： 韩子迟 浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的<head>节点中加入<meta>标签，代码如下： XHTML <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 1 <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 上述
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览
离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的<head>节点中加入<meta>标签，代码如下：
互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。
为什么需要浏览器缓存？因为它可以通过在你的浏览器存储网站的常用文件，从而减少网页加载时间。一个浏览器加载CSS、JS、图片资源显示到网页上，这个进程总是要执行的。如果这些常用文件被浏览器缓存，那么访问者的浏览器就不需要每次都加载它们，所以网页加载时间就会减少。
大部分用户希望网页能在 2 秒之内就完成加载。事实上，加载时间每多 1 秒，你就会流失 7% 的用户。如果加载需要太长时间，他们就会放弃访问。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。
写完后，部署上线。然而我们要考虑充分利用浏览器缓存，我们的目标是资源文件直接读取浏览器缓存，于是给它设置 Cache-Control/Expires 和 Last-Modified/ETag。Cache-Control/Expires的作用是在缓存时间内，正常进入页面，浏览器不会发出请求，直接读取浏览器缓存资源。如果用户点击“刷新”按钮或缓存时间消失，浏览器会发送请求，并根据Last-Modified/ETag判断内容是否有更新，如果内容没更新，服务器返回304。
当今互联网时代，用户对网站性能和加载速度的要求越来越高。作为前端开发人员，了解和实施适当的缓存策略是确保优质用户体验的重要一环。想象一下，您正在访问一个网站，页面加载缓慢，图片无法显示，样式丢失，这种情况不仅影响了您的心情，也可能让您转而寻找其它更快速稳定的同类型网站。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
简单的说,通过域名,最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。
对于页面中引用 JS CSS 静态资源的处理，eBay 之前的主要模式是打包资源 每个页面中所需要的 JS 都打包为一个 JS 文件，放在页面的底部加载，CSS 也都打包为一个 CSS 文件，放在 h
关于页面性能优化，浏览器缓存必定是一个绕不过的话题，判断一个网站的性能最直观的就是看网页打开的速度，而提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。因此理解浏览器的缓存机制，就显得尤为重要。
本文首发于政采云前端团队博客：图解 HTTP 缓存 https://www.zoo.team/article/http-cache
HTTP 的缓存机制，可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解，争取做到大家读完整篇文章后，对缓存有一个整体的了解。
强制缓存：根据Expires（response header里的过期时间）判断，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存，并不会向服务端发起请求，展示为200状态。
客户端缓存分为Http缓存和本地缓存,使用缓存好处很多,例如减少相同数据的重复传输,节省网络带宽资源缓解网络瓶颈,降低了对原始服务器的要求，避免出现过载，这样服务器可以更快响应其他的请求
1、gzip压缩 在所有的web前端项目，静态资源基本都放在cdn上，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。 # 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用C
当然，HTTP 1.1 中已经支持了持久连接-keep-alive，即一个TPC/IP连接中，可以连续发起多次HTTP请求。随后，采用“管线化”技术，能够做到同时并行发送多个HTTP请求，而不需要一个接一个等待响应（Chrome目前支持在一个域名domain下，同时发起6个并行的HTTP请求）。尽管这样，为了进一步提高网站性能，还是需要考虑如何有效的减少HTTP请求数量。
头像是根据url指定的，更改头像后url仍然不变，即url指向的图片地址没变，但图片已经更换了
浏览器缓存对于前端一点都不陌生，最常见的就是，新版本上线了，测试却说这怎么还没有变化呢？使用 ctr + F5 强制刷新之后，立马就好了。或者清除浏览器缓存，按住ctr+shift+delete，弹出如图：
什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站，浏览器都做了哪些事情：
混合式开发，在产品体验以及页面加载速度的体验上已经非比以往的。今日早读文章由@unclechen分享。
浏览器要将URL解析为IP地址，解析域名就要用到DNS协议，首先主机会查询DNS的缓存，如果没有就给本地DNS发送查询请求。DNS查询分为两种方式，一种是递归查询，一种是迭代查询。如果是迭代查询，本地的DNS服务器，向根域名服务器发送查询请求，根域名服务器告知该域名的一级域名服务器，然后本地服务器给该一级域名服务器发送查询请求，然后依次类推直到查询到该域名的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。
为了加速浏览器，浏览器在用户磁盘上，对最近请求过的文档进行存储。
Service Worker是运行在浏览器背后的独立线程，一般可以用于实现缓存。使用service worker，传输协议必须为HTTPS。因为service worker 中涉及到请求拦截。
这篇教程说明你应该怎样配置 nginx、设置 HTTP 头部过期时间，用 Cache-Control 中的 max-age 标记为静态文件（比如图片、 CSS 和 Javascript 文件）设置一个时间，这样用户的浏览器就会缓存这些文件。这样能节省带宽，并且在访问你的网站时会显得更快些（如果用户第二次访问你的网站，将会使用浏览器缓存中的静态文件）。
Web缓存一般分为浏览器缓存、代理服务器缓存以及网关缓存，本文主要讲的是 浏览器缓存，其它两种缓存大家自行去了解下。
最近把前端缓存重新整理了一下，从整体的层面上把前端所有能用的缓存方案梳理了一遍。同时，对于http缓存，使用了表格的方案，使得原先晦涩难记的特性变得清晰明了。特记录于此，若有什么欠缺，也望不吝指出。
浏览器缓存有多种形式，持久化或者会话存储。以chrome为例，打开调试面板，找到Application选项卡，就可以看到它所支持的各种缓存模式，如下图：
比如你使用了浏览器的“HTTP缓存”来缓存静态资源(就是html/css/js文件)，
很多人，包括我自己，初看Service Worker多一个Cache Storage的时候，就感觉跟HTTP长缓存没什么区别。 例如大家讲的最多的Service Worker能让网页离线使用，但熟悉HTTP缓存的朋友，会发现，把整站所有资源设置为长缓存（不带校验），也可以实现离线使用。 那么，Service Worker在缓存方面和HTTP缓存比较，有什么好处呢？ 带着这个疑问，我翻阅了一些大神博客 JakeArchibald的《Caching best practices & max-age gotc
是一套用于构建用户界面的渐进式JAVASCRIPT框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合.
据统计，有80%的最终用户响应时间是花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等的下载上，减少页面元素将会减少HTTP请求次数，这是快速显示页面的关键所在。 CSS Sprites方法可以组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。 Inline images使用data:URL scheme在页面中内嵌图片，这将增大HTML文件的大小，组合inline images到用户的（缓存）样式表既能较少HTTP请求，又能避免加大HTML文件大小。 Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数，样式表也可采用类似方法处理，这个方法虽然简单，但没有得到大规模的使用。当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。
原文链接：http://www.cun-xu.cn/index.php/2018/12/26/浏览器缓存/
Hello大家好，今天我们的主题是缓存！为什么要谈缓存，相信做前端开发的同学们都对缓存又爱又恨，因为它对于性能影响真的很大。优秀的缓存策略能够减少网页渲染延迟，但是缓存有常常会带来一些不必要的麻烦，下面我们就一同仔细探究一下缓存吧～
最近在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结一下。
作为一名优秀的前端开发者，必须了解浏览器以及http协议中的缓存策略。因为在日常的开发中，我们会经常接触到一些性能优化的需求，那么缓存（cache）这种技术无论是在前端开发领域也好，后端开发领域也好，也是一种非常常见以及有效的方案。只是前后端之间的缓存方式不太一样，而且后端很多时候需要缓存的是数据，而前端往往需要利用浏览器和http协议去缓存数据或者文件，从而达到提升加载速度的效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
