面试题目复习

XSS和CSRF定义和防御

XSS(Cross Site scripting) :跨站脚本,指的是当Dom树渲染过程中发生了不在预期内的JS脚本执行。
XSS防御：对输入和URL参数进行过滤，对输出进行编码，即对提交的内容和URL参数进行过滤，过滤掉会导致脚本执行的内容，然后对动态输出到页面内容的HTML进行编码。
CSRF(Cross Site Request Forgery)跨站请求伪造，即别的站点伪造了一个请求。就是当一个受害者访问网站，其cookie没有过期的情况下，攻击者伪造发送一个链接地址给受害者并欺骗其点击访问。
CSRF防御：在请求地址中添加Token验证，验证Http Referer 字段，在HTTP头中自定义属性并验证

localStorage cookie 和 SessionStorage的区别

localStorage:储存在本地，具有永久有效期，也有大小限制，但比cookie大
cookie：储存在本地，具有有效期，是自定义的有效期，最大为4K，一次最多保存20个cookie，只适合保存小的数据
sessionStorage：储存在服务器，具有有效期为一次会话期间

cooie不安全，考虑安全性能应用sessin。
cookie数据始终在同源的http请求中携带即服务器和浏览器之间传递
cookie有path概念，只属于某个路径下
localStorage适合保存持久性数据，而cookie和SessionStorage适合保存浏览器和窗口关闭的数据

浏览器输入网址到渲染出来的过程

1.DNS解析
2.TCP链接
3.发送HTTP请求
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.链接结束

HTTP状态码

200 OK 请求成功。一般用于GET与POST请求
201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分GET请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303 See Other 查看其它地址。与301类似。使用GET和POST请求查看

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的HTTP状态码

307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

500 Internal Server Error 服务器内部错误，无法完成请求

501 Not Implemented 服务器不支持请求的功能，无法完成请求

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

GET和POST的区别

GET不同浏览器大小不一样 大部分限制在2~8K，更常见的在1K内
GET产生一个数据包，POST两个
GET和POST的底层也是TCP/IP 都是TCP连接
GET 会把http 的 header和data一起发送，服务器响应200，而POST会先发送header 等待服务器响应100后再发送data 再响应200

WEB性能优化

降低请求量：懒加载，合并资源，减少http请求数，gzip压缩
加快请求速度：cdn分发，并行加载，预解析DNS,减少域名数量
缓存：HTTP，localStorage ， mainfest
渲染：JS/CSS优化，加载顺序

强缓存和协商缓存

1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;

2.协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

两者的共同点是，都是从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求。

为什么要有进程和线程

进程：为了实现多个程序能够并发执行，提高资源利用率和系统吞吐量
线程：相比进程来讲，线程的开销比较小，切换效率比较高，进程间数据独立，通信开销大而线程间共享数据通信开销小。另外还有使多CPU系统更加有效，改善程序结构等优点。

transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

BFC

块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
计算BFC的高度时，浮动元素也会参与计算

float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption，flex，inline-flex的元素

overflow不为visible的元素

实现居中的方法

(1)margin:auto法
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:

定位为上下左右为0，margin：0可以实现脱离文档流的居中.

(2)margin负值法

.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /height的一半/

margin-left: -240px; /width的一半/

}

补充：其实这里也可以将marin-top和margin-left负值替换成，
transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

css:
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
(4)利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

css:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}

关于js动画和css3动画的差异性

js功能性更好
css3比js实现更简单，性能跳优方向稳定
css3对于低版本浏览器帧数更差的能做到自然降级
css3动画有天然的事件支持
css3有兼容性问题

多行文本隐藏

display:-webkit-box
-webkit-line-clamp:3
-webkit-box-orient:vertical
overflow:hidden

visibility:hidden, opacity:0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

双边距重叠问题（外边距折叠）

折叠结果：
两个都是正数 则取最大的那个
两个都是负数 取绝对值比较大的那个
一正一负 取两数相加

浮动清除

在浮动元素后面添加一个div ，里面有个类为clear ，对clear类添加clear：both
对浮动元素的容器添加overflow:hidden
对浮动元素的容器的伪元素：after添加三个属性：content:"",display:block,clear:both
对浮动元素的容器添加float

如何实现图片在某个容器中居中的？

.
父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
父元素固定宽高，子元素设置position: absolute，margin：auto平均分配margin

css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。

将父元素设置成display: table, 子元素设置为单元格 display: table-cell。

弹性布局display: flex。设置align-items: center; justify-content: center

如何实现元素的垂直居中

参考回答：
法一：父元素display:flex,align-items:center;
法二：元素绝对定位，top:50%，margin-top：-（高度/2）

法三：高度不确定用transform：translateY（-50%）

法四：父元素table布局，子元素设置vertical-align:center;

