记录遇到的前端面试题，欢迎指正

css

1.隐藏元素的方式 转自将页面元素隐藏的10种方法

• display:none
  display属性用于设置页面元素的显示方式，能够控制元素的显示或者隐藏，当他的值被设置为none时，就会隐藏对应的元素，使其不可见。
  这种方法是最常用的隐藏元素的方法，可以让元素在网页中完全消失，不会占据页面上的任何空间，用户无法看到或进行交互。
  但是这样也会导致元素脱离文档流，可能会影响其他元素的布局。
• visibility:hidden
  visibility舒缓型是专门用于控制元素的显示和隐藏，当它的值设置为hidden后，也会将元素隐藏。
  但与display不同的地方在于，此时元素仍会占据页面上的空间，只是在视觉上不可见，显示为空区域（所占区域为元素的大小）。
  这种方式也是无法进行元素的响应事件监听和交互状态，通常应用于需要隐藏但仍需要占据空间的元素，如占位符、提示信息等
• opacity:0
  opacity属性用于控制元素的透明度，取值范围：0-1，0表示完全透明，1表示不透明
  当我们讲元素的opacity属性设置为0时，该元素将会变为不可见状态，不过它仍会占据页面上的空间。
  这种方式隐藏的元素，都是视觉上不可见，和visibility:hidden比较类似
  但不同的地方在于：opacity：0 设置元素不可见以后，用户仍然能够与该元素进行交互，而visibility：hidden则不行
• position
  position属性用于控制元素的定位方式，可以将元素在页面的不同位置进行定位，有多个取值，也是css中非常重要的属性，但我们这里只讨论如何隐藏元素。
  当position取值相对定位或者绝对定位时，给定（left/top/right/bottom）四个方向上的任意一个较大的值（或负值），都能将元素设置到屏幕之外，达到不可见的状态。
  在使用上，相对定位和绝对定位有一定的区别。
  绝对定位的元素会脱离文档流，整个从视觉上小时，效果上与display:none相似。
  而相对定位则只是将元素移出，在当前位置仍然会占据一定的空间，效果上与visibility:hidden较相似。
  但使用的定位的方式使元素不可见，都无法再与元素进行交互操作。
  在绝对定位时还可以通过z-index属性将元素的层级调低，让它被其他元素遮挡，达到一定的隐藏效果
• clip-path:circle(0%)
  clip-path属性，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。根据它的特点，如果将元素的所有内容都设置到显示区域外，则元素就自动隐藏了，达到不可见的状态，而要实现这点，只需要将剪切区域设置为0，有多个形状可以实现

.box {
  clip-path: circle(0%);
  clip-path: inset(50%);
  clip-path: polygon(0 0);
}

这种方式隐藏的元素，虽然不可见，但仍然会占据自身大小的空间，效果上与 visibility:hidden 相似。并且也不能响应事件监听和各种交互状态。

• filter:blur(500px)
  filter 属性是CSS3开始提供的，用于对页面元素设置各种滤镜效果，有大概十多个各种不同的滤镜值可以设置，我们这里使用 blur 模糊效果来达到隐藏页面元素的效果。

只需要将 blur() 值设置为一个较大的值，元素将模糊到无法显示的地方，如值大于400：

.elem {
  filter: blur(500px);
}

通过以上代码，就能将元素进行隐藏了，他的效果与使用 opacity: 0 一样，元素虽不可见，但仍占据空间，并且能够响应事件和交互状态。

注意：filter:opacity(0) 透明滤镜与 opacity: 0 也一样。

• HTML Element 的 hidden 属性
  通过设置页面元素(Element)的 hidden 属性，也能够将元素进行隐藏，它达到的效果与 display:none 几乎一样，元素脱离文档流、不可见，不占用空间，无法响应事件和用户交互等。

<div hidden>这个元素将被隐藏，不占用空间，无法交互。</div>

以上方式，针对的页面元素，是不区分块状元素和行内元素，都能够达到隐藏效果，下面还有几种方式，可能针对特定的元素才起作用。

• width: 0
  这个方式代表一类隐藏元素的方法，即通过设置元素的宽高属性为 0，达到隐藏元素的效果。
  注意，行内元素无法设置宽高属性，所以这种方法一般处理块状元素。
  但如果块状元素内包含文字，则文字内容仍然会显示，并且呈竖状
  因此，这类方法平时很少会使用。
  那如果想把文本内容也隐藏，有没有办法呢？那就要用到下面的属性了。

font-size: 0
font-size 用于设置文字的大小，当我们把它的值设置为 0 时，文本内容就不可见

• transform:scale(0)
  transform 属性用于对元素进行变换，例如旋转、缩放、平移等。其中，缩放 scale 就可以用来隐藏元素使用，只需要将 scale 的值设置为 0，该元素就会被缩放到不可见的状态，达到隐藏效果：

.box{
  transform: scale(0);
}

需要注意的是，transform:scale(0) 达成的隐藏效果，无法作用于行内元素，这是由于 transform 属性本身对行内元素不起作用。
并且，这种隐藏方式也会占用页面空间(元素的原始大小区域)，但元素实际上宽高都为0，同样无法响应事件和交互

