项目中的需求：点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。
 
而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)
 
什么是bfcache？
 
bfcache，即back-forward cache，可称为“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了DOM和JS的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发onload事件
 
pageshow事件
 
这个事件在用户浏览网页时触发，pageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， pageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
 
pagehide事件
 
该事件会在用户离开网页时触发。离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。pagehide 事件有时可以替代 unload事件，但 unload 事件触发后无法缓存页面。
 
persisted属性
 
pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。
 
　　对于pageshow事件，如果页面是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。
 　　对于pagehide事件，如果页面在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。
  
 
不同的浏览器在对当前窗口‘打开’历史记录中的前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置有关系。
 
解决方案：
 
javascript监听pageshow事件阻止页面进入bfcache
 
window.addEventListener('pageshow', function (e) {
     if (e.persisted) {
         window.location.reload()
     }
})
 
在uc和微信中测试通过，但是在某些安卓手机自带的浏览器中无效。
 
javascript监听pagehide事件阻止页面进入bfcache
 
window.addEventListener('pagehide', function (e) {
    var dom = document.body;
    dom.children.remove();
    setTimeout(function () {
        dom.appendChild("<script type='text/javascript'>window.location.reload();<\/script>");
    });
});
 
设置meta标签，清除页面缓存
 
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
 
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
 Public指示响应可被任何缓存区缓存
 Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
 no-cache指示请求或响应消息不能缓存
 no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
 max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
 min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
 max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
 注：有些情况下设置清除缓存也没有起到作用，我自己做的这个h5页面就没有起到效果。具体情况还是要具体分析。
 
我遇到的情况：
 
<div class="content">
     <iframe id="iframe" src="https://cpu.baidu.com/xx/xx/xxx" frameborder="no" scrolling="no"></iframe>
</div>
 
这个iframe中的地址每次刷新页面都会有不同的内容推送给用户。进入iframe中的内容之后，按返回按钮返回来想进行页面自动刷新，为的就是让用户看到新的内容。
 
做法：
 
使用pageshow进行整个页面刷新
 
window.addEventListener('pageshow', function (e) {
     if (e.persisted) {
         window.location.reload()
     }
 })
 
这样可以实现。
 
后面又觉得不妥，没有因为这个小部分而进行整个页面刷新，想到了另一种思路：因为这个iframe中的内容是动态的，可以对其进行定时器设置，如下：
 
let iframe = document.getElementById('iframe')
 setInterval(() => {
     iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
 },15000)
 
这样也可以实现自己的功能。
 
最后可以结合一下：
 
let iframe = document.getElementById('iframe')
window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
        iframe.setAttribute("src", "https://cpu.baidu.com/xx/xx/xx");
    }
})
 
这样做也有好处，可以避免使用定时器，对网页的性能也是比较好。但是这个方法在返回的时候，可以看到iframe里面内容的重新加载，会有一个时间间隙。
 
另外还有两种方法监听页面离开返回：
 
方法一：
 
this.pushHistory();
 
 
       window.addEventListener("popstate", function(e) {
           //do something
            console.log("我监听到页面离开了")
        }，false);
 
 
    pushHistory: function() { //改方法添加了一个历史记录，路径为#，保证了不刷新页面，不直接后退。
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
 
参考知识点：History详解
 
https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
 
方法二：
 
document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );
  // 逻辑处理
});
 
Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。
 
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

<script type="text/javascript">

 
var state = ${state};

 
alert(state);

 </script>

 
计算机操作系统实验之页面置换算法（C语言）
 
实验目的
实验内容与基本要求
页面置换算法的基本内容
最佳置换算法
先进先出置换算法
最近最久未使用算法
    
实现思路
流程图
程序总流程图
OPT算法流程图
FIFO算法流程图
LRU算法流程图
    
全部代码
代码
实验截图
   
  
 

 
实验目的
 
1、了解内存分页管理策略
 
2、掌握一些基本的页面置换算法
 
实验内容与基本要求
 
用C，C++等语言编写程序，实现OPT、FIFO、LRU置换算法
 
页面置换算法的基本内容
 
页面置换算法是在当进程运行过程中，若其要访问的页面不在内存且内存已满时，要决定将哪个页面换出的算法。常见的页面置换算法包括最佳置换、先进先出置换、最近最久未使用置换和Clock置换等。本次的实验实现的算法包括最佳置换算法（OPT）、先进先出置换算法（FIFO）和最近最久未使用算法（LRU）。
 