减少重排和重绘

导致重排的原因：
添加或删除可见的DOM元素
元素位置改变
元素本身的尺寸发生改变
内容改变
页面渲染器初始化
浏览器窗口大小发生改变

一些减少手段：
js改变css样式的时候用cssText进行代替
如var el = document.querySelector(’.el’);
el.style.borderLeft = ‘1px’;
el.style.borderRight = ‘2px’;
el.style.padding = ‘5px’;
换成var el = document.querySelector(’.el’);
el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px’;
本来要有三次重排。后面这种只要一次
不在布局信息改变时做DOM查询，
使用fragment
let fragment = document.createDocumentFragment();
appendNode(fragment, data);
ul.appendChild(fragment);
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素
缓存布局信息 如对offset取值的时候会导致重排确认然后可以先把offset的值获取了 不然对offsetLeft offsetTop取值会重排两遍

get长度限制问题

HTTP 协议 未规定 GET 和POST的长度限制

GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度

不同的浏览器和WEB服务器，限制的最大长度不一样

要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte

js New一个对象后做了什么事情

先new一个空对象出来，然后这个对象的_proto_指向构造函数的prototype属性，执行构造函数后返回这个对象

Ajax解决浏览器缓存问题

在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。

在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。

在URL后面加上一个随机数： “fresh=” + Math.random()。

在URL后面加上时间搓：“nowtime=” + new Date().getTime()。

如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

防抖和节流

防抖：function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay) // 简化写法
}
}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log(‘滚动条位置：’ + scrollTop);
}
window.onscroll = debounce(showTop,1000)
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

节流：function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
/* 请注意，节流函数并不止上面这种实现方案,
例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
*/
// 以下照旧
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log(‘滚动条位置：’ + scrollTop);
}
window.onscroll = throttle(showTop,1000)

如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离

深度拷贝对象

function deepClone(obj){
var newObj= obj instanceof Array?[]:{}
for(var a in obj){
var temp=obj[a] instanceof Object?deepClone(obj[a]):obj[a];
newObj[a]=temp;
}
return newObj;
}

defineProperty的一些东西

当设置enumerable成false的时候，不可被for in遍历并且找不到Object.keys(obj)和JSON.stringfy(obj)里面包含这个属性。
实例对象无法添加原型上的属性和方法。
基本包装类型如Object, Array, Number等的对象，直接遍历他们创建的实例对象，用for…in循环是遍历不出属性来的，因为这样遍历的是基本包装类型的实例对象的原型属性，而原型属性是不可被遍历的
如var num=new Number()
for(var a in num){
console.log(a) //打印不出来
}
但是如果给基本类型的prototype添加属性方法，这些添加的属性是可遍历的
Number.prototype.xx = function(){
console.log(‘xx’);
}
var num=new Number()
for(var a in num){
console.log(“num.” + pro + " = " + num[pro]);
}

Object .is 和 == 和 ===的区别

Object.is(‘foo’, ‘foo’); // true
Object.is(window, window); // true

Object.is(‘foo’, ‘bar’); // false
Object.is([], []); // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false

Object.is(null, null); // true

// 特例
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true

requestAnimationFrame特点

【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

判断数组

instanceof
Object.prototype.toString.call(array)

js语言特性

不用预编译，直接解析执行
是弱类型语言，比较灵活
与操作系统无关，跨平台语言
运行在客户端浏览器上
解释性语言，脚本语言

JS实现跨域

JSONP：通过动态创建script，再请求一个带参网址实现跨域通信。document.domain + iframe跨域：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
location.hash + iframe跨域：a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

window.name + iframe跨域：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。

postMessage跨域：可以跨域操作的window属性之一。

CORS：服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，前后端都需要设置。

代理跨域：启一个代理服务器，实现数据的转发

有一个游戏叫做Flappy Bird，就是一只小鸟在飞，前面是无尽的沙漠，上下不断有钢管生成，你要躲避钢管。然后小明在玩这个游戏时候老是卡顿甚至崩溃，说出原因（3-5个）以及解决办法（3-5个）

参考回答：
原因可能是：
1.内存溢出问题。

2.资源过大问题。

3.资源加载问题。

4.canvas绘制频率问题

解决办法：

1.针对内存溢出问题，我们应该在钢管离开可视区域后，销毁钢管，让垃圾收集器回收钢管，因为不断生成的钢管不及时清理容易导致内存溢出游戏崩溃。

2.针对资源过大问题，我们应该选择图片文件大小更小的图片格式，比如使用webp、png格式的图片，因为绘制图片需要较大计算量。

3.针对资源加载问题，我们应该在可视区域之前就预加载好资源，如果在可视区域生成钢管的话，用户的体验就认为钢管是卡顿后才生成的，不流畅。