2.元素居中 元素居中大合集

文本水平居中

<div>文本</div>

<style>

div{text-align:center;}

</style>

单行文本垂直居中

<div>文本</div>

<style>

div{height:60px; line-height:60px;}

</style>

多行文本垂直居中

<div>文本</div>

<style>

div{height:300px; display:table-cell; vertical-align:middle}

</style>

图片水平居中

<div><img src="1.jpg" /></div>

<style>

div{text-align:center}

</style>

图片垂直居中

// 1）利用行高等于高度的原理
<div><img src="1.jpg" /></div>
<style>
	div{height:200px; line-height:200px; }
	img{vertical-align:middle}
</style>

//2）利用中线参照物的原理
<div><img src="1.jpg" /><span></span></div>
<style>
	div{height:200px; }
	img{vertical-align:middle;}
	span{vertical-align:middle;width:0; height:100%; display:inline-block}
</style>
//方法二中，如果前面样式重置的时候你把图片转成块级元素了，那么你还需要再给转回来（display:inline-block）,参照物span也可以使用css3里面的伪元素替代：
<div><img src="1.jpg" /></div>
<style>
	div{height:200px; }
	img{vertical-align:middle; display:inline-block}
	div::after{content:"";vertical-align:middle;width:0; height:100%; display:inline-block}
</style>

块级元素居中

1、定位居中方法

1. 知道子盒子尺寸的情况下可以使用

<div class="box">
    <div class="inner"></div>
</div>
<style>
	.box{
		width:400px; 
		height:400px; 
		background:#ff0;
		position:relative
	}
	.inner{
		width:100px; 
		height:100px; 
		background:#0f0;
		position:absolute;
		top:50%;
		margin-top:-50px;
		left:50%;
		margin-left:-50px;
	}
	/* margin-top的取值是负的子盒子的高度的一半，margin-left的取值是负的子盒子的宽度的一半*/
</style>

2. 知道子盒子尺寸的情况下利用css3里面的calc函数也可以实现

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{
	width:400px; 
	height:400px; 
	background:#ff0;
	position:relative
	}
    
.inner{
	width:100px; 
	height:100px; 
	background:#0f0;
	position:absolute;
	top:calc(50% - 50px); 
	left: calc(50% - 50px); 
}
/* calc(50% - 50px) 里面减掉的是子盒子的宽度（或者高度）的一半*/

</style>

3. 不知道子盒子尺寸的情况下可以使用

<div class="box">
    <div class="inner"></div>
</div>
<style>
	.box{
		width:400px; 
		height:400px; 
		background:#ff0;
		position:relative
	}
	.inner{
		width:100px; 
		height:100px; 
		background:#0f0; 
		position:absolute; 
		top:0; 
		bottom:0; 
		right:0; 
		left:0; 
		margin:auto;
	}
</style>

4. 不知道子盒子尺寸的情况下利用css3里面的位移可以实现

<div class="box">
    <div class="inner"></div>
</div>
<style>
	.box{
		width:400px; 
		height:400px; 
		background:#ff0;
		position:relative
	}
	.inner{
		width:100px; 
		height:100px; 
		background:#0f0;
		position:absolute;
		top:50%; 
		left: 50%; 
		transform:translate(-50%,-50%) 
	}
	/* translate里面的百分数参照物是元素自身，所以就算你不知道盒子尺寸也可以实现的*/
</style>

2、弹性盒居中方法

<div class="box">
    <div class="inner"></div>
</div>

<style>

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

</style>

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{display:flex; justify-content:center; }

.inner{ align-self:center }

</style>

<div class="box">
    <div class="inner"></div>
</div>

<style>

.box{display:flex; }

.inner{margin:auto}

</style>

3、inline-block居中方法

//1）行高等于高度居中方法
<div class="box">
    <div class="inner"></div>
</div>

<style>
.box{
	width:400px; 
	height:400px; 
	background:#ff0; 
	text-align:center;
	line-height:400px 
}
.inner{
	vertical-align:middle; 
	display:inline-block
}
</style>

// 2）参照物中线对齐方法
<div class="box">
    <div class="inner"></div>
</div>

<style>
.box{
	width:400px; 
	height:400px; 
	background:#ff0; 
	text-align:center; 
}
.inner{
	vertical-align:middle; 
	display:inline-block
}
.box::after{
	content:""; 
	vertical-align:middle; 
	display:inline-block; 
	width:0; 
	height:100%
}
</style>

// 3）等同多行文本居中方法
<div class="box">
    <div class="inner"></div>
</div>

<style>
.box{
	width:400px; 
	height:400px; 
	background:#ff0; 
	text-align:center; 
	display:table-cell; 
	vertical-align:middle 
}
.inner{ 
	display:inline-block
}
</style>

3.动画

css动画就是元素从一种样式过渡到另一种样式的过程。动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。常见的动画效果很多，比如，平移、旋转、缩放等，css实现动画的方式有以下几种：
1、transition：实现渐变动画
2、transform：实现转变动画
3、animation：实现自定义动画

