-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
335 lines (317 loc) · 21.7 KB
/
article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘上的灵魂舞者</title>
<link rel="stylesheet" href="css/fontawesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/agate.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/article.css"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-fixed-top blog-bar-home">
<div class="container blog-nav">
<a class="blog-tip" href="#">键盘上的灵魂舞者</a>
<div class="blog-nav-ul">
<a href="#" class="blog-nav-item"><i class="fa fa-home"></i>首页</a>
<a href="#" class="blog-nav-item"><i class="fa fa-coffee"></i>技术</a>
<a href="#" class="blog-nav-item"><i class="fa fa-heart"></i>杂文</a>
<a href="#" class="blog-nav-item"><i class="fa fa-download"></i>工具</a>
</div>
</div>
</nav>
<div class="row">
<img class="top-img" src="img/bg_3.jpg" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 blog-dh">
<a class="blog-dh-a" href="index.html"><i class="fa fa-home blog-dh-i"></i>首页</a>>
<a class="blog-dh-a" href="#">技术</a>>
<a class="blog-dh-a" href="#">java</a>>
<span>正文</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 no-padding-right">
<article>
<header>
<h3 class="ar-title">
这是文章的标题
<a class="ar-tip" href="#">springMVC</a>
<a class="ar-tip" href="#">springMVC</a>
<a class="ar-tip" href="#">springMVC</a>
</h3>
<p class="ar-time">2018年7月25日 16:23:23</p>
<p class="ar-views">阅读数：879</p>
</header>
<h2 id="web缓存技术">Web缓存技术</h2>
<h3 id="一缓存概述">一、缓存概述</h3>
<pre>
<code class="javascript"> $(function(){
setThemeColor();
});</code>
</pre>
<p>缓存原本是一个硬件的概念：缓存就是数据交换的缓冲区（称作Cache），当某一硬件要读取数据时，会首先从缓存中查找需要的数据，如果找到了则直接执行，找不到的话则从内存中找。由于缓存的运行速度比内存快得多，故缓存的作用就是帮助硬件更快地运行。</p>
<p>在一个Web应用中，应用到缓存的地方有很多，主要有浏览器缓存，页面缓存，服务器缓存，数据库缓存等。</p>
<p>缓存的作用主要有：</p>
<ul>
<li>加快页面打开速度</li>
<li>减少网络带宽消耗</li>
<li>降低服务器压力</li>
</ul>
<p><img src="img/bg_9.jpg" alt="缓存结构" title=""></p>
<h3 id="二浏览器缓存">二、浏览器缓存</h3>
<p>浏览器端缓存规则主要在HTTP协议头和HTML的meta标签中定义。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取更新的版本。</p>
<p><strong>新鲜度（过期机制）</strong>：也就是缓存副本有效期。一个缓存副本必须满足以下条件，浏览器会认为它是有效的，足够新的：</p>
<ul>
<li>含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内；</li>
<li>浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度</li>
<li>满足以上两个情况的一种，浏览器会直接从缓存中获取副本并渲染。</li>
</ul>
<p>满足以上两个情况的一种，浏览器会直接从缓存中获取副本并渲染。</p>
<p><strong>校验值（验证机制）</strong>：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。</p>
<p>使用HTML Meta 标签，Web开发者可以在HTML页面的<code><head></code>节点中加入<code><meta></code>标签，代码如下：</p>
<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">META</span> <span class="hljs-attribute">HTTP-EQUIV</span>=<span class="hljs-value">"Pragma"</span> <span class="hljs-attribute">CONTENT</span>=<span class="hljs-value">"no-cache"</span>></span></code></pre>
<p>上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。而广泛应用的还是 HTTP头信息 来控制缓存。</p>
<p>在HTTP请求和响应的消息报头中，常见的与缓存有关的消息报头有：</p>
<p><img src="img/bg_7.jpg" alt="缓存结构" title=""></p>
<h4 id="http缓存机制">HTTP缓存机制</h4>
<p>缓存行为主要由缓存策略决定，而缓存策略由内容拥有者设置。这些策略主要通过特定的HTTP头部来清晰地表达。</p>
<p>当一个用户发起一个静态资源请求的时候，浏览器会通过以下几步来获取资源：</p>
<ul>
<li><strong>本地缓存阶段</strong>：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器；</li>
<li><strong>协商缓存阶段</strong>：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器,然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源；</li>
<li><strong>缓存失败阶段</strong>：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。</li>
</ul>
<!-- ### 应用一、快速消除各类缓存 -->
<footer>
<div class="ar-op">
<span class="ar-op-item"><i class="fa fa-thumbs-up ar-op-i"></i> 点赞 123</span>
<span class="ar-op-item"><i class="fa fa-share ar-op-i"></i> 分享</span>
<span class="ar-op-item"><i class="fa fa-dollar ar-op-i"></i> 丢硬币</span>
</div>
</footer>
</article>
<div class="ar-comment">
<div class="ar-ta">
<textarea class="ar-textarea" placeholder="不想说点啥?"></textarea>
</div>
<div class="ar-ta-op">
<span class="ar-tt">还能输入123个字符</span>
<button id="ar-submit">发表评论</button>
</div>
</div>
<div class="ar-comment-list" id="comment-con">
<div class="ar-commont-item">
<div class="ar-commont-top">
<img class="ar-a" src="img/photo/b_1.jpg"/>
<span class="ar-b">游客1</span>
<span class="ar-c">2017年8月23日 16:23:33</span>
<span class="ar-d">#1楼</span>
</div>
<div class="ar-commont-con">
这是评论内容这是评论内容这是评论内容
</div>
<div class="ar-commont-op">
<span class="ar-c">2017年8月23日 16:23:33</span>
<span class="ar-d">#1楼</span>
<span class="ar-re">评论</span>
</div>
<div class="ar-commont-com">
</div>
</div>
<div class="ar-commont-item">
<div class="ar-commont-top">
<img class="ar-a" src="img/photo/b_1.jpg"/>
<span class="ar-b">游客1</span>
</div>
<div class="ar-commont-con">
这是评论内容这是评论内容这是评论内容内容这是评论内容这是评论内容内容这是评论内容这是评论内容内容这是评论内容这是评论内容内容这是评论内容这是评论内容内容这是评论内容这是评论内容
</div>
<div class="ar-commont-op">
<span class="ar-c">2017年8月23日 16:23:33</span>
<span class="ar-d">#1楼</span>
<span class="ar-re" data-type="review" data-target="asd">评论</span>
</div>
<div class="ar-commont-com" id="asd">
<ul class="ar-commont-com-ul">
<li class="ar-commont-citem">
<img class="ar-a" src="img/photo/b_1.jpg"/>
<span class="ar-b">游客1</span>
<span class="ar-e">这是评论内容这是评论内容这是评论内容内容这是评论</span>
</li>
<li class="ar-commont-citem ar-commont-citem-1">
<span class="ar-c">2017年8月23日 16:23:33</span>
<span class="ar-d" data-type="hf" data-target="abs"
data-textarea="abs1" data-reviewId="1" data-to="Jerry">回复</span>
</li>
<li class="ar-commont-citem">
<img class="ar-a" src="img/photo/b_1.jpg"/>
<span class="ar-b">游客1</span>
<span class="ar-e">这是评论内容这是评论内容内容这是评论内内容这是评论内内
容这是评论内内容这是评论内内容这是评论内内容这是评论内内容这是评论内这是评论内容内容这是评论</span>
</li>
<li class="ar-commont-citem ar-commont-citem-1">
<span class="ar-c">2017年8月23日 16:23:33</span>
<span class="ar-d" data-type="hf" data-target="abs"
data-textarea="abs1" data-reviewId="1" data-to="Tom">回复</span>
</li>
<li class="ar-commont-citem-2">
<span class="ar-citem-last-a" data-type="wysyj" data-target="abs"
data-textarea="abs1" data-commentId="1">我也说一句</span>
</li>
<li class="ar-commont-citem-last" id="abs">
<textarea class="ar-citem-last-b" id="abs1"></textarea>
<span class="ar-citem-last-c" data-type="fb">发表</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12">
<div class="side-item side-item-1">
<div class="side-tip"><i class="fa fa-user-o"></i>本站信息</div>
<div class="side-bk-content">
<img class="side-bk-a" src="img/b_1.jpg" />
<div class="side-bk-b">
<span class="side-bk-c">键盘上的灵魂舞者</span>
<span class="side-bk-d">我是一名专业的程序员，不是一个键盘侠</span>
</div>
</div>
</div>
<ul class="side-item side-bk-ul">
<li class="side-bk-e">
<span>文章</span><span class="side-bk-f">123</span>
</li>
<li class="side-bk-e">
<span>留言</span><span class="side-bk-f">123</span>
</li>
<li class="side-bk-e">
<span>访问总量</span><span class="side-bk-f">123</span>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="side-item">
<div class="side-tip"><i class="fa fa-list"></i>热门文章</div>
<ul class="side-content">
<li class="side-rm-a">这是文章标题这是文章标题这是文章标题这是文章标题</li>
<li class="side-rm-b">阅读量: 123</li>
<li class="side-rm-a">这是文章标题这是文章标题这是文章标题是文章
标题这是文章标题</li>
<li class="side-rm-b">阅读量: 123</li>
<li class="side-rm-a">这是文章标题这是文章标章标题这是文章标题</li>
<li class="side-rm-b">阅读量: 123</li>
<li class="side-rm-a">这是文章标题这是文章标题这是文章标题这是文
是文章标题章标题是文章标题</li>
<li class="side-rm-b">阅读量: 123</li>
<li class="side-rm-a">这是文章标题这是文章标题这是文章标题这是文
是文章标题章标题是文章标题</li>
<li class="side-rm-b">阅读量: 123</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="side-item">
<div class="side-tip"><i class="fa fa-bookmark-o"></i>个人分类</div>
<div class="side-gr-content">
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">MySql</a>
<a class="side-gr-a" href="#">JavaScript</a>
<a class="side-gr-a" href="#">bookmark</a>
<a class="side-gr-a" href="#">side</a>
<a class="side-gr-a" href="#">item</a>
<a class="side-gr-a" href="#">热门文章</a>
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">MySql</a>
<a class="side-gr-a" href="#">JavaScript</a>
<a class="side-gr-a" href="#">bookmark</a>
<a class="side-gr-a" href="#">side</a>
<a class="side-gr-a" href="#">item</a>
<a class="side-gr-a" href="#">热门文章</a>
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">Java</a>
<a class="side-gr-a" href="#">Java</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="side-item">
<div class="side-tip"><i class="fa fa-fire"></i>最新评论</div>
<ul class="side-pl-content">
<li class="side-pl-d">
<a href="#">文章标题文章标题文章标题文章文章标题文章标题文章标题</a>
</li>
<li class="side-pl-a">
<span class="side-pl-b">游客1 评论内容评论内容评论内容评论内评论内评论内评论内评论内容评论内容</span>
</li>
<li class="side-pl-d">
<a href="#">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</a>
</li>
<li class="side-pl-a">
<span class="side-pl-b">游客1 评论内容评论内容评论内容评评论内评论内论内容评论内容</span>
</li>
<li class="side-pl-d">
<a href="#">文章标题文章文章标题文章标题</a>
</li>
<li class="side-pl-a">
<span class="side-pl-b">游客1: 评论内容评论内容评论内容评论内容评论内容</span>
</li>
<li class="side-pl-d">
<a href="#">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</a>
</li>
<li class="side-pl-a">
<span class="side-pl-b">游客1 评论内容评论内容评论内容评评论内评论内评论
内评论内评论内论内容评论内容内评论内评论内论内容评论内容内评论内评论内论内容评论内容
内评论内评论内论内容评论内容内评论内评论内论内容评论内容</span>
</li>
<li class="side-pl-d">
<a href="#">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</a>
</li>
<li class="side-pl-a">
<span class="side-pl-b">游客1 评论内容评论内容评论内容评论内容评论内容</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-top">
</div>
<div class="footer-bottom">
Copyright © 2009-2017 键盘上的灵魂舞者 Power by 鲁ICP备12012589号
</div>
</footer>
</body>
<script src="tool/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script src="tool/jquery3.3.1.js"></script>
<script src="tool/bootstrap.min.js"></script>
<script src="tool/color-thief.js"></script>
<script src="js/common.js"></script>
<script src="js/comment.js"></script>
<script src="js/article.js"></script>
</html>