浏览器缓存 | 易学教程

浅谈如何实现HTML5的离线存储

阅读更多关于浅谈如何实现HTML5的离线存储

关于HTML5离线存储原理及实现，笔者找到一篇介绍离线缓存的，感觉比之前看到的解释的更透彻，新的知识点记录如下：大家都知道Web App是通过浏览器来访问的，所以离线状态下是无法使用app的。其中web app中的一些资源并不经常改变，不需要每次都向服务器发送请求。这时应运而生的离线缓存就显得尤为突出。通过把需要离线缓存储的文件列在一个manifest配置文件中。这样在离线情况下也可以使用app。离线存储的manifest一般由三个部分组成: 1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。 2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。尚学堂•百战程序员陈老师指出，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。 3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本。 HTML5引入了应用程序缓存，这意味着web应用可进行缓存

缓存解决方案

阅读更多关于缓存解决方案

1. 常见概念在合理应用缓存前，需要了解缓存领域里相关的几个常用术语：　1）缓存命中：表示数据能够从缓存中获取，不需要回源；　2）Cache miss：表示没有命中缓存，如果缓存内存中还有内存空间的话，会将数据加入到缓存中；　3）存储成本：当没有命中缓存时，回源获取后会将数据放置到存储中，整个将数据放置到存储空间所需要的时间以及空间称之为存储成本；　4）缓存失效：当源数据发生变更后，意味着缓存中的数据失效；　5）缓存污染：将不经常访问的数据放置到缓存存储空间中，以至于高频访问的数据无法放置到缓存中；　6）替代策略：当数据放置到缓存空间时，由于空间不足时，就需要从缓存空间中去除已有的数据，选择去除哪些数据就是由替代策略决定的。常见的替代策略有如下这些： Least-Recently-Used（LRU） Least-Frequently-Used（LFU） SIZE First in First Out（FIFO）　　由于存储空间有限，替代策略要解决的核心问题是尽量保留高频访问的缓存数据，降低缓存污染以提升缓存命中率和整体的缓存效率，难点在于，需要基于数据历史访问情况，以一种合适的对未来访问情况的预估才能找到更佳的策略。 2. 访问缓存场景分析　　使用缓存通常的操作是，请求先访问缓存数据，如果缓存中不存在的话，就会回源到数据库中然后将数据写入到缓存中

HTML5 应用程序缓存

阅读更多关于 HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。什么是应用程序缓存（Application Cache）？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持 Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存. HTML5 Cache Manifest 实例下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）： <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> Cache Manifest 基础如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性： <!DOCTYPE HTML> <html manifest="demo .appcache "> ... </html> 每个指定了 manifest

Firefox与IE浏览器缓存的两个重要区别

阅读更多关于 Firefox与IE浏览器缓存的两个重要区别

简介详细介绍了firefox的缓存与IE的区别,如何设置服务响应头让两者缓存行为一致. 当你建立好一个WEB服务后,通常有两个类型的缓存需要配置: 设置网站有更新的时候html资源马上过期,以便正在浏览的用户可以很快地得到更新. 设置所有其它资源(例如图片,CSS,javascript脚本)在一定时间后过期. 这个缓存方案涵盖 Two Simple Rules for HTTP Caching 文章中提到关于如何处理更新的一些思想. 现在 HttpWatch 6.0 支持Firefox了,我们想探讨一下Firefox在处理缓存上与IE有些什么不同.设置较长过期时间的使用方式(上面第二条)仍可以直接用于Firefox,但配置1在两者之间还是存在细微差别的. 在之前的文章中,我们把第一条划分为: 某些时候动态HTML页面需要即时从服务器更新以备随时显示-甚至是使用后退按钮的时候.例如,显示银行帐号的状态或在线订单. 静态HTML页面,比如联系,FAQs或者站点地图等页面,如果它们设置了Last-Modified响应头,允许浏览器在需要的时候重新校验,就可以利用到缓存. 本文剩下部分探讨了Firefox中影响HTML页面缓存的两个重要不同点. 1. 使用no-cache防止Firefox缓存无效你可以简单地设置如下的响应头预防IE缓存任何东西: Cache-Control: no

千万级用户网站门户前端设计

阅读更多关于千万级用户网站门户前端设计

对于千万级的注册用户的门户项目是前端这块是怎么去实现的，自己在平常的工作中总结了一些经验，也是在不断的挫折中，不断演练的，希望总结出来给大家参考下，和大家一起探讨，一起进步。一、门户设计一般会遇到哪些难点（一）、首页打开时间太慢了在开发一个门户到生产上线后，首页响应时间是检验门户整个系统架构以及开发的重要的一项指标，有时候我们发现在公司测试发现速度都挺快的，怎么到生产首页打开就慢了呢？（二）、页面加载不流畅，总感觉看着不舒服因为门户一般都是偏向于内容和图片类资源比较多，但是我们打开自己的网页，有时候总感觉加载并不是按照我们期望的那样加载得到，顺其自然，总感觉看起来怪怪的。（三）、希望用户缓存的地方未进行缓存很多静态的前端资源，其实在系统未进行更新时候，第一次加载之后，希望缓存到用户的本地，但是因为缓存策略没搞好，经常未进行有效的缓存。（四）、页面的头部尾部经常需要被第三方嵌入因为作为一个比较大的门户站点，可能会让很多小的服务接入进来，但是头部和尾部因为是需要保持风格统一，所以经常需要被第三方进行嵌入。（五）、代码没有进行有效的压缩，导致被窃取因为作为门户站点，前端如果不进行加密的话，代码很容易被别人进行抄袭伪造，而且还很容易清楚里面的业务逻辑，从而很容易仿造和进行攻击。（六）、增量静态资源发布经常门户线上环境需要增加一点小功能

