CSS3实现3D水晶立方体效果

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

前段时间写过一篇《CSS3实现美美哒的图片倒影效果》，里面最后一步，“我们使倒影倾斜一个角度，让整个倒影效果更具有立体效果”，不知道大家有没有联想到用倾斜，我们可以制作一个立方体呢？？？

今天我们就来用纯css制作一个立方体，主要用到的知识就是transform: rotate，没有了解的可以点击下方文章了解：《CSS3中transition、transform傻傻分不清楚》

效果预览图：

CSS3实现3D水晶立方体效果

解析

立方体，是由6个面组成的，所以我们主要是操作6个面，组合成一个立方体就可以实现。

观察者方向的为z轴的正值方向

rotateX 3D空间旋转指定的角度，沿着垂直于X轴的方向顺时针旋转。 rotateY 3D空间旋转指定的角度，沿着垂直于Y轴的方向顺时针旋转。 rotateZ 3D空间旋转指定的角度，沿着垂直于Z轴的方向顺时针旋转。

第一步 - 画出前后2个面

CSS3实现3D水晶立方体效果

<div class="wrap"> 
 <div class="cube"> 
 <div class="before"></div> 
 <div class="after"></div> 
 </div> 
</div>

下面的样式，我们对整个盒子沿着垂直于X轴的方向逆时针旋转30°，Y轴逆时针旋转80°，前面元素Z轴位移100px，后面元素Z轴位移-100px，并Y轴顺时针旋转180°。让效果看起来更明晰，有错位立体感。

/*最外层容器样式*/ 
.wrap{ 
 width: 200px; 
 height: 200px; 
 margin: 150px auto; 
 position: relative; 
 
} 
/*包裹所有容器样式*/ 
.cube{ 
 width: 200px; 
 height: 200px; 
 margin: 0 auto; 
 /*preserve-3d 使其子元素具有3D效果*/ 
 transform-style: preserve-3d; 
 transform: rotateX(-30deg) rotateY(-80deg); 
} 
 
.cube div{ 
 position: absolute; 
 width: 200px; 
 height: 200px; 
 opacity: 0.8; 
} 
.cube .before{ 
 transform: rotateY(0deg) translateZ(100px); 
 background: red; 
} 
.cube .after{ 
 transform: translateZ(-100px) rotateY(180deg); 
 background: blue; 
}

第二步 - 画出左右2个面

和第一步类似，同样旋转和位移这两个面，使其能够完美拼接

CSS3实现3D水晶立方体效果

<div class="wrap"> 
 <div class="cube"> 
 <div class="before"></div> 
 <div class="after"></div> 
 <div class="right"></div> 
 <div class="left"></div> 
 </div> 
</div>

添加样式

.cube .left{ 
 transform: rotateY(90deg) translateZ(100px); 
 background: green; 
} 
.cube .right{ 
 transform: rotateY(-90deg) translateZ(100px); 
 background: yellow; 
}

第三步 - 画出上下2个面

依次类推，完成上下2个面。

CSS3实现3D水晶立方体效果

<div class="wrap"> 
 <div class="cube"> 
 <div class="before"></div> 
 <div class="after"></div> 
 <div class="right"></div> 
 <div class="left"></div> 
 <div class="top"></div> 
 <div class="bottom"></div> 
 </div> 
</div>

添加样式

.cube .top{ 
 transform: rotateX(90deg) translateZ(100px); 
 background: purple; 
} 
.cube .bottom{ 
 transform: rotateX(-90deg) translateZ(100px); 
 background: pink; 
}

第四步 - 美化

我们给每个面添加一个背景图片，然后让整个盒子旋转起来，使我们可以看到每个面的内容。

<div class="wrap"> 
 <div class="cube"> 
 <div class="before"> 
 <img src="../images/20180801122834.png" class="pic" /> 
 </div> 
 <div class="after"> 
 <img src="../images/20180911140432.png" class="pic" /> 
 </div> 
 <div class="right"> 
 <img src="../images/20181025165730.png" class="pic" /> 
 </div> 
 <div class="left"> 
 <img src="../images/20181026153658.png" class="pic" /> 
 </div> 
 <div class="top"> 
 <img src="../images/20180911175248.png" class="pic" /> 
 </div> 
 <div class="bottom"> 
 <img src="../images/20180801121251.png" class="pic" /> 
 </div> 
 </div> 
</div>

添加样式

.pic{ 
 width: 200px; 
 height: 200px; 
} 
@-webkit-keyframes rotate{ 
 from{ 
 transform: rotateX(0deg) rotateY(0deg); 
 } 
 to{ 
 transform: rotateX(360deg) rotateY(360deg); 
 } 
} 
.cube{ 
 width: 200px; 
 height: 200px; 
 margin: 0 auto; 
 transform-style: preserve-3d; 
 transform: rotateX(-30deg) rotateY(-80deg); 
 -webkit-animation: rotate 20s infinite; 
 animation-timing-function: linear; 
}

