web前端面试题（HTML、CSS、浏览器相关）

最新推荐文章于 2022-02-28 23:58:52 发布

抽屉里的五花肉

最新推荐文章于 2022-02-28 23:58:52 发布

阅读量178

点赞数

分类专栏：面试知识点整合

本文链接：https://blog.csdn.net/guoyuanyuan6496/article/details/118642473

版权

面试知识点整合专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Doctype的作用

关键词：声明文档类型、怪异模式、标准模式
回答：Doctype是document type的缩写，<!DOCTYPE >声明位于文档的最前面，目的是告诉浏览器使用标准模式还是怪异模式来渲染文档；标准模式是指按照W3C标准来渲染，怪异模式是指按照浏览器自己的方式来渲染，会影响浏览器对盒模型的解析。

H5的Doctype声明

<!DOCTYPE html>

H5新增的内容有哪些

语义化标签：header、nav、article、section、aside、footer
表单输入类型（input标签的type属性）：email、url、tel、range、date、time、week、color
表单元素：datalist、keygen、output
表单属性：placeholder、autocomplete、autofocus、required
多媒体标签：video、audio
canvas
svg
拖放API
history API
Web Socket
Web Storage：localStorage、sessionStorage
a标签增加了download属性,可利用此属性实现图片下载
参考：HTML5新增特性

语义化标签

在这里插入图片描述

语义化标签优点：提升可访问性；seo；结构清晰，利于维护

多媒体标签(video/audio)

video标签：<video src=''></video>
video属性：

autoplay：是否自动播放
controls：是否显示进度条
height/width：视频展示区域的高度/宽度
loop：是否循环播放
muted：是否静音
poster：占位图片的url
src：视频的URL

audio标签：<audio src=''></audio>
audio属性：

autoplay：是否自动播放
controls：是否显示进度条
loop：是否循环播放
muted：是否静音
src：音频的URL

History API

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面:
history.pushState()
history.replaceState()
history.go()
history.back()
history.forward()

sessionStorage、localStorage、cookie 的区别

sessionStorage、localStorage、cookie都是用来在浏览器端存储的数据的。

区别：

传递方式：
cookie在浏览器和服务器间来回传递；
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
存储大小：
localStorage<=5M；
sessionStorage<=5M；
cookie<4K；
有效性：
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
sessionStorage：仅在当前浏览器窗口关闭（刷新不会失效）前有效，不能持久保持；
cookie：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭也不会消失；
共享机制：
localStorage ：在所有同源窗口中都是共享的；
sessionStorage：同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的；
cookie：在所有同源窗口中都是共享的；
使用场景：
cookie：保存回话信息
localStorage：持久保存的数据
sessionStorage：拥有独立特性的数据

参考：localStorage，sessionStorage和cookie的区别及使用

JS延迟加载

思路：why→how
关键词：：async，defer
回答：HTML 元素是按次序调用的，如果想用 JS 来操作 DOM ，但是 JS 在 HTML 元素之前加载的话，代码就会报错；
旧的解决方法是把 JS 加载放在文档体的底端（ body 标签之前，与之相邻），这样脚本就可以在 HTML 解析完毕后加载了，但是对于 JS 文件较大的情况，性能不好，所以用async和defer来解决这个问题；
浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行，不能保证脚本会按顺序执行。如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async；
浏览器遇到 defer 脚本时不会阻塞页面渲染，而是按照他们在页面中出现的顺序加载。如果脚本需要等待页面解析，且依赖于其它脚本，那么应使用 defer ；
还可以使用动态创建 DOM 的方式
参考：MDN；defer和async的区别
代码：
<script src="file.js" async> </script> // async
<script src="file.js" defer> </script> // defer
// 动态创建 DOM
<script type="text/javascript">
 function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
 }
 if (window.addEventListener)
  window.addEventListener("load",downloadJSAtOnload, false); 
 else if (window.attachEvent)
  window.attachEvent("onload",downloadJSAtOnload);
 else
  window.onload = downloadJSAtOnload;
</script>

CSS3新增特性

选择器：:before、:after、:first-child、:last-child、:not(selector)
边框：border-image、border-radius、box-shadow
背景：background-clip、background-origin、background-size
渐变：线性渐变（Linear Gradients）、径向渐变（Radial Gradients）
文本效果：word-break、word-wrap、text-shadow、text-overflow
自定义字体：@font-face
转换和变形：transform.translate(x,y)、transform.scale(x,y)、transform.rotate(x,y)
动画：@keyframes、animation
盒模型切换：box-sizing
弹性盒子：flex
多媒体查询：@media
参考：HTML5和CSS3新特性一览

