前端面试题(一起总结一起成长，定期更新，只有html，css ，js,vue 应该要单独写)

本文链接：https://blog.csdn.net/davico_tao/article/details/113929919

html, css 面试题收集

HTML

理解 HTML 语义化

用正确的标签来做正确的事，表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等，有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量。

html5 标签

表示结构的标签 <header> <nav> <main> <article> <section> <aside> <footer>
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

表示文字形式 <data>  <time>  <mark> 

嵌入内容 <video> <audio> <canvas>

标签

meta viewport 是做什么用的

是为了在移动端不让用户缩放页面使用的。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
 maximum-scale=1 指定用户能够放大的最大比例
 minimum-scale=1 指定用户能够缩小的最大比例

label 标签的作用

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签 相关的表单控件上。

a 标签中如何禁用 href 跳转页面或定位链接

	e.preventDefault();href="javascript:void(0);

canvas

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值

iframe 哪些优缺点

iframe 是一种框架，也是一种很常见的网页嵌入方
	iframe 的优点：
		1.iframe 能够原封不动的把嵌入的网页展现出来。
		2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个 页面内容的更改，方便快捷。
		3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌 套，可以增加代码的可重用。
	    4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
	iframe 的缺点： 
		1.会产生很多页面，不容易管理。 
		2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动 条，会分散访问者的注意力，用户体验度差。 
		3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好 的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。 
		4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。 
		5.iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。 现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。

HTML5 新特性

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的 数据在浏览器关闭后自动删除; 新的技术 webworker, websocket, Geolocation;

webworker
websocket
Geolocation

HTML5 离线储存

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户 机器上的缓存文件。 原理： HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通 过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后 当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 如何使用： 页面头部像下面一样加入一个 manifest 的属性

manifest

浏览器是怎么对 HTML5 的离线储存资源进行管理和加载

 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第 一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面， 然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做 任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源

CSS

几种获得宽高的方式

dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。 
dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取 到。但这种方式只有 IE 浏览器支持.
window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。
dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的
dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好的。

获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width 
获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth
网页全文的高度和宽度： document.body.scrollHeight/Width 
滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft 
网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth 
网页可见 区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

居中方式

水平方向上
针对 inline, 内联块 inline-block, 内联表 inline-table, inline-flex 元素及 img,span,button 等元素

.text_div{ text-align:center; }

不定宽块状元素居中

.text_div{ margin:0 auto;//且需要设置父级宽度 }

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{ float:left; position:relative; left:50%; clear:both; }
.wrap-center{position:relative;left:-50%;}

垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{ height: 120px; line-height: 120px; }

利用表布局

.father { display: table; }
.children { display: table-cell; vertical-align: middle; text-align: center; }

flex 布局

.center-flex { display: flex;
 flex-direction: column;//上下排列 
 justify-content: center; }

绝对布局方式

/*已知高度*/
.parent { position: relative; }
.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; } 
/*未知高度*/
.parent { position: relative; }
.child { position: absolute;top: 50%; transform: translateY(-50%); }

/*flex 方 式*/
 .parent { display: flex; justify-content: center; align-items: center; 
/*grid 方 式 */
.parent { height: 140px; display: grid; }
.child { margin: auto; }

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

还有居中很多方法

css 优先确定级

每个选择器都有权值，权值越大越优先 继承的样式优先级低于自身指定样式
 ！important 优先级最高 js 也无法修改 权值相同时，靠近元素的样式优先级高
 顺序为内联样式表（标签内部）> 内部样式表（当 前文件中）> 外部样式表（外部文件中）

如何清除浮动

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了 浮动后，父元素会发生高度塌陷）
万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）

	 float_div:after{
	   content:"";
	   clear:both;
	   display:block; 
	   height:0;
	   overflow:hidden;
	   visibility:hidden;
	       }
	   .float_div{ zoom:1 }
	   .clearfix:after { 
	   /*生成内容作为最后一个元素*/ 
	   content: ""; 
	   /*使生成的元素以块级元素显示,占满剩余空间*/
	    display: block; 
	    /*避免生成内容破坏原有布局的高度*/ 
	    height: 0; 
	    /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ 
	    visibility: hidden; 
	    /*清除浮动元素对当前元素的影响*/
	    clear: both;
	     }
	     .clearfix { /*用于兼容 IE, 触发 IE hasLayout*/ *zoom:1; }

清浮动

自适应布局

左侧浮动或者绝对定位，然后右侧 margin 撑开使用 div 包含，然后靠负 margin 形成 bfc 使用 flex，道理差不多，具体怎么做看什么布局

可以百度具体布局

画三角形

#item {
        width: 0; 
        height: 0;
        /* transparent 透明色*/
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent;
        border-top: 50px solid transparent;
        border-bottom: 50px solid blue;
        background: white; 
        }