页面置换算法涉及到一些概念如下：
 
缺页率：当需要访问的页面不在内存时称为缺页，此时需要将页面调入内存。缺页率就是要访问的页面不在内存中的概率。因此缺页率=缺页次数/要访问的页面总数。需要注意的是，缺页的时候不一定需要进行页面置换（如果内存还没满，直接将页面调入内存即可）。
置换率：置换就是将旧页面调出内存，新页面调进内存，即新页面代替旧页面的过程。置换率就是需要进行页面置换的概率。所以置换率=置换次数/要访问的页面总数。
命中率：就是要访问的页面恰好在内存中的概率。可以发现（缺页率+命中率=1）。
 
最佳置换算法
 
最佳置换算法，就是所选择内存中以后永远不再使用，或者是在未来最长的一段时间内不再被访问的页面来换出。
 

 用这种算法可以保证获得最低的缺页率，最低的置换次数，因此效率最高。然而在实际情况中，我们是无法知道哪个页面是未来最长时间内不再被访问的，所以实际上它是无法实现的。
 
先进先出置换算法
 
先进先出置换算法，就是选择内存中最先进入内存，在内存中呆的最久的页面来换出。它实现简单，但是效率不高。
 
 
 
最近最久未使用算法
 
最近最久未使用算法，是选择当前内存中，最久没有被访问的页面来换出。它是希望通过过去页面访问的情况，来预测未来页面的访问情况，但是页面过去与未来的走向之间并没有必然的联系，因此它的效率也不是十分高。
 
 
 
实现思路
 
无论采用哪个算法，当进程需要访问一个页面时，存在三种情况：
 
1.页面已经在内存中
 
2.页面不在内存中，但是此时内存还未满
 
3.页面不在内存中，且此时内存已满，需要把页面换出
 
不同算法的区别主要是决定换出哪个页面
 
 
最佳置换算法中，被换出的算法是在最长未来时间内不再被访问的页面。也就是说，需要计算出当前内存中页面的下一次访问位置，哪个页面的下一次访问位置最远，就将它换出。因此需要一个数组额外记录下次访问位置，每当访问完一个页面（不管这个页面是新换入的，还是早就在内存中的），都需要遍历剩下的页面号引用串，更新这个数组。
 
先进先出置换算法比较简单，用一个变量记录当前内存中最先进入页面的下标。由于页面都是按数组下标顺序保存的，因此每访问一个页面，该变量就加一。等变量等于数组长度时，再重新归零即可。
 
最近最久未使用算法有两种思路：1.与最佳置换算法类似，设置一个时间数组，记录从内存中页面上次访问至今的时间，哪个页面的时间最长则将它换出。如果要访问的页面已在内存中，则时间归零。当每次发起一个访问请求，则所有页面访问时间加一，更新该数组。2.用数组模拟队列的结构，队列头出队列尾入，每当需要访问新的页面时，就将数组内的数据前移一位，新页面加入数组最后。如果要访问的页面已在内存中，则用一个临时变量记录该页面，然后从该页面起的数据前移一位，把该页面加入数组最后（课本上说是用栈的结构，但是严格上来说，栈只允许一端出入。因此按照课本上的功能描述，实际应该采用的结构仍是队列）
 
流程图
 
程序总流程图
 
 
OPT算法流程图
 
 
FIFO算法流程图
 
 
LRU算法流程图
 
 
全部代码
 
代码
 
//
//  main.c
//  pageReplacement
//
//  Created by Apple on 2019/11/12.
//  Copyright © 2019 Yao YongXin. All rights reserved.
//

#include <stdio.h>

//初始化队列
void initializeList(int list[],int number){
    for (int i = 0; i < number; i ++) {
        list[i] = -1;
    }
}
//展示队列状态
void showList(int list[], int number){
    for (int i = 0; i < number; i ++) {
        printf("%2d",list[i]);
    }
    printf("\n");
}

//展示当前内存状态
void showMemoryList(int list[],int phyBlockNum){
    for (int i = 0; i < phyBlockNum; i ++) {
        if (list[i] == -1) {
            break;
        }
        printf(" |%d|",list[i]);
    }
    printf("\n");
}

