摘要 移动互联网时代，提高网页性能是每个前端团队的目标。作为QQ钱包团队的前端工程师，我们是如何通过自研nodejs服务和利用service worker实现H5页面秒开？让我们来探讨一下QQ钱包H5
2018-06-0312:52:23 发表评论 1℃热度 MAMP Pro是一款适用于Mac操作系统的软件。MAMP PRO是专业级版本的经典本地服务器环境的os x软件。MAMP这几个首字母代表苹果的OSX系统上的Macintosh、Apache、MySQL和PHP，顾名思义，你应该知道MAMP的强大功能 啦！MAMP 内含 Apache 服务器、PHP 安装套件以及MySQL安装套件。只要轻松点选就能安装架站/讨论区/论坛必备的元件。透过Web界面稍作设定，在苹果电脑上架设自己专属的网站，就是这 么简
头像是根据url指定的，更改头像后url仍然不变，即url指向的图片地址没变，但图片已经更换了
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的<head>节点中加入<meta>标签，代码如下：
缓存已经成了项目中是必不可少的一部分，它是提高性能最好的方式，例如减少网络I/O、减少磁盘I/O 等，使项目加载速度变的更快。
原文链接：http://www.cun-xu.cn/index.php/2018/12/26/浏览器缓存/
原文出处： 韩子迟 浏览器缓存机制，其实主要就是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"> 上述
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
说起缓存相关技术，老多了， memcache、redis、squid、varnish、web cache、 CDN等等。缓存技术五花八门，但这些技术间有什么共性的地方，又有什么不同的地方呢？答案肯定是有的，这次为大家分享及整理一下缓存方面的技术，主要分为三个系列展开：
解释：在用户浏览网络的时候，同一个域名下的网页大部分是有很多共同文件的，比如第三方js文件，css文件，所以我们不可能当用户每浏览一个网页或者刷新同一个网页时，所有文件都重新请求，那样的页面加载时间将会大大延长，用户体验也相当不好。
关于页面性能优化，浏览器缓存必定是一个绕不过的话题，判断一个网站的性能最直观的就是看网页打开的速度，而提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。因此理解浏览器的缓存机制，就显得尤为重要。
作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。
浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：
参考http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/
原文:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/
浏览器缓存是前端开发中不可避免的问题，对于web应用来说，它是提升页面性能同时减少服务器压力的利器。本文将简单地描述总结下浏览器缓存的知识和应用，希望对自己和大家都有所帮助 浏览器缓存类型 有两种，强缓存和协商缓存 1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache； 2.协商缓存：向服务器发送请求，服务器会根据这个请求的request head
什么是浏览器缓存？ 在《架构高性能网站秘笈(二)——动态内容缓存》中我们知道，当不同用户请求相同数据时，动态内容缓存能够避免服务器的重复计算，从而降低用户的等待时间。但如果是同一个用户请求相同的数据，即使服务器能避免重复计算，但仍需将重复的数据传递给浏览器。若使用浏览器缓存，则同一个用户请求相同的数据时，浏览器只需从自己本地读取，无需从服务器上获取。从而大大降低用户的等待时间，减少了服务器的压力，可谓一箭双雕！ 浏览器是如何处理缓存的？ 是否启用浏览器缓存是通过HTTP协议控制的。 浏览器在接收
在日常网页建设时，如遇到更新页面css的时候，需要Apache进行清除以清除所有浏览器上的缓存,从而强制完全重新加载站点。
网络篇—浏览器缓存（一） 一、缓存类型 有两种，强缓存和协商缓存 强缓存 不会向服务器发送请求，直接从缓存中读取资源； 协商缓存 向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源； 异同 共同点：都是从客户端缓存中读取资源； 区别：强缓存不会发请求，协商缓存会发请求； 二、和缓存有关的header 强缓存 Expires：response he
强制缓存：根据Expires（response header里的过期时间）判断，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存，并不会向服务端发起请求，展示为200状态。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。
写完后，部署上线。然而我们要考虑充分利用浏览器缓存，我们的目标是资源文件直接读取浏览器缓存，于是给它设置 Cache-Control/Expires 和 Last-Modified/ETag。Cache-Control/Expires的作用是在缓存时间内，正常进入页面，浏览器不会发出请求，直接读取浏览器缓存资源。如果用户点击“刷新”按钮或缓存时间消失，浏览器会发送请求，并根据Last-Modified/ETag判断内容是否有更新，如果内容没更新，服务器返回304。
比如你使用了浏览器的“HTTP缓存”来缓存静态资源(就是html/css/js文件)，
浏览器的缓存机制也就是我们要说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：
这个问题不知道有没有人遇到过，反正度娘和谷姐都没能帮到我！困扰了我挺长时间了，今天偶尔将代码放到 Apache 服务器下测试时，意外解决了！ 问题是这样的，我搭建了一个网站 icon 图标抓取的 AP
Hello大家好，今天我们的主题是缓存！为什么要谈缓存，相信做前端开发的同学们都对缓存又爱又恨，因为它对于性能影响真的很大。优秀的缓存策略能够减少网页渲染延迟，但是缓存有常常会带来一些不必要的麻烦，下面我们就一同仔细探究一下缓存吧～
浏览器缓存动态内容,缓存的内容在浏览器本地,而内容由web服务器生成,任何一方都不可能完成这一系列过程,他们之间有一种沟通机制,这就是缓存协商.
缓存在实际使用当中应用很广泛，可以减轻对服务器数据库的访问，提高运行速度。目前很多CMS内容管理系统中频繁使用缓存机制来提高系统运行的效率。下面是一个写得不错的缓存类，可以参考下缓存的机制与写法。
浏览器缓存一直是个老生常谈的话题，也是面试官常常用来鉴别面试者的利器，作为前端来讲这块知识是属于必须掌握的，再者利用好缓存也是做性能优化的有效方法。本文将从缓存原因、缓存读写顺序，缓存位置以及缓存策略这几个角度介绍浏览器缓存，并且最后给出实践的应用举例。
很多网站的资源后面都加了版本号，这样做的目的是：每次升级了JS或者CSS文件后，为了防止浏览器进行缓存，强制改变版本号，客户端浏览器就会重新下载新的JS或CSS文件，以保证用户能及时获得网站的最新更新。
浏览器缓存在 Nginx 的 HTTP 核心模块中其实只有两个简单的配置，这一块也是 HTTP 的基础知识。之前我们就一直在强调，学习 Nginx 需要的就是各种网络相关的基础知识，其中更重要的就是 HTTP 和 TCP 相关的内容。另外一个 try_files 配置指令也是 Nginx 中非常常用的一个指令，用于找不到指定的路径文件时，可以去按顺序查找备用的一些文件路径，非常实用。
在开发调试web的时候，经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼，提供下apache不缓存配置和nginx不缓存配置的设置。在常用的缓存设置里面有两种方式，都是使用add_header来设置：分别为Cache-Control和Pragma。
Web缓存一般分为浏览器缓存、代理服务器缓存以及网关缓存，本文主要讲的是 浏览器缓存，其它两种缓存大家自行去了解下。
可分为两大类：http缓存和浏览器缓存。我们今天重点讲的是http缓存，所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点：
今日洞见 文章作者、部分图片来自ThoughtWorks：陈计节。 本文所有内容，包括文字、图片和音视频资料，版权均属ThoughtWorks公司所有，任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。已经本网协议授权的媒体、网站，在使用时必须注明"内容来源：ThoughtWorks洞见"，并指定原文链接，违者本网将依法追究责任。 当AngularJS应用程序变大时，很多问题就开始显现出来了，比如多层级视图的加载问题。如果在子视图显示之前没有预加载，则可能在需要展示时发生视
最近在准备优化日志请求时遇到了一些令人疑惑的问题，比如为什么响应头里出现了两个 cache control、为什么明明设置了 no cache 却还是发请求，为什么多次访问时有时请求里带了 etag，有时又没有带？等等。。。 后来查了一些资料以及同事亲自验证，总算对这些问题有了个清晰的理解，现在整理出来以备忘。 1、缓存的分类 缓存分为服务端侧（server side，比如 Nginx、Apache）和客户端侧（client side，比如 web browser）。 服务端缓存又分为 代理服务器缓存 和
运行脚本-Run-time Settings-Browser Enmulation设置详解
浏览器缓存对于前端一点都不陌生，最常见的就是，新版本上线了，测试却说这怎么还没有变化呢？使用 ctr + F5 强制刷新之后，立马就好了。或者清除浏览器缓存，按住ctr+shift+delete，弹出如图：
第一篇博客，记录一下我在搭建这个网站的时候遇到的一些坑。今天一直在想有没有什么好的手段实现动态网页的前后端交互，我只需要实现简单字符串的读取与写入。后来就想偏了，开始考虑ajax的xml请求的安全性了，然后又辗转看了看nginx的反向代理，还有node.js的具体实现，
https://www.cnblogs.com/520yang/articles/4807408.html
当然，HTTP 1.1 中已经支持了持久连接-keep-alive，即一个TPC/IP连接中，可以连续发起多次HTTP请求。随后，采用“管线化”技术，能够做到同时并行发送多个HTTP请求，而不需要一个接一个等待响应（Chrome目前支持在一个域名domain下，同时发起6个并行的HTTP请求）。尽管这样，为了进一步提高网站性能，还是需要考虑如何有效的减少HTTP请求数量。
https://juejin.cn/post/6947936223126093861
缓存对于Web服务至关重要，尤其对于大型高负载Web站点。缓存作为性能优化的一个重要手段，可以在极大程度上减轻后端服务器的负载。通常对于静态资源，即不经常更新的资源，如图片，CSS或JS等进行缓存，而不用每次都向服务器请求，这样就可以减轻服务器的压力。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