三角形

盒模型

盒模型的组成，由里向外content,padding,border,margin. 内容(content)、填充(padding)、边界(margin)、 边框(border).
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度
box-sizing的使用
	box-sizing: content-box 是W3C盒子模型
 	box-sizing: border-box 是IE盒子模型
	box-sizing的默认属性是content-box

calc, support, media各自的含义及用法

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。

link @import 引入css

1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">
  @import url("css文件路径");
</style>

CSS 中 link 与@import 的区别
@import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 
加载页面时，link 引入的 CSS 被同时加载，@import 引入的 CSS 将在页面加载完毕后加载。 
link 标签作为 HTML 元素，不存在兼容性问题，而@import 是 CSS2.1 才有的语法，故老版本 浏览器（IE5 之前）不能识别。
可以通过 JS 操作 DOM，来插入 link 标签改变样式；由于 DOM 方法是基于文档的，无法使 用@import 方式插入样式。

1rem、1em、1vh、1px各自代表的含义rem

rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em 子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

画一条0.5px的直线

height: 1px;
transform: scale(0.5);

transform解释
 transform

display 相关

 block:div 等容器类型
 inline:img span 等行内类型 
 table 系列：将样式变成 table 类型 
 flex:重点把握，非常强大 
 grid:同上
inline-block:可设置宽度，两者间有一点间隙 
inherit:继承父级
[flex阮一峰](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[grid阮一峰](http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html)

一个页面从输入 URL 到页面加载显示完成，这个过程都发生了什么

分为 4 个步骤： 
（1），当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资 源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。 
（2）， 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包 括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间 传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由 客户端发出该请求已经被接受的报文。 
（3），一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远 程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确 的响应。 （4），此时，Web 服务器提供资源服务，客户端开始下载资源。请求返回后，便进入了我 们关注的前端模块 简单来说，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM 复制代码。

浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。
js,css 是否会出现堵塞问题 ，解决方案是什么

css堵塞和js堵塞

js 的阻塞特性：所有浏览器在下载 JS 下载、解析、执行完毕后才开始继续 JS，但是由于浏览器为了防止出现 DOM 树，需要重新构建嵌入 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。
css堵塞和j s堵塞

png、jpg、gif 这些图片格式解释一下，分别什么时候用。

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在 www 上，被用来储存和传输照片的格式。
gif 是一种位图文件格式，以 8 位色重现真色彩的图像。可以实现动画效果.
webp 格式是谷歌在 2010 年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png 小了 45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和 opera 支持

对 line-height 是如何理解

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS 中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height。单行文本垂直居中：把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中，其实也可以把 height 删除。多行文本垂直居中：需要设置 display 属性为 inline-block

如果需要手动写动画，你认为最小时间间隔是多久

多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms。

全屏滚动的原理是什么？用到了 CSS 的哪些属性

原理：有点类似于轮播，整体的元素一直排列下去，假设有 5 个需要展示的全屏页面，那么高度是 500%，只是展示 100%，剩下的可以通过 transform 进行 y 轴定位，也可以通过 margin-top 实现 overflow：hidden；transition：all 1000ms ease；
transition

margin 和 padding 分别适合什么场景使用

何时使用 margin：需要在 border 外侧添加空白空白处不需要背景色上下相连的两个盒子之间的空白，需要相互抵消时。何时使用 padding：需要在 border 内侧添加空白空白处需要背景颜色上下相连的两个盒子的空白，希望为两者之和。兼容性的问题：在 IE5 IE6 中，为 float 的盒子指定 margin 时，左侧的 margin 可能会变成两倍的宽度。通过改变 padding 或者指定盒子的 display：inline 解决。

HTTP

TCP/IP协议族里重要的一点就是分层。TCP/IP协议族按层次分别分为以下4层：应用层、传输层、网络层和数据链路层。
应用层

应用层决定了向用户提供应用服务时通信的活动。
TCP/IP 协议族内预存了各类通用的应用服务。比如，FTP（File
Transfer Protocol，文件传输协议）和 DNS（Domain Name System，域
名系统）服务就是其中两类。 HTTP 协议也处于该层。
传输层
传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据
传输。
在传输层有两个性质不同的协议：TCP（Transmission Control
Protocol，传输控制协议）和 UDP（User Data Protocol，用户数据报
协议）。
网络层（又名网络互连层）
网络层用来处理在网络上流动的数据包。数据包是网络传输的最小数
据单位。该层规定了通过怎样的路径（所谓的传输路线）到达对方计
算机，并把数据包传送给对方。
与对方计算机之间通过多台计算机或网络设备进行传输时，网络层所
起的作用就是在众多的选项内选择一条传输路线。
链路层（又名数据链路层，网络接口层）
用来处理连接网络的硬件部分。包括控制操作系统、硬件的设备驱
动、NIC（Network Interface Card，网络适配器，即网卡），及光纤等
物理可见部分（还包括连接器等一切传输媒介）。硬件上的范畴均在
链路层的作用范围之内。
按层次分，TCP 位于传输层，提供可靠的字节流服务。
所谓的字节流服务（Byte Stream Service）是指，为了方便传输，将大
块数据分割成以报文段（segment）为单位的数据包进行管理。而可
靠的传输服务是指，能够把数据准确可靠地传给对方。一言以蔽之，
TCP 协议为了更容易传送大数据才把数据分割，而且 TCP 协议能够
确认数据最终是否送达到对方。
确保数据能到达目标
为了准确无误地将数据送达目标处，TCP 协议采用了三次握手
（three-way handshaking）策略。用 TCP 协议把数据包送出去后，TCP
不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。
21握手过程中使用了 TCP 的标志（flag） —— SYN（synchronize）和
ACK（acknowledgement）。
发送端首先发送一个带 SYN 标志的数据包给对方。接收端收到后，
回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。最后，发
送端再回传一个带 ACK 标志的数据包，代表“握手”结束。

与URI（统一资源标识符）相比，我们更熟悉URL（UniformResource Locator，统一资源定位符）
URI 用字符串标识某一互联网资源，而 URL表示资源的地点（互联网上所处的位置）。可见 URL是 URI 的子集。

http 请求

GET：获取资源

GET 方法用来请求访问已被 URI 识别的资源。指定的资源经服务器
端解析后返回响应内容。也就是说，如果请求的资源是文本，那就保
持原样返回；如果是像 CGI（Common Gateway Interface，通用网关接
口）那样的程序，则返回经过执行后的输出结果。

POST：传输实体主体

POST 方法用来传输实体的主体。虽然用 GET 方法也可以传输实体的主体，但一般不用 GET 方法进行传输，而是用 POST 方法。虽说 POST 的功能与 GET 很相似，但 POST 的主要目的并不是获取响应的主体内容。

PUT：传输文件

PUT 方法用来传输文件。就像 FTP 协议的文件上传一样，要求在请求报文的主体中包含文件内容，然后保存到请求 URI 指定的位置。

HEAD：获得报文首部

HEAD 方法和 GET 方法一样，只是不返回报文主体部分。用于确认 URI 的有效性及资源更新的日期时间等。

DELETE：删除文件

DELETE 方法用来删除文件，是与 PUT 相反的方法。DELETE 方法按请求 URI 删除指定的资源。

OPTIONS：询问支持的方法

OPTIONS 方法用来查询针对请求 URI 指定的资源支持的方法。

持久连接

HTTP/1.1 和一部分的 HTTP/1.0 想出了持久连接（HTTP Persistent Connections，也称为 HTTP keep-alive 或 HTTP connection reuse）的方法。持久连接的特点是，只要任意一端没有明确提出断开连接，则保持 TCP 连接状态。

使用cookie进行状态管理

HTTP 是无状态协议，它不对之前发生过的请求和响应的状态进行管 理。也就是说，无法根据之前的状态进行本次的请求处理
假设要求登录认证的 Web 页面本身无法进行状态的管理（不记录已 登录的状态），那么每次跳转新页面不是要再次登录，就是要在每次 请求报文中附加参数来管理登录状态。 不可否认，无状态协议当然也有它的优点。由于不必保存状态，自然 可减少服务器的 CPU 及内存资源的消耗。从另一侧面来说，也正是 因为 HTTP 协议本身是非常简单的，所以才会被应用在各种场景里。
保留无状态协议这个特征的同时又要解决类似的矛盾问题，于是引入 了 Cookie 技术。Cookie 技术通过在请求和响应报文中写入 Cookie 信 息来控制客户端的状态。 Cookie 会根据从服务器端发送的响应报文内的一个叫做 Set-Cookie 的 首部字段信息，通知客户端保存 Cookie。当下次客户端再往该服务器 发送请求时，客户端会自动在请求报文中加入 Cookie 值后发送出 去。服务器端发现客户端发送过来的 Cookie 后，会去检查究竟是从哪一 个客户端发来的连接请求，然后对比服务器上的记录，最后得到之前 的状态信息。

获取部分内容的范围请求

以前，用户不能使用现在这种高速的带宽访问互联网，当时，下载一 个尺寸稍大的图片或文件就已经很吃力了。如果下载过程中遇到网络 中断的情况，那就必须重头开始。为了解决上述问题，需要一种可恢 复的机制。所谓恢复是指能从之前下载中断处恢复下载。 要实现该功能需要指定下载的实体范围。像这样，指定范围发送的请 求叫做范围请求（Range Request）。 对一份 10 000 字节大小的资源，如果使用范围请求，可以只请求 5001~10 000 字节内的资源。

通信数据转发程序：代理、网关、隧道

代理

代理是一种有转发功能的应用程序，它扮演了位于服务器和客户 端“中间人”的角色，接收由客户端发送的请求并转发给服务器，同时 也接收服务器返回的响应并转发给客户端。
代理服务器的基本行为就是接收客户端发送的请求后转发给其他服务 器。代理不改变请求 URI，会直接发送给前方持有资源的目标服务 器。持有资源实体的服务器被称为源服务器。从源服务器返回的响应经过 代理服务器后再传给客户端。
使用代理服务器的理由有：利用缓存技术（稍后讲解）减少网络带宽 的流量，组织内部针对特定网站的访问控制，以获取访问日志为主要 目的，等等。 
代理有多种使用方法，按两种基准分类。一种是是否使用缓存，另一 种是是否会修改报文。 
缓存代理 代理转发响应时，缓存代理（Caching Proxy）会预先将资源的副本 （缓存）保存在代理服务器上。 当代理再次接收到对相同资源的请求时，就可以不从源服务器那里获 取资源，而是将之前缓存的资源作为响应返回。 
透明代理 转发请求或响应时，不对报文做任何加工的代理类型被称为透明代理 （Transparent Proxy）。反之，对报文内容进行加工的代理被称为非 透明代理。

网关

网关是转发其他服务器通信数据的服务器，接收从客户端发送来的请 求时，它就像自己拥有资源的源服务器一样对请求进行处理。有时客 户端可能都不会察觉，自己的通信目标是一个网关。
网关的工作机制和代理十分相似。而网关能使通信线路上的服务器提 供非 HTTP 协议服务。 利用网关能提高通信的安全性，因为可以在客户端与网关之间的通信 线路上加密以确保连接的安全。比如，网关可以连接数据库，使用 SQL语句查询数据。另外，在 Web 购物网站上进行信用卡结算时， 网关可以和信用卡结算系统联动

隧道

隧道是在相隔甚远的客户端和服务器两者之间进行中转，并保持双方 通信连接的应用程序。
隧道可按要求建立起一条与其他服务器的通信线路，届时使用 SSL等 加密手段进行通信。隧道的目的是确保客户端能与服务器进行安全的 通信。 隧道本身不会去解析 HTTP 请求。也就是说，请求保持原样中转给之 后的服务器。隧道会在通信双方断开连接时结束。

缓存服务器

缓存是指代理服务器或客户端本地磁盘内保存的资源副本。利用缓存
可减少对源服务器的访问，因此也就节省了通信流量和通信时间。
缓存服务器是代理服务器的一种，并归类在缓存代理类型中。换句话
说，当代理转发从服务器返回的响应时，代理服务器将会保存一份资
源的副本。
HTTP 状态码 HTTP
TCP/IP协议族里重要的一点就是分层。TCP/IP协议族按层次分别分为以下4层：应用层、传输层、网络层和数据链路层。
应用层

应用层决定了向用户提供应用服务时通信的活动。
TCP/IP 协议族内预存了各类通用的应用服务。比如，FTP（File
Transfer Protocol，文件传输协议）和 DNS（Domain Name System，域
名系统）服务就是其中两类。 HTTP 协议也处于该层。
传输层
传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据
传输。
在传输层有两个性质不同的协议：TCP（Transmission Control
Protocol，传输控制协议）和 UDP（User Data Protocol，用户数据报
协议）。
网络层（又名网络互连层）
网络层用来处理在网络上流动的数据包。数据包是网络传输的最小数
据单位。该层规定了通过怎样的路径（所谓的传输路线）到达对方计
算机，并把数据包传送给对方。
与对方计算机之间通过多台计算机或网络设备进行传输时，网络层所
起的作用就是在众多的选项内选择一条传输路线。
链路层（又名数据链路层，网络接口层）
用来处理连接网络的硬件部分。包括控制操作系统、硬件的设备驱
动、NIC（Network Interface Card，网络适配器，即网卡），及光纤等
物理可见部分（还包括连接器等一切传输媒介）。硬件上的范畴均在
链路层的作用范围之内。
按层次分，TCP 位于传输层，提供可靠的字节流服务。
所谓的字节流服务（Byte Stream Service）是指，为了方便传输，将大
块数据分割成以报文段（segment）为单位的数据包进行管理。而可
靠的传输服务是指，能够把数据准确可靠地传给对方。一言以蔽之，
TCP 协议为了更容易传送大数据才把数据分割，而且 TCP 协议能够
确认数据最终是否送达到对方。
确保数据能到达目标
为了准确无误地将数据送达目标处，TCP 协议采用了三次握手
（three-way handshaking）策略。用 TCP 协议把数据包送出去后，TCP
不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。
21握手过程中使用了 TCP 的标志（flag） —— SYN（synchronize）和
ACK（acknowledgement）。
发送端首先发送一个带 SYN 标志的数据包给对方。接收端收到后，
回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。最后，发
送端再回传一个带 ACK 标志的数据包，代表“握手”结束。

http 请求

GET：获取资源

POST：传输实体主体

PUT：传输文件

PUT 方法用来传输文件。就像 FTP 协议的文件上传一样，要求在请求报文的主体中包含文件内容，然后保存到请求 URI 指定的位置。

HEAD：获得报文首部

HEAD 方法和 GET 方法一样，只是不返回报文主体部分。用于确认 URI 的有效性及资源更新的日期时间等。

DELETE：删除文件

DELETE 方法用来删除文件，是与 PUT 相反的方法。DELETE 方法按请求 URI 删除指定的资源。

OPTIONS：询问支持的方法

OPTIONS 方法用来查询针对请求 URI 指定的资源支持的方法。

持久连接

使用cookie进行状态管理

HTTP 是无状态协议，它不对之前发生过的请求和响应的状态进行管 理。也就是说，无法根据之前的状态进行本次的请求处理
假设要求登录认证的 Web 页面本身无法进行状态的管理（不记录已 登录的状态），那么每次跳转新页面不是要再次登录，就是要在每次 请求报文中附加参数来管理登录状态。 不可否认，无状态协议当然也有它的优点。由于不必保存状态，自然 可减少服务器的 CPU 及内存资源的消耗。从另一侧面来说，也正是 因为 HTTP 协议本身是非常简单的，所以才会被应用在各种场景里。
保留无状态协议这个特征的同时又要解决类似的矛盾问题，于是引入 了 Cookie 技术。Cookie 技术通过在请求和响应报文中写入 Cookie 信 息来控制客户端的状态。 Cookie 会根据从服务器端发送的响应报文内的一个叫做 Set-Cookie 的 首部字段信息，通知客户端保存 Cookie。当下次客户端再往该服务器 发送请求时，客户端会自动在请求报文中加入 Cookie 值后发送出 去。服务器端发现客户端发送过来的 Cookie 后，会去检查究竟是从哪一 个客户端发来的连接请求，然后对比服务器上的记录，最后得到之前 的状态信息。

获取部分内容的范围请求

以前，用户不能使用现在这种高速的带宽访问互联网，当时，下载一 个尺寸稍大的图片或文件就已经很吃力了。如果下载过程中遇到网络 中断的情况，那就必须重头开始。为了解决上述问题，需要一种可恢 复的机制。所谓恢复是指能从之前下载中断处恢复下载。 要实现该功能需要指定下载的实体范围。像这样，指定范围发送的请 求叫做范围请求（Range Request）。 对一份 10 000 字节大小的资源，如果使用范围请求，可以只请求 5001~10 000 字节内的资源。

通信数据转发程序：代理、网关、隧道

代理

代理是一种有转发功能的应用程序，它扮演了位于服务器和客户 端“中间人”的角色，接收由客户端发送的请求并转发给服务器，同时 也接收服务器返回的响应并转发给客户端。
代理服务器的基本行为就是接收客户端发送的请求后转发给其他服务 器。代理不改变请求 URI，会直接发送给前方持有资源的目标服务 器。持有资源实体的服务器被称为源服务器。从源服务器返回的响应经过 代理服务器后再传给客户端。
使用代理服务器的理由有：利用缓存技术（稍后讲解）减少网络带宽 的流量，组织内部针对特定网站的访问控制，以获取访问日志为主要 目的，等等。 
代理有多种使用方法，按两种基准分类。一种是是否使用缓存，另一 种是是否会修改报文。 
缓存代理 代理转发响应时，缓存代理（Caching Proxy）会预先将资源的副本 （缓存）保存在代理服务器上。 当代理再次接收到对相同资源的请求时，就可以不从源服务器那里获 取资源，而是将之前缓存的资源作为响应返回。 
透明代理 转发请求或响应时，不对报文做任何加工的代理类型被称为透明代理 （Transparent Proxy）。反之，对报文内容进行加工的代理被称为非 透明代理。

网关

网关是转发其他服务器通信数据的服务器，接收从客户端发送来的请 求时，它就像自己拥有资源的源服务器一样对请求进行处理。有时客 户端可能都不会察觉，自己的通信目标是一个网关。
网关的工作机制和代理十分相似。而网关能使通信线路上的服务器提 供非 HTTP 协议服务。 利用网关能提高通信的安全性，因为可以在客户端与网关之间的通信 线路上加密以确保连接的安全。比如，网关可以连接数据库，使用 SQL语句查询数据。另外，在 Web 购物网站上进行信用卡结算时， 网关可以和信用卡结算系统联动

隧道

隧道是在相隔甚远的客户端和服务器两者之间进行中转，并保持双方 通信连接的应用程序。
隧道可按要求建立起一条与其他服务器的通信线路，届时使用 SSL等 加密手段进行通信。隧道的目的是确保客户端能与服务器进行安全的 通信。 隧道本身不会去解析 HTTP 请求。也就是说，请求保持原样中转给之 后的服务器。隧道会在通信双方断开连接时结束。

缓存服务器

缓存是指代理服务器或客户端本地磁盘内保存的资源副本。利用缓存
可减少对源服务器的访问，因此也就节省了通信流量和通信时间。
缓存服务器是代理服务器的一种，并归类在缓存代理类型中。换句话
说，当代理转发从服务器返回的响应时，代理服务器将会保存一份资
源的副本。
HTTP 状态码
在这里插入图片描述

2XX成功

200OK

表示从客户端发来的请求在服务器端被正常处理了。
在响应报文内，随状态码一起返回的信息会因方法的不同而发生改变。比如，使用GET方法时，对应请求资源的实体会作为响应返回；而使用HEAD方法时，对应请求资源的实体首部不随报文主体作为响应返回（即在响应中只返回首部，不会返回实体的主体部分）。

204NoContent

该状态码代表服务器接收的请求已成功处理，但在返回的响应报文中不含实体的主体部分。另外，也不允许返回任何实体的主体。比如，当从浏览器发出请求处理后，返回204响应，那么浏览器显示的页面不发生更新。
一般在只需要从客户端往服务器发送信息，而对客户端不需要发送新信息内容的情况下使用。

206PartialContent

该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的GET请求。响应报文中包含由Content-Range指定范围的实体内容。
~Range和 Content-Range~
~是 HTTP/1.1中新增的HTTP头字段。它用于从服务器中获取一个大文件的某一部分内容，这极大地提高了HTTP的运行效率，很适合下载软件进行多线程下载和断点续传。~

3XX重定向

3XX响应结果表明浏览器需要执行某些特殊的处理以正确处理请求。
重定向应用场景

需要重定向的一个常见原因是“资源不可用”，需要用另一个新的 URI 来代替。不可用的原因很多，比如域名变更、服务器变更、网站改版、系统维护、这些都会导致原 URI 指向的资源无法访问，为了避免 404 ，就需要使用重定向跳转到新的 URI，继续服务。
另一个常见原因是“避免重复”，让多个网址都跳转到一个 URI，增加访问入口的同时还会增加额外的工作量。例如有的网站会申请多个名称类似的域名，然后把它们再重定向到主站上

301MovedPermanently

永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。也就是说，如果已经把资源对应的URI 保存为书签了，这时应该按Location首部字段提示的URI重新保存

302Found

临时性重定向。该状态码表示请求的资源已被分配了新的URI，希望用户（本次）能使用新的URI访问。
和301MovedPermanently状态码相似，但302状态码代表的资源不是被永久移动，只是临时性质的。换句话说，已移动的资源对应的
URI将来还有可能发生改变。比如，用户把URI保存成书签，但不会像301状态码出现时那样去更新书签，而是仍旧保留返回302状态码的页面对应的URI

303SeeOther

该状态码表示由于请求对应的资源存在着另一个URI，应使用GET 方法定向获取请求的资源。当使用POST方法访问CGI程序，其执行后的处理结果是希望客户端能以GET方法重定向到另一个URI上去时，返回303状态码。虽然302Found状态码也可以实现相同的功能，但这里使用303 状态码是最理想的。303状态码和302Found状态码有着相同的功能，但303状态码明确表示客户端应当采用GET方法获取资源

304NotModified 资源已找到，但未符合条件

该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。304状态码返回时，不包含任何响应的主体部分。304虽然被划分在3XX类别中，但是和重定向没有关系。

附带条件的请求是指采用GET方法的请求报文中包含If-Match，If-Modified-Since，If-None-Match，If-Range，If-Unmodified-Since中任一首部

307TemporaryRedirect

临时重定向。该状态码与302Found有着相同的含义。尽管302标准禁止POST变换成GET，但实际使用时大家并不遵守。
307会遵照浏览器标准，不会从POST变成GET。但是，对于处理响应时的行为，每种浏览器有可能出现不同的情况。

4XX客户端错误

400BadRequest

该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。另外，浏览器会像200OK一样对待该状态码。

401Unauthorized

该状态码表示发送的请求需要有通过HTTP认证（BASIC认证、DIGEST认证）的认证信息。另外若之前已进行过1次请求，则表示用户认证失败。
返回含有401的响应必须包含一个适用于被请求资源的WWW-Authenticate首部用以质询（challenge）用户信息。当浏览器初次接收到401响应，会弹出认证用的对话窗口。

403Forbidden

该状态码表明对请求资源的访问被服务器拒绝了。服务器端没有必要给出拒绝的详细理由，但如果想作说明的话，可以在实体的主体部分对原因进行描述，这样就能让用户看到了。
未获得文件系统的访问授权，访问权限出现某些问题（从未授权的发送源IP地址试图访问）等列举的情况都可能是发生403的原因

404NotFound

该状态码表明服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。

5XX服务器错误

500InternalServerError

该状态码表明服务器端在执行请求时发生了错误。也有可能是Web 应用存在的bug或某些临时的故障。

503ServiceUnavailable

该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。如果事先得知解除以上状况需要的时间，最好写入RetryAfter首部字段再返回给客户端。