最终效果图：

CSS3实现3D水晶立方体效果

公告

喜欢小编的点击关注，了解更多知识！

源码地址请点击下方“了解更多”

DK拍了拍你：字符串拼接一定记得用MessageFormat#format ！

在日常开发中，我们经常会有格式化的需求，如日期格式化、数字格式化、钱币格式化等等。

格式化器的作用似乎跟转换器的作用类似，但是它们的关注点却不一样：

转换器：将类型S转换为类型T，关注的是类型而非格式
格式化器： String <-> Java类型。这么一看它似乎和PropertyEditor类似，但是它的关注点是字符串的格式

Spring有自己的格式化器抽象org.springframework.format.Formatter，但是谈到格式化器，必然就会联想起来JDK自己的java.text.Format体系。为后文做好铺垫，本文就先介绍下JDK为我们提供了哪些格式化能力。

版本约定

JDK：8

✍正文

Java里从来都缺少不了字符串拼接的活，JDK也提供了多种“工具”供我们使用，如：StringBuffer、StringBuilder以及最直接的+号，相信这些大家都有用过。但这都不是本文的内容，本文将讲解格式化器，给你提供一个新的思路来拼接字符串，并且是推荐方案。

JDK内置有格式化器，便是java.text.Format体系。它是个抽象类，提供了两个抽象方法：

public abstract class Format implements Serializable, Cloneable {
    public abstract StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos);	
	public abstract Object parseObject (String source, ParsePosition pos);
}

format：将Object格式化为String，并将此String放到toAppendTo里面
parseObject：讲String转换为Object，是format方法的逆向操作

Java SE针对于Format抽象类对于常见的应用场景分别提供了三个子类实现：

DateFormat：日期时间格式化

抽象类。用于用于格式化日期/时间类型java.util.Date。虽然是抽象类，但它提供了几个静态方法用于获取它的实例：

// 格式化日期 + 时间
public final static DateFormat getInstance() {
    return getDateTimeInstance(SHORT, SHORT);
}
public final static DateFormat getDateTimeInstance(int dateStyle, int timeStyle, Locale aLocale){
    return get(timeStyle, dateStyle, 3, aLocale);
}

// 格式化日期
public final static DateFormat getDateInstance(int style, Locale aLocale) {
    return get(0, style, 2, aLocale);
}
// 格式化时间
public final static DateFormat getTimeInstance(int style, Locale aLocale){
    return get(style, 0, 1, aLocale);
}

有了这些静态方法，你可在不必关心具体实现的情况下直接使用：

/**
 * {@link DateFormat}
 */
@Test
public void test1() {
    Date curr = new Date();

    // 格式化日期 + 时间
    System.out.println(DateFormat.getInstance().getClass() + "-->" + DateFormat.getInstance().format(curr));
    System.out.println(DateFormat.getDateTimeInstance().getClass() + "-->" + DateFormat.getDateTimeInstance().format(curr));

    // 格式化日期
    System.out.println(DateFormat.getDateInstance().getClass() + "-->" + DateFormat.getDateInstance().format(curr));

    // 格式化时间
    System.out.println(DateFormat.getTimeInstance().getClass() + "-->" + DateFormat.getTimeInstance().format(curr));
}

运行程序，输出：

class java.text.SimpleDateFormat-->20-12-25 上午7:19
class java.text.SimpleDateFormat-->2020-12-25 7:19:30
class java.text.SimpleDateFormat-->2020-12-25
class java.text.SimpleDateFormat-->7:19:30

嗯，可以看到底层实现其实是咱们熟悉的SimpleDateFormat。实话说，这种做法不常用，狠一点：基本不会用（框架开发者可能会用做兜底实现）。

SimpleDateFormat

一般来说，我们会直接使用SimpleDateFormat来对Date进行格式化，它可以自己指定Pattern，个性化十足。如：

@Test
public void test2() {
    DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); // yyyy-MM-dd HH:mm:ss
    System.out.println(dateFormat.format(new Date()));
}

运行程序，输出：

2020-12-25

关于SimpleDateFormat的使用方式不再啰嗦，不会的就可走自行劝退手续了。此处只提醒一点：SimpleDateFormat线程不安全。

说明：JDK 8以后不再建议使用Date类型，也就不会再使用到DateFormat。同时我个人建议：在项目中可强制严令禁用

NumberFormat：数字格式化