盒模型

在这里插入图片描述

关键词：标准盒模型、怪异盒模型
回答：一个css盒子由内到外分别是 content、padding、boder、margin；标准盒模型的 width 和 height 属性设置的是 content 的宽高，怪异盒模型的 width 和 height 属性设置的是 content + padding + border 的宽高；可以使用 box-sizing : content-box|border-box 来切换标准/怪异盒模型。

行内元素和块级元素

行内元素：不换行；宽高取决于内容，设置宽高无效；设置内外边距只有左右有效；只能容纳行内元素；常见的行内元素有 span、a、b、button、i、img、input；可使用 display: inline; 设置行内元素。
块级元素：总是换行；宽度默认100%，设置宽高有效；设置内外边距有效；可容纳块级元素和行内元素；常见的块级元素有 div、p、h1~h6、ul、ol、table、form、canvas；可使用 display: block; 设置块级元素。
行内块元素：不换行；宽高以及内外边距设置均有效；可使用 display: inline-block; 设置行内块元素。

清除浮动的方式

思路：why→how
关键词：clear、BFC
回答：因为浮动元素脱离文档流，导致父元素高度塌陷、浮动元素超出父元素范围等问题；
想要清除浮动，可以给浮动元素的兄弟元素设置 clear 属性，但如果浮动元素是the last children，会超出父元素，因为它的高度不被父元素计算在内；
为了解决这个问题，我们可以在父元素的末尾插入一个专门用来清除浮动的块级元素，可以是设置了clear属性的空div，或者是设置了clear属性的内容为空的伪元素；
还可以利用BFC来清除浮动，只需要给父元素设置overflow属性，父元素就会成为BFC，在BFC内浮动元素的高度是被计算在内的。
参考：清除浮动的四种方式及其原理理解
代码：

给浮动元素的兄弟元素设置 clear 属性

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>

<style>
.textDiv {
    clear: left | right | both | none;
}
</style>

插入清除浮动的块级元素

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>
<style>
.blankDiv {
    clear: both;
}
</style>

利用伪元素（和2是一个道理）

<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>
<style>
.clearfix:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
}
</style>

利用BFC

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>
<style>
.topDiv {
    overflow: auto;
}
</style>

水平垂直居中

方法1：知道宽高时，子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半

.content {
	width: 200px; /*知道宽度*/
	height: 200px; /*知道高度*/
	position: absolute; /*绝对定位*/
	left:50%;
	top:50%;
	margin-left:-100px; /*(盒子的宽度+padding+boder)/2*/
	margin-top:-100px; /*(盒子的高度+padding+boder)/2*/
}

方法2：子元素相对于父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）

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

方法3：子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin：auto

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

方法4：父元素设置弹性盒子

.parent {
	display: flex;
	justfy-content: center;
	align-item: center;
}

垂直居中

设置子元素和父元素的行高一样

.parent {
	line-height: 10px;
}
.content {
	line-height: 10px;
}

子元素设置为行内块，再加 vertical-align：middle

.content {
	display: inline-block;
	vertical-align: middle;
}

剩余参考水平垂直居中…

各种隐藏方式的区别

display:none;
隐藏对象，不会为被隐藏对象保留物理空间。用display:block;将隐藏的元素显示。
visibility: hidden;
隐藏对象，与display属性不同，只是隐藏了内容，占位空间依然保留。用visibility: visible;可将隐藏的对象显示。
opacity:0;
取值0表示透明、0~1之间表示半透明、1表示不透明。
区别：
display会产生回流和重绘，visibility和opacity只会引起重绘
visibility的父元素设置hidden，子元素设置visible，子元素可见；display和opacity不行
opacity隐藏后的元素可以点击；display和visibility不行

如何让页面变灰

filter: grayscale(100%);

如何实现毛玻璃效果

filter: blur(20);

如何让chrome浏览器显示小于12px的文字

transform: scale(0.9); // 0~1

CSS选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

外边距重叠

概念：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
有三种情况会形成外边距重叠：

同一层相邻元素之间
没有内容（border、padding…）将父元素和子元素分开
空的块级元素

常见的问题：第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距
解决方法：给父元素加个padding或border或overflow:hidden
参考：MDN；CSS margin属性详解；为子元素设置margin-top会作用在父元素上？

BFC（块格式化上下文）

概念：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
参考：MDN；10 分钟理解 BFC 原理
回答：
只要元素满足下面任一条件即可触发 BFC 特性：

根元素：html
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性：

