Welcome to GuangzhuL's site

My Blog


  • Startseite

  • Archiv

  • Tags

浏览器缓存机制

Veröffentlicht am 2017-09-05

一、浏览器缓存机制流程

  1. 首次加载网页内容
    首次加载网页读取流程
  2. 再次加载网页内容
    再次加载网页内容读取流程

    二、相关术语的解释

  3. Etag
    HTTP协议规格说明定义ETag为“被请求变量的实体值”。另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端,以下是服务器端返回的格式:ETag:”50b1c1d4f775c61:df3”客户端的查询更新格式是这样的:If-None-Match : W / “50b1c1d4f775c61:df3”如果ETag没改变,则返回状态304然后不返回,这也和Last-Modified一样。测试Etag主要在断点下载时比较有用。
  4. Last-Modified
    在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是客户端请求的资源,同时有一个Last-Modified的属性标记此文件在服务器端最后被修改的时间。
    Last-Modified格式类似这样:

    1
    Last-Modified : Fri , 12 May 2006 18:53:33 GMT

    客户端第二次请求此URL时,根据HTTP协议的规定,浏览器会向服务器传送If-Modified-Since报头,询问该时间之后文件是否有被修改过:

    1
    If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT

    如果服务器端的资源没有变化,则自动返回 HTTP 304(Not Changed.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

  5. Expires
    Expires是RFC 2616(HTTP/1.0)协议中和网页缓存相关字段。用来控制缓存的失效日期,要注意的是,HTTP/1.0有一个功能比较弱的缓存控制机制:Pragma,使用HTTP/1.0的缓存将忽略Expires和Cache-Control头。
  6. Cache-control
    Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。
    cache-control 定义是:

    1
    Cache-Control = “Cache-Control” “:” cache-directive。

    网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。
    常用 cache-directive 值

一张图读懂react的state和props之间的关系

Veröffentlicht am 2017-09-05

通过下面这张图片可以轻易看到state和props的关系,其实两者的目的都是为了通过写上this.state.xx或者this.props.xx来获取前面的某个属性的值,只是不同的是,用state的话,就是父组件用来获取初始状态的;而props是子组件用来获取父组件里面设置好的数据的。
react的state和pros

JQuery的toggle()方法把元素隐藏了的解决方案

Veröffentlicht am 2017-09-05

JQuery的toggle()方法把元素隐藏了的解决方案

JQuery的toggle()本来是用来切换几种状态之间的变化的,但是我们在使用的时候,遇到了一种情况就是被绑定toggle()的元素被隐藏了,根本没有达到我们要的效果,本文将解释这种情况的原因。

  1. toggle()原本应该实现的功能

    ![toggle()切换颜色](http://img.blog.csdn.net/20170720151639580?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzc5NDMyOTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    由上图可以看到,不断按下按钮,页面的颜色将会被不断改变,然后重复循环。其循环的过程是根据函数的书写顺序,如下
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $(document).ready(function(){
    $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
    );
    });
  2. toggle()现在使用发生的情况

    如果现在采用最新的Jquery版本来书写代码,那么如果用到了toggle()这个函数,将会发现被绑定的那个元素如果本来是显示的,那么将被隐藏,如果原本那个元素是隐藏的,将会被显示。

  3. 原因

    为什么会出现这种情况,原来在jQuery 1.9版本之后,toggle()发生了变化,以下是官网的Notes:

    Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation methodnamed .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of argumentspassed.

    在早期的版本,存在两个同名的toggle(),但是所执行的方法却是不一样的:
    第一种:

1
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
> Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks. 第二种:
1
.toggle( [duration ] [, complete ] )
> Description: Display or hide the matched elements. 而之后的版本把第一个toggle()函数给去掉了,导致用于调用切换功能时会把元素隐藏了。
  1. 现在新版本下的toggle()的功能实现

    toggle()实现隐藏/显示

    通过上图W3C的实例可以看到,按下按钮,<p>This is a paragraph.</p>里面的代码将会消失,再按一次,代码里面的内容将再次被显示,再按下就是消失,如此循环重复。

  2. 其他的实现显示\隐藏切换的方法
1
2
3
4
5
6
7
8
9
10
11
$(".menu-title").click(function() {
if ($(this).next().css('display') == 'block') {
$(this).css("background-color", "#203263");
$(this).next().slideUp();
}else {
$(".menu-title").css("background-color", "#203263");
$(this).css("background-color", "#204494");
$(".menu").slideUp();
$(this).next().slideDown();
}
});
通过`$(this).next().css('display') == 'block'`可以判断某元素的显示或者隐藏状态,故实现这个功能。

JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案

Veröffentlicht am 2017-09-05

###1 问题的描述
媒体查询针对不同的屏幕宽度大小对某元素调整样式,而JS事件针对不同的操作对某元素进行操作,当JS事件和媒体查询针对的是同一元素进行样式改变的操作时,会出现一个问题,就是当JS改变了该元素的样式之后,当媒体查询再次满足时,该元素应该被媒体查询改变的样式却没有生效,该元素依然保持着JS事件改变后的样式。

###2 问题的举例
例如,JS改变样式通常有两种办法,第一种通常是

1
$(".arrow").css("right","0");

例如上面的代码,控制$(".arrow")的样式发生改变,让其css("right","0"),在这种情况下,一旦JS事件被触发,$(".arrow")的属性right就一直都是0,尽管当媒体查询满足了触发的条件,样式改变都不会生效,例如

1
2
3
4
5
@media only screen and (max-width: 940px) {
.sidebar .arrow {
right: 10px;
}
}

上面是把.arrow的属性right改为10px,可是该媒体查询与JS事件有冲突,故不生效。

###3 问题解决办法
不要利用Jq的$("").css()方法去操作,而是利用Jq的$("").addClass()方法来操作样式便可以解决这个问题,利用的是样式覆盖的道理达到效果,当JS的事件被执行完了,不想让right:0的样式保留着影响效果,可以利用$("").removeClass()的方法移除样式,这样就可以达到既保留自己的变化效果,又可以保留媒体查询的效果。例如:

1
2
3
4
5
$(".sidebar").hover(function(){
$(".arrow").addClass("r-0");
},function(){
$(".arrow").removeClass("r-0");
});

###4 注意的问题
利用$("").addClass()所添加的样式r-0,要确保它的权重比原本默认的样式权重要高,不然没办法达到替换的效果。例如
默认样式

1
2
3
.sidebar .arrow {
right: 10px;
}

高权重样式

1
2
3
.sidebar .arrow.r-0 {
right: 0;
}

用CSS对DIV画三角形

Veröffentlicht am 2017-09-05

###1 原理
一个div,当它的宽和高都是0的时候,它便是一个点。
于是当给它border样式的时候,便发生了以下的变化:

1
2
3
4
5
6
7
8
9
10
<style>
div {
width: 0;
height: 0;
border-left: 100px solid yellow;
border-right: 100px solid red;
border-top: 100px solid blue;
border-bottom: 100px solid green;
}
</style>

图片

###2 画三角形方法
只需要将要保留的那边的三角形对应的border保留下来,而保留下来的三角行两边的border设为透明样式即可,比如我要保留右边三角形,只需要:

1
2
3
4
5
6
7
8
9
10
<style>
div {
width: 0;
height: 0;
/*border-left: 100px solid yellow;*/
border-right: 100px solid red;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
</style>

三角形

其他同理可得,只需要将保留的border相邻两边的样式设为透明transparent即可。

12
GuangzhuL

GuangzhuL

This wetsize has all my articles

9 Artikel
© 2017 GuangzhuL
Erstellt mit Hexo
Theme - NexT.Muse