抽象类。用于格式化数字，它可以对数字进行任意格式化，如小数、百分数、十进制数等等。它有两个实现类：

类结构和DateFormat类似，也提供了getXXXInstance静态方法给你直接使用，无需关心底层实现：

@Test
public void test41() {
    double myNum = 1220.0455;

    System.out.println(NumberFormat.getInstance().getClass() + "-->" + NumberFormat.getInstance().format(myNum));
    System.out.println(NumberFormat.getCurrencyInstance().getClass() + "-->" + NumberFormat.getCurrencyInstance().format(myNum));
    System.out.println(NumberFormat.getIntegerInstance().getClass() + "-->" + NumberFormat.getIntegerInstance().format(myNum));
    System.out.println(NumberFormat.getNumberInstance().getClass() + "-->" + NumberFormat.getNumberInstance().format(myNum));
    System.out.println(NumberFormat.getPercentInstance().getClass() + "-->" + NumberFormat.getPercentInstance().format(myNum));
}

运行程序，输出：

class java.text.DecimalFormat-->1,220.045
class java.text.DecimalFormat-->￥1,220.05
class java.text.DecimalFormat-->1,220
class java.text.DecimalFormat-->1,220.045
class java.text.DecimalFormat-->122,005%

这一看就知道DecimalFormat是NumberFormat的主力了。

DecimalFormat

Decimal：小数，小数的，十进位的。

用于格式化十进制数字。它具有各种特性，可以解析和格式化数字，包括：西方数字、阿拉伯数字和印度数字。它还支持不同种类的数字，包括：整数(123)、小数(123.4)、科学记数法(1.23E4)、百分数(12%)和货币金额(3)。所有这些都可以进行本地化。

下面是它的构造器：

其中最为重要的就是这个pattern（不带参数的构造器一般不会用），它表示格式化的模式/模版。一般来说我们对DateFormat的pattern比较熟悉，但对数字格式化的模版符号了解甚少。这里我就帮你整理出这个表格（信息源自JDK官网），记得收藏哦：

说明：Number和Digit的区别：
Number是个抽象概念，其表达形式可以是数字、手势、声音等等。如1024就是个numberDigit是用来表达的单独符号。如0-9这是个digit就可以用来表示number，如1024就是由1、0、2、4这四个digit组成的

看了这个表格的符号规则，估计很多同学还是一脸懵逼。不啰嗦了，上干货

一、0和#的使用（最常见使用场景）

这是最经典、最常见的使用场景，甚至来说你有可能职业生涯只会用到此场景。

/**
 * {@link DecimalFormat}
 */
@Test
public void test4() {
    double myNum = 1220.0455;

    System.out.println("===============0的使用===============");
    System.out.println("只保留整数部分：" + new DecimalFormat("0").format(myNum));
    System.out.println("保留3位小数：" + new DecimalFormat("0.000").format(myNum));
    System.out.println("整数部分、小数部分都5位。不够的都用0补位(整数高位部，小数低位补)：" + new DecimalFormat("00000.00000").format(myNum));

    System.out.println("===============#的使用===============");
    System.out.println("只保留整数部分：" + new DecimalFormat("#").format(myNum));
    System.out.println("保留2为小数并以百分比输出：" + new DecimalFormat("#.##%").format(myNum));

    // 非标准数字（不建议这么用）
    System.out.println("===============非标准数字的使用===============");
    System.out.println(new DecimalFormat("666").format(myNum));
    System.out.println(new DecimalFormat(".6666").format(myNum));
}

运行程序，输出：

===============0的使用===============
只保留整数部分：1220
保留3位小数：1220.045
整数部分、小数部分都5位。不够的都用0补位(整数高位部，小数低位补)：01220.04550
===============#的使用===============
只保留整数部分：1220
保留2为小数并以百分比输出：122004.55%
===============非标准数字的使用===============
661220
1220.666

通过此案例，大致可得出如下结论：

