最全面、最详细web前端面试题及答案总结

总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！

本章是HTML考点的?重难点，因此我们采?简略回答的?式进?撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『? 』的为?频?试题
doctype的作?是什么br> DOCTYPE是html5标准??声明，且必须声明在HTML?档的第??。来告知浏览器的解析器?什么?档标准解析这个
?档，不同的渲染模式会影响到浏览器对于 CSS 代码甚? JavaScript 脚本的解析
?档解析类型有：
BackCompat：怪异模式，浏览器使???的怪异模式解析渲染??。（如果没有声明DOCTYPE，默认就是这个模式）
CSS1Compat：标准模式，浏览器使?W3C的标准解析渲染??。
IE8还有?种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。

这三种模式的区别是什么p>

标准模式(standards mode)：??按照 HTML 与 CSS 的定义渲染怪异模式(quirks mode)模式：会模拟更旧的浏览器的?为
近乎标准(almost standards)模式：会实施了?种表单元格尺?的怪异?为（与IE7之前的单元格布局?式?致），除此之外符合标准定义
HTML、XHTML、XML有什么区别r> HTML(超?本标记语?): 在html4.0之前HTML先有实现再有标准，导致HTML?常混乱和松散
XML(可扩展标记语?): 主要?于存储数据和结构，可扩展，?家熟悉的JSON也是相似的作?，但是更加轻量?效，所以XML现在市场越来越?了
XHTML(可扩展超?本标记语?): 基于上?两者?来，W3C为了解决HTML混乱问题??，并基于此诞?了
HTML5，开头加? 的做法因此?来，如果不加就是兼容混乱的HTML，加了就是标准模式。
什么是data-属性r> HTML的数据属性，?于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的?的。
前端框架出现之后，这种?法已经不流?了
你对HTML语义化的理解br> 语义化是指使?恰当语义的html标签，让??具有良好的结构与含义，?如

标签就代表段落，

代表正?内容等等。
语义化的好处主要有两点：
开发者友好：使?语义类标签增强了可读性，开发者也能够清晰地看出??的结构，也更为便于团队的开发和维护机器友好：带有语义的?字表现?丰富，更适合搜索引擎的爬?爬取有效信息，语义类还可以?持读屏软件，根据
?章可以?动?成?录
这对于简书、知乎这种富?本类的应?很重要，语义化对于其?站的内容传播有很?的帮助，但是对于功能性的web软件重要性?打折扣，?如?个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。

HTML5与HTML4的不同之处

?件类型声明（）仅有?型：。新的解析顺序：不再基于SGML。
新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr 。 input元素的新类型：date, email, url等等。
新的属性：ping（?于a与area）, charset（?于meta）, async（?于script）。全域属性：id, tabindex, repeat。
新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

http-equiv，顾名思义，相当于http的?件头作?,?如下?的代码就可以设置http的缓存过期?期
viewport，移动前端最熟悉不过，Web开发?员可以控制视?的??和?例
apple-mobile-web-app-status-bar-style,开发过PWA应?的开发者应该很熟悉，为了?定义评估?具栏的颜?。
src和href的区别r> src是指向外部资源的位置，指向的内容会嵌?到?档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应?到?档内，如js脚本，img图?和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执?完毕，所以?般js脚本会放在底部?不是头部。
href是指向?络资源所在位置（的超链接），?来建?和当前元素或?档之间的连接，当浏览器识别到它他指向的
?件时，就会并?下载资源，不会停?对当前?档的处理。

知道img的srcset的作?是什么问）
可以设计响应式图?，我们可以使?两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的?个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的??。
sizes 定义了?组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图?尺?是最佳选择。所以，有了这些属性，浏览器会：
查看设备宽度
检查 sizes 列表中哪个媒体条件是第?个为真查看给予该媒体查询的槽??
加载 srcset 列表中引?的最接近所选的槽??的图像
srcset提供了根据屏幕条件选取图?的能?
还有哪?个标签能起到跟srcset相似作?问）
元素通过包含零或多个元素和?个元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的? 元素，如果没有匹配的，就选择元素的 src 属性中的URL。然后，所选图像呈现在元素占据的空间中
picture同样可以通过不同设备来匹配不同的图像资源
script标签中defer和async的区别br> defer：浏览器指示脚本在?档被解析后执?，script被异步加载后并不会?刻执?，?是等待?档被解析完毕后执
?。
async：同样是异步加载脚本，区别是脚本加载完毕后?即执?，这导致async属性下的脚本是乱序的，对于script
有先后依赖关系的情况，并不适?。

蓝?线代表?络读取，红?线代表执?时间，这俩都是针对脚本的；绿?线代表 HTML 解析

有?种前端储存的?式br> cookies、localstorage、sessionstorage、Web SQL、IndexedDB

这些?式的区别是什么问）?

cookies：在HTML5标准前本地储存的主要?式，优点是兼容性好，请求头?带cookie?便，缺点是??只有4k，
?动请求头加?cookie浪费流量，每个domain限制20个cookie，使?起来麻烦需要??封装
localStorage：HTML5加?的以键值对(Key-Value)为标准的?式，优点是操作?便，永久性储存（除??动删除），??为5M，兼容IE8+
sessionStorage：与localStorage基本类似，区别是sessionStorage当??关闭后会被清理，?且与cookie、localStorage不同，他不能在所有同源窗?中共享，是会话级别的储存?式
Web SQL：2010年被W3C废弃的本地数据库数据存储?案，但是主流浏览器（?狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，?sql进?操作，当我们?JavaScript时要进?转换，较为繁琐。
IndexedDB：是被正式纳?HTML5标准的数据库储存?案，它是NoSQL数据库，?键值对进?储存，可以进?快速读取操作，?常适合web场景，同时?JavaScript进?操作会?常?便。

CSS基础

CSS选择器的优先级是怎样的link和@import的区别r> 有哪些?式（CSS）可以隐藏??元素r> empxrem区别r> 块级元素?平居中的?法r> CSS有?种定位?式何理解z-index如何理解层叠上下?清除浮动有哪些?法对css-sprites的理解你对媒体查询的理解对盒模型的理解br> 标准盒模型和怪异盒模型有什么区别br> 谈谈对BFC(Block Formatting Context)的理解为什么有时候?们?translate来改变位置?不是定位类和伪元素的区别是什么r> 你对flex的理解br> 关于CSS的动画与过渡问题
本章是CSS考点的?重难点，因此我们采?简略回答的?式进?撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『? 』的为?频?试题
CSS选择器的优先级是怎样的br> CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层?，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
A 的值等于 1 的前提是存在内联样式, 否则 A = 0; B 的值等于 ID选择器出现的次数;
C 的值等于类选择器和属性选择器和伪类出现的总次数;
D 的值等于标签选择器和伪元素出现的总次数。
就?如下?的选择器，它不存在内联样式，所以A=0,不存在id选择器B=0,存在?个类选择器C=1,存在三个标签选择器
D=3，那么最终计算结果为: {0, 0, 1 ,3}

