关于前端:前端常考面试题必备

PWA 应用过吗？serviceWorker 的应用原理是啥？

渐进式网络应用（PWA）是谷歌在 2015 年底提出的概念。基本上算是 web 应用程序，但在外观和感觉上与 原生 app相似。反对 PWA 的网站能够提供脱机工作、推送告诉和设施硬件拜访等性能。

Service Worker是浏览器在后盾独立于网页运行的脚本，它关上了通向不须要网页或用户交互的性能的大门。当初，它们已包含如推送告诉和后盾同步等性能。未来，Service Worker将会反对如定期同步或天文围栏等其余性能。本教程探讨的外围性能是拦挡和解决网络申请，包含通过程序来治理缓存中的响应。

事件触发的过程是怎么的

事件触发有三个阶段：

• window 往事件触发处流传，遇到注册的捕捉事件会触发
• 流传到事件触发处时触发注册的事件
• 从事件触发处往 window 流传，遇到注册的冒泡事件会触发

事件触发一般来说会依照下面的程序进行，然而也有特例，如果给一个 body 中的子节点同时注册冒泡和捕捉事件，事件触发会依照注册的程序执行。

// 以下会先打印冒泡而后是捕捉
node.addEventListener(
  'click',
  event => {console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {console.log('捕捉')
  },
  true
)

通常应用 addEventListener 注册事件，该函数的第三个参数能够是布尔值，也能够是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false，useCapture 决定了注册的事件是捕捉事件还是冒泡事件。对于对象参数来说，能够应用以下几个属性：

• capture：布尔值，和 useCapture 作用一样
• once：布尔值，值为 true 示意该回调只会调用一次，调用后会移除监听
• passive：布尔值，示意永远不会调用 preventDefault

一般来说，如果只心愿事件只触发在指标上，这时候能够应用 stopPropagation 来阻止事件的进一步流传。通常认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也能够阻止捕捉事件。

stopImmediatePropagation 同样也能实现阻止事件，然而还能阻止该事件指标执行别的注册事件。

node.addEventListener(
  'click',
  event => {event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行下面的函数，该函数不会执行
node.addEventListener(
  'click',
  event => {console.log('捕捉')
  },
  true
)

HTTP/1.0 HTTP1.1 HTTP2.0 版本之间的差别

• HTTP 0.9：1991 年, 原型版本，性能简陋，只有一个命令 GET, 只反对纯文本内容，该版本已过期。

• HTTP 1.0

  • 任何格局的内容都能够发送，这使得互联网不仅能够传输文字，还能传输图像、视频、二进制等文件。
  • 除了 GET 命令，还引入了 POST 命令和 HEAD 命令。
  • http 申请和回应的格局扭转，除了数据局部，每次通信都必须包含头信息（HTTP header），用来形容一些元数据。
  • 只应用 header 中的 If-Modified-Since 和 Expires 作为缓存生效的规范。
  • 不反对断点续传，也就是说，每次都会传送全副的页面和数据。
  • 通常每台计算机只能绑定一个 IP，所以申请音讯中的 URL 并没有传递主机名（hostname）

• HTTP 1.1 http1.1 是目前最为支流的 http 协定版本，从 1999 年公布至今，仍是支流的 http 协定版本。

  • 引入了长久连贯（persistent connection），即 TCP 连贯默认不敞开，能够被多个申请复用，不必申明 Connection: keep-alive。长连贯的连贯时长能够通过申请头中的 keep-alive 来设置
  • 引入了管道机制（pipelining），即在同一个 TCP 连贯里，客户端能够同时发送多个 申请，进一步改良了 HTTP 协定的效率。
  • HTTP 1.1 中新减少了 E-tag，If-Unmodified-Since, If-Match, If-None-Match 等缓存管制标头来管制缓存生效。
  • 反对断点续传，通过应用申请头中的 Range 来实现。
  • 应用了虚构网络，在一台物理服务器上能够存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个 IP 地址。
  • 新增办法：PUT、PATCH、OPTIONS、DELETE。

• http1.x 版本问题

  • 在传输数据过程中，所有内容都是明文，客户端和服务器端都无奈验证对方的身份，无奈保证数据的安全性。
  • HTTP/1.1 版本默认容许复用 TCP 连贯，然而在同一个 TCP 连贯里，所有数据通信是按秩序进行的，服务器通常在解决完一个回应后，才会持续去解决下一个，这样子就会造成队头阻塞。
  • http/1.x 版本反对 Keep-alive，用此计划来补救创立屡次连贯产生的提早，然而同样会给服务器带来压力，并且的话，对于单文件被一直申请的服务，Keep-alive 会极大影响性能，因为它在文件被申请之后还放弃了不必要的连贯很长时间。

• HTTP 2.0

  • 二进制分帧 这是一次彻底的二进制协定，头信息和数据体都是二进制，并且统称为 ” 帧 ”：头信息帧和数据帧。
  • 头部压缩 HTTP 1.1 版本会呈现 User-Agent、Cookie、Accept、Server、Range 等字段可能会占用几百甚至几千字节，而 Body 却常常只有几十字节，所以导致头部并重。HTTP 2.0 应用 HPACK 算法进行压缩。
  • 多路复用 复用 TCP 连贯，在一个连贯里，客户端和浏览器都能够同时发送多个申请或回应，且不必按程序一一对应，这样子解决了队头阻塞的问题。
  • 服务器推送 容许服务器未经请求，被动向客户端发送资源，即服务器推送。
  • 申请优先级 能够设置数据帧的优先级，让服务端先解决重要资源，优化用户体验。

死锁产生的起因？如果解决死锁的问题？

所谓死锁，是指多个过程在运行过程中因抢夺资源而造成的一种僵局，当过程处于这种僵持状态时，若无外力作用，它们都将无奈再向前推动。

零碎中的资源能够分为两类：

• 可剥夺资源，是指某过程在取得这类资源后，该资源能够再被其余过程或零碎剥夺，CPU 和主存均属于可剥夺性资源；
• 不可剥夺资源，当零碎把这类资源分配给某过程后，再不能强行发出，只能在过程用完后自行开释，如磁带机、打印机等。

产生死锁的起因：

（1）竞争资源

• 产生死锁中的竞争资源之一指的是 竞争不可剥夺资源（例如：零碎中只有一台打印机，可供过程 P1 应用，假设 P1 已占用了打印机，若 P2 持续要求打印机打印将阻塞）
• 产生死锁中的竞争资源另外一种资源指的是 竞争长期资源（长期资源包含硬件中断、信号、音讯、缓冲区内的音讯等），通常音讯通信程序进行不当，则会产生死锁

（2）过程间推动程序非法

若 P1 放弃了资源 R1，P2 放弃了资源 R2，零碎处于不平安状态，因为这两个过程再向前推动，便可能产生死锁。例如，当 P1 运行到 P1：Request（R2）时，将因 R2 已被 P2 占用而阻塞；当 P2 运行到 P2：Request（R1）时，也将因 R1 已被 P1 占用而阻塞，于是产生过程死锁

产生死锁的必要条件：

• 互斥条件：过程要求对所调配的资源进行排它性管制，即在一段时间内某资源仅为一过程所占用。
• 申请和放弃条件：当过程因申请资源而阻塞时，对已取得的资源放弃不放。
• 不剥夺条件：过程已取得的资源在未应用完之前，不能剥夺，只能在应用完时由本人开释。
• 环路期待条件：在产生死锁时，必然存在一个过程——资源的环形链。

预防死锁的办法：

• 资源一次性调配：一次性调配所有资源，这样就不会再有申请了（毁坏申请条件）
• 只有有一个资源得不到调配，也不给这个过程调配其余的资源（毁坏请放弃条件）
• 可剥夺资源：即当某过程取得了局部资源，但得不到其它资源，则开释已占有的资源（毁坏不可剥夺条件）
• 资源有序调配法：零碎给每类资源赋予一个编号，每一个过程按编号递增的程序申请资源，开释则相同（毁坏环路期待条件）

代码输入后果

var x = 3;
var y = 4;
var obj = {
    x: 1,
    y: 6,
    getX: function() {
        var x = 5;
        return function() {return this.x;}();},
    getY: function() {
        var y = 7;
        return this.y;
    }
}
console.log(obj.getX()) // 3
console.log(obj.getY()) // 6

输入后果：3 6

解析：

1. 咱们晓得，匿名函数的 this 是指向全局对象的，所以 this 指向 window，会打印出 3；
2. getY 是由 obj 调用的，所以其 this 指向的是 obj 对象，会打印出 6。

如何进攻 CSRF 攻打？

CSRF 攻打能够应用以下办法来防护：

• 进行同源检测，服务器依据 http 申请头中 origin 或者 referer 信息来判断申请是否为容许拜访的站点，从而对申请进行过滤。当 origin 或者 referer 信息都不存在的时候，间接阻止申请。这种形式的毛病是有些状况下 referer 能够被伪造，同时还会把搜索引擎的链接也给屏蔽了。所以个别网站会容许搜索引擎的页面申请，然而相应的页面申请这种申请形式也可能被攻击者给利用。（Referer 字段会通知服务器该网页是从哪个页面链接过去的）
• 应用 CSRF Token 进行验证，服务器向用户返回一个随机数 Token，当网站再次发动申请时，在申请参数中退出服务器端返回的 token，而后服务器对这个 token 进行验证。这种办法解决了应用 cookie 繁多验证形式时，可能会被冒用的问题，然而这种办法存在一个毛病就是，咱们须要给网站中的所有申请都增加上这个 token，操作比拟繁琐。还有一个问题是个别不会只有一台网站服务器，如果申请通过负载平衡转移到了其余的服务器，然而这个服务器的 session 中没有保留这个 token 的话，就没有方法验证了。这种状况能够通过扭转 token 的构建形式来解决。
• 对 Cookie 进行双重验证，服务器在用户拜访网站页面时，向申请域名注入一个 Cookie，内容为随机字符串，而后当用户再次向服务器发送申请的时候，从 cookie 中取出这个字符串，增加到 URL 参数中，而后服务器通过对 cookie 中的数据和参数中的数据进行比拟，来进行验证。应用这种形式是利用了攻击者只能利用 cookie，然而不能拜访获取 cookie 的特点。并且这种办法比 CSRF Token 的办法更加不便，并且不波及到分布式拜访的问题。这种办法的毛病是如果网站存在 XSS 破绽的，那么这种形式会生效。同时这种形式不能做到子域名的隔离。
• 在设置 cookie 属性的时候设置 Samesite，限度 cookie 不能作为被第三方应用，从而能够防止被攻击者利用。Samesite 一共有两种模式，一种是严格模式，在严格模式下 cookie 在任何状况下都不可能作为第三方 Cookie 应用，在宽松模式下，cookie 能够被申请是 GET 申请，且会产生页面跳转的申请所应用。

参考 前端进阶面试题具体解答

Cookie、LocalStorage、SessionStorage 区别

浏览器端罕用的存储技术是 cookie、localStorage 和 sessionStorage。

• cookie： 其实最开始是服务器端用于记录用户状态的一种形式，由服务器设置，在客户端存储，而后每次发动同源申请时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存工夫由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
• sessionStorage： html5 提供的一种浏览器本地存储的办法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保留的数据。它个别可能存储 5M 或者更大的数据，它在以后窗口敞开后就生效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
• localStorage： html5 提供的一种浏览器本地存储的办法，它个别也可能存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会生效，并且 localStorage 也只能被同源页面所访问共享。

下面几种形式都是存储大量数据的时候的存储形式，当须要在本地存储大量数据的时候，咱们能够应用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它外部采纳对象仓库的模式存储数据，它更靠近 NoSQL 数据库。

代码输入后果

const promise = new Promise((resolve, reject) => {console.log(1);
  setTimeout(() => {console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {console.log(res);
});
console.log(4);

输入后果如下：

1
2
4
timerStart
timerEnd
success

代码执行过程如下：

• 首先遇到 Promise 构造函数，会先执行外面的内容，打印1；
• 遇到定时器steTimeout，它是一个宏工作，放入宏工作队列；
• 持续向下执行，打印出 2；
• 因为 Promise 的状态此时还是 pending，所以promise.then 先不执行；
• 继续执行上面的同步工作，打印出 4；
• 此时微工作队列没有工作，继续执行下一轮宏工作，执行steTimeout；
• 首先执行 timerStart，而后遇到了resolve，将promise 的状态改为 resolved 且保留后果并将之前的 promise.then 推入微工作队列，再执行timerEnd；
• 执行完这个宏工作，就去执行微工作 promise.then，打印出resolve 的后果。

如何对我的项目中的图片进行优化？

1. 不必图片。很多时候会应用到很多润饰类图片，其实这类润饰图片齐全能够用 CSS 去代替。
2. 对于挪动端来说，屏幕宽度就那么点，齐全没有必要去加载原图节约带宽。个别图片都用 CDN 加载，能够计算出适配屏幕的宽度，而后去申请相应裁剪好的图片。
3. 小图应用 base64 格局
4. 将多个图标文件整合到一张图片中（雪碧图）

5. 抉择正确的图片格式：

   • 对于可能显示 WebP 格局的浏览器尽量应用 WebP 格局。因为 WebP 格局具备更好的图像数据压缩算法，能带来更小的图片体积，而且领有肉眼辨认无差别的图像品质，毛病就是兼容性并不好
   • 小图应用 PNG，其实对于大部分图标这类图片，齐全能够应用 SVG 代替
   • 照片应用 JPEG

代码输入后果

const promise1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {throw new Error('error!!!')
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

输入后果如下：

promise1 Promise {<pending>}
promise2 Promise {<pending>}

Uncaught (in promise) Error: error!!!
promise1 Promise {<fulfilled>: "success"}
promise2 Promise {<rejected>: Error: error!!}

程度垂直居中的实现

• 利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 translate 来调整元素的中心点到页面的核心。该办法须要 思考浏览器兼容问题。

.parent {position: relative;} .child {position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);}

• 利用相对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，因为宽高固定，因而对应方向实现平分，能够实现程度和垂直方向上的居中。该办法实用于 盒子有宽高 的状况：

.parent {position: relative;}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• 利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 margin 负值来调整元素的中心点到页面的核心。该办法实用于 盒子宽高已知 的状况

.parent {position: relative;}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 本身 height 的一半 */
    margin-left: -50px;    /* 本身 width 的一半 */
}

• 应用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和程度方向上为居中对齐，而后它的子元素也能够实现垂直和程度的居中。该办法要 思考兼容的问题，该办法在挪动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

实现一个扇形

用 CSS 实现扇形的思路和三角形基本一致，就是多了一个圆角的款式，实现一个 90°的扇形：

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

实现一个三角形

CSS 绘制三角形次要用到的是 border 属性，也就是边框。

平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border 属性是右三角形组成的，上面看一个例子：

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

将元素的长宽都设置为 0

（1）三角 1

div {width: 0;    height: 0;    border-top: 50px solid red;    border-right: 50px solid transparent;    border-left: 50px solid transparent;}

（2）三角 2

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

（3）三角 3

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

（4）三角 4

div {
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

（5）三角 5

div {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

还有很多，就不一一实现了，总体的准则就是通过上下左右边框来管制三角形的方向，用边框的宽度比来管制三角形的角度。

三栏布局的实现

三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，三栏布局的具体实现：

• 利用 相对定位，左右两栏设置为相对定位，两头设置对应方向大小的 margin 的值。

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

• 利用 flex 布局，左右两栏设置固定大小，两头一栏设置为 flex:1。

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的 margin 值，留神这种形式，两头一栏必须放到最初：

.outer {height: 100px;}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

• 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。

.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

• 双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。

.outer {height: 100px;}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

如何优化动画？

对于如何优化动画，咱们晓得，个别状况下，动画须要频繁的操作 DOM，就就会导致页面的性能问题，咱们能够将动画的 position 属性设置为 absolute 或者fixed，将动画脱离文档流，这样他的回流就不会影响到页面了。

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

• strong 标签有语义，是起到减轻语气的成果，而 b 标签是没有的，b 标签只是一个简略加粗标签。b 标签之间的字符都设为粗体，strong 标签增强字符的语气都是通过粗体来实现的，而搜索引擎更偏重 strong 标签。
• title 属性没有明确意义只示意是个题目，H1 则示意档次明确的题目，对页面信息的抓取有很大的影响
• i 内容展现为斜体，em 示意强调的文本

对浏览器内核的了解

浏览器内核次要分成两局部：

• 渲染引擎的职责就是渲染，即在浏览器窗口中显示所申请的内容。默认状况下，渲染引擎能够显示 html、xml 文档及图片，它也能够借助插件显示其余类型数据，例如应用 PDF 阅读器插件，能够显示 PDF 格局。
• JS 引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有辨别的很明确，起初 JS 引擎越来越独立，内核就偏向于只指渲染引擎。

懒加载的特点

• 缩小无用资源的加载：应用懒加载显著缩小了服务器的压力和流量，同时也减小了浏览器的累赘。
• 晋升用户体验: 如果同时加载较多图片，可能须要期待的工夫较长，这样影响了用户体验，而应用懒加载就能大大的进步用户体验。
• 避免加载过多图片而影响其余资源文件的加载：会影响网站利用的失常应用。

CDN 的原理

CDN 和 DNS 有着密不可分的分割，先来看一下 DNS 的解析域名过程，在浏览器输出的解析过程如下：
（1）查看浏览器缓存
（2）查看操作系统缓存，常见的如 hosts 文件
（3）查看路由器缓存
（4）如果前几步都没没找到，会向 ISP(网络服务提供商) 的 LDNS 服务器查问
（5）如果 LDNS 服务器没找到，会向根域名服务器(Root Server) 申请解析，分为以下几步：

• 根服务器返回顶级域名 (TLD) 服务器如 .com，.cn，.org 等的地址，该例子中会返回 .com 的地址
• 接着向顶级域名服务器发送申请，而后会返回次级域名 (SLD) 服务器的地址，本例子会返回 .test 的地址
• 接着向次级域名服务器发送申请，而后会返回通过域名查问到的指标 IP，本例子会返回 www.test.com 的地址
• Local DNS Server 会缓存后果，并返回给用户，缓存在零碎中

CDN 的工作原理：（1）用户未应用 CDN 缓存资源的过程：

1. 浏览器通过 DNS 对域名进行解析（就是下面的 DNS 解析过程），顺次失去此域名对应的 IP 地址
2. 浏览器依据失去的 IP 地址，向域名的服务主机发送数据申请
3. 服务器向浏览器返回响应数据

（2）用户应用 CDN 缓存资源的过程：

1. 对于点击的数据的 URL，通过本地 DNS 零碎的解析，发现该 URL 对应的是一个 CDN 专用的 DNS 服务器，DNS 零碎就会将域名解析权交给 CNAME 指向的 CDN 专用的 DNS 服务器。
2. CND 专用 DNS 服务器将 CND 的全局负载平衡设施 IP 地址返回给用户
3. 用户向 CDN 的全局负载平衡设施发动数据申请
4. CDN 的全局负载平衡设施依据用户的 IP 地址，以及用户申请的内容 URL，抉择一台用户所属区域的区域负载平衡设施，通知用户向这台设施发动申请
5. 区域负载平衡设施抉择一台适合的缓存服务器来提供服务，将该缓存服务器的 IP 地址返回给全局负载平衡设施
6. 全局负载平衡设施把服务器的 IP 地址返回给用户
7. 用户向该缓存服务器发动申请，缓存服务器响应用户的申请，将用户所需内容发送至用户终端。

如果缓存服务器没有用户想要的内容，那么缓存服务器就会向它的上一级缓存服务器申请内容，以此类推，直到获取到须要的资源。最初如果还是没有，就会回到本人的服务器去获取资源。

CNAME（意为：别名）：在域名解析中，实际上解析进去的指定域名对应的 IP 地址，或者该域名的一个 CNAME，而后再依据这个 CNAME 来查找对应的 IP 地址。

DNS 记录和报文

DNS 服务器中以资源记录的模式存储信息，每一个 DNS 响应报文个别蕴含多条资源记录。一条资源记录的具体的格局为

（Name，Value，Type，TTL）

其中 TTL 是资源记录的生存工夫，它定义了资源记录可能被其余的 DNS 服务器缓存多长时间。

罕用的一共有四种 Type 的值，别离是 A、NS、CNAME 和 MX，不同 Type 的值，对应资源记录代表的意义不同：

• 如果 Type = A，则 Name 是主机名，Value 是主机名对应的 IP 地址。因而一条记录为 A 的资源记录，提供了标 准的主机名到 IP 地址的映射。
• 如果 Type = NS，则 Name 是个域名，Value 是负责该域名的 DNS 服务器的主机名。这个记录次要用于 DNS 链式 查问时，返回下一级须要查问的 DNS 服务器的信息。
• 如果 Type = CNAME，则 Name 为别名，Value 为该主机的标准主机名。该条记录用于向查问的主机返回一个主机名 对应的标准主机名，从而通知查问主机去查问这个主机名的 IP 地址。主机别名次要是为了通过给一些简单的主机名提供 一个便于记忆的简略的别名。
• 如果 Type = MX，则 Name 为一个邮件服务器的别名，Value 为邮件服务器的标准主机名。它的作用和 CNAME 是一 样的，都是为了解决标准主机名不利于记忆的毛病。