// animation: move 1s 部分就是动画的第一部分，用于描述动画的各个规则;
// @keyframes move {} 部分就是动画的第二部分，用于指定动画开始、结束以及中间点样式的关键帧;
div {
    animation: change 3s;
}
 
@keyframes change {
    0% {
        color: #f00;
    }
    100% {
        color: #000;
    }
}

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

animation 的子属性有：

• animation-name：指定由 @keyframes 描述的关键帧名称。
• animation-duration：设置动画一个周期的时长。
• animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
• animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
• animation-iteration-count：设置动画重复次数， 可以指定 infinite 无限次重复动画
• animation-play-state：允许暂停和恢复动画。
• animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
• animation-fill-mode：指定动画执行前后如何为目标元素应用样式
• @keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧
  其中，对于一个动画：
• 必须项：animation-name、animation-duration 和 @keyframes规则
• 非必须项：animation-delay、animation-direction、animation-iteration-count、animation-play-state、animation-timing-function、animation-fill-mode，当然不是说它们不重要，只是不设置时，它们都有默认值

4.bfc 原文链接

Block formatting context：块级格式化上下文（直译）。
BFC是一个独立的渲染区域，是Web页面中盒模型布局的CSS渲染模式，其中的元素布局和定位不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
因为这个“不受外界影响”这个特性，可以用来清除浮动，解决margin塌陷，不被浮动元素覆盖（文字环绕）等。
如何形成BFC呢？

• float 除 none 以外的值；
• position（absolute，fixed）；
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
• overflow 除了 visible 以外的值（hidden，auto，scroll）；
• <html.>根元素

BFC的布局规则是什么？

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠【margin塌陷】
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。【解决文字环绕】
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。【解决margin塌陷】
6. 计算BFC的高度时，浮动元素也参与计算【清除浮动】

BFC常用的作用

1）BFC中盒子对齐
对比IFC(行内格式化上下文)的特性，盒子在水平方向一个接着一个排列。块级格式化上下文里的块级盒会在垂直方向一个接着一个排列，即便不在bfc里块级盒子也是垂直排列的。
2）外边距折叠
在常规情况下，两个兄弟盒子之间的垂直距离是由他们最大的外边距决定，而不是外边距之和。

<div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
</div>
.parent{
   overflow: hidden;
}
 
.parent .child1,
.parent .child2 {
   background-color: salmon;
   height: 50px;
}
 
.child1 {
   margin-bottom: 30px;
}
 
.child2 {
   margin-top: 50px;
}

从上面的例子可以看出，两个盒子是50px而不是80px，因为垂直外边产生折叠，间距以较大的为准。如何解决呢？使用规则第5条，创建子元素BFC，任意选择其中一个子元素创建BFC。方法如下：

    <div class="parent">
      <div class="child1"></div>
      <div class="child-box">
        <div class="child2"></div>
      </div>
    </div>
        .child-box {
      overflow: hidden;
    }

3）不被浮动元素覆盖（解决文字环绕）

 <div class="float">
      <div class="item">我是aa里內容</div>
      <div class="item">
        我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容
      </div>
 </div>
     .item {
      height: 50px;
    }
 
    .item:nth-child(1) {
      float: left;
      width: 50px;
      background-color: sandybrown;
    }
 
    .item:nth-child(2) {
      height: 100px;
      background-color: seagreen;
      /* 激活BFC */
      /* 该div会自动适应宽度 */
      /*  overflow: hidden; */
    }

4）清除浮动
清除浮动常用的方法overflow:hidden，因为浮动的子盒子无法撑出处于标准文档流的父盒子的height。
创建BFC清除浮动后【为显示区别，父元素加了阴影效果】
此处利用规则6：计算BFC的高度时，浮动元素也参与计算

5.兼容性怎么处理

1) 不同浏览器的标签默认的内外边距不同
清除浏览器自带的默认样式
2) 图片加a标签在IE9中会有边框
解决方案：img{border: none;}
3) IE6及更低版本浮动元素，浮动边双倍边距
解决方案：不使用margin，使用padding
4) IE6及更低版本中，部分块元素拥有默认高度
解决方案：给元素设置font-size: 0;
5) a标签蓝色边框
解决方案：a{outline: none;}
6) IE6不支持min-height属性
解决方案：{min-height: 200px; _height: 350px;}
7) IE9以下浏览器不能使用opacity

// 解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter
opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie滤镜,可以兼容ie*/

8) IE6/7不支持display:inline-block
解决方案：{display: inline-block; *display: inline;}
9) cursor兼容问题
解决方案：统一使用{cursor: pointer;}
10) IE6/7中img标签与文字放一起时，line-height失效的问题
解决方案：文字和都设置float
11) table宽度固定，td自动换行
解决方案：table设置 {table-layout: fixed}，td设置 {word-wrap: break-word}
12) 相邻元素设置margin边距时，margin将取最大值，舍弃小值
解决方案：不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置：{overflow: hidden}
13) a标签css状态的顺序
解决方案：按照link–visited–hover–active的顺序编写
14) IE6/7图片下面有空隙的问题
解决方案：img{display: block;}
15) ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值
解决方案：ul{margin: 0;padding: 0;}
16) IE中li指定高度后，出现排版错误
解决方案：设置line-height
17) ul或li浮动后，显示在div外
解决方案：清除浮动；须在ul标签后加