void informationCount(int missingCount,int replaceCount,int pageNum){
    printf("缺页次数:%d   缺页率:%d/%d\n",missingCount,missingCount,pageNum);
    double result = (double)(pageNum - missingCount)/(double)pageNum;
    printf("置换次数:%d  命中率:%.2f\n",replaceCount,result);
}

//找到该页面下次要访问的位置
int getNextPosition(int currentPage,int currentPosition,int strList[],int pageNum){
    
    for (int i = currentPosition+1; i < pageNum; i ++) {
        if (strList[i] == currentPage) {
            return i;
        }
    }
    
    return 100;
}

//最佳置换算法
void replacePageByOPT(int memoryList[],int phyNum,int strList[],int pageNum){
    
    //置换次数
    int replaceCount = 0;
    //缺页次数
    int missingCount = 0;
    
    //记录在内存的物理块的下一次访问位置
    int nextPosition[phyNum];
    //初始化
    initializeList(nextPosition, phyNum);
    
    //记录当前页面的访问情况: 0 未访问
    int isVisited;
    
    for (int i = 0; i < pageNum; i ++) {
        isVisited = 0;
        //判断是否需要置换->内存已满且需要访问的页面不在内存中
        for (int j = 0; j < phyNum; j ++) {
            if (memoryList[j] == strList[i]) {
                //该页面已经存在内存中
                //记录下一次访问它的位置
                nextPosition[j] = getNextPosition(memoryList[j], i, strList, pageNum);
                
                //修改访问情况
                isVisited = 1;
                
                //展示
                printf("%d\n",strList[i]);
                break;
            }
            if (memoryList[j] == -1) {
                //页面不在内存中且内存未满->直接存入
                memoryList[j] = strList[i];
                nextPosition[j] = getNextPosition(memoryList[j], i, strList, pageNum);
                
                missingCount ++;
                
                //修改访问情况
                isVisited = 1;
                
                //展示
                printf("%d\n",strList[i]);
                showMemoryList(memoryList, phyNum);
                break;
            }
        }
        
        if (!isVisited) {
            
            //当前页面还没访问过
            //内存已满且当前访问不在内存中->进行置换
            //1.寻找到最晚才被访问到的页面
            int max = 0;
            for (int k = 1; k < phyNum; k ++) {
                if (nextPosition[max] < nextPosition[k]) {
                    max = k;
                }
            }
            
            
            //2.将该位置的页面换出
            memoryList[max] = strList[i];
            nextPosition[max] = getNextPosition(memoryList[max], i, strList, pageNum);
            
            missingCount ++;
            replaceCount ++;
            
            //展示
            printf("%d\n",strList[i]);
            showMemoryList(memoryList, phyNum);
        }
    }
    informationCount(missingCount, replaceCount,pageNum);
}
//先进先出置换算法
void replacePageByFIFO(int memoryList[],int phyNum,int strList[],int pageNum){
    
    //置换次数
    int replaceCount = 0;
    //缺页次数
    int missingCount = 0;
    
    //记录当前最早进入内存的下标
    int pointer = 0;
    
    //记录当前页面的访问情况: 0 未访问
    int isVisited = 0;
    for (int i = 0; i < pageNum; i ++) {
        isVisited = 0;
        
        //判断是否需要置换->内存已满且需要访问的页面不在内存中
        for (int j = 0; j < phyNum; j ++) {
            if (memoryList[j] == strList[i]) {
                //该页面已经存在内存中
                //修改访问情况
                isVisited = 1;
                //修改访问时间
                //展示
                printf("%d\n",strList[i]);
                break;
            }
            if (memoryList[j] == -1) {
                //页面不在内存中且内存未满->直接存入
                memoryList[j] = strList[i];
                //修改访问情况
                isVisited = 1;
                missingCount ++;
                //展示
                printf("%d\n",strList[i]);
                showMemoryList(memoryList, phyNum);
                break;
            }
        }
        
        if (!isVisited) {
            //当前页面还未被访问过->需要进行页面置换
            //直接把这个页面存到所记录的下标中
            memoryList[pointer] = strList[i];
            
            //下标指向下一个
            pointer ++;
            
            //如果到了最后一个，将下标归零
            if (pointer > phyNum-1) {
                pointer = 0;
            }
            
            
            missingCount ++;
            replaceCount ++;
            
            //展示
            printf("%d\n",strList[i]);
            showMemoryList(memoryList, phyNum);
        }
    }
    informationCount(missingCount, replaceCount, pageNum);
}

