文档章节

前端优化之浏览器缓存

十七亮
 十七亮
发布于 2013/04/10 18:03
字数 768
阅读 350
收藏 1
    浏览器一般会在用户的文件系统中创建一个目录存放缓存文件,并给每个缓存文件做一些必要的标记,比如过期时间等。不同的浏览器存储缓存的方式也不同。   

    IE浏览器在本地设置了临时文件目录,可以在工具--internet选项中找到对应的路径。firefox是采用二进制文件的方式来存储和管理缓存文件的。在地址栏输入about:cache可以看到相关信息,可以看到firefox不仅用磁盘还使用了内存,使用内存速度更快。打开缓存列表看到了Last modified 和Expires,上次检查时间和过期时间。

浏览器发起请求,web服务器告诉浏览器哪些内容可以缓存,下次请求可以缓存的内容的时候会询问web服务器是否允许使用本地缓存,服务器收到询问后回复浏览器是否允许使用缓存。

Last modified:上次修改时间,刷新页面的时候,浏览器询问web服务器是否在Last modified时间后修改了当前请求文件,如果返回的状态码是304意味着服务器告诉浏览器这个内容没有更新,使用缓存。基于动态内容可以获取http请求中的If-Modified-Since内容,然后和当前时间比较来选择返回304状态还是获取新内容。

<?php
$t = $_SERVER['HTTP_IF_MODIFIED_SINCE'];
if(strtotime($t)+3600 >time()){
  header("HTTP/1.1 304");exit(1);
}
//继续获取新内容
?>
但是如果一个文件更新了,内容却没有变化,或者为了负载均衡分布式存储,每台机器上的同一个文件就很难保证最后修改时间完全相同,切换服务器访问的时候就会重新获取内容。

Etag:由web服务器生成,如果一个内容的Etag没有变,这个内容也没有更新。浏览器获得Etag后下次请求的时候会附加 If-None-Match 询问服务器该内容是否发生变化,服务器通过重新计算并且与Http请求头里面的Etag进行比较,相同返回304。

以上两种方式浏览器都要和web服务器去协商。

Expires:http另外一种标记,告诉浏览器什么时候过期,在该时间之前都可以使用本地缓存。Web服务器默认不对静态内容开启Expires标记支持,需要进行一定的配置(详见google)。我们不能保证服务器时间和本地时间一致,所以这种方式也有弊端。http/1.1提供Cache-Control保级弥补此不足。

Cache-Control:格式为Cache-Control:max-age=<秒>,这个时间是相对于浏览器本地的,静态内容Web服务器会自动添加此标记。动态内容可以在代码中手动添加此标记。当Expires和Cache-Control同时存在浏览器会优先考虑Cache-Control。


© 著作权归作者所有

十七亮
粉丝 7
博文 30
码字总数 14331
作品 0
东城
程序员
私信 提问
大型网站技术架构(3):WEB 前端性能优化

上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应...

不最醉不龟归
2016/12/13
24
0
《大型网站技术架构》——第四章 瞬时响应:网站的高性能架构

网站性能是客观的指标,可以具体体现到响应时间、吞吐量等技术指标,同时也是主观的感受。 用户视角的网站性能 在实践中,使用一些前端架构优化手段,通过优化页面HTML式样、利用浏览器端的并...

wsjtwmy
2018/12/06
0
0
WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪
2017/07/31
0
0
分布式学习(8) ---- 分布式网站优化简易总结

web前端性能优化 浏览器访问优化: 1.减少HTTP请求数:合并CSS、合并JS、合并图片 2.使用浏览器缓存:设置HTTP头中的Cache-Control和Expires属性,缓存CSS、Js、图标到浏览器。 3.启动压缩:...

KKys
2017/02/20
0
0
「真®全栈之路 - DNS篇」故事从输入URL开始.....

前言 好久没写博客了,我原先的标题是 “从输入url到页面加载完成的XXX”? 但想着,这是别人嚼烂很多次的内容,缺乏挑战性,而且,页面操作过程中能优化的地方实在太多了。 那就干脆给自己挖...

前端劝退师
05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部