来闭合外层div
18) ul设置float后，在IE中margin将变大
解决方案：ul{display: inline;}，li{list-style-position: outside;}
19) li中内容超过长度时，用省略号显示

li{
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

20) div嵌套p时，出现空白行
21) IE6默认div高度为一个字体显示的高度
解决方案：{line-height: 1px;}或{overflow: hidden;}
22) 在Chrome中字体不能小于10px
解决方案：p{font-size: 12px; transform: scale(0.8);}
23) 谷歌浏览器上记住密码后输入框背景色为黄色

input{
    background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s;
}

24) CSS3兼容前缀表示

  .box{
       height: 40px;
       background-color: red;
       color: #fff;
       -webkit-border-radius: 5px; // chrome/safari
       -moz-border-radius: 5px; // Firefox
       -ms-border-radius: 5px; // IE
       -o-border-radius: 5px; // Opera
       border-radius: 5px;
   }

6.em 和 rem 区别 与原理

rem是CSS 3中新增的一种相对长度单位。当使用rem单位时，根节点的字体大小(font-size)决定了rem的尺寸。
rem单位类似于em单位，em单位表示父元素字体大小，不同之处在于，rem的基准是相对于元素的字体大小。下面通过代码对比em和rem的区别。

7.Sass，双飞翼布局外其他的 flex,grid,圣杯,传统浮动布局

1）sass与less 原文链接

• sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

• sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理，引入less.js就可以处理，sass是基于ruby所以在服务器处理
  1.1 less优点
  可以在浏览器中运行，实现主题定制功能；
  1.2 less缺点

• 编程能力弱，不直接支持对象，循环，判断等；只有when判断

• @variable 变量命名和css的@import/media/keyframes等含义容易混淆；

• mixin/extend的语法比较奇怪；

• mixin的参数如果遇到多参数和列表参数值的时候容易混淆；
  1.3 sass优点:

• 用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；

• 可编程能力比较强，支持函数，列表，对象，判断，循环等；相比less有更多的功能；

• 丰富的sass库：Compass/Bourbon；
  1.4 sass缺点
  在公司内部安装node-sass会失败，需要使用cnpm或者手工安装
  1.5 less 和 sass 不同点:

• 基本语法
  Less 的基本语法属于「CSS 风格」
  Sass、相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符 不过区别在于 Sass、同时也兼容「CSS 风格」代码

// less
.box {
  display: block;
}
// sass
.box
  display: block

-嵌套语法
三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同。
区别只是 Sass 可以用没有大括号的方式书写

// less 
.a {
  &.b {
    color: red;
  }
}

• 变量
  变量无疑为 CSS 增加了一种有效的复用方式，减少了原来在 CSS 中无法避免的重复「硬编码」

// less
@red: #c00;
strong {
  color: @red;
}

// sass
$red: #c00;
strong {
  color: $red;
}

• @import

//  Less 中可以在字符串中进行插值：
@device: mobile;
@import "styles.@{device}.css";

// Sass 中只能在使用 url() 表达式引入时进行变量插值：
$device: mobile;
@import url(styles.#{$device}.css);

• 混入
  混入（mixin）应该说是预处理器最精髓的功能之一了。
  它提供了 CSS 缺失的最关键的东西：样式层面的抽象。
  Less 的混入有两种方式：
  1.直接在目标位置混入另一个类样式（输出已经确定，无法使用参数）；
  2.定义一个不输出的样式片段（可以输入参数），在目标位置输出。

.alert {
  font-weight: 700;
}
 
.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}
 
.heads-up {
  .alert;
  .highlight(red);
}

// 编译后
.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

// sass
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
 
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

// less
.message {
  padding: 10px;
  border: 1px solid #eee;
}
 
.warning {
  &:extend(.message);
  color: #e2e21e;
}

-继承

.active {
   color: red;
}
button.active {
   @extend .active;
}

2)双飞翼布局与圣杯布局 原文链接
圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

不同之处
所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。 他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。
相同之处

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列
• 只需要使用一个额外的 div 标签
  区别：
  圣杯布局
• 布局结构清晰，一目了然
• 为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

用 float 实现圣杯布局
左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置
中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置
中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置
优点：不需要添加dom节点

双飞翼布局：

• 布局结构不太直观
• 为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。
• 优点：不会像圣杯布局那样变形; 缺点是：多加了一层dom节点

3)flex,grid
flex Flex 布局教程：实例篇
grid CSS Grid 网格布局教程

http

1.缓存

Cookie、localStorage和sessionStorage
Cookie
1、有时效性，不设置有效期，默认关闭浏览器就失效。
2、分域名储存，在当前域名下储存只能在当前域名下使用。
3、分路径储存，根路径不能用子路径的数据，子路径可以用根路径的数据。
4、不可跨域。
5、大小为4K。
6、可以灵活设置生存周期。
7、操作使用较为复杂，由于cookie其本质是设置在header的头数据，所以操作数据需要对数据进行拆分重组过程。