//最近最久未使用置换算法
void replacePageByLRU(int memoryList[],int phyNum,int strList[],int pageNum){
    
    //置换次数
    int replaceCount = 0;
    //缺页次数
    int missingCount = 0;

    //记录内存中最近一次访问至今的时间
    int timeRecord[phyNum];
    //初始化
    initializeList(timeRecord, phyNum);

    //记录当前页面的访问情况: 0 未访问
    int isVisited = 0;
    
    //记录已经在内存中的页面数量
    int pageCount = 0;
    for (int i = 0; i < pageNum; i ++) {
        isVisited = 0;
        
        //时间加一
        for (int p = 0; p < pageCount; p ++) {
            if (memoryList[p] != -1) {
                timeRecord[p] ++;
            }
        }
        
        //是否需要置换
        for (int j = 0; j < phyNum; j ++) {
            if (memoryList[j] == strList[i]) {
                //该页面已经存在内存中
                //修改访问情况
                isVisited = 1;
                //重置访问时间
                timeRecord[j] = -1;
                //展示
                printf("%d\n",strList[i]);
                break;
            }
            if (memoryList[j] == -1) {
                //页面不在内存中且内存未满->直接存入
                memoryList[j] = strList[i];
                pageCount ++;
                //修改访问情况
                isVisited = 1;
                //修改访问时间
                timeRecord[j] ++;
                
                missingCount ++;
                //展示
                printf("%d\n",strList[i]);
                showMemoryList(memoryList, phyNum);
                break;
            }
        }

        if (!isVisited) {
            //需要置换
            //1.遍历时间记录表，寻找最久未访问的页面所在的内存下标
            int max = 0;
            for (int k = 0; k < phyNum; k ++) {
                if (timeRecord[max] < timeRecord[k]) {
                    max = k;
                }
            }

            //2.将该位置的页面换出
            memoryList[max] = strList[i];
            timeRecord[max] = -1;
            
            missingCount ++;
            replaceCount ++;

            //展示
            printf("%d\n",strList[i]);
            showMemoryList(memoryList, phyNum);
            
        }
    }
    informationCount(missingCount, replaceCount, pageNum);
}

//最近最久未使用置换算法-2
//void replacePageByLRU(int memoryList[],int phyNum,int strList[],int pageNum){
//
//    int isVisited = 0;
//
//    //记录已经在内存中的页面数量
//    int pageCount = 0;
//    for (int i = 0; i < pageNum; i ++) {
//        isVisited = 0;
//        //判断内存是否需要换页
//        for (int j = 0; j < phyNum; j ++) {
//            if (memoryList[j] == strList[i]) {
//                //已经存在于内存中，把它换到队列尾部
//                int temp = memoryList[j];
//                for (int k = j; k < pageCount-1; k ++) {
//                    memoryList[k] = memoryList[k+1];
//                }
//                memoryList[pageCount-1] = temp;
//
//                //修改访问情况
//                isVisited = 1;
//                //修改访问时间
//                //展示
//                printf("%d\n",strList[i]);
//                break;
//            }
//
//            if (memoryList[j] == -1) {
//                //页面不在内存中且内存未满->直接存入
//                memoryList[j] = strList[i];
//                //修改访问情况
//                isVisited = 1;
//
//                pageCount ++;
//
//                //展示
//                printf("%d\n",strList[i]);
//                showMemoryList(memoryList, phyNum);
//                break;
//            }
//        }
//
//        if (!isVisited) {
//            //需要换页
//            //1.直接将数组整体往前移一位
//            for (int k = 0; k < phyNum; k ++) {
//                memoryList[k] = memoryList[k+1];
//            }
//            //2.将当前页面加到队尾
//            memoryList[phyNum-1] = strList[i];
//            //展示
//            printf("%d\n",strList[i]);
//            showMemoryList(memoryList, phyNum);
//        }
//
//
//    }
//}
int main(int argc, const char * argv[]) {
    
    //物理块的数量
    int phyBlockNum;
    printf("请输入物理块数量:\n");
    scanf("%d",&phyBlockNum);
    
    //生成内存队列
    int memoryList[phyBlockNum];
    //初始化内存状态
    initializeList(memoryList, phyBlockNum);
    //showMemoryList(memoryList,phyBlockNum);
    
    //页面数量
    int pageNum;
    printf("请输入要访问的页面总数:\n");
    scanf("%d",&pageNum);
    
    //保存页面号引用串
    int pageNumStrList[pageNum];
    printf("请输入要访问的页面号:\n");
    for (int i = 0; i < pageNum; i ++) {
        scanf("%d",&pageNumStrList[i]);
    }
    showList(pageNumStrList, pageNum);
    
    int chose;
    while (1) {
        printf("请选择所需的置换算法:\n");
        printf("1.OPT 2.FIFO 3.LRU 4.退出\n");
        scanf("%d",&chose);
        
        switch (chose) {
            case 1:
                showList(pageNumStrList, pageNum);
                replacePageByOPT(memoryList, phyBlockNum, pageNumStrList, pageNum);
                //重新初始化内存
                initializeList(memoryList, phyBlockNum);
                break;
            case 2:
                showList(pageNumStrList, pageNum);
                replacePageByFIFO(memoryList, phyBlockNum, pageNumStrList, pageNum);
                //重新初始化内存
                initializeList(memoryList , phyBlockNum);
                break;
            case 3:
                showList(pageNumStrList, pageNum);
                replacePageByLRU(memoryList, phyBlockNum, pageNumStrList, pageNum);
                //重新初始化内存
                initializeList(memoryList, phyBlockNum);
                break;
            default:
                return 0;
                break;
        }
    }
    
    return 0;
}
 