按照这个结算?式，下?的计算结果为: {0, 1, 0, 0}

我们的?较优先级的?式是从A到D去?较值的??，A、B、C、D权重从左到右，依次减?。判断优先级时，从左到右，???较，直到?较出最?值，即可停?。
?如第?个例?的B与第?个例?的B相?，1>0,接下来就不需要?较了，第?个选择器的优先级更?。

link和@import的区别p>

link属于XHTML标签，?@import是CSS提供的。
??被加载时，link会同时被加载，?@import引?的CSS会等到??被加载完再加载。
import只在IE 5以上才能识别，?link是XHTML标签，?兼容问题。link?式的样式权重?于@import的权重。
使?dom控制样式时的差别。当使?javascript控制dom去改变样式的时候，只能使?link标签，因为@import不是
dom可以控制的。

有哪些?式（CSS）可以隐藏??元素p>

opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
visibility:hidden : 与上?个?法类似的效果，占据空间，但是不可以交互了
overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
display:none : 这个是彻底隐藏了元素，元素从?档流中消失，既不占据空间也不交互，也不影响布局
z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform: scale(0,0) : 平?变换，将元素缩放为0，但是依然占据空间，但不可交互
还有?些靠绝对定位把元素移到可视区域外，或者?clip-path进?裁剪的操作过于Hack，就不提了。

empxrem区别r> px：绝对单位，??按精确像素展示。
em：相对单位，基准点为?节点字体的??，如果?身定义了font-size按?身来计算（浏览器默认字体是16px），整个??内1em不是?个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体??来计算，CSS3新加属性，chrome/firefox/IE9+?持

块级元素?平居中的?法r> 如果使?Hack的话，?平居中的?法?常多，我们只介绍主流的，奇葩的?拓展阅读
margin:0 auto ?法
flex布局，?前主流?法
table?法

还有?些通过position+(margin|transform)等?法的不?样列举了，?重点没必要。拓展阅读: 16种?法实现?平居中垂直居中
CSS有?种定位?式p>

static: 正常?档流定位，此时 top, right, bottom, left 和 z-index 属性?效，块级元素从上往下纵向排布，?级元素从左向右排列。
relative：相对定位，此时的『相对』是相对于正常?档流的位置。
absolute：相对于最近的? static 定位祖先元素的偏移，来确定元素位置，?如?个绝对定位元素它的?级、和祖
?级元素都为relative，它会相对他的?级?产?偏移。
fixed：指定元素相对于屏幕视?（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，?如那种回到顶部的按钮?般都是?此定位?式。
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应?中的近似效果就是IOS通讯录滚动的时候的
『顶屁股』。
?字描述很难理解，可以直接看代码

如何理解z-index/p>

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，?且z-index只能影响设置了position值的元素。
我们可以把视图上的元素认为是?摞书的层叠，??眼是俯视的视?，设置z-index的位置，就如同设置某?本书在这摞书中的位置。
顶部: 最接近观察者
…
3 层
2 层
1 层
0 层默认层
-1 层
-2 层
-3 层
…
底层: 距离观察者最远

可以结合这个例?理解z-index
如何理解层叠上下?br> 是什么r> 层叠上下?是HTML元素的三维概念，这些HTML元素在?条假想的相对于?向（电脑屏幕的）视窗或者??的?户的z 轴上延伸，HTML元素依据其?身属性按照优先级顺序占?层叠上下?的空间。

如何产?r> 触发?下条件则会产?层叠上下?：根元素 (HTML),
z-index 值不为 “auto”的绝对/相对定位，
?个 z-index 值不为 “auto”的 flex 项? (flex item)，即：?元素 display: flex|inline-flex， opacity 属性值?于 1 的元素（参考 the specification for opacity），
transform 属性值不为 “none”的元素，
mix-blend-mode 属性值不为 “normal”的元素， filter值不为“none”的元素，
perspective 值不为 “none” 的元素， isolation 属性被设置为 “isolate”的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇?章）
-webkit-overflow-scrolling 属性被设置 “touch”的元素
拓展阅读：层叠上下?-张鑫旭

清除浮动有哪些?法p>

空 div ? 法：

Clearfix ?法：上?使?.clearfix类已经提到overflow: auto或overflow: hidden?法，使?BFC
在flex已经成为布局主流之后，浮动这种东?越来越少?了，毕竟它的副作?太?

你对css sprites的理解，好处是什么r> 是什么 p>

雪碧图也叫CSS精灵，是?CSS图像合成技术，开发?员往往将?图标合并在?起之后的图?称作雪碧图。

如何操作r> 使??具（PS之类的）将多张图?打包成?张雪碧图，并为其?成合适的 CSS。每张图?都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。使?图?时，将相应的类添加到你的元素中。

好处：
减少加载多张图?的 HTTP 请求数（?张雪碧图只需要?个请求）提前加载资源

不?：
CSS Sprite维护成本较?，如果??背景有少许改动，?般就要改这张合并的图?
加载速度优势在http2开启后荡然?存，HTTP2多路复?，多张图?也可以重复利??个连接通道搞定

你对媒体查询的理解r> 是什么
媒体查询由?个可选的媒体类型和零个或多个使?媒体功能的限制了样式表范围的表达式组成，例如宽度、?度和颜
?。媒体查询，添加?CSS3，允许内容的呈现针对?个特定范围的输出设备?进?裁剪，?不必改变内容本身,?常适合web??应对不同型的设备?做出对应的响应适配。

如何使?r> 媒体查询包含?个可选的媒体类型和，满?CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示?档所使?的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会?效。

拓展阅读：深?理解CSS Media媒体查询

你对盒模型的理解?
是什么r> 当对?个?档进?布局（lay out）的时候，浏览器的渲染引擎会根据标准之?的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为?个个矩形的盒?（box）。CSS 决定这些盒?的??、位置以及属性（例如颜?、背景、边框尺?…）。

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

标准盒模型和怪异盒模型有什么区别br> 在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的?度值。因此，标准盒模型下：
元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

?IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，?是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。
在怪异盒模型下：
元素占据的宽度 = margin-left + width + margin-right

虽然现代浏览器默认使?W3C的标准盒模型，但是在不少情况下怪异盒模型更好?，于是W3C在css3中加? box- sizing 。