同一个 BFC 内垂直方向上的外边距会发生折叠
BFC 会把浮动元素的宽高计算在内，不会发生高度塌陷的现象
BFC 不与浮动元素重叠，可以用来实现两列自适应布局

定位

position属性用来指定一个元素在网页上的位置，一共有5种定位方式：

static：元素在文档流中本该在的地方，此时top、bottom、left、right这四个属性无效
relative：相对于默认位置进行偏移，必须搭配top、bottom、left、right一起使用
absolute：相对于离它最近的relative父元素进行偏移，必须搭配top、bottom、left、right一起使用
fixed：相对于浏览器窗口进行偏移，可以搭配top、bottom、left、right一起使用
sticky：它会产生动态固定效果，很像relative和fixed的结合，必须搭配top、bottom、left、right一起使用

Flex布局

有六种属性可以设置在flex容器上：

// 设置主轴方向
flex-direction: row | row-reverse | column | column-reverse;
// 决定容器内项目是否可换行
flex-wrap: nowrap | wrap | wrap-reverse;
// flex-direction 和 flex-wrap 的简写形式
flex-flow: <flex-direction> || <flex-wrap>;
// 定义了项目在主轴的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
// 定义了项目在纵轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
// 义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

有六种属性可设置在 item 项目上：

// 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
order: <integer>;
// 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
flex-basis: <length> | auto;
// 定义项目的放大比例
flex-grow: <number>;
// 定义了项目的缩小比例
flex-shrink: <number>;
// flex-grow, flex-shrink 和 flex-basis的简写
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
// 允许单个项目有与其他项目不一样的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;

tips：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
参考：30 分钟学会 Flex 布局

用flex实现常用的布局

水平垂直居中

.container{
    display: flex;
    align-items: center;     /* 垂直居中*/
    justify-content: center; /* 水平居中*/
}

左边固定宽度，右边占满宽度

.container{
    display: flex;
    width: 100%;
}
.item1{
    width: 100px;
}
.item2{
    flex: 1;
}

顶部固定高度，下部占满剩余高度

.container{
    display: flex;
    width: 100%;
    height: 300px;
    flex-direction: column;
}
.item1{
    width: 100%;
    height: 20px;
}
.item2{
    width: 100%;
    flex: 1;
}

顶部，底部固定高度，中间占满剩余高度

.container{
    display: flex;
    width: 100%;
    height: 300px;
    flex-direction: column;
}
.item1{
    width: 100%;
    height: 20px;
}
.item2{
    width: 100%;
    flex: 1;
}
.item3{
    width: 100%;
    height: 20px;
}

重绘和回流

思路：浏览器渲染过程→DOM树和渲染树及二者区别→重绘和回流及二者区别→优化
关键词：DOM树、渲染树、重绘、回流
参考：页面优化，谈谈重绘(repaint)和回流(reflow)；浏览器的渲染过程，DOM 树和渲染树的区别
回答：一个页面从加载到完成，首先是构建 DOM 树，然后结合 CSS 形成render树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对应的渲染这些节点。
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素；渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性。
当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘；当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流。
回流与DOM树，渲染树有关，重绘与渲染树有关；回流的代价远大于重绘；回流必将引起重绘，而重绘不一定会引起回流。
最小化重绘和回流的办法有：

需要要对DOM元素进行复杂的操作时，可以先隐藏(display:“none”)，操作完成后再显示
需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document，或使用字符串拼接方式构建好对应HTML后再使用innerHTML来修改页面
缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
如果你要改变多个属性，最好将这些属性定义在一个class中，直接修改class名，这样只用引起一次回流

CSS前缀

不同浏览器内核对应不同的css前缀，常见的css前缀有：

Trident内核 css前缀为"-ms-" IE
Gecko内核 css前缀为"-moz-" 火狐浏览器
WebKit内核 css前缀为"-webkit-" safari chrome
Presto内核 css前缀为"-o-" Opera（欧朋）

出现不同前缀的原因：
因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但w3c制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。为避免日后w3c公布标准时有所变更，加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。

@import和link的区别

从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
权重区别(该项有争议)
link引入的样式权重大于@import引入的样式。

优化图片加载