实验截图
 

 
 

这是一个简单的静态的html页面登录图片，之前写的，验证码方面没有搞懂，这里我重新参考了这里，但是部分功能还没有完善。仅供参考
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>静态页面登录测试</title> 
 
 <script language="javascript">
 window.onload = function() {
  createCode()
 }
 var code; //在全局定义验证码 
 function createCode() {
  code = "";
  var codeLength = 4; //验证码的长度 
  var checkCode = document.getElementById("code");
  var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
   'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 
  for(var i = 0; i < codeLength; i++) { //循环操作 
  var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35） 
   code += random[index]; //根据索引取得随机数加到code上 
  }
  checkCode.value = code; //把code值赋给验证码 
 }
 //校验验证码 
function validateLogin(){
    var sUserName = document.frmLogin.username.value ;
    var sPassword = document.frmLogin.password.value ;
    var inputCode = document.frmLogin.text_code.value;
    /*var sinputCode =document.frmLogin.inputcode.value ;  */
    if ((sUserName.length <= 0) || (sUserName=="")){
     alert("请输入用户名!");
     return false ;
    }
     
    if ((sPassword.length <= 0) || (sPassword=="")){
     alert("请输入密码!");
     return false ;
    }
    if ((inputCode.length<= 0) || (inputCode==NULL)){
        alert("请输入验证码!");
        return false ;
       }
   } 
  </script>
</head>
<body >
<fieldset>
<table background="images\e.jpg " width="933" height="412">
 <tr height="170">
 <td width="570px"> </td>
 <td> </td>
 </tr> 
 <tr>
<td> </td>        
<td><table>
<form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin"  >
 <tr>
 <td><label for="username">用户名：</label></td>
 <td><input type="text" name="username"  id="username" placeholder="input your name" size="20" maxlength="20" /></td>
 <td > </td>
 <td> </td>
 </tr>
 <tr>
 <td><label for="password">密  码：</label></td>
 <td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" )  this.value='';" /></td>
 <td> </td>
 <td> </td>
 </tr>
 <tr>
 <td><label for="text_code">验证码:</label></td>
 <td><input type="text" size="" name="text_code" id="text_code" /></td>
 <td><input type="button" id="code" onclick="createCode()" name=""></td>
 </tr>
 <tr>
 <td><input type="checkbox" name="zlogin" value="1">自动登录</td>
 </tr>
 </table>
 </td>
  <tr>
  <td> </td>   
  <td><table>
   <tr>
  <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>
  <td><input type="reset" name="rs" value="重置"></td>
  <td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
  </tr>
 </tr>
 </table>
 </td>
 </table>
</fieldset>
</form>
 
</body>
</html>
 
执行后如图