拓展阅读：深?理解盒模型

谈谈对BFC的理解?
是什么r> 书?解释：BFC(Block Formatting Context)这?个英?拆解
Box: CSS布局的基本单位，Box 是 CSS 布局的对象和基本单位，直观点来说，就是?个??是由很多个 Box 组成的，实际就是上个问题说的盒模型
Formatting context：块级上下?格式化，它是??中的?块渲染区域，并且有?套渲染规则，它决定了其?元素将如何定位，以及和其他元素的关系和相互作?
简??之，它是?块独?的区域，让处于BFC内部的元素与外部的元素互相隔离

如何形成r> BFC触发条件:
根元素，即HTML元素position: fixed/absolute float 不为 none overflow不为visible
display的值为inline-block、table-cell、table-caption

作?是什么r> 防?margin发?重叠

两栏布局，防??字环绕等

防?元素塌陷

拓展阅读：深?理解BFC

为什么有时候?们?translate来改变位置?不是定位r> translate()是transform的?个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。?改变绝对定位会触发重新布局，进?触发重绘和复合。transform使浏览器为元素创建?个 GPU 图层，但改变绝对定位会使?到 CPU。因此translate()更?效，可以缩短平滑动画的绘制时间。
?translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发?这种情况。拓展阅读:CSS3 3D transform变换-张鑫旭
伪类和伪元素的区别是什么r> 是什么r> 伪类（pseudo-class）是?个以冒 (:)作为前缀，被添加到?个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后?加上对应的伪类。
伪元素?于创建?些不在?档树中的元素，并为其添加样式。?如说，我们可以通过::before来在?个元素前增加?些
?本，并为这些?本添加样式。虽然?户可以看到这些?本，但是这些?本实际上不在?档树中。

区别
其实上?已经表达清楚两者区别了，伪类是通过在元素选择器上加?伪类改变元素状态，?伪元素通过对元素的操作进
?对元素的改变。
我们通过 p::before 对这段?本添加了额外的元素，通过 p:first-child 改变了?本的样式。

拓展阅读：伪类与伪元素

你对flex的理解br> web应?有不同设备尺?和分辨率，这时需要响应式界?设计来满?复杂的布局需求，Flex弹性盒模型的优势在于开发
?员只是声明布局应该具有的?为，?不需要给出具体的实现?式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对?的场景时，就要优先考虑弹性盒布局

具体?法移步阮?峰的flex语法、flex实战，讲得?常通俗易懂，?且我们?两句话说不清楚。

关于CSS的动画与过渡问题
深?理解CSS动画animation https://www.cnblogs.com/xiaohuochai/p/5391663.html
深?理解CSS过渡transition https://www.cnblogs.com/xiaohuochai/p/5347930.html

参考资料：

盒模型

JavaScript基础

终于到了?家最擅?的JavaScript部分，相?于HTML和CSS笔者写起JavaScript要顺?很多，虽然前端有三剑客的说法，但是实际应?中基本就是JavaScript为绝对主导，尤其是在?程化的今天。
所以JavaScript才是前端基础?试中的重中之重，在这部分我们会加??个新的部分就是原理性的解释。
?如，我们会有?个?试问题『解释下变量提升在本章下我们会有?个简短的解释，但是不会解释原理性的东
?，因为『简短的解释』是给?试官听的，『原理性的』是给??解释的，原理性的解释会在相关问题下连接到其他各个原理性详解的章节。
再说?下为什么会有『原理详解』这?part，本项?并不仅想作为?试季帮助?家突击的?个清单，更想做的是帮助?家梳理前端的各个知识点，并把知识点讲透彻，这才是真正对每个开发者有成?的事情。
此外，如果不懂原理，很容易被较真的?试官追问，?下就原形毕露了，所以如果你不懂原理，建议阅读原理部分，如果你已经懂了，可以看简答部分作为梳理即可。
我们约定，每个问题后我们标记『? 』的为?频?试题

本章索引

js基础
谈谈你对原型链的理解
如何判断是否是数组r> ES6模块与CommonJS模块有什么区别?聊如何在JavaScript中实现不可变对象avaScript的参数是按照什么?式传递的s有哪些类型r> 为什么会有BigInt的提案r> null与undefined的区别是什么.1+0.2为什么不等于0.3r> 类型转换的规则有哪些型转换的原理是什么li>
js机制
解释下变量提升br> ?段JavaScript代码是如何执?的br> JavaScript的作?域链理解吗br> 谈?谈你对this的了解箭头函数的this指向哪?理解闭包吗/li>
js内存
讲讲JavaScript垃圾回收是怎么做的r> JavaScript的基本类型和复杂类型是储存在哪?的li>
异步
async/await 是什么li>

async/await 相?于Promise的优势p>

解释下变量提升br> JavaScript引擎的?作?式是，先解析代码，获取所有被声明的变量，然后再????地运?。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

上?的代码实际执?顺序是这样的:
第?步：引擎将 var a = 1 拆解为 var a = undefined 和 a = 1 ，并将 var a = undefined 放到最顶端， a = 1 还在原来的位置
这样?来代码就是这样:

第?步就是执?，因此js引擎????从上往下执?就造成了当前的结果，这就叫变量提升。原理详解请移步,预解释与变量提升

?段JavaScript代码是如何执?的br> 此部分涉及概念较多，请移步JavaScript执?机制

理解闭包吗br> 这个问题其实在问：

闭包是什么li>
闭包有什么作?li>

闭包是什么
MDN的解释：闭包是函数和声明该函数的词法环境的组合。
按照我的理解就是：闭包 =『函数』和『函数体内可访问的变量总和』举个简单的例?:

add 函数本身，以及其内部可访问的变量，即 a = 1 ，这两个组合在?起就被称为闭包，仅此?已。

闭包的作?
闭包最?的作?就是隐藏变量，闭包的??特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后
基于此特性，JavaScript可以实现私有变量、特权变量、储存变量等
我们就以私有变量举例，私有变量的实现?法很多，有靠约定的（变量名前加_）,有靠Proxy代理的，也有靠Symbol这种新数据类型的。
但是真正?泛流?的其实是使?闭包。

函数体内的 var name = ‘cxk’ 只有 getName 和 setName 两个函数可以访问，外部?法访问，相对于将变量私有化。

JavaScript的作?域链理解吗br> JavaScript属于静态作?域，即声明的作?域是根据程序正?在编译时就确定的，有时也称为词法作?域。
其本质是JavaScript在执?过程中会创造可执?上下?，可执?上下?中的词法环境中含有外部词法环境的引?，我们可以通过这个引?获取外部词法环境的变量、声明等，这些引?串联起来?直指向全局的词法环境，因此形成了作?域链。