减少图片体积大小：
尽可能的压缩图片
先加载较为模糊的压缩后的图片，等高清图片家外完成后再进行替换
选择合适的图片格式
使用css、svg、canvas或iconfont代替图片
使用css来绘制较为简单的图案，这种方法不适用于过于复杂的图片
svg是一种用于描述二维的矢量图形，基于 XML 的标记语言，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。
canvas元素可被用来通过js绘制图形及图形动画。
iconfont可以把图标转换成字体来使用
减少图片资源请求数(合并HTTP请求)：
雪碧图：将一批图标合成一张图片，使用时根据定位去调整显示哪一个；可以有效减少资源请求数，只适用于较小的图片，否则得不偿失
使用DataURL：小图片可使用Base64来设置src属性；可以有效减少资源请求数，只适用于较小的图片，否则得不偿失
预加载：
显性预加载：把所有图片都下载完以后，再将页面渲染呈现给用户；图片过多的情况下，用户可能失去等待的耐心，可显示loading避免用户焦躁
隐性预加载：先显性预加载部分图片呈现给客户，并同时进行剩余图片预加载，当用户交互时，若触发的图片还未记载完成，则展示loadng，若已加载完成，则展示图片；无需等待太久，增加了交互性，优先加载的图片可以吸引用户继续使用
懒加载：
按需加载，先展示首屏图片，同时监听滚动事件，每次滚动到底部时加载下一屏图片
参考：图片加载之性能优化；网页图片加载优化方法总结

预加载和懒加载的区别

预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；
懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源
两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

如何对网站的文件和资源进行优化

文件合并（目的是减少http请求）
文件压缩（目的是直接减少文件下载的体积）
使用cdn托管资源
使用缓存
gizp压缩你的js和css文件
meta标签优化（title,description,keywords）、heading标签的优化、alt优化
反向链接，网站外链接优化

px，rem，em的区别

px：绝对长度单位，像素px是相对于显示器屏幕分辨率来说的
em：相对长度单位，相对于当前对象内文本的字体尺寸
rem：相对长度单位，相对于html根元素的font-size

转换：
1em=1rem=16px
在body中加入font-size：62.5% 这样直接就是原来的px数值除以10加上em就可以

div模拟textarea

使用属性：contenteditable

<div contenteditable="true">
    .....此处省略.....
</div>

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

过程：DNS解析→建立TCP链接→建立Http请求→服务器处理Http请求→关闭TCP连接→浏览器解析资源→浏览器渲染页面

DNS解析(域名解析)
当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

建立TCP连接
在拿到ip地址后，浏览器会向对应的 web 服务器(Nginx,Apache…)发起 TCP 连接请求，通过三次握手,建立TCP连接。

建立Http请求
建立TCP连接后，浏览器向web服务器发送Http请求。

服务器处理Http请求
web 服务器在接收到请求后，解析用户请求，将相应的资源提供给客户端，客户端开始下载资源。

关闭TCP连接
在这次数据传输完成后，为了避免服务器与客户端双方的资源占用和损耗，会经过四次挥手，关闭TCP连接。

浏览器解析资源
在拿到html、css、js、图片等资源后，浏览器开始解析，通过解析 HTML 生成 DOM 树，解析CSS 生成 CSS 规则树，然后通过 DOM 树和 CSS 规则树生成渲染树。在解析CSS的同时，可以继续加载解析HTML，但在解析执行 JS 脚本时，会停止解析后续HTML，这就会出现阻塞问题。可以使用JS延迟加载来解决这个问题。

浏览器渲染页面
生成渲染树后，浏览器根据渲染树布局页面，同时计算 css 样式或 js 对 dom 的动态样式改变，然后绘制出页面。
参考：从输入url到页面展示出来，中间发生了什么？

DNS解析（不重要，只是做个记录）

首先浏览器解析输入的域名,先查找本地硬盘的host文件,看有没有和这个域名对应的ip,如果有,就直接使用这个ip.
如果没有,浏览器会发出一个DNS请求到本地DNS(域名分布系统)服务器.本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动.
请求到达DNS服务器后,DNS服务器首先会查询他的缓存记录,如果有对应的ip地址,则返回,如果没有,本地DNS服务器向DNS根服务器发送查询请求.
根服务器不会记录具体的域名和ip的对应关系,而是返回域服务器的地址.本地服务器会继续向域服务器发起请求.
域服务器并没有记录域名和ip的对应关系,而是返回你的域名的解析服务器的地址.
本地DNS服务器继续向域名解析服务器发出请求,这时会收到域名对应的ip,本地DNS服务器将ip返回给浏览器,并将ip存入缓存,方便下次访问,加快访问速度.

为什么要三次握手，四次挥手