ApiCloud开发经验总结

阅读更多关于 ApiCloud开发经验总结

1. 引擎或模块问题：遇到应用层无法解决的问题，如果能确定需要引擎和模块支持的，不要自己想办法绕过去，要第一时间在开发者社区提交问题，或找APICloud项目经理提出。 !!!注意!!!: 在开发者社区中，会有版主和APICloud技术支持对您的问题进行验证和解答。 !!!注意!!!: 定制平台项目问题提出后2天之内没有解决的，可以直接找APICloud项目总监投诉。 2. 开发工具：推荐使用Sublime Text＋APICloud插件，调试工具使用自定义Loader，真机同步使用WiFi真机同步，日志输出使用WiFi日志输出。推荐视频： Sublime使用教程Window&Mac 推荐文档： Sublime插件使用说明 3. 前端框架：尽量不要使用jQuery、AngularJS、BootStrap等重型的框架，摆脱对$的依赖，培养自己动手的习惯，但是可以根据功能需求在特定页面中使用功能独立的Mobile First框架默认样式设置、DOM操作和字符串处理推荐使用APICloud前端框架(api.js和api.css) 移动端UI框架推荐使用AUI 4. 屏幕适配：要正确设置viewport，建议使用720*1280尺寸的UI图，优先考虑绝对计量类的单位 px，应先在UI效果图中（如720x1280尺寸图）量出元素的宽或高对应的 px 值，再除以屏幕倍率

六、永无止境：网站的伸缩性架构

阅读更多关于六、永无止境：网站的伸缩性架构

（1）网站架构的伸缩性设计 1.不同功能进行物理分离实现伸缩。纵向分离和横向分离，不同的服务器部署不同的业务。 2.单一功能通过集群规模实现伸缩。集群内的多台服务器部署相同的服务，提供相同的功能。（2）应用服务器集群的伸缩性设计如果HTTP请求分发装置可以感知或者可以配置集群的服务器数量，可以及时发现集群中新上线或下线的服务器，并能向新上线的服务器分发请求，停止向已下线的服务器分发请求，那么就实现了应用服务器集群的伸缩性。这里，这个HTTP请求分发装置被称作均衡负载服务器。实现负载均衡的技术，以下几种： 1.HTTP重定向负载均衡。 HTTP重定向服务器是一台普通的应用服务器，其唯一的功能就是根据用户的HTTP请求一台真实的Web服务器地址，并将该Web服务器地址写入HTTP重定向响应中（响应状态码为302）返回给用户浏览器。在图6.5中，浏览器请求访问域名 www.mysite.com 。DNS服务器解析得到IP地址是114.100.80.10，即HTTP重定向服务器的IP地址。然后浏览器通过IP地址 114.100.80.10访问HTTP重定向负载均衡服务器后，服务器根据某种负载均衡算法计算获得一台实际物理服务器的地址(114.100.80.3)，构造一个包含该实际物理服务器地址的重定向响应返回给浏览器，浏览器自动重新请求实际物理服务器的IP地址(114.100.80

在html页面上设置不缓存

阅读更多关于在html页面上设置不缓存

Web服务器及性能优化

阅读更多关于 Web服务器及性能优化

一、WEB服务器 1.1 概述： 1.2 区别： 1.2.1 Apache 1.2.2 Tomcat 1.2.3 Jboss 二、浏览器端，关于浏览器端优化 2.1 压缩源码和图片 2.2 选择合适的图片格式 2.3 合并静态资源 2.4 开启服务器端的Gzip压缩 2.5 使用CDN 2.6 延长静态资源缓存时间 2.7 把CSS放在页面头部，把JavaScript放在页面底部三、服务端优化 3.1 HTML静态化 3.2 图片服务器分离 3.3 数据库集群、库表散列 3.4 缓存 3.5 镜像 3.6 负载均衡 3.6.1 硬件四层交换 3.6.2 软件四层交换一、WEB服务器 1.1 概述： Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。 Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目，两者都是免费的，都可以做为独立的Web服务器运行。 Apache是Web服务器而Tomcat是Java应用服务器。 1.2 区别： 1.2.1 Apache 是C语言实现的，专门用来提供HTTP服务。特性：简单、速度快、性能稳定、可配置（代理） 1、主要用于解析静态文本，并发性能高，侧重于HTTP服务； 2、支持静态页（HTML）

草稿 -未整理

阅读更多关于草稿 -未整理

async和defer 1、defer="defer"和async="true/false" html4.0中定义了defer；html5.0中定义了async。 (1)没有defer或async，浏览器会立即加载并执行指定的JS脚本，也就是说，不等待后续载入的文档元素，读到JS脚本就加载并执行。 (2)有async，加载后续文档元素的过程将和JS的加载与执行并行进行（异步）。 (3)有defer，加载后续文档元素的过程将和JS的加载并行进行（异步），但JS的执行要在所有文档元素解析完成之后，DOMContentLoaded 事件触发之前完成。 2、defer和async的共同点： (1)不会阻塞文档元素的加载。 (2)使用这两个属性的脚本中不能调用document.write方法。 (3)允许不定义属性值，仅仅使用属性名。 (4)只适用于外部脚本（虽然IE4-IE7还支持对嵌入脚本的defer属性，但在IE8及之后的版本就只支持外部脚本，对不支持的会直接忽略defer属性，因此把延迟脚本放在页面底部仍然是最佳选择）。 3、defer和async的不同点： (1)每一个async属性的脚本一旦加载完毕就会立刻执行，一定会在window.onload之前执行，但可能在document的DOMContentLoaded之前或之后执行。不保证按照指定它们的顺序来执行

订阅浏览器缓存