原理详解请移步JavaScript执?机制

ES6模块与CommonJS模块有什么区别r> ES6 Module和CommonJS模块的区别：
CommonJS是对模块的浅拷?，ES6 Module是对模块的引?,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似const
import的接?是read-only（只读状态），不能修改其变量值。即不能修改其变量的指针指向，但可以改变变量内部指针指向,可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译错。
ES6 Module和CommonJS模块的共同点：
CommonJS和ES6 Module都可以对引?的对象进?赋值，即对对象内部属性的值进?改变。详解请移步ES6模块与CommonJS模块的差异
js有哪些类型r> JavaScript的类型分为两?类，?类是原始类型，?类是复杂(引?）类型。原始类型:

boolean null undefined number string symbol
复杂类型:
Object

还有?个没有正式发布但即将被加?标准的原始类型BigInt。

为什么会有BigInt的提案r> JavaScript中Number.MAX_SAFE_INTEGER表示最?安全数字,计算结果是9007199254740991，即在这个数范围内不会出现精度丢失（?数除外）。
但是?旦超过这个范围，js就会出现计算不准确的情况，这在?数计算的时候不得不依靠?些第三?库进?解决，因此官?提出了BigInt来解决此问题。

null与undefined的区别是什么r> null表示为空，代表此处不应该有值的存在，?个对象可以是null，代表是个空对象，?null本身也是对象。
undefined表示『不存在』，JavaScript是??动态类型语?，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运?期才知道），这就是undefined的意义所在。

0.1+0.2为什么不等于0.3p>

JS 的 Number 类型遵循的是 IEEE 754 标准，使?的是 64 位固定?度来表示。
IEEE 754 浮点数由三个域组成，分别为 sign bit (符位)、exponent bias (指数偏移值) 和 fraction (分数值)。64 位中，
sign bit 占 1 位，exponent bias 占 11 位，fraction 占 52 位。
通过公式表示浮点数的值 value = sign x exponent x fraction
**
当?个数为正数，sign bit 为 0，当为负数时，sign bit 为 1.
以 0.1 转换为 IEEE 754 标准表示为例解释?下如何求 exponent bias 和 fraction。转换过程主要经历 3 个过程：

将 0.1 转换为?进制表示
将转换后的?进制通过科学计数法表示
将通过科学计数法表示的?进制转换为 IEEE 754 标准表示

将 0.1 转换为?进制表示
回顾?下?个数的?数部分如何转换为?进制。?个数的?数部分，乘以 2，然后取整数部分的结果，再?计算后的?数部分重复计算，直到?数部分为 0 。

因此 0.1 转换为?进制表示的过程如下：

?数 x2 的结果整数部分
0.1 0.2 0
0.2 0.4 0
0.4 0.8 0
0.8 1.6 1
0.6 1.2 1
0.2 0.4 0
0.4 0.8 0
0.8 1.6 1
0.6 1.2 1
… … …
得到 0.1 的?进制表示为 0.00011…(?限重复 0011)

通过科学计数法表示
0.00011…(?限重复 0011) 通过科学计数法表示则是 1.10011001…(?线重复 1001)*2

转换为 IEEE 754 标准表示
当经过科学计数法表示之后，就可以求得 exponent bias 和 fraction 了。
exponent bias (指数偏移值) 等于双精度浮点数固定偏移值 (2-1) 加上指数实际值(即 2 中的 -4) 的 11 位?进制表示。为什么是 11 位 exponent bias 在 64 位中占 11 位。
因此 0.1 的 exponent bias 等于 1023 + (-4) = 1019 的11 位?进制表示，即 011 1111 1011。
再来获取 0.1 的 fraction，fraction 就是 1.10011001…(?线重复 1001) 中的?数位，由于 fraction 占 52位所以抽取 52
位?数，1001…(中间有 11 个 1001)…1010 (请注意最后四位，是 1010 ?不是 1001，因为四舍五?有进位，这个进位
就是造成 0.1 + 0.2 不等于 0.3 的原因)

此时如果将这个数转换为?进制，可以发现值已经变为 0.100000000000000005551115123126 ?不是 0.1 了，因此这个计算精度就出现了问题。

类型转换的规则有哪些r> 在if语句、逻辑语句、数学运算逻辑、==等情况下都可能出现隐?类型转换。

类型转换的原理是什么r> 类型转换指的是将?种类型转换为另?种类型,例如:

当然,类型转换分为显式和隐式,但是不管是隐式转换还是显式转换,都会遵循?定的原理,由于JavaScript是??动态类型的语?,可以随时赋予任意值,但是各种运算符或条件判断中是需要特定类型的,因此JavaScript引擎会在运算时为变量设定类型.
这看起来很美好,JavaScript引擎帮我们搞定了类型的问题,但是引擎毕竟不是ASI(超级??智能),它的很多动作会跟我们预期相去甚远,我们可以从?到?试题开始.

答案是0
是什么原因造成了上述结果呢我们得从ECMA-262中提到的转换规则和抽象操作说起,有兴趣的童鞋可以仔细阅读下这浩如烟海的语?规范,如果没这个耐?还是往下看.

这是JavaScript种类型转换可以从原始类型转为引?类型,同样可以将引?类型转为原始类型,转为原始类型的抽象操作为 ToPrimitive ,?后续更加细分的操作为: ToNumber ToString ToBoolean 。
为了更深?的探究JavaScript引擎是如何处理代码中类型转换问题的,就需要看 ECMA-262详细的规范,从?探究其内部原理,我们从这段内部原理示意代码开始.

上?代码的逻辑是这样的：

如果变量为字符串，直接返回.
如果 !IS_SPEC_OBJECT(x) ，直接返回.
如果 IS_SYMBOL_WRAPPER(x) ，则抛出异常.
否则会根据传?的 hint 来调? DefaultNumber 和 DefaultString ，?如如果为 Date 对象，会调? DefaultString .
DefaultNumber ：? 先x.valueOf ，如果为 primitive ，则返回 valueOf 后的值，否则继续调? x.toString ，如果为 primitive ，则返回 toString 后的值，否则抛出异常
DefaultString ：和 DefaultNumber 正好相反，先调? toString ，如果不是 primitive 再调? valueOf .

那讲了实现原理，这个 ToPrimitive 有什么?呢很多操作会调? ToPrimitive ，?如加、相等或?较操。在进?加操作时会将左右操作数转换为 primitive ，然后进?相加。
下?来个实例，({}) + 1（将{}放在括中是为了内核将其认为?个代码块）会输出啥?常写代码并不会这样写，不过?上出过类似的?试题。
加操作只有左右运算符同时为 String或Number 时会执?对应的 %_StringAdd或%NumberAdd ，下?看下 ({}) + 1 内部会经过哪些步骤：
{} 和 1 ?先会调?ToPrimitive {} 会?到 DefaultNumber ，?先会调? valueOf ，返回的是，不是
primitive类型，从?继续?到 toString ，返回 [object Object] ，是 String 类型最后加操作，结果为 [object Object]1 再?如有?问你 [] + 1 输出啥时，你可能知道应该怎么去计算了，先对 [] 调? ToPrimitive ，返回空字符串，最后结果为”1″。

谈谈你对原型链的理解br> 这个问题关键在于两个点，?个是原型对象是什么，另?个是原型链是如何形成的

原型对象
绝?部分的函数(少数内建函数除外)都有?个 prototype 属性,这个属性是原型对象?来创建新对象实例,?所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性。
例如 hasOwnProperty() ?法存在于Obejct原型对象中,它便可以被任何对象当做??的?法使?.
?法： object.hasOwnProperty( propertyName )
hasOwnProperty() 函数的返回值为 Boolean 类型。如果对象 object 具有名称为 propertyName 的属性，则返回 true ，否则返回 false 。

由以上代码可知, hasOwnProperty() 并不存在于 person 对象中,但是 person 依然可以拥有此?法. 所以 person 对象是如何找到 Object 对象中的?法的呢是原型链。
原型链
原因是每个对象都有 proto 属性，此属性指向该对象的构造函数的原型。
对象可以通过 proto 与上游的构造函数的原型对象连接起来，?上游的原型对象也有?个 proto ，这样就形成了原型链。
经典原型链图

如何判断是否是数组r> es6中加?了新的判断?法

在考虑兼容性的情况下可以?toString的?法

谈?谈你对this的了解br> this的指向不是在编写时确定的,?是在执?时确定的，同时，this不同的指向在于遵循了?定的规则。
?先，在默认情况下，this是指向全局对象的，?如在浏览器就是指向window。

其次，如果函数被调?的位置存在上下?对象时，那么函数是被隐式绑定的。

再次，显示改变this指向，常?的?法就是call、apply、bind 以bind为例:

最后，也是优先级最?的绑定 new 绑定。
? new 调??个构造函数，会创建?个新对象, 在创造这个新对象的过程中,新对象会?动绑定到Person对象的this上，那么 this ?然就指向这个新对象。

绑定优先级: new绑定 > 显式绑定 >隐式绑定 >默认绑定

那么箭头函数的this指向哪?br> 箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于??的this,它的所谓的this是捕获其所在上下?的 this
值，作为??的 this 值,并且由于没有属于??的this,?箭头函数是不会被new调?的，这个所谓的this也不会被改变.
我们可以?Babel理解?下箭头函数:

转化后

async/await是什么r> async 函数，就是 Generator 函数的语法糖，它建?在Promises上，并且与所有现有的基于Promise的API兼容。

Async—声明?个异步函数(async function someName(){…})
?动将常规函数转换成Promise，返回值也是?个Promise对象
只有async函数内部的异步操作执?完，才会执?then?法指定的回调函数
异步函数内部可以使?await
Await—暂停异步的功能执?(var result = await someAsyncCall()??
放置在Promise调?之前，await强制其他代码等待，直到Promise完成并返回结果
只能与Promise?起使?，不适?与回调
只能在async函数内部使?

async/await相?于Promise的优势p>

代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调?也会带来额外的阅读负担
Promise传递中间值?常麻烦，?async/await?乎是同步的写法，?常优雅
错误处理友好，async/await可以?成熟的try/catch，Promise的错误捕获?常冗余
调试友好，Promise的调试很差，由于没有代码块，你不能在?个返回表达式的箭头函数中设置断点，如果你在?个.then代码块中使?调试器的步进(step-over)功能，调试器并不会进?后续的.then代码块，因为调试器只能跟踪同步代码的『每?步』。

JavaScript的参数是按照什么?式传递的r> 基本类型传递?式
由于js中存在复杂类型和基本类型,对于基本类型??,是按值传递的.

虽然在函数 test 中 a 被修改,并没有有影响到外部 a 的值,基本类型是按值传递的.

复杂类型按引?传递r> 我们将外部 a 作为?个对象传? test 函数.

可以看到,在函数体内被修改的 a 对象也同时影响到了外部的 a 对象,可?复杂类型是按引?传递的. 可是如果再做?个实验:

外部的 a 并没有被修改,如果是按引?传递的话,由于共享同?个堆内存, a 在外部也会表现为 10 才对. 此时的复杂类型同时表现出了按值传递和按引?传递的特性.

按共享传递
复杂类型之所以会产?这种特性,原因就是在传递过程中,对象 a 先产?了?个副本a ,这个副本a 并不是深克隆得到的副地址同样指向对象 a 指向的堆内存.

因此在函数体中修改 x=10 只是修改了存,此时对象 a 也会受到影响.

对象没有变化. 但是如果修改了 x.a=10 是修改了两者指向的同?堆内

有?讲这种特性叫做传递引?,也有?种说法叫做按共享传递.

聊?聊如何在JavaScript中实现不可变对象r> 实现不可变数据有三种主流的?法

深克隆，但是深克隆的性能?常差，不适合?规模使?
Immutable.js，Immutable.js是?成?体的?套数据结构，性能良好，但是需要学习额外的API
immer，利?Proxy特性，?需学习额外的api，性能良好
原理详解请移步实现JavaScript不可变数据

JavaScript的基本类型和复杂类型是储存在哪?的r> 基本类型储存在栈中，但是?旦被闭包引?则成为常住内存，会储存在内存堆中。复杂类型会储存在内存堆中。
原理解析请移步JavaScript内存管理

讲讲JavaScript垃圾回收是怎么做的r> 此过程?较复杂，请看详细解析。
原理解析请移步JavaScript内存管理

HTTP协议

HTTP有哪些?法r> HTTP1.0定义了三种请求?法： GET, POST 和 HEAD?法
HTTP1.1新增了五种请求?法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT

这些?法的具体作?是什么r> GET: 通常?于请求服务器发送某些资源
HEAD: 请求资源的头部信息, 并且这些头部与 HTTP GET ?法请求时返回的?致. 该请求?法的?个使?场景是在下载?个??件前先获取其??再决定是否要下载, 以此可以节约带宽资源
OPTIONS: ?于获取?的资源所?持的通信选项
POST: 发送数据给服务器
PUT: ?于新增资源或者使?请求中的有效负载替换?标资源的表现形式
DELETE: ?于删除指定的资源
PATCH: ?于对资源进?部分修改
CONNECT: HTTP/1.1协议中预留给能够将连接改为管道?式的代理服务器TRACE: 回显服务器收到的请求，主要?于测试或诊断

GET和POST有什么区别r> 数据传输?式不同：GET请求通过URL传输数据，?POST的数据通过请求体传输。
安全性不同：POST的数据因为在请求主体内，所以有?定的安全性保证，?GET的数据在URL中，通过历史记录，缓存很容易查到数据信息。
数据类型不同：GET只允许 ASCII 字符，?POST?限制
GET?害：刷新、后退等浏览器操作GET请求是?害的，POST可能重复提交表单
特性不同：GET是安全（这?的安全是指只读特性，就是使?这个?法不会引起服务器状态变化）且幂等（幂等的概念是指同?个请求?法执?多次和仅执??次的效果完全相同），?POST是?安全?幂等

PUT和PATCH都是给服务器发送修改资源，有什么区别r> PUT和PATCH都是更新资源，?PATCH?来对已知资源进?局部更新。
?如我们有?篇?章的地址 https://www.jianshu.com/articles/820357430 ,这篇?章的可以表示为:

这种直接覆盖资源的修改?式应该?put，但是你觉得每次都带有这么多??的信息，那么可以发送 PATCH https://www.jianshu.com/articles/820357430 ，这个时候只需要:

http的请求 ?是什么样的r> 请求 ?有4部分组成: 请求?
请求头部空?
请求体

请求?包括：请求?法字段、URL字段、HTTP协议版本字段。它们?空格分隔。例如，GET /index.html HTTP/1.1。
请求头部:请求头部由关键字/值对组成，每??对，关键字和值?英?冒 “:”分隔
User-Agent：产?请求的浏览器类型。

Accept：客户端可识别的内容类型列表。
Host：请求的主机名，允许多个域名同处?个IP地址，即虚拟主机。
请求体: post put等请求携带的数据

http的响应 ?是什么样的r> 请求 ?有4部分组成:
响应?响应头空 ? 响应体

响应?：由协议版本，状态码和状态码的原因短语组成，例如 HTTP/1.1 200 OK 。响应头：响应部?组成
响应体：服务器响应的数据

聊?聊HTTP的部?有哪些p>

内容很多，重点看标『? 』内容
通??部字段（General Header Fields）：请求 ?和响应 ?两?都会使?的?部Cache-Control 控制缓存 ?
Connection 连接管理、逐条?部 ?
Upgrade 升级为其他协议via 代理服务器的相关信息Wraning 错误和警告通知
Transfor-Encoding ?主体的传输编码格式 ?
Trailer ?末端的?部?览
Pragma ?指令
Date 创建 ?的?期
请求?部字段（Reauest Header Fields）:客户端向服务器发送请求的 ?时使?的?部Accept 客户端或者代理能够处理的媒体类型 ?
Accept-Encoding 优先可处理的编码格式Accept-Language 优先可处理的?然语?Accept-Charset 优先可以处理的字符集If-Match ?较实体标记（ETage） ?
If-None-Match ?较实体标记（ETage）与 If-Match相反 ?
If-Modified-Since ?较资源更新时间（Last-Modified）?
If-Unmodified-Since?较资源更新时间（Last-Modified），与 If-Modified-Since相反 ?
If-Rnages 资源未更新时发送实体byte的范围请求
Range 实体的字节范围请求 ?
Authorization web的认证信息 ?
Proxy-Authorization 代理服务器要求web认证信息
Host 请求资源所在服务器 ?
From ?户的邮箱地址
User-Agent 客户端程序信息 ? Max-Forwrads 最?的逐跳次数TE 传输编码的优先级
Referer 请求原始放的 url Expect 期待服务器的特定?为
响应?部字段（Response Header Fields）:从服务器向客户端响应时使?的字段
Accept-Ranges 能接受的字节范围Age 推算资源创建经过时间Location 令客户端重定向的URI ? vary 代理服务器的缓存信息
ETag 能够表示资源唯?资源的字符串 ?
WWW-Authenticate 服务器要求客户端的验证信息Proxy-Authenticate 代理服务器要求客户端的验证信息Server 服务器的信息 ?
Retry-After 和状态码503 ?起使?的?部字段，表示下次请求服务器的时间
实体?部字段（Entiy Header Fields）:针对请求 ?和响应 ?的实体部分使??部
Allow 资源可?持http请求的?法 ? Content-Language 实体的资源语?Content-Encoding 实体的编码格式Content-Length 实体的??（字节） Content-Type 实体媒体类型

Content-MD5 实体 ?的摘要Content-Location 代替资源的 yri Content-Rnages 实体主体的位置返回Last-Modified 资源最后的修改资源 ? Expires 实体主体的过期资源 ?

聊?聊HTTP的状态码有哪些r> 2XX 成功
200 OK，表示从客户端发来的请求在服务器端被正确处理 ?
201 Created 请求已经被实现，?且有?个新的资源已经依据请求的需要?建?
202 Accepted 请求已接受，但是还没执?，不保证完成请求
204 No content，表示请求成功，但响应 ?不含实体的主体部分206 Partial Content，进?范围请求 ?
3XX 重定向
301 moved permanently，永久性重定向，表示资源已被分配了新的 URL 302 found，临时性重定向，表示资源临时被分配了新的 URL ?
303 see other，表示资源存在着另?个 URL，应使? GET ?法丁?获取资源
304 not modified，表示服务器允许访问资源，但因发?请求未满?条件的情况
307 temporary redirect，临时重定向，和302含义相同
4XX 客户端错误
400 bad request，请求 ?存在语法错误 ?
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息 ?
403 forbidden，表示对请求资源的访问被服务器拒绝 ? 404 not found，表示在服务器上没有找到请求的资源 ? 408 Request timeout, 客户端请求超时
409 Confict, 请求的资源可能引起冲突
5XX 服务器错误
500 internal sever error，表示服务器端在执?请求时发?了错误 ?
501 Not Implemented 请求超出服务器能?范围，例如服务器不?持当前请求所需要的某个功能，或者请求是服务器不?持的某个?法
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，?法处理请求505 http version not supported 服务器不?持，或者拒绝?持在请求中使?的 HTTP 版本

同样是重定向307，303，302的区别r> 302是http1.0的协议状态码，在http1.1版本的时候为了细化302状态码?出来了两个303和307。
303明确表示客户端应当采?get?法获取资源，他会把POST请求变为GET请求进?重定向。 307会遵照浏览器标准，不会从post变为get。

HTTP的keep-alive是?什么的r> 在早期的HTTP/1.0中，每次http请求都要创建?个连接，?创建连接的过程需要消耗资源和时间，为了减少资源消耗，缩短响应时间，就需要重?连接。在后来的HTTP/1.0中以及HTTP/1.1中，引?了重?连接的机制，就是在http请求头中加?Connection: keep-alive来告诉对?这个请求响应完成后不要关闭，下?次咱们还?这个请求继续交流。协议规定

HTTP/1.0如果想要保持?连接，需要在请求头中加上Connection: keep-alive。keep-alive的优点：
较少的CPU和内存的使?（由于同时打开的连接的减少了）允许请求和应答的HTTP管线化
降低拥塞控制（TCP连接减少了）
减少了后续请求的延迟（?需再进?握?）告错误?需关闭TCP连

为什么有了HTTP为什么还要HTTPSr> https是安全版的http，因为http协议的数据都是明?进?传输的，所以对于?些敏感信息的传输就很不安全，HTTPS就是为了解决HTTP的不安全??的。

HTTPS是如何保证安全的r> 过程?较复杂，我们得先理解两个概念
对称加密：即通信的双?都使?同?个秘钥进?加解密，?如特务接头的暗，就属于对称加密
对称加密虽然很简单性能也好，但是?法解决?次把秘钥发给对?的问题，很容易被?客拦截秘钥。
?对称加密：

私钥 + 公钥= 密钥对
即?私钥加密的数据,只有对应的公钥才能解密,?公钥加密的数据,只有对应的私钥才能解密
因为通信双?的??都有?套??的密钥对,通信之前双?会先把??的公钥都先发给对?
然后对?再拿着这个公钥来加密数据响应给对?,等到到了对?那?,对?再???的私钥进?解密
?对称加密虽然安全性更?，但是带来的问题就是速度很慢，影响性能。解决?案：
那么结合两种加密?式，将对称加密的密钥使??对称加密的公钥进?加密，然后发送出去，接收?使?私钥进?解密得到对称加密的密钥，然后双?可以使?对称加密来进?沟通。
此时?带来?个问题，中间?问题：
如果此时在客户端和服务器之间存在?个中间?,这个中间?只需要把原本双?通信互发的公钥,换成??的公钥,这样中间?就可以轻松解密通信双?所发送的所有数据。
所以这个时候需要?个安全的第三?颁发证书（CA），证明身份的身份，防?被中间?攻击。
证书中包括：签发者、证书?途、使?者公钥、使?者私钥、使?者的HASH算法、证书到期时间等

但是问题来了，如果中间?篡改了证书，那么身份证明是不是就?效了证明就?买了，这个时候需要?个新的技术，数字签名。
数字签名就是?CA?带的HASH算法对证书的内容进?HASH得到?个摘要，再?CA的私钥加密，最终组成数字签名。
当别?把他的证书发过来的时候,我再?同样的Hash算法,再次?成消息摘要，然后?CA的公钥对数字签名解密,得到CA 创建的消息摘要,两者??,就知道中间有没有被?篡改了。
这个时候就能最?程度保证通信的安全了。

HTTP2相对于HTTP1.x有什么优势和特点r> ?进制分帧
帧：HTTP/2 数据通信的最?单位消息：指 HTTP/2 中逻辑上的 HTTP 消息。例如请求和响应等，消息由?个或多个帧组成。
流：存在于连接中的?个虚拟通道。流可以承载双向消息，每个流都有?个唯?的整数ID HTTP/2 采??进制格式传输数据，?? HTTP 1.x 的?本格式，?进制协议解析起来更?效。
头部压缩
HTTP/1.x会在请求和响应中中重复地携带不常改变的、冗?的头部数据，给?络带来额外的负担。
HTTP/2在客户端和服务器端使?“?部表”来跟踪和存储之前发送的键－值对，对于相同的数据，不再通过每次请求和响应发送
?部表在HTTP/2的连接存续期内始终存在，由客户端和服务器共同渐进地更新; 每个新的?部键－值对要么被追加到当前表的末尾，要么替换表中之前的值。
你可以理解为只发送差异数据，?不是全部发送，从?减少头部的信息量

服务器推送
服务端可以在发送??HTML时主动推送其它资源，?不?等到浏览器解析到相应位置，发起请求再响应。例如服务端可以主动把JS和CSS?件推送给客户端，?不需要客户端解析HTML时再发送这些请求。
服务端可以主动推送，客户端也有权利选择是否接收。如果服务端推送的资源已经被浏览器缓存过，浏览器可以通过发送RST_STREAM帧来拒收。主动推送也遵守同源策略，服务器不会随便推送第三?资源给客户端。

多路复?
HTTP 1.x 中，如果想并发多个请求，必须使?多个 TCP 链接，且浏览器为了控制资源，还会对单个域名有 6-8个的TCP链接请求限制。
HTTP2中：
同域名下所有通信都在单个连接上完成。单个连接可以承载任意数量的双向数据流。
数据流以消息的形式发送，?消息?由?个或多个帧组成，多个帧之间可以乱序发送，因为根据帧?部的流标识可以重新组装

拓展阅读：HTTP/2特性及其在实际应?中的表现

HTTP的缓存的过程是怎样的r> 通常情况下的步骤是:

客户端向服务器发出请求，请求资源
服务器返回资源，并通过响应头决定缓存策略
客户端根据响应头的策略决定是否缓存资源（这?假设是），并将响应头与资源缓存下来
在客户端再次请求且命中资源的时候，此时客户端去检查上次缓存的缓存策略，根据策略的不同、是否过期等判断是直接读取本地缓存还是与服务器协商缓存

什么时候会触发强缓存或者协商缓存r> 强缓存
强缓存离不开两个响应头 Expires 与 Cache-Control
Expires：Expires是http1.0提出的?个表示资源过期时间的header，它描述的是?个绝对时间，由服务器返回， Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

Expires: Wed, 11 May 2018 07:20:00 GMT

Cache-Control: Cache-Control 出现于 HTTP / 1.1，优先级?于 Expires ,表示的是相对时间

Cache-Control: max-age=315360000

?前主流的做法使? Cache-Control 控制缓存，除了 max-age 控制过期时间外，还有?些不得不提
Cache-Control: public可以被所有?户缓存，包括终端和CDN等中间代理服务器Cache-Control: private只能被终端浏览器缓存，不允许中继缓存服务器进?缓存
Cache-Control: no-cache,先缓存本地，但是在命中缓存之后必须与服务器验证缓存的新鲜度才能使?Cache-Control: no-store，不会产?任何缓存

在缓存有效期内命中缓存，浏览器会直接读取本地的缓存资源，当缓存过期之后会与服务器进?协商。

协商缓存
当第?次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期抑或它的属性设置为no-cache时，那么浏览器第?次请求时就会与服务器进?协商。
如果缓存和服务端资源的最新版本是?致的，那么就?需再次下载该资源，服务端直接返回304 Not Modified 状态码，如果服务器发现浏览器中的缓存已经是旧版本了，那么服务器就会把最新资源的完整内容返回给浏览器，状态码就是 200 Ok。

服务器判断缓存是否是新鲜的?法就是依靠HTTP的另外两组信息

Last-Modified/If-Modified-Since
客户端?次请求资源时，服务器会把资源的最新修改时间 Last-Modified:Thu, 19 Feb 2019 08:20:55 GMT 通过响应部?发送给客户端，当再次发送请求是，客户端将服务器返回的修改时间放在请求头 If-Modified-Since:Thu, 19 Feb 2019 08:20:55 GMT 发送给服务器，服务器再跟服务器上的对应资源进??对，如果服务器的资源更新，那么返回最新的资源，此时状态码200，当服务器资源跟客户端的请求的部?时间?致，证明客户端的资源是最新的，返回304状态码，表示客户端直接?缓存即可。

ETag/If-None-Match
ETag的流程跟Last-Modified是类似的，区别就在于ETag是根据资源内容进?hash，?成?个信息摘要，只要资源内容有变化，这个摘要就会发?巨变，通过这个摘要信息?对，即可确定客户端的缓存资源是否为最新，这?Last-Modified 的精确度要更?。
响应头
因此整体的缓存流程图如下：

TODO：
http的整个流程，涉及tcp/ip协议

参考：
图解 HTTP HTTP权威指南HTTP缓存策略

TCP?试题
TCP的?试题通常情况下前端不会涉及太多，此章主要?对node.js?程师。
TCP 的特性

TCP 提供?种?向连接的、可靠的字节流服务
在?个 TCP 连接中，仅有两?进?彼此通信。?播和多播不能?于 TCP TCP 使?校验和，确认和重传机制来保证可靠传输
TCP 给数据分节进?排序，并使?累积确认保证数据的顺序不变和?重复
TCP 使?滑动窗?机制来实现流量控制，通过动态改变窗?的??进?拥塞控制

请简述TCPUDP的区别

协议
连接性
双?性
可靠性
有序性
有界性拥塞控制传输速度
量级
头部
??

TCP ?向连接(Connection oriented) 全双
?
(1:1) 可靠
(重传机制) 有序
(通过SYN排
序)
?, 有粘包情况

有
慢
低
20~60
字节

UDP ?连接(Connection less)
n:m 不可靠 (丢包后数据丢失)
?序
有消息边界, ?粘包
?
快
?
8字节
UDP socket ?持 n 对 m 的连接状态, 在官??档中有写到在 dgram.createSocket(options[, callback]) 中的 option 可以指定 reuseAddr 即 SO_REUSEADDR 标志. 通过 SO_REUSEADDR 可以简单的实现 n 对 m 的多播特性 (不过仅在?持多播的系统上才有).

TCP粘包是怎么回事，如何处理
默认情况下, TCP 连接会启?延迟传送算法 (Nagle 算法), 在数据发送之前缓存他们. 如果短时间有多个数据发送, 会缓冲到?起作?次发送 (缓冲??? socket.bufferSize ), 这样可以减少 IO 消耗提?性能.
如果是传输?件的话, 那么根本不?处理粘包的问题, 来?个包拼?个包就好了. 但是如果是多条消息, 或者是别的?途的数据那么就需要处理粘包.
可以参??上流传?较?的?个例?, 连续调?两次 send 分别发送两段数据 data1 和 data2, 在接收端有以下?种常?的情况:
A. 先接收到 data1, 然后接收到 data2 .
B. 先接收到 data1 的部分数据, 然后接收到 data1 余下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部数据和 data2 的部分数据, 然后接收到了 data2 的余下的数据.
D. ?次性接收到了 data1 和 data2 的全部数据.
其中的 BCD 就是我们常?的粘包的情况. ?对于处理粘包的问题, 常?的解决?案有:

多次发送之前间隔?个等待时间
关闭 Nagle 算法
进?封包/拆包
?案1
只需要等上?段时间再进?下?次 send 就好, 适?于交互频率特别低的场景. 缺点也很明显, 对于?较频繁的场景??传输效率实在太低. 不过?乎不?做什么处理.
?案2
关闭 Nagle 算法, 在 Node.js 中你可以通过 socket.setNoDelay() ?法来关闭 Nagle 算法, 让每?次 send 都不缓冲直接发送.
该?法?较适?于每次发送的数据都?较? (但不是?件那么?), 并且频率不是特别?的场景. 如果是每次发送的数据量
?较?, 并且频率特别?的, 关闭 Nagle 纯属?废武功.
另外, 该?法不适?于?络较差的情况, 因为 Nagle 算法是在服务端进?的包合并情况, 但是如果短时间内客户端的?络情况不好, 或者应?层由于某些原因不能及时将 TCP 的数据 recv, 就会造成多个包在客户端缓冲从?粘包的情况. (如果是在稳定的机房内部通信那么这个概率是?较?可以选择忽略的)
?案3
封包/拆包是?前业内常?的解决?案了. 即给每个数据包在发送之前, 于其前/后放?些有特征的数据, 然后收到数据的时候根据特征数据分割出来各个数据包.

为什么udp不会粘包p>

TCP协议是?向流的协议，UDP是?向消息的协议
UDP段都是?条消息，应?程序必须以消息为单位提取数据，不能?次提取任意字节的数据

如何理解 TCP backlogr> 本?来?How TCP backlog works in Linux
当应?程序调? listen 系统调?让?个 socket 进? LISTEN 状态时，需要指定?个参数： backlog 。这个参数经常被描述为，新连接队列的?度限制。

tcp-state-diagram.png
由于 TCP 建?连接需要进?3次握?，?个新连接在到达 ESTABLISHED 状态可以被 accept 系统调?返回给应?程序前，必须经过?个中间状态 SYN RECEIVED (?上图)。这意味着， TCP/IP 协议栈在实现 backlog 队列时，有两种不同的选
择：

仅使??个队列，队列规模由 listen 系统调? backlog 参数指定。当协议栈收到?个 SYN 包时，响应 SYN/ACK 包并且将连接加进该队列。当相应的 ACK 响应包收到后，连接变为 ESTABLISHED 状态，可以向应?程序返回。这意味着队列?的连接可以有两种不同的状态： SEND RECEIVED 和 ESTABLISHED
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

最全面、最详细web前端面试题及答案总结