4.针对canvas绘制频率问题，我们应该需要知道大部分显示器刷新频率为60次/s,因此游戏的每一帧绘制间隔时间需要小于1000/60=16.7ms，才能让用户觉得不卡顿。

JS全排列

var arr=[1,2,3]
function fullSort(arr,index){
if(index===arr.length-1){
console.log(arr);
return;
}
for(var i=index;i<arr.length ;i++){
swap(i,index);
fullSort(arr,index+1);
swap(index,i);
}
function swap(a,b){
var temp=arr[a];
arr[a]=arr[b];
arr[b]=temp;
}
}
fullSort(arr,0)

JS继承的实现方式

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || ‘Animal’;
// 实例方法
this.sleep = function(){
console.log(this.name + ‘正在睡觉！’);
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + ‘正在吃：’ + food);
};
1、原型链继承
核心： 将父类的实例作为子类的原型

function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = ‘cat’;

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat(‘fish’));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true
特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现
缺点：

要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
无法实现多继承
来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）（详细请看附录代码： 示例1）
创建子类实例时，无法向父类构造函数传参
推荐指数：★★（3、4两大致命缺陷）

2017-8-17 10:21:43补充：感谢 MMHS 指出。缺点1中描述有误：可以在Cat构造函数中，为Cat实例增加实例属性。如果要新增原型属性和方法，则必须放在new Animal()这样的语句之后执行。

2018-9-10 00:03:45补充：感谢 IRVING_J 指出。缺点3中的描述不够充分。更正为：来自原型对象的所有属性被所有实例共享。

2、构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
特点：

解决了1中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）
缺点：

实例并不是父类的实例，只是子类的实例
只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
推荐指数：★★（缺点3）

3、实例继承
核心：为父类实例添加新特性，作为子类实例返回

function Cat(name){
var instance = new Animal();
instance.name = name || ‘Tom’;
return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
特点：

不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果
缺点：

实例是父类的实例，不是子类的实例
不支持多继承
推荐指数：★★

4、拷贝继承
function Cat(name){
var animal = new Animal();
for(var p in animal){
Cat.prototype[p] = animal[p];
}
// 2020年10月10日21点36分：感谢 @baclt 的指出，如下实现修改了原型对象，会导致单个实例修改name，会影响所有实例的name值
// Cat.prototype.name = name || ‘Tom’; 错误的语句，下一句为正确的实现
this.name = name || ‘Tom’;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
特点：

支持多继承
缺点：

效率较低，内存占用高（因为要拷贝父类的属性）
无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）
推荐指数：★（缺点1）

5、组合继承
核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
Cat.prototype = new Animal();

// 感谢 @学无止境c 的提醒，组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
特点：

弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）
推荐指数：★★★★（仅仅多消耗了一点内存）

6、寄生组合继承
核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

感谢 @bluedrink 提醒，该实现没有修复constructor。

Cat.prototype.constructor = Cat; // 需要修复下构造函数
特点：

堪称完美
缺点：

实现较为复杂
推荐指数：★★★★（实现复杂，扣掉一颗星）

转载自博客园的幻天芒

gulp和webpack的区别

gulp主要定义前端开发的工作流程，通过配置一系列task如文件压缩，雪碧图，启动server，然后控制task执行顺序，来让gulp执行这些task，从而构建整个前端开发的流程
webpack是前端模块化方案，侧重于模块打包，如图片，css，js等都看成模块，然后通过oader和plugins等进行模块打包成符合生产环境部署的前端资源

页面调度算法

1、先进先出调度算法（FIFO，First In First Out）

先进先出调度算法是根据页面进入内存的时间先后选择调度页面，该算法实现时需要将页面按照进入的时间先后组成一个队列，每次优先淘汰队首页面。他的优点是比较容易实现，能够利用主存储器中页面调度情况的历史信息，但是，他没有反映程序的局部性，因为最先调入主存的页面，很可能也是经常要使用的页面。

2、最近最不常用调度算法(LFU, Least Frequently Used)

也就是淘汰一定时期内被访问次数最少的页面，LFU关键是看一定时间段内页面被使用的频率。

3、最近最少使用页面调度算法（LRU，Least Recently Used）

也就是首先淘汰最长时间未被使用的页面，LRU关键是看页面最后一次被使用到发生调度的时间长短。

4、时钟置换算法

为每一页设置访问位，将内存中所有页面通过连接指针接成循环队列，当页面被访问时访问位置1，每次淘汰时，从指针当前位置开始循环遍历，将访问位为1的置为0，找到第一个访问位为0的将其淘汰。

5、最佳置换算法

每次淘汰时，找一个未来最长时间才会被访问的页面进行淘汰。

优点：缺页率低

缺点：需要预测未来，无法实现，但可以用来衡量其他置换算法。