设置cookie：document.cookie = ‘键=值;expires=失效时间;path=要储存的路径;’
清除cookie：document.cookie = ‘键=值;expires=失效时间改到已经过去的时间’

localStorage和sessionStorage
localStorage的特点：数据会永久储存，不清除的话一直都在
sessionStorage的特点：浏览器刷新或者关闭时，数据会丢失

// 设置getItem()：
localStorage.setItem('name', '张三')
sessionStorage.setItem('name', '李四')

// 获取setItem()
localStorage.setItem('name', 'xxx')
sessionStorage.setItem('name', 'xx')

console.log(localStorage.getItem('name'))
console.log(sessionStorage.getItem('name'))

// 删除removeItem()

//设置缓存
localStorage.setItem('name', '张三')
sessionStorage.setItem('name', '李四')
//删除缓存
localStorage.removeItem('name')
sessionStorage.removeItem('name')
//获取缓存
console.log(localStorage.getItem('name'))
console.log(sessionStorage.getItem('name'))

// 全部清除clear()：
// 1.先设置一些数据
localStorage.setItem('name', '张三')
localStorage.age = '18'
sessionStorage.setItem('name', '李四')
sessionStorage.age = '20'
console.log(localStorage.getItem('name'), localStorage.age)
console.log(sessionStorage.getItem('name'), sessionStorage.age)
// 2.清除所有缓存
localStorage.setItem('name', '张三')
localStorage.age = '18'
sessionStorage.setItem('name', '李四')
sessionStorage.age = '20'

//清除所有数据
localStorage.clear()
sessionStorage.clear()

console.log(localStorage.getItem('name'), localStorage.age)
console.log(sessionStorage.getItem('name'), sessionStorage.age)

//其他的一种设置获取：
const jsonData = [
    {
        "id": 3,
        "username": "cuihua",
        "password": "asdf333",
        "nickname": "asdf",
        "identity": "学生",
        "gender": "女",
        "age": 23,
        "createTime": 1647587821399,
        "updateTime": 1647587905785,
        "cart": []
    },
    {
        "id": 4,
        "username": "admin",
        "password": "123456",
        "nickname": "ed",
        "identity": "学生",
        "gender": "",
        "age": "",
        "createTime": 1649251356317,
        "updateTime": 1649251356317,
        "cart": []
    },
    {
        "id": 5,
        "username": "sa123",
        "password": "111111",
        "nickname": "张三",
        "identity": "学生",
        "gender": "",
        "age": "",
        "createTime": 1649317083990,
        "updateTime": 1649317083990,
        "cart": []
    }
]
//还可以这样设置
//设置
localStorage.jsonData = JSON.stringify(jsonData)
sessionStorage.jsonData = JSON.stringify(jsonData)
//获取
console.log(localStorage.jsonData)
console.log(sessionStorage.jsonData)

2. HTTP1.0和HTTP2.0的区别 原文链接

当谈到网络通信协议时，大家都熟悉的就是HTTP（Hypertext Transfer Protocol），它是一种用于在 Web 浏览器和服务器之间传输数据的协议。随着技术的发展，HTTP也在不断演进，从HTTP1.0发展到了HTTP2.0，带来了许多新的特性和改进。本文将详细介绍HTTP1.0和HTTP2.0之间的区别。

1. 连接复用：

• HTTP1.0：每个HTTP请求都需要建立一个新的TCP连接，请求结束后立即关闭连接。这样的方式会导致每个请求都需要重新建立连接，增加了延迟和开销。
• HTTP2.0：引入了多路复用技术，允许在同一个TCP连接上并发发送多个请求和响应，避免了建立和关闭多个连接的开销，提高了性能和效率。

2. 请求-响应方式：

• HTTP1.0：采用的是单向请求-响应模式，即每个请求只能对应一个响应，请求和响应是一一对应的关系。
• HTTP2.0：引入了Server Push机制，服务器可以在客户端请求之前主动推送相关资源，避免了客户端重复请求的等待时间，提高了页面加载速度。

3. 头部压缩：

• HTTP1.0：每个请求和响应的头部都包含大量的重复信息，造成了较大的网络传输开销。
• HTTP2.0：使用了HPACK算法对头部进行压缩，减少了头部的大小，降低了网络传输开销。

4. 二进制协议：

• HTTP1.0：采用文本形式进行数据传输，易于阅读和调试，但是传输效率较低。
• HTTP2.0：采用二进制格式传输数据，减少了解析的复杂性，提高了传输效率。

5. 流控制和优先级：

• HTTP1.0：没有流控制和优先级的概念，所有请求都是按照发送的顺序进行处理。
• HTTP2.0：引入了流控制和优先级的机制，可以根据需求对请求进行优先级排序和流量控制，确保重要请求的及时处理。

6. 长连接支持：