为什么要三次握手？
为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。
具体例子：“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况，client不会向server的确认发出确认。server由于收不到确认，就知道client并没有要求建立连接。”
简而言之：server需要确认本次链接请求是有效的
为什么要四次挥手？
TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。TCP是全双工模式，这就意味着，当主机1发出FIN报文段时，只是表示主机1已经没有数据要发送了，主机1告诉主机2，它的数据已经全部发送完毕了；但是，这个时候主机1还是可以接受来自主机2的数据；当主机2返回ACK报文段时，表示它已经知道主机1没有数据发送了，但是主机2还是可以发送数据到主机1的；当主机2也发送了FIN报文段时，这个时候就表示主机2也没有数据要发送了，就会告诉主机1，我也没有数据要发送了，之后彼此就会愉快的中断这次TCP连接。
简而言之：双方都需要表示断开连接的意向并确保对方已经知道
参考：什么是TCP/IP协议

HTTP是什么

HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范
参考：什么是HTTP

HTTPS是什么

HTTPS 就相当于运行在 SSL/TLS 协议上的 HTTP。它是一个负责加密通信的安全协议，建立在 TCP/IP 之上，所以也是个可靠的传输协议，可以被用作 HTTP 的下层。相当于“HTTP+SSL/TLS+TCP/IP”。
参考：什么是HTTP

Get和Post的区别

区别：

get通过地址栏传输，post通过报文传输
get参数有长度限制（受限于url长度），而post无限制
get没有post安全
get产生一个tcp包（ header和data一起发送），post产生两个tcp包（先发送header等待服务器响应，服务器响应后再发送data）

适用场合：

包含机密信息时优先考虑使用Post
只做数据查询时优先考虑使用Get
做数据的增删改时优先考虑使用Post
参考：GET和POST两种基本请求方法的区别

cookie和session的区别

数据存放位置不同：
cookie数据存放在客户的浏览器上，session数据放在服务器上。
安全程度不同：
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
性能使用程度不同：
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用cookie。
数据存储大小不同：
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie，而session则存储与服务端，浏览器对其没有限制。
会话机制不同：
session会话机制：session会话机制是一种服务器端机制，它使用类似于哈希表（可能还有哈希表）的结构来保存信息。
cookies会话机制：cookie是服务器存储在本地计算机上的小块文本，并随每个请求发送到同一服务器。 Web服务器使用HTTP标头将cookie发送到客户端。在客户端终端，浏览器解析cookie并将其保存为本地文件，该文件自动将来自同一服务器的任何请求绑定到这些cookie。

什么是内存泄漏

内存泄漏是指一块被分配的内存既不能使用又不能回收，直到浏览器进程结束
释放内存的方法：赋值为null

浏览器的缓存机制

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存

强制缓存：

定义：强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程
三种情况：
1.不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求
2.存在该缓存结果和缓存标识，但是结果已经失效，强制缓存失效，则使用协商缓存
3.存在该缓存结果和缓存标识，且该结果没有还没有失效，强制缓存生效，直接返回该结果
规则：
当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Conctrol的优先级比Expires高
Expires：服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果；由于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，如果客户端与服务端的时间由于某些原因（时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存直接失效，那么强制缓存存在的意义就毫无意义
Cache-Control：是最重要的规则，主要用于控制网页缓存，主要取值为：
public：所有内容都将被缓存（客户端和代理服务器都可缓存）
private（默认）：所有内容只有客户端可以缓存
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

协商缓存：

定义：强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
两种情况：
1.协商缓存生效，返回304
2.协商缓存失败，返回200和请求结果
控制协商缓存的字段分别有：(Last-Modified / If-Modified-Since)和(Etag / If-None-Match)，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。
*Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间
*If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。
^Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)
^If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值

浏览器的缓存存放在哪里，如何在浏览器中判断强制缓存是否生效？

状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。

参考：彻底理解浏览器的缓存机制（http缓存机制）

AST树

没研究明白，先大概写一下吧
js的最底层，用来描述js语言的结构树，es6转换成AST再转换成es5
参考：详解AST抽象语法树

抽屉里的五花肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端面试题（HTML、CSS、浏览器相关）

Doctype的作用H5的Doctype声明H5新增的内容有哪些History APIJS延迟加载盒模型行内元素和块级元素清除浮动的方式水平垂直居中垂直居中各种隐藏方式的区别怎么让页面变灰怎么实现毛玻璃效果CSS选择器优先级Doctype的作用关键词：声明文档类型、怪异模式、标准模式回答：Doctype是document type的缩写，<!DOCTYPE >声明位于文档的最前面，目的是告诉浏览器使用标准模式还是怪异模式来渲染文档；标准模式是指按照W3C标准来渲染，怪异模式是指按照浏览.
复制链接

扫一扫