首先需要在服务器上建立一个文件，里面的内容确定了哪些文件需要缓存，哪些文件不需要，如果资源无法访问会使用什么页面等
离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
比如你使用了浏览器的“HTTP缓存”来缓存静态资源(就是html/css/js文件)，
原理和环境 如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 就像cookie一样，html5的离线存储也需要服务器环境。 这里提供一个小工具——简易iis服务器，把它放在项目更目录下，双击运行即可模拟服务器环境。 链接: http://pan.baidu.com/s/1jG86UV0 密码: ja9h 解析清单 在开始之
Nginx接收请求 -> php-fpm进程运行指定php脚本 -> php在mysql内查询相应数据 -> 处理返回给Nginx -> Nginx响应用户请求
HTTP 缓存是前端面试必问的知识点，大多数前端也都能答出强缓存和协商缓存来，但如果换个问法呢？
在HTML5之前，我们需要接入网络才能访问，这毫无疑问是网站多次请求服务器，造成速度变慢，对于PC用户，网络相对比较稳定，载入速度也不会差太多。但是移动端呢？移动端依赖无线信号、依赖信号塔、位置不固定、受附近建筑影响等。一系列导致网络的不稳定，我们不能改变用户，也不能放弃网络较慢的用户。 还有，在混合app领域，经常使用内置webview加载html页面，如果网速太慢，依然会造成上述问题。
使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本；HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有网络时进行访问。
ZBlog是动态内容管理系统，访客和用户在访问网站时，ZBlog从数据库中读取内容，再把内容发送到用户和访客的浏览器。同时访问网站的用户过多，会影响网页加载速度，同时也影响用户体验。
WP Super Cache 是 WordPress 官方开发人员 Donncha 开发，是当前最高效也是最灵活的 WordPress 静态缓存插件。它把整个网页直接生成 HTML 文件，这样 Web 服务器就不用解析 PHP 脚本，通过使用这个插件，能使得你的 WordPress 博客将显著的提速。
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
传统的Web应用程序有一个很大的症结是当用户的网络连接不好时，应用会加载失败，为了 解决这一问题，HTML5中引入了Web的离线工作的功能。离线功能使得Web应用程序类似于本机应用程序，当断开网络连接时可以继续浏览未浏览完成的内 容，离线功能的另一个好处是可以永久缓存静态的内容，而没有缓存过期的限制，这样很大程度上加速了网页的加载速度。 离线应用的创建 不同于传统的缓存机制，HTML5定义了一套独立的缓存机制，有一个单独的文件来记录要缓存的文件列表，这就意味着用户可以自己决定哪些文件需要缓 存。离线应用看起
静态文件缓存一般是指在web 应用中，将图片、js、css、视频、html等静态文件或资源保存到磁盘中，以提高资源响应时间，减少服务器压力和资源开销的一门缓存技术。
缓存对于前端页面来说，是加速页面加载的利器之一，但也同时带来了很多问题，比如新版本发布之后，怎么替换客户端上的缓存文件呢？大家一般的的解决方案主要有以下几种形式，
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览
3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力
导语 随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面（为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系），很多 APP 把一些功能模块改成用 H5 实现。 虽然说 H5 页面性能变好了，但如果没针对性地做一些优化，体验还是很糟糕的，主要两部分体验： 页面启动白屏时间：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。 响
作者：叶建升 个人主页：http://www.linkedin.com/in/jiansheng-ye-b3319778/ 导语 web缓存是web开发逃不开的一个话题，在减少网络带宽消耗、降低服务器压力和提高页面打开速度方面有广泛应用。本文从实际web应用项目中缓存相关问题出发，较为全面地分析了html5缓存机制的原理与应用以及移动端应用webView对html5缓存机制的支持方式，以供web开发的同学们参考。 正文 在web项目开发中，我们可能都曾碰到过这样一个棘手的问题： 线上项目需要更新一个有问题的
在 HTML5 规范之前，存储主要是用 cookies 。 cookies 的缺点有：
网站加载得越快，访问者留下的可能性就越大。当网站充满了由后台加载的脚本运行的图像和交互式内容时，打开网站并不是一项简单的任务。它包括从服务器逐个请求许多不同的文件。最大限度地减少这些请求的数量是加快网站速度的一种方法。
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：
1 H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 H5 应用程序缓存为应用带来三个优势： 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。 根据标准，到目前为止，H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的。 浏览器缓存机制
1 H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 H5 应用程序缓存为应用带来三个优势： 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。 根据标准，到目前为止，H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的。 浏览器缓存机制
Smarty是一个使用PHP写出来的模板引擎，是目前业界最著名的PHP模板引擎之一。它分离了逻辑代码和外在的内容，提供了一种易于管理和使用的方法，用来将原本与HTML代码混杂在一起PHP代码逻辑分离
在开发时候经常遇到一个问题,我们根据版本号去控制缓存问题,当我们发布新版本，使用心得版本号的时候，发现 html 里面引用的版本号却是旧的版本号 ，原来是该 html 文件被缓存了,很多时候我们设置禁止 html 文件被缓存,但依然会出现被缓存的情况。
HTML5为我们提供了更多的语义化标签、更丰富的元素属性，以及更让人欣喜的功能。但在面试中，HTML5部分的面试题主要考察应试者对HTML5API的掌握情况，这是HTML5的重点，也正是这些API推动了前端的发展。
vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：
目录 1. 架构总览 2. cdn 3. www 服务器 4. cms 服务器 5. img 6. Ajax 局部更新与缓存 1. 架构总览 www 负责静态文件浏览, 台数不定, 可以采用零成本的DNS轮询, 或者4层LVS, 或者7层HAProxy, 还可以用F5, Array 等负载均衡设备. cms 负责静态文件生成. 生成后的文件要同步到www中, 或者采用网络共享, 再者使用分布式文件系统, 总之将生成的文件交给www服务器, 根据你压力横向扩展即可 img 负责图片文件浏览. 通过给图片加版本
强制缓存：根据Expires（response header里的过期时间）判断，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存，并不会向服务端发起请求，展示为200状态。
随着网站的内容的增多和用户访问量的增多，无可避免的是网站加载会越来越慢，受限于带宽和服务器同一时间的请求次数的限制，我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化。 一般情况下会从以下方面来做优化 1、动态页面静态化 2、优化数据库 3、使用负载均衡 4、使用缓存 5、使用CDN加速 现在很多网站在建设的时候都要进行静态化的处理，为什么网站要进行静态化处理呢？我们都知道纯静态网站是所有的网页都是独立的一个html页面，当我们访问的时候不需要经过数据的处理直接就能读取到文件，访问速度就可想而知了，而其对于搜索引擎而言也是非常友好的一个方式。 纯静态网站在网站中是怎么实现的？ 纯静态的制作技术是需要先把网站的页面总结出来，分为多少个样式，然后把这些页面做成模板，生成的时候需要先读取源文件然后生成独立的以.html结尾的页面文件，所以说纯静态网站需要更大的空间，不过其实需要的空间也不会大多少的，尤其是对于中小型企业网站来说，从技术上来讲，大型网站想要全站实现纯静态化是比较困难的，生成的时间也太过于长了。不过中小型网站还是做成纯静态的比较，这样做的优点是很多的。 而动态网站又是怎么进行静态处理的？ 页面静态化是指将动态页面变成html/htm静态页面。动态页面一般由asp,php,jsp,.net等程序语言编写而成，非常便于管理。但是访问网页时还需要程序先处理一遍，所以导致访问速度相对较慢。而静态页面访问速度快，却又不便于管理。那么动态页面静态化即可以将两种页面的好处集中到一起。 静态处理后又给网站带来了哪些好处？ 1、静态页面相对于动态页面更容易被搜索引擎收录。 2、访问静态页面不需要经过程序处理，因此可以提高运行速度。 3、减轻服务器负担。 4、HTML页面不会受Asp相关漏洞的影响。 静态处理后的网站相对没有静态化处理的网站来讲还比较有安全性，因为静态网站是不会是黑客攻击的首选对象，因为黑客在不知道你后台系统的情况下，黑 客从前台的静态页面很难进行攻击。同时还具有一定的稳定性，比如数据库或者网站的程序出了问题，他不会干扰到静态处理后的页面，不会因为程序或数据影响而 打不开页面。 搜索引擎蜘蛛程序更喜欢这样的网址，也可以减轻蜘蛛程序的工作负担，虽然有的人会认为现在搜索引擎完全有能力去抓取和识别动态的网址，在这里还是建议大家能做成静态的尽量做成静态网址。 下面我们主要来讲一讲页面静态化这个概念，希望对你有所帮助！ 什么是HTML静态化
上两篇中，描述了一些关于生产环境的配置：环境变量的使用、配置文件描述、source-map配置、资源压缩等，从这几个方面入手来对生产环境进行一定的配置。
以前很少关注这方面的问题，直达我们的技术经理找我们说要换框架，为什么换框架呢，因为缓存的问题，原来的项目是用版本号作为刷新的依据的。因为微信 公众号上有这样一个机制，使用版本好的话，有时做不到及时刷新，所以就用了vue.js,因为它有这样的功能就是如果某个文件里面的数据改变了，那么vue.js就会把这个文件的名字也相应的改掉，所以缓存里面的东西 就用不了了，这样就做到了及时刷新，向后台请求数据。
今天我们使用 open_file_cache 指令来尝试提高我们的nginx服务性能
很多人都会说 WordPress 不够快，这是主要因为没有安装适合的缓存插件，而 WordPress 缓存插件有很多种，很多人有点迷糊，不知道怎么应该安装哪一种。
随着Web App的发展，越来越多的移动端App使用HTML5的方式来开发，除了一些HybridApp以外，其他一部分Web App还是通过浏览器来访问的，通过浏览器访问就需要联网发送请求，这样就使得用户在离线的状态下无法使用App，同时Web App中一部分资源并不是经常改变，并不需要每次都向服务器发出请求，出于这些原因，HTML5提出的一个新的特性：离线存储。
先从简单的静态页面开始，众所周知，前端资源由 HTML、JavaScript、CSS 三剑客组成，假设我们有一个简单的页面，用Nginx作为 Web 服务器，资源组织结构大概如下：
昨天，自己的域名备案通过审核，我就立马给自己的所有站点接入了又拍云CDN，然后在后台登录的时候出现重定向，登录不进，经过多方面测试最终发现是因为接入了CDN导致的，具体原因是因为参数跟随设置不当
浏览器缓存有多种形式，持久化或者会话存储。以chrome为例，打开调试面板，找到Application选项卡，就可以看到它所支持的各种缓存模式，如下图：
在 Linux 中，shell 脚本结合系统任务计划 crontab，非常简单就能实现一些复杂程序才能完成的工作，开发成本低，且简单易学。 张戈博客之前也分享过不少 shell 在网站运营方面的妙用，比如： CCKiller：Linux 轻量级 CC 攻击防御工具，秒级检查、自动拉黑和释放 SEO 技巧：Shell 脚本自动提交网站 404 死链到搜索引擎 Linux/vps 本地七天循环备份和七牛远程备份脚本 nginx 日志切割及 7 天前的历史日志删除脚本 Shell+Curl 网站健康状态
很多人，包括我自己，初看Service Worker多一个Cache Storage的时候，就感觉跟HTTP长缓存没什么区别。 例如大家讲的最多的Service Worker能让网页离线使用，但熟悉HTTP缓存的朋友，会发现，把整站所有资源设置为长缓存（不带校验），也可以实现离线使用。 那么，Service Worker在缓存方面和HTTP缓存比较，有什么好处呢？ 带着这个疑问，我翻阅了一些大神博客 JakeArchibald的《Caching best practices & max-age gotc
近期vue项目在构建完成上线之后，每次往线上更新版本，总会收到一部分反馈——web页面白屏，需要清除缓存数据重新加载才能正常访问。
Html5一大新特性、同时也是非常吸引人的特性，就是其离线功能。它让Web从online延伸到了offline领域。
我们小伙伴们在访问淘宝、网易等大型网站时有没有考虑到，网站首页、商品详情页以及新闻详情页面是如何处理的？怎么能够支撑这么大流量的访问呢？
什么是离线缓存 离线缓存，就是将指定的网页文件（例如css、js）保存到本地，当用户没有网络时，依旧可以通过浏览器使用这些文件。 为何要用离线缓存 从网站所有者的角度来说，增加离线缓存功能，能够让用户更好的使用网站。 离线缓存的设置步骤 1 配置manifest文件 2 通过JS进行缓存的控制 manifest文件的配置 1. 添加manifest属性 将需要离线缓存的文件罗列下来，存储于后缀名为manifest的文件当中， 在HTML文件中引入manifest文件。 <html manifest="h5c
浏览器的一次请求需要从服务器获得许多css、img、js等相关的文件，如果每次请求都把相关资源文件加载一次，对带宽、服务器资源、用户等待时间都有严重的损耗，浏览器有做优化处理，就是把css、img、js等文件在第一次请求成功后就在本地保留一个缓存备份，后续的每次请辞u就在本身获得相关的缓存资源文件就可以了，可以明显地加快用户的访问速度。
HTML5支持离线功能，当网络不可用时，网页还能够正常访问，部分功能还将继续使用。实现离线应用，最重要的是缓存资源，因此，离线应用核心需要定义一份描述文件，指定需要缓存的具体资源。
注意：也可以把三个模块放到/etc/httpd/conf/httpd.conf文件里，模块只能在一个文件中加载
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