• HTTP1.0：基本上都是短连接，每个请求响应完成后立即关闭连接。
• HTTP2.0：支持长连接，即一个TCP连接可以承载多个请求和响应，减少了连接的建立和关闭次数，提高了性能。
• 总结起来，HTTP2.0相对于HTTP1.0在性能和效率上有了明显的改进。通过连接复用、多路复用、头部压缩、Server Push等特性，HTTP2.0在传输速度、网络资源利用率和用户体验方面都有了显著的提升。然而，要注意的是，HTTP2.0在某些特定的网络环境下可能会遇到兼容性问题，需要进行适当的配置和优化。

随着互联网的不断发展，HTTP协议也在不断演进，HTTP3（基于UDP的QUIC协议）已经出现，并带来了更多的改进。了解并掌握不同版本的HTTP协议对于开发者来说是非常重要的，可以根据具体的业务场景和需求选择合适的协议版本，以提供更好的用户体验和性能。

3.跨域解决

9种常见的前端跨域解决方案（详解）
前端的8种跨域解决方案

4.同源策略限制内容有哪些，如何解决

什么是同源策略？
同源策略限制及跨域问题的解决方法

JS

1.闭包 原文链接

• 闭包的定义：
  闭包是指有权访问另一个函数作用域中的变量的函数。——《JavaScript高级程序设计》
  简单来说是保留了对自由变量的引用的函数。网上有人说：“闭包的中的闭是封闭外部状态，而非封闭内部状态。一个函数如何封闭外部状态呢，就是当外部scope失效时，还保留一份在内部状态里面。”
• 创建闭包的方式
  创建闭包常见的方式就是在一个函数内部创建另一个函数

// 例1：函数中的setTimeout
function outer(){
    for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log(i)
        },100)
    }
}

//例2：函数中的匿名函数
function outer(){
    var inner = [];
    for(var i=0;i<5;i++){
        inner[i] = function(){
            console.log(i)
        }
    }
    return inner;
}
//如果是同一个对象的inner[i]中的i值会相互影响

• 闭包的好处与坏处

好处：
①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突；
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）；
③匿名自执行函数可以减少内存消耗

坏处：
①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

• 闭包的应用
  ①避免命名冲突

var global = "global";
var local = function(){
	var global = "local";
	return function(){
	    return global;
        }
}()
console.log(global);//"global"
console.log(local());//"local"

②保留辅助变量

function counter(){
    var count = 0;
    return function(){
        return ++count;
    }
}
var count1 = counter();
var count2 = counter();
console.log(count1());//1
console.log(count1());//2
console.log(count2());//1
//count1与count2不是同一个对象，count变化不会相互影响

• 解决闭包的几种方式
  ①使用ES6中let声明变量

function outer(){
    var inner = [];
    for(let i=0;i<5;i++){
        inner[i] = function(){
            console.log(i)
        }
    }
    return inner;
}

②添加立即执行函数

function outer(){
    var inner = [];
    for(var i=0;i<5;i++){
        inner[i] = (function(num){
            return function(){
                console.log(num);
            }
        })(i)
    }
    return inner;
}
// 或
function outer(){
    var inner = [];
    for(var i=0;i<5;i++){
        (function(num){
            inner[i] = function(){
                console.log(num);
            }
        })(i)
    }
    return inner;
}

③通过new Function

    var inner = [];
    for(var i=0;i<5;i++){
        inner[i] = new Function("console.log("+i+");")
    }
    return inner;
}

另外，网上有人提到可以为inner[i]添加属性，在function中返回该属性的值即可。

//该方法不可行，因为会被覆盖，若不是inner[i] = function,而是inner[i].fun = function则可行
function outer(){
    var inner = [];
    for(var i=0;i<5;i++){
        inner[i].value = i;
        inner[i] = function(){
            console.log(this.value)
        }
    }
    return inner;
}

2.原型链及 6 种继承优劣，js 多态实现

最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）
js 六种继承方式介绍及优缺点
js中类的继承多态

3.数据类型

五种基本数据类型分别是：Number、String、Undefined、Boolean、Null；
两种复杂数据类型：Object、Symbol

4.冒泡排序

JS冒泡排序

5.递归算法

JavaScript算法篇–递归

6.数组排序

js数组排序的六种方法

7.浅拷贝深拷贝

JS 浅拷贝和深拷贝详解(巨详细)

8.this 的指向、继承

JavaScript高级this指向和实现继承的几种方式
this、call/apply/bind、Object.create、继承

9.h5、c3

H5C3新特性简单总结
h5c3的新特性

10.es6所有api

ES6主要api详解
ES6常用API详讲

11. Event Loop

Event Loop到底是个啥？
事件循环机制(event loop)

12.性能优化

面试官问你前端性能优化时，他想问什么？
前端性能优化
前端页面性能优化（完整归纳版）
前端性能优化怎么做？

13.

14.兼容性解决

JavaScript浏览器兼容性问题及解决办法

15.封装 FetchAPI，要求超时报错的同时，取消执行的 promise，而不是继续执行

封装FetchAPI，要求超时报错的同时，取消执行promise，而不是继续执行

16.移动端适配

移动端适配的理解和各种方案解析(详解)

17.常见的状态码

常见状态码

18.git 冲突怎么解决

解决git冲突步骤（超详细）

19.怎么遍历数组／对象

遍历数组、对象的方法

20.for in 遍历对象时会不会访问原型、判断是不是原型的方法