整数部分：0和#都可用于取出全部整数部分0的个数决定整数部分长度，不够高位补0；#则无此约束，N多个#是一样的效果
小数部分：可保留小数点后N位(0和#效果一样)若小数点后位数不够，若使用的0那就低位补0，若使用#就不补（该是几位就是几位）
数字(1-9)：并不建议模版里直接写1-9这样的数字，了解下即可

二、科学计数法E

如果你不是在证券/银行行业，这个大概率是用不着的（即使在，你估计也不会用它）。来几个例子感受一把就成：

@Test
public void test5() {
    double myNum = 1220.0455;

    System.out.println(new DecimalFormat("0E0").format(myNum));
    System.out.println(new DecimalFormat("0E00").format(myNum));
    System.out.println(new DecimalFormat("00000E00000").format(myNum));
    System.out.println(new DecimalFormat("#E0").format(myNum));
    System.out.println(new DecimalFormat("#E00").format(myNum));
    System.out.println(new DecimalFormat("#####E00000").format(myNum));
}

运行程序，输出：

1E3
1E03
12200E-00001
.1E4
.1E04
1220E00000

三、分组分隔符,

分组分隔符比较常用，它就是我们常看到的逗号,

@Test
public void test6() {
    double myNum = 1220.0455;

    System.out.println(new DecimalFormat(",###").format(myNum));
    System.out.println(new DecimalFormat(",##").format(myNum));
    System.out.println(new DecimalFormat(",##").format(123456789));

    // 分隔符,左边是无效的
    System.out.println(new DecimalFormat("###,##").format(myNum));
}

运行程序，输出：

1,220
12,20
1,23,45,67,89
12,20

四、百分号%

在展示层面也比较常用，用于把一个数字用%形式表示出来。

@Test
public void test42() {
    double myNum = 1220.0455;

    System.out.println("百分位表示：" + new DecimalFormat("#.##%").format(myNum));
    System.out.println("千分位表示：" + new DecimalFormat("#.##\u2030").format(myNum));
}

运行程序，输出：

百分位表示：122004.55%
千分位表示：1220045.5‰

五、本地货币符号¤

嗯，这个符号¤，键盘竟无法直接输出，得使用软键盘（建议使用copy大法）。

@Test
public void test7() {
    double myNum = 1220.0455;

    System.out.println(new DecimalFormat(",000.00¤").format(myNum));
    System.out.println(new DecimalFormat(",000.¤00").format(myNum));
    System.out.println(new DecimalFormat("¤,000.00").format(myNum));
    System.out.println(new DecimalFormat("¤,000.¤00").format(myNum));
    // 世界货币表达形式
    System.out.println(new DecimalFormat(",000.00¤¤").format(myNum));
}

运行程序，输出：

1,220.05￥
1,220.05￥
￥1,220.05
1,220.05￥￥
￥1,220.05￥
1,220.05CNY

注意最后一条结果：如果连续出现两次，代表货币符号的国际代号。

说明：结果默认都做了Locale本地化处理的，若你在其它国家就不会再是￥人民币符号喽

DecimalFormat就先介绍到这了，其实掌握了它就基本等于掌握了NumberFormat。接下来再简要看看它另外一个“儿子”：ChoiceFormat。

ChoiceFormat

Choice：精选的，仔细推敲的。

这个格式化器非常有意思：相当于以数字为键，字符串为值的键值对。使用一组double类型的数组作为键，一组String类型的数组作为值，两数组相同（不一定必须是相同，见示例）索引值的元素作为一对。

@Test
public void test8() {
    double[] limits = {1, 2, 3, 4, 5, 6, 7};
    String[] formats = {"周一", "周二", "周三", "周四", "周五", "周六", "周天"};
    NumberFormat numberFormat = new ChoiceFormat(limits, formats);

    System.out.println(numberFormat.format(1));
    System.out.println(numberFormat.format(4.3));
    System.out.println(numberFormat.format(5.8));
    System.out.println(numberFormat.format(9.1));
    System.out.println(numberFormat.format(11));
}

运行程序，输出：

周一
周四
周五
周天
周天

结果解释：

4.3位于4和5之间，取值4；5.8位于5和6之间，取值5
9.1和11均超过了数组最大值（或者说找不到匹配的），则取值最后一对键值对。

可能你会想这有什么使用场景？？？是的，不得不承认它的使用场景较少，本文下面会介绍下它和MessageFormat的一个使用场景。

如果说DateFormat和NumberFormat都用没什么花样，主要记住它的pattern语法格式就成，那么就下来这个格式化器就是本文的主菜了，使用场景非常的广泛，它就是MessageFormat。

MessageFormat：字符串格式化

MessageFormat提供了一种与语言无关（不管你在中国还是其它国家，效果一样）的方式生成拼接消息/拼接字符串的方法。使用它来构造显示给最终用户的消息。MessageFormat接受一组对象，对它们进行格式化，然后在模式的适当位置插入格式化的字符串。

先来个最简单的使用示例体验一把：

/**
 * {@link MessageFormat}
 */
@Test
public void test9() {
    String sourceStrPattern = "Hello {0},my name is {1}";
    Object[] args = new Object[]{"girl", "YourBatman"};

    String formatedStr = MessageFormat.format(sourceStrPattern, args);
    System.out.println(formatedStr);
}

运行程序，输出：

Hello girl,my name is YourBatman

有没有中似曾相似的感觉，是不是和String.format()的作用特别像？是的，它俩的用法区别，到底使用税文下也会讨论。

要熟悉MessageFormat的使用，主要是要熟悉它的参数模式（你也可以理解为pattern）。

参数模式

MessageFormat采用{}来标记需要被替换/插入的部分，其中{}里面的参数结构具有一定模式：

ArgumentIndex[,FormatType[,FormatStyle]]

ArgumentIndex：非必须。从0开始的索引值
FormatType：非必须。使用不同的java.text.Format实现类对入参进行格式化处理。它能有如下值：number：调用NumberFormat进行格式化date：调用DateFormat进行格式化time：调用DateFormat进行格式化choice：调用ChoiceFormat进行格式化
FormatStyle：非必须。设置FormatType使用的样式。它能有如下值：short、medium、long、full、integer、currency、percent、SubformPattern（如日期格式、数字格式#.##等）

说明：FormatType和FormatStyle只有在传入值为日期时间、数字、百分比等类型时才有可能需要设置，使用得并不多。毕竟：我在外部格式化好后再放进去不香吗？

@Test
public void test10() {
    MessageFormat messageFormat = new MessageFormat("Hello, my name is {0}. I’am {1,number,#.##} years old. Today is {2,date,yyyy-MM-dd HH:mm:ss}");
    // 亦可通过编程式 显示指定某个位置要使用的格式化器
    // messageFormat.setFormatByArgumentIndex(1, new DecimalFormat("#.###"));

    System.out.println(messageFormat.format(new Object[]{"YourBatman", 24.123456, new Date()}));
}

运行程序，输出：

Hello, my name is YourBatman. I’am 24.12 years old. Today is 2020-12-26 15:24:28

它既可以直接在模版里指定格式化模式类型，也可以通过API方法set指定格式化器，当然你也可以在外部格式化好后再放进去，三种方式均可，任君选择。

注意事项

下面基于此示例，对MessageFormat的使用注意事项作出几点强调。

@Test
public void test11() {
    System.out.println(MessageFormat.format("{1} - {1}", new Object[]{1})); // {1} - {1}
    System.out.println(MessageFormat.format("{0} - {1}", new Object[]{1})); // 输出：1 - {1}
    System.out.println(MessageFormat.format("{0} - {1}", new Object[]{1, 2, 3})); // 输出：1 - 2

    System.out.println("---------------------------------");

    System.out.println(MessageFormat.format("'{0} - {1}", new Object[]{1, 2})); // 输出：{0} - {1}
    System.out.println(MessageFormat.format("''{0} - {1}", new Object[]{1, 2})); // 输出：'1 - 2
    System.out.println(MessageFormat.format("'{0}' - {1}", new Object[]{1, 2})); // {0} - 2
    // 若你数据库值两边都需要''包起来，请你这么写
    System.out.println(MessageFormat.format("''{0}'' - {1}", new Object[]{1, 2})); // '1' - 2

    System.out.println("---------------------------------");
    System.out.println(MessageFormat.format("0} - {1}", new Object[]{1, 2})); // 0} - 2
    System.out.println(MessageFormat.format("{0 - {1}", new Object[]{1, 2})); // java.lang.IllegalArgumentException: Unmatched braces in the pattern.
}

参数模式的索引值必须从0开始，否则所有索引值无效
实际传入的参数个数可以和索引个数不匹配，不报错（能匹配上几个算几个）
两个单引号''才算作一个'，若只写一个将被忽略甚至影响整个表达式谨慎使用单引号'关注'的匹配关系
{}只写左边报错，只写右边正常输出（注意参数的对应关系）

static方法的性能问题

我们知道MessageFormat提供有一个static静态方法，非常方便地的使用：

public static String format(String pattern, Object ... arguments) {
    MessageFormat temp = new MessageFormat(pattern);
    return temp.format(arguments);
}

可以清晰看到，该静态方法本质上还是构造了一个MessageFormat实例去做格式化的。因此：若你要多次（如高并发场景）格式化同一个模版（参数可不一样）的话，那么提前创建好一个全局的（非static） MessageFormat实例再执行格式化是最好的，而非一直调用其静态方法。

说明：若你的系统非高并发场景，此性能损耗基本无需考虑哈，怎么方便怎么来。毕竟朝生夕死的对象对JVM来说没啥压力

和String.format选谁？

二者都能用于字符串拼接（格式化）上，撇开MessageFormat支持各种模式不说，我们只需要考虑它俩的性能上差异。

MeesageFormat：先分析（模版可提前分析，且可以只分析一次），再在指定位置上插入相应的值分析：遍历字符串，维护一个{}数组并记录位置填值
String.format：该静态方法是采用运行时用正则表达式 匹配到占位符，然后执行替换的正则表达式为"%(\d+\$)?([-#+ 0,(\<]*)?(\d+)?(\.\d+)?([tT])?([a-zA-Z%])"根据正则匹配到占位符列表和位置，然后填值

一说到正则表达式，我心里就发怵，因为它对性能是不友好的，所以孰优孰劣，高下立判。

说明：还是那句话，没有绝对的谁好谁坏，如果你的系统对性能不敏感，那就是方便第一

经典使用场景

这个就很多啦，最常见的有：HTML拼接、SQL拼接、异常信息拼接等等。

比如下面这个SQL拼接：

StringBuilder sb =new StringBuilder();
sb.append("insert into user (");
sb.append("		name,");
sb.append("		accountId,");
sb.append("		zhName,");
sb.append("		enname,");
sb.append("		status");
sb.append(") values (");
sb.append("		''{0}'',");
sb.append("		{1},");
sb.append("		''{2}'',");
sb.append("		''{3}'',");
sb.append("		{4},");
sb.append(")");

Object[] args = {name, accountId, zhName, enname, status};

// 最终SQL
String sql = MessageFormat.format(sb.toString(), arr);

你看，多工整。

说明：如果值是字符串需要'包起来，那么请使用两边各两个包起来

✍总结

本文内容介绍了JDK原生的格式化器知识点，主要作用在这三个方面：

DateFormat：日期时间格式化
NumberFormat：数字格式化
MessageFormat：字符串格式化

Spring是直接面向使用者的框架产品，很显然这些是不够用的，并且JDK的格式化器在设计上存在一些弊端。比如经常被吐槽的：日期/时间类型格式化器SimpleDateFormat为毛在java.text包里，而它格式化的类型Date却在java.util包内，这实为不合适。

有了JDK格式化器作为基础，下篇我们就可以浩浩荡荡地走进Spring格式化器的大门了，看看它是如何优于JDK进行设计和抽象的。

作者：YourBatman
原文链接：https://fangshixiang.blog.csdn.net/article/details/111752597

EO优化公司：网站缓存策略，今天小编要和大家说说，网站缓存策略，什么是网站缓存相信大家并不陌生，就是cookie，广州百度SEO公司越视界将从技术角度为大家揭秘网站缓存策略秘密。

在这《广州百度SEO优化公司：网站缓存策略》文章中，我们将讨论一些Web内容缓存的基本概念。这主要包括如何选择缓存策略以保证互联网范围内的缓存能够正确的处理您的内容。我们将谈一谈缓存带来的好处、副作用以及不同的策略能带来的性能和灵活性的最大结合。

[caption id="attachment_4765" align="aligncenter" width="600"]

广州百度SEO优化公司：网站缓存策略[/caption]

什么是缓存（caching）？

缓存（caching）是一个描述存储可重用资源以便加快后续请求的行为的术语。有许多不同类型的缓存，每种都有其自身的特点，应用程序缓存和内存缓存由于其对特定回复的加速，都很常用。

《广州百度SEO优化公司：网站缓存策略》文章中的主要讲述的Web缓存是一种不同类型的缓存。Web缓存是HTTP协议的一个核心特性，它能最小化网络流量，并且提升用户所感知的整个系统响应速度。内容从服务器到浏览器的传输过程中，每个层面都可以找到缓存的身影。

Web缓存根据特定的规则缓存相应HTTP请求的响应。对于缓存内容的后续请求便可以直接由缓存满足而不是重新发送请求到Web服务器。

好处

有效的缓存技术不仅可以帮助用户，还可以帮助内容的提供者。缓存对内容分发带来的好处有：

●减少网络开销：内容可以在从内容提供者到内容消费者网络路径之间的许多不同的地方被缓存。当内容在距离内容消费者更近的地方被缓存时，由于缓存的存在，请求将不会消耗额外的网络资源。

●加快响应速度：由于并不是必须通过整个网络往返，缓存可以使内容的获得变得更快。缓存放在距用户更近的地方，例如浏览器缓存，使得内容的获取几乎是瞬时的。

●在同样的硬件上提高速度：对于保存原始内容的服务器来说，更多的性能可以通过允许激进的缓存策略从硬件上压榨出来。内容拥有者们可以利用分发路径上某个强大的服务器来应对特定内容负载的冲击。

●网络中断时内容依旧可用：使用某种策略，缓存可以保证在原始服务器变得不可用时，相应的内容对用户依旧可用。

什么能被缓存？

某些特定的内容比其他内容更容易被缓存。对大多数站点来说，一些适合缓存的内容如下：

●Logo和商标图像

●普通的不变化的图像（例如，导航图标）

●CSS样式表

●普通的Java文件

●可下载的内容

●媒体文件

这些文件更倾向于不经常改变，所以长时间的对它们进行缓存能获得好处。

一些项目在缓存中必须加以注意：

●HTML页面

●会替换改变的图像

●经常修改的Java和CSS文件

●需要有认证后的cookies才能访问的内容

一些内容从来不应该被缓存：

●与敏感信息相关的资源（银行数据，等）

●用户相关且经常更改的数据

除上面的通用规则外，通常您需要指定一些规则以便于更好地缓存不同种类的内容。例如，如果登录的用户都看到的是同样的网站视图，就应该在任何地方缓存这个页面。如果登录的用户会在一段时间内看到站点中用户特定的视图，您应该让用户的浏览器缓存该数据而不应让任何中介节点缓存该视图。

Web内容缓存的位置

Web内容会在整个分发路径中的许多不同的位置被缓存：

●浏览器缓存：Web浏览器自身会维护一个小型缓存。典型地，浏览器使用一种策略指示缓存最重要的内容。这可能是用户相关的内容或可能会再次请求且下载代价较高。

●中间缓存代理：任何在客户端和您的基础架构之间的服务器都可以按期望缓存一些内容。这些缓存可能由ISP（网络服务提供者）或者其他独立组织提供。

●反向缓存：您的服务器基础架构可以为后端的服务实现自己的缓存。如果实现了缓存，那么便可以在处理请求的位置返回相应的内容而不用每次请求都使用后端服务。

上面的这些位置通常都可以根据它们自身的缓存策略和内容源的缓存策略缓存一些相应的内容。

一些您可以使用的指示内容缓存策略的Cache-Control的选项如下：

●no-cache：这个指令指示所有缓存的内容在新的请求到达时必须先重新验证，再发送给客户端。这条指令实际将内容立刻标记为过期的，但允许通过验证手段重新验证以避免重新下载整个内容。

●no-store：这条指令指示缓存的内容不能以任何方式被缓存。它适合在回复敏感信息时设置。

●public：它将内容标记为公有的，这意味着它能被浏览器和其他任何中间节点缓存。通常，对于使用了HTTP验证的请求，其回复被默认标记为private。public标记将会覆盖这个设置。

●private：它将内容标记为私有的。私有数据可以被用户的浏览器缓存，但不能被任何中间节点缓存。它通常用于用户相关的数据。

●max-age：这个设置指示了缓存内容的最大生存期，它在最大生存期后必须在源服务器处被验证或被重新下载。在现代浏览器中这个选项大体上取代了Expires头部，浏览器也将其作为决定内容的新鲜度的基础。这个选项的值以秒为单位表示，最大可以表示一年的新鲜期（31536000秒）。

●s-maxage：这个选项非常类似于max-age，它指明了内容能够被缓存的时间。区别是这个选项只在中间节点的缓存中有效。结合这两个选项可以构建更加灵活的缓存策略。

●must-revalidate：它指明了由max-age、s-maxage或Expires头部指明的新鲜度信息必须被严格的遵守。它避免了缓存的数据在网络中断等类似的场景中被使用。

●proxy-revalidate：它和上面的选项有着一样的作用，但只应用于中间的代理节点。在这种情况下，用户的浏览器可以在网络中断时使用过期内容，但中间缓存内容不能用于此目的。

●no-transform：这个选项告诉缓存在任何情况下都不能因为性能的原因修改接收到的内容。这意味着，缓存不允许压缩接收到的内容（没有从原始服务器处接收过压缩版本的该内容）并发送。

这些选项能够以不同的方式结合以获得不同的缓存行为。一些互斥的值如下：

●no-cache，no-store以及由其他前面未提到的选项指明的常用的缓存行为

●public和private

如果no-store和no-cache都被设置，那么no-store会取代no-cache。对于非授权的请求的回复，public是隐含的设置。对于授权的请求的回复，private选项是隐含的。他们可以通过在Cache-Control头部中指明相应的相反的选项以覆盖。

开发一种缓存策略

在理想情况下，任何内容都可以被尽可能缓存，而您的服务器只需要偶尔的提供一些验证内容即可。但这在现实中很少发生，因此您应该尝试设置一些明智的缓存策略，以在长期缓存和站点改变的需求间达到平衡。

常见问题

在许多情况中，由于内容被产生的方式（如根据每个用户动态的产生）或者内容的特性（例如银行的敏感数据），这些内容不应该被缓存。另一些许多管理员在设置缓存时可能面对的问题是外部缓存的数据未过期，但新版本的数据已经产生。

这些都是经常遇到的问题，它们会影响缓存的性能和您提供的数据的准确性。然而，我们可以通过开发提前预见这些问题的缓存策略来缓解这些问题。

一般性建议

尽管您的实际情况会指导您选择的缓存策略，但是下面的建议能帮助您获得一些合理的决定。

在您担心使用哪一个特定的头部之前，有一些特定的步骤可以帮助您提高您的缓存命中率。一些建议如下：

●为图像、CSS和共享的内容建立特定的文件夹：将内容放到特定的文件夹内使得您可以方便的从您的站点中的任何页面引用这些内容。

●使用同样的URL来表示同样的内容：由于缓存使用内容请求中的主机名和路径作为键，因此应保证您的所有页面中的该内容的引用方式相同，前一个建议能让这点更加容易做到。

●尽可能使用CSS图像拼接：对于像图标和导航等内容，使用CSS图像拼接能够减少渲染您页面所需要的请求往返，并且允许对拼接缓存很长一段时间。

●尽可能将主机脚本和外部资源本地化：如果您使用Java脚本和其他外部资源，如果上游没有提供合适的缓存头部，那么您应考虑将这些内容放在您自己的服务器上。您应该注意上游的任何更新，以便更新本地的拷贝。

●对缓存内容收集文件摘要：静态的内容比如CSS和Java文件等通常比较适合收集文件摘要。这意味着为文件名增加一个独特的标志符（通常是这个文件的哈希值）可以在文件修改后绕开缓存保证新的内容被重新获取。有很多工具可以帮助您创建文件摘要并且修改HTML文档中的引用。

对于不同的文件正确地选择不同的头部这件事，下面的内容可以作为一般性的参考：

●允许所有的缓存存储一般内容：静态内容以及非用户相关的内容应该在分发链的所有节点被缓存。这使得中间节点可以将该内容回复给多个用户。

●允许浏览器缓存用户相关的内容：对于每个用户的数据，通常在用户自己的浏览器中缓存是可以被接受且有益的。缓存在用户自身的浏览器能够使得用户在接下来的浏览中能够瞬时读取，但这些内容不适合在任何中间代理节点缓存。

●将时间敏感的内容作为特例：如果您的数据是时间敏感的，那么相对上面两条参考，应该将这些数据作为特例，以保证过期的数据不会在关键的情况下被使用。例如，您的站点有一个购物车，它应该立刻反应购物车里面的物品。依据内容的特点，可以在Cache-Control头部中使用no-cache或no-store选项。

●总是提供验证器：验证器使得过期的内容可以无需重新下载而得到刷新。设置ETag和Last-Modified头部将允许缓存向原始服务器验证内容，并在内容未修改时刷新该内容新鲜度以减少负载。

●对于支持的内容设置长的新鲜期：为了更加有效的利用缓存，一些作为支持性的内容应该被设置较长的新鲜期。这通常比较适合图像和CSS等由用户请求用来渲染HTML页面的内容。和文件摘要一起，设置延长的新鲜期将允许缓存长时间的存储这些资源。如果资源发生改变，修改的文件摘要将会使缓存的数据无效并触发对新的内容的下载。那时，新的支持的内容会继续被缓存。

●对父内容设置短的新鲜期：为了使得前面的模式正常工作，容器类的内容应该相应的设置短的新鲜期，或者设置不全部缓存。这通常是在其他协助内容中使用的HTML页面。这个HTML页面将会被频繁的下载，使得它能快速的响应改变。支持性的内容因此可以被尽量缓存。

关键之处便在于达到平衡，一方面可以尽量的进行缓存，另一方面为未来保留当改变发生时从而改变整个内容的机会。您的站点应该同时具有：

●尽量缓存的内容

●拥有短的新鲜期的缓存内容，可以被重新验证

●完全不被缓存的内容

这样做的目的便是将内容尽可能的移动到第一个分类（尽量缓存）中的同时，维持可以接受的缓存命中率。

在线咨询

上一篇：前端：JS延长加载的方式有哪些？
下一篇：HTML面试题：简述⼀下 src 与 href 的区别

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS3实现3D水晶立方体效果

前言

解析

第一步 - 画出前后2个面

第二步 - 画出左右2个面

第三步 - 画出上下2个面

第四步 - 美化

公告

DK拍了拍你：字符串拼接一定记得用MessageFormat#format ！

版本约定

✍正文

DateFormat：日期时间格式化

SimpleDateFormat

NumberFormat：数字格式化

DecimalFormat

一、0和#的使用（最常见使用场景）

二、科学计数法E

三、分组分隔符,

四、百分号%

五、本地货币符号¤

ChoiceFormat

MessageFormat：字符串格式化

参数模式

注意事项

static方法的性能问题

和String.format选谁？

经典使用场景

✍总结

您的项目需求