3-29 关于for in 循环会遍历原型链上的属性的问题

判断是不是原型的方法

• isPrototypeOf() 对象是否存在于另一个对象的原型链中;
• A instanceof B A是B的实例 ;
• hasOwnProperty() 判断当前的属性和方法是否源于 对象构造函数内部
• person1.hasOwnProperty(‘name’) 检测一个属性是否存在一个实例中，true;
• Object.getPrototypeOf(person1).name; Nicholas; 返回的是 [prototype] 的值(取得一个对象的原型)

21.事件循环机制

一文详解JS中的事件循环机制

22.输入 url 到页面展示的详细过程、怎么打断点、http 缓存、xss 攻击和 csrf 攻击的区别

浏览器种输入一个url到显示页面全过程
JS 的 六种打断点的方式，你用过几种？
HTTP缓存机制及原理详解
xss攻击详解
XSS 与 CSRF 攻击——有什么区别?

23.

24.JS 设计模式你怎么看？观察者模式怎么理解？

分享 10 种常见的 JavaScript 设计模式
js之设计模式
JavaScript设计模式(一)：观察者模式

25.

26.网站重构怎么重构的?

网站重构需要遵循哪些原则和方法？

27.强缓存和协商缓存的区别

协商缓存和强缓存的区别

28.webRTC 的特点

WebRTC 介绍
webrtc学习（一）重要的几大特点

29.EventSouce 和长轮询的差别？WebSocket 是怎么保持的长连接？

EventSource VS 轮询
轮询（短轮询），长轮询（comet），长连接（SSE），WebSocket
httpServer代理WebSocket通信

30.BFC/IFC，transform 是否会调用 GPU

BFC、IFC概念的布局规则、形成方法、用处
重排重绘与GPU加速

31.requestAnimationFrame 是否会被阻塞

requestAnimationFrame运动框架基本概念+运动框架应用于web页面的抗阻塞均匀计数器

32.canvas 常见 API，postMessage 和 worker 的结合有使用过吗？

关于Canvas 常用API汇总
webWorker 多线程 – postMessage 通信

33.CommonJS和ES6 Module的区别，Tree Shaking 的 3 个使用场景

commonJS和ES6模块化的区别
tree shaking功能及使用原理详细解析
webpack的Tree Shaking原来要这么使用才有效

34.

35.什么是AST，有没有用过 recast？

应用ast抽象语法树修改js函数
https://www.jianshu.com/p/1a9bafe443b7

38.webpack中plugin和loader的区别

webpack（四）——webpack里面的plugin和loader的区别

40.如何开发移动端项目？

移动端开发项目搭建流程记录

42.Promise原理？以及promise有什么好处？如果不用promise的话怎么去实现请求到的数据进行展示 当值发生改变了 数据视图没有更新怎么办

Promise 实现原理
promise的原理

vue：你觉得你公司 vue 项目有哪些优点和缺点？

1.生命周期

(1)vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、卸载等一些列过程，我们称这是Vue的生命周期
（2）各个生命周期的作用

生命周期	描述
reate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用
beforeMount	在挂载开始之前被调用：相关的render函数首次被调用
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟dom打补丁之前
update	组件数据更新之后
activited	keep-alive专属，组件被激活时调用
deactivated	keep-alive专属，组件被销毁时调用
beforeDestory	组件被销毁前调用
destoryed	组件销毁后调用

2.vue传值的方式

Vue传值–三种常用传值

3.计算属性和监听属性的区别

computed:是计算属性，依赖其他属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值；
watch：更多的是【观察】的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其他数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时都需要重新计算
当我们需要在数据变化时执行一步或开销较大的操作时，应该使用watch，使用watch选项云信我们执行异步操作（访问一个api），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的

4.vuex

Vuex 基本介绍

5.数据双向绑定原理

vue原理之-双向绑定实现原理

6.v-show 和 v-if 的区别

1. v-if是真正的条件渲染，因为它会确保在切换过程中条件内的事件监听器和子组件适当地被小会和重建；它也是惰性的；如果再初始条件渲染的时候条件为假，则什么也不做，知道条件第一次变为真时，才会开始他渲染条件块。
2. v-show就简单得多，不管初始条件是什么，元素总会渲染，并且只是简单的基于css的‘display’属性进行切换。
3. 所以，v-if使用与在运行时很少改变条件，不需要频繁切换条件的场景；v-show适用于需要非常频繁切换条件的场景

7.keep-live

keep-live的使用原理
Keep-live

8.nextick

Vue中的nexTick()

9.vue router

Vue路由(vue-router)详细讲解指南

10.你对 mvvm 怎么理解

深入理解 MVVM 模式

11.webpack 运行机制

webpack原理分析（一）
webpack的基本的配置和应用

12.模板是怎么挂载到 vue 上的

Vue模板挂载到页面原理分析

13.elmentui 自适应

vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变

14.babel的作用，配置文件怎么配置，步骤

Babel 是干什么的
【babel】babel配置

15.说下 virtual dom 在 vue 和 react 的区别？diff 算法有什么不同？为什么 vue 叫渐进式的？

vue的虚拟Dom和react的虚拟Dom有什么区别
react跟vue的diff算法有什么区别
为什么说Vue是渐进式框架？

16.说说你对spa单页面的理解，它的优缺点分别是什么？

spa(single-page application)尽在web页面初始化时加载相应的HTML、JavaScript、css。一旦页面加载完成，spa不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用个路由机制实现HTML内容的变换，ui与用户的交互、避免页面的重新加载。
优点：
	1.用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
	2.基于上面一点，spa相对于服务器压力小
	3.前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理
	
缺点：
	1.初次加载耗时多：尉氏县单页面web应用功能及显示效果，需要在加载页面的时候将JavaScript、css统一加载，部分页面按需加载
	2.前进后退路由管理：由于单页面应用在一个页面中显示所有的内容，所以不能使用浏览器的前进、后退功能，所有的页面切换需要自己简历堆栈管理
	3.SEO难度较大：犹豫所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势

17.class与style如何动态绑定？

class可以通过对象语法和数组语法进行动态绑定

• 对象语法

<div v-bind:class="{active:isActive,'text-align':hasError}"></div>
data:{
	isActive:true,
	hasError:false
}

• 数组语法

<div v-bind:class="[isActive ? activeClass : errorClass]"></div>
data:{
	activeClass :'active',
	errorClass:'text-danger'
}

style可以通过对象语法和数组语法进行动态绑定

• 对象语法

<div v-bind:style="{color: activeColor,fontSize: fontSize + 'px'}"></div>
data:{
	activeColor: 'red',
	fontSize : '20'
}

• 数组语法

<div v-bind:style="[styleColor,styleSize]"></div>
data:{
	styleColor: {
		color: 'red',
	},
	styleSize: {
		fontSize: '20px'
	}
}

18.怎样理解vue的单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止子组件意外改变父级组件的状态，从而导致你的应用个的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中给所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，vue会再浏览器的控制台中发出警告。子组件想修改时，只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。
有两种常见的仕途改变一个prop的情形：

• 这个prop用来传递一个初始值：这个子组件加下来希望将其作为一个本地prop数据来使用。 在这种情况下，最好定义一个本地的data属性并将这个prop用做其初始值

props:['initialCouner],
 data() {
        return {
            counter:this.initialCouner
        }
    },

• 这个prop以一种原始的值传入且需要进行转换在这种情况下，最好使用这个prop的值来顶一个计算属性

props:['size],
computed:{
        normalizedSize:function(){
            return this.size.trim().toLowerCase()
        }
    },

19.直接给一个数组项赋值，vue能检测到变化吗

由于JavaScript的限制，vue不能检测到以下数组的变动：

• 当你利用索引值设置一个数组项时，例如:vm.items[indexOfitem] = newValue; 当你修改数组的长度时，例如：
• vm.items.length = newLength;
  为了解决第一个问题，Vue提供了一下操作方法：

// Vue.set
Vue.set(vm.items,indexOfItem,newValue)

//Vue.$set  ,Vue.set的一个别名
vm.$set(vm.items,indexOfItem,newValue)
//Array.prototype.splic
vm.items.splice(indexOfItem,1,newValue)

为了解决第二个问题，Vue提供了一下操作方法：

//Array.prototype.splice
vm.items.splic(newLength)

原理方面

1.react diff

React diff的原理是什么？

2.vue和react的区别，渲染机制，优化机制

Vue与React区别与优缺点

4.性能优化分别从编译阶段和编译后来讲有哪些措施

前端性能优化方法总结

5.输入url发生了什么

面试题：浏览器输入 URL 后回车发生了什么？

6.TCP的三次握手与四次挥手

https://baijiahao.baidu.com/s?id=1709872840052170461&wfr=spider&for=pc

pinia和vuex区别

pinia和vuex区别

前端该如何优化网站性能?

1、减少请求数量
1.1 图片处理：
1-1 Base64：
将图片的内容以 Base64 格式内嵌到 HTML 中，可以减少 http 请求数量，但是编码之后的大小比图片大了
1-2 使用字体图标来代替图片

1.2 避免使用空的 src 和 href
1.3 不使用 css@import

2、减少资源大小
2.1 html 压缩
html 代码压缩就是压缩在文本文件中有意义，但是在 html 中不显示的字符，包括空格，制表符

2.2 css 压缩
	css 压缩包括无效代码删除与 css 语义合并

2.3 js 压缩与混乱
js 压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码的可读性、实现代码的保护

2.4 图片压缩

3、优化网络连接
3-1 使用 CDN
CDN 是内容分发网络，它能够实时地根据网络流量和各个节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，其目的是使用户可以就近的取得所需内容，解决网络拥挤的状况，提高网站的响应速度

3-2 使用 DNS 预解析

4、优化资源加载
4.1 资源加载位置
通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使用功能可用
1、css 文件放在 head 中，先外链，后本页
2、js 文件放在 body 底部，先外连，后本页
3、处理页面、处理页面布局的 js 文件放在 head 中，如 babel-polyfill.js 文件、flexible.js 文件
4、body 中尽量不写 style 标签和 script 标签