最常见前端面试必看整理(持续更新)

HTML部分：

html语义化标签的理解

语义化简单的说就是用正确的含义的标签做正确的事eg：头部：header 导航：nav等，语义化的优点是易于修改和维护，支持无障碍阅读，搜索引擎友好，方便seo，面向未来的 HTML，浏览器在未来可能提供更丰富的支持。

seo优化

三剑客：<title> 标签、<meta name="description"> 标签和 <meta name="keywords"> 标签。顾名思义，它们分别代表当前页面的标题、内容摘要和关键词

robots文件告知搜索引擎可以抓取的内容和相关页面

sitemap文件辅助搜索引擎访问网站的工具（协议）

说一说你对Doctype的理解

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
1.​声明必须处于HTML文档的头部，在标签之前，HTML5中不区分大小写
​2.声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
3.现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
4.在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
5.HTML5不基于SGML，所以不用指定DTD

h5新增属性和标签

0.增强型表单color

类型	描述
color	主要用于选取颜色
data	选取日期
datetime	选取日期(UTC时间)
datetime-local	选取日期（无时区）
month/week/time	选择一个月份/ 选择周和年/ 选择一个时间
email	包含e-mail地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码和字段
range	一个范围内数字值的输入域
search	用于搜索域

1.表单属性：

属性	描述
autofocus	自动地获得焦点
multiple	可选择多个值
required	规定不能为空
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔、
height/wdith	用于image类型<input>标签图像高度/宽度

2.连接属性：size target 超链接
3.defer:加载完脚本后并不执行，而是等整个页面加载完之后再执行
4.async:加载完脚本后立刻执行，不用等整个页面都加载完，属于异步执行。
5.多媒体标签 video audio source 等多媒体标签，还有时间time等新标签。
6.其它标签

• header：定义文档的页眉 头部
• nav：定义导航链接的部分
• footer：定义文档或节的页脚 底部
• article：定义文章。
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边(还有很多)

7.h5新增api
localStorage：永久储存，多窗口共享，最大20mb
sessionStorage： 生命周期为关闭浏览器窗口，关闭当前窗口数据存储失效；可以在同一窗口下访问，不可以多窗口共享，数据大小为5mb
新增dom操作document.querySelector("选择器"); document.querySelectorAll('选择器');
新增class操作可以删除替换class等操作

8.WebSocket
WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
特点：
（1）握手阶段采用HTTP协议，默认端口是80和443
（2）建立在TCP协议基础之上，和http协议同属于应用层
（3）可以发送文本，也可以发送二进制数据。
（4）没有同源限制，客户端可以与任意服务器通信。
（5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023

9.webworker（html5新特性）
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
10.Canvas元素
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作。

Canvas和SVG图形的区别是什么

SVG先绘制后记忆，换句话说任何使用SVG绘制的形状都能被记忆和操作，浏览器可以再次显示
Canvas则是先绘制后忘记，一旦绘制完成你就不能访问像素和操作它
SVG对于创建图形例如CAD软件是良好的，一旦东西绘制，用户就很难操作它
Canvas则用于绘制和遗忘类似动漫和游戏的场画。为了之后的操作，
SVG需要记录坐标，所以比较缓慢。因为没有记住以后事情的任务，所以Canvas更快。

src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

CSS部分

请简述 css 盒子模型（2021.12.24）更新

一个 css 盒子从外到内可以分成四个部分：margin（外边距），border （边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高。
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

css选择器和权重

类型	权重
! important	无穷
行间样式	1000
id	100
class/属性/和伪类	10
标签选择器	1
通配符	0
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

哪些属性可以继承

不可继承的:
baidisplay、dumargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

可继承的：
所有子元素可继承：visibility和cursor、z-index。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

BFC机制

请看详解BFC（特点、作用、条件）

盒模型

css3有两种盒模型：标准盒子模型、IE盒子模型，通过box-sizeing属性来修改元素的盒模型，标准盒模型和IE盒模型的区别在于width和height时的范围不同。
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
box-sizing有那些值，有什么区别？
box-sizing：border-box表示盒模型基于IE的盒模型，width和height决定盒模型的content区、padding区和border区。
box-sizing：content-box表示盒模型基于标准盒模型，width和height只决定盒模型的content区
box-sizing：inherit表示继承自父元素。

css模块化开发

css模块化是指的是把页面分割成不同的组成部分，这些组成部分没有依赖关系，我们要达到的目的是，当我们去修改其中一部分css时，不会对其他部分产生意料之外的影响。
所有的预处理器（比如Sass或者LESS）都提供了把分散的CSS文件合并成一个文件的功能。预处理器会从base.scss中引入基础样式，并从每个模块文件引入相应的模块样式，然后输出一个包含所有样式的样式表文件。这样每个模块都单独拥有一个便于维护的文件。
css预处理起，一般来说他们是基于css扩展了一套属于自己的dsl，来解决我们书写css时难以解决的问题：

• 语法不够强大，无法嵌套书写导致模块化开发中需要书写很多重复的选择器
• 没有变量和合理样式复用机制，是得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以预处理器的目标就是：提供css缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。

水平垂直居中

/*已知容器的宽高 设置层的外边距*/
div {
 position: relative;		/* 相对定位或绝对定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
}
 
/*不知宽高-水平垂直居中 利用 `transform` 属性*/
div {
 position: absolute;		/* 相对定位或绝对定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
div{
	position: fixed;
	width:500px;
 	height:300px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
/*利用flex布局*/
.container {
 display: flex;
 align-items: center; 		/* 垂直居中 */
 justify-content: center;	/* 水平居中 */
}
 
/*让绝对定位的div居中*/
div {
 position: absolute;
 width: 300px;
 height: 300px;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

css3 新增的特性（2021.12.24）更新

边框：
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴 影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像 border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）
背景：
background-size 背景图片尺寸
background-origin规定
background-position属性相对于什么位置定 位
background-clip 规定背景的绘制区域（padding-box，border-box， content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
word-break：定义如何换行
word-wrap：允许长的内容可以自动换行
text-overflow：指定当文本溢出包含它的元素，应该干啥
text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
transform
应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法
rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n） 定义缩放转换
3D 转换方法：
perspective（n）为 3D 转换 translate rotate scale
过渡：
transition-proprety 过渡属性名
transition-duration 完成过渡效果需要花费的时间
transition-timing-function 指定切换效果的速度
transition-delay 指定什么时候开始切换效果
动画：
animation Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

布局

1.标准文档流（padding+margin+负margin）+浮动float+定位
定义：标准文档流就是元素排版过程中，元素会默认的自动从左往右，从上往下的 流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
2.百分比布局(流式布局): px单位 用 %代替, 占父级元素的百分比
定义：流式布局，就是百分比布局，也称非固定像素布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。不过需要注意的是需要定义页面的最大和最小支持宽度。
3.flex弹性布局: 主轴 辅助轴的几个属性
定义：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以使用flex布局
采用flex布局的元素，称为flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为flex项目，简称项目
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目“。
容器默认存在两根轴：水平主轴和垂直交叉轴，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫main end 交叉轴的开始位置叫做cross start 结束叫做cross end。

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

• flex-direction： 绝对主轴的方向 默认水平方向，从左侧开始
• flex-wrap：决定容器内是否换行，默认不换行
• flex-flow：是flex-direction和flex-wrap的缩写
• justify-content：定义了主轴的对齐方式
• align-items：定义了在交叉轴上的方式
• align-content：定义了多跟轴线的对齐方式

参数有这些

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:
; 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;

栅格布局
框架中的类名来替代 如element bootstrap等…

请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
1、父级div定义height；
2、父级div 也一起浮动；
3、浮动元素的父级div定义伪类:after , clear：both用来闭合浮动的

&::after,&::before{
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

4.给父元素添加overflow:hidden;属性。

如何开启GPU加速(2021.12.23）更新

动画卡顿在移动web开发的过程中是会经常遇到的，解决这个问题，一般都会用到css3开启硬件加速。
使用特定的css语句就可以开启，比如使用 translate3d() rotate3d() scale3d()　这几个方法，我们就可以使用ＧＰＵ加速了。当不需要对元素应用3d变换效果时，可以使用transform: translateZ(0)触发硬件加速，以下包含所有浏览器前缀

.code{
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
}

定位的属性值有何区别(2021.12.23）更新

position 有四个属性值：relative absolute fixed static
relative 相对定位 不脱离文档流，相对于自身定位
absolute 绝对定位，脱离文档流 相对于父级定位
fixed 固定定位，脱离文档流，相对于浏览器窗口定位
static 默认值，元素出现在正常的流中

网页中有大量图片加载很慢 你有什么办法进行优化(2021.12.23）更新

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏 览器顶端和页面的距离，如果前者小鱼后者，优先加载
2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
3.使用 csssprite 或者 svgsprite

浏览器的标准模式和怪异模式区别？(2021.12.23）更新

标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析 执行方式不一样，所以叫怪异模式 区别： 在怪异模式下，盒模型为怪异盒模型 而在标准模式下为标准盒子模型 图片元素的垂直对齐方式对于行内元素和 table-cell 元素，标准模式下 vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格 中的图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有 几像素的空间。
元素中的字体css中font的属性都是可以继承的，怪异模式下，对于table 元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size 属性内联元素的尺寸标准模式下，non-replaced inline 元素无法自定义大写， 怪异模式下，定义元素的宽高会影响元素的尺寸 元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度 取决于内容变化，在怪异迷失下，百分比被准确应用 元素溢出的处理标准模式下，overflow 取值默认值为 visible，在怪异模 式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定， 溢出不会裁剪，元素框自动调整，包含溢出内容

Css中都用过哪些伪类？（2022.01.20更新）

名称	解释
:first-child	第一个元素
:last-child	最后一个元素
:nth-child(n)	n代表第几个元素
:first-of-type	上一级元素下的第一个同类子元素
:last-of-type	下一级元素下的最后一个同类子元素
:nth-of-type()	选择指定的元素
:hover	鼠标悬浮元素时，向元素添加样式
:link	超链接文字样式
:visited	浏览过文字样式
:active	向被激活的元素添加样式
:disabled	表单禁用状态
:checked	单选或多选被选中

清除浮动（2022.01.20更新）

1.给父级设置高度
缺点：无高的盒子无法用
2.塌陷的父级盒子设置：overflow:hidden;
缺点：不可和定位属性同用
3.多添加一个元素设置：clear:both;
缺点：加载盒子浪费代码，使用时间
4.父级div定义 伪类:after元素
.clearfixed:after{
content:””;
clear:both;
height:0;
display:block;
overflow:hidden
}

js基础

变量数据类型及检测

基本+引用 JavaScript共有八种数据类型，分别是underfined，null，boolean，number，string，object，bigint，symbol。
其中bigint和symbol是es6新增的数据类型：

• Symbol代表创建后独一无二且不可变的数据类型，他主要是为了解决可能出现的全局变量冲突的问题。
• Bigint是一个数字类型的数据，他可以表示任意精度格式的整数，使用Bigint可以安全的存储和使用大整数。

这些数据可以分为原始数据类型和引用数据类型：可以根据存储的位置不同分为：

• 栈：原始数据类型（undefined、 null、 Boolean、 number、 string）
• 堆： 引用数据类型（对象 数组和函数）
  这两种数据的区别主要在于存储的位置不同：
• 原始数据类型直接存储在栈中简单的数据段，占据空间小，大小固定，属于被频繁使用的数据
• 引用数据存在在堆（heap）中的对象，占据空间大，大小不固定。如果存在栈中，将会影响程序的运行性能；引用数据在栈中存储了指针，该指针会指向堆中改实体的起始地址。当解释器寻找引用值时，会首先检索其中在栈的地址，然后从地址中获取堆中的实体。

检测方式

1.typeof

console.log(typeof true); // boolean 
console.log(typeof 'str'); // string 
console.log(typeof []); // object 
console.log(typeof function(){}); // function 
console.log(typeof {}); // object 
console.log(typeof undefined); // undefined 
console.log(typeof null); // object
//其中对数组对象还有null都会判断为object 

2.instanceof
instanceof可以正确判断对象的类型，内部运行机制是判断在其原型链中是否能找到该类型的原型。instanceof只能正确判断引用数据类型，而不能判断基本数据类型。instanceof运算符可以用来测试一个对象在其原型链上是否存在一个构造函数的prototype属性。instanceof的基本逻辑如下
3.constructor
constructor有两个作用，一个是判断数据的类型，二是对象实例通过constructor对象访问他们的构造函数。但是创建一个对象然后去改变他的原型，constructor就不能用来判断数据类型了
4.Object.prototype.toString.call()
Object.prototype.toString.call()使用Object对象的原型方法toString来判断数据类型，但是同样是检测对象obj调用toString方法，obj.toString的结果和Object.prototype.toString.call的结果是不一样的。这是因为toString是Object的原型方法，Array，function等类型作为Object的实例，都重写了toString方法，不同对象类型的toString方法，根据原型链的知识，调用的是重写之后的方法，而不是调用object上的toString，所以obj.toString是不能的带其对象类型的。

17.JavaScript原型，原型链 ? 有什么特点？

参考：原型和原型链 深度理解

18.This对象的理解。

this的指向简单易懂

19.函数定义, 调用方式

1.函数的定义

    //式函声明 
    function fn(){}  
    //这种函数定义方式需要显式的指定函数名称，在代码执行前就被解释器加载到作用域中，这个特性可以让我们在函数定义之前就调用该函数。我们可以通过代码来验证这一点。
    
    //函数表达式 
    let fn = function(){} 
    //数表达式必须先声明，再调用。通过函数直接量生成的函数，函数名称可以省略，此时就是一个匿名函数。如下例所示：这样可以使代码更为紧凑。函数定义表达式特别适合用来定义那些只会用到一次的函数。
    
	//箭头函数 
	()=>{} 
    let fn = ()=>{} 
    //如果{}内容只有一行{}和return关键字可省,
 
    //构造函数 
    let fn = new Fcuntion()
    //声明Fcuntion为一个对象。使用Function构造函数定义函数的方式是一个函数表达式,这种方式会导致解析两次代码，影响性能。第一次解析常规的JavaScript代码，第二次解析传入构造函数的字符串

20.call apply bind 区别与应用

参考：call apply bind 区别与应用

JS的闭包，闭包的原理是什么，有哪些优缺点，为什么会造成内存的泄漏，垃圾回收机制（GC）是什么？（2022.01.21）

概念： 闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》
原理： 能够读取其他函数内部变量的函数
闭包的优点： 1.能够读取函数内部的变量 2.让这些变量一直存在于内存中，不会在调用结束后，被垃圾回收机制回收 。
闭包的缺点： 由于闭包会使函数中的变量保存在内存中，内存消耗很大，所以不能滥用闭包，解决办法是，退出函数之前，将不使用的局部变量删除。
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收机制： 就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
浏览器垃圾回收机制有几种方法：
1、标记清除
这是javascript中最常用的垃圾回收方式，当变量进入执行环境是，就标记这个变量为“进入环境”，当变量离开环境时，则将其标记为“离开环境”。
垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。
2、引用计数
另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存

21.作用域, 作用域链闭包

参考：深度理解请看
经典面试题：循环中使用闭包解决 var 定义函数的问题这个运行的结果会输出一堆 ，原因：for循环中用var来申明变量i，此时var存在变量提升问题，并且6次循环中全都共用一个变量，所以当setTimeout中的延迟函数开始执行时，循环已经结束，此时i=6，所以会打印出6个6。

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
//第一种方法解决
for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
// /第一种方法闭包
for(var i=1;i<=5;i++) {
  (function(j){
    setTimeout(() => {
       console.log(j)
    }, j* 1000)
  })(i)
}
// 第三种方法定
for(var i=1;i<=5;i++) {
  setTimeout((j) => {
    console.log(j)
  }, i* 1000, i)
}

22.null，undefined 的区别？

null表示一个对象是“没有值”的值，也就是值为“空”；
undefined 表示一个变量声明了没有初始化(赋值)；
undefined不是一个有效的JSON，而null是；
undefined的类型(typeof)是undefined；
null的类型(typeof)是object；
Javascript将未赋值的变量默认值设为undefined；
Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。

23.JS 深浅拷贝

参考：JS 深浅拷贝

24.函数上下文, this指向

参考：执行上下文this指向简单易懂

25.js的运行机制, 事件队列和循环

参考：js的运行机制

26.js对象遍历方法

参考：js对象遍历总结

27.防抖和节流

参考：防抖和节流的区别和应用

27.1JS 的 new 操作符做了哪些事情 （2021.12.22）更新

1、创建一个空的对象
2、链接到原型
3、绑定this指向，执行构造函数
4、确保返回的是对象

//1、创建一个空对象
let obj = new Object();
//2、设置原型链（当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象）
obj.__proto__= Func.prototype;
//3、让Func中的this指向obj，并执行Func的函数体。（创建新的对象之后，将构造函数的作用域赋给新对象（因此this就指向了这个新对象））
let result =Func.call(obj);
//判断Func的返回值类型： 如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象
if (typeof(result) == "object"){
  func=result;
}
else{
    func=obj;;
}

默认情况下函数返回值为undefined，即没有显示定义返回值的话，但构造函数例外，new构造函数在没有return的情况下默认返回新创建的对象。
但是，在有显示返回值的情况下，如果返回值为基本数据类型{string，number，null，undefined，Boolean}，返回值仍然是新创建的对象。只有在显示返回一个非基本数据类型时，函数的返回值才为指定对象。在这种情况下，this所引用的值就会被丢弃了

27.2我们用 Promise 来解决什么问题？（2021.12.22）更新

promise 是用来解决两个问题的：
1.回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的 输入这种现象
2.promise 可以支持多并发的请求，获取并发请求中的数据
参考：轻轻松松了解promise，解决回调地狱

27.3XML和JSON的区别？（2021.12.23）更新

1.数据体积方面。 JSON相对于XML来讲，数据的体积小，传递的速度更快些。
2.数据交互方面。 JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
3.数据描述方面。 JSON对数据的描述性比XML较差。
4.传输速度方面。 JSON的速度要远远快于XML。

27.5 fetch VS ajax VS axios （2021.12.24）更新

Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请 求技术，隶属于原始 js 中，核心使用 XMLHttpRequest 对象，多个请求 之间如果有先后关系的话，就会出现回调地狱。JQuery ajax 是对原生 XHR 的封装
axios 是一个基于 Promise ，本质上也是对原生 XHR 的封装，只不过 它是 Promise 的实现版本，符合最新的 ES 规范
fetch 不是 ajax 的进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象。

27.6对this对象的理解（2022.1.10）更新

this代表的是当前对象，由于执行环境不同，所代表的对象也不同。
1、在DOM0事件中this指向调用这个函数的对象。
2、在构造函数中this指向创建新的实例
3、在箭头函数中this指向当前函数外离他最近的对象
4、当函数为全局函数时this指向 window （在全局范围内，这代表全局对象，例如web浏览器中的 window 对象）

27.7对es6了解有多少，使用过ES6 中的哪些新特性（2022.1.10）更新

1. 模块化开发
2. 箭头函数
3. 函数参数默认值
4. 模板字符串
5. 解构赋值
6. 对象属性简写
7. Promise
8. let与const
9. class 类
10. 扩展运算符
11. 新增了数组、字符串、对象的方法
12. for…of

27.8箭头函数和普通函数的区别（2022.1.10）更新

区别：
1、语法不同。
2、箭头函数是匿名函数，不能作为构造函数，不能使用new。
3、箭头函数不能绑定arguments，取而代之用rest参数…解决。
4、箭头函数没有原型属性。
5、箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值。
6、箭头函数不能当做Generator函数,不能使用yield关键字

Js中new的具体过程？

(一) 首先创建一个空对象
(二) 将这个空对象赋值给this，并将this的__proto__指向构造方法对象的原型
(三) 对this这个对象进行属性的添加，并初始化
(四) 将this对象返回

Js的继承都有什么

构造函数方式继承 原型继承 组合继承

数组去重的几种做法？

第一种方法

function uniq(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

第二种方法

let ary = [1,2,3,4,2,1,3];
ary = [...new Set(ary)];

第三种

var arr=[0,0,1,'a',1,2,'b','a','a']
var res = arr.filter(function(ele,index,array){
        return index === array.indexOf(ele);
    });
console.log(res)

一个页面从输入url地址到整个页面都加载完成，整个过程都发生了什么？

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

怎么检测一个对象是数组还是object？

1、instanceof

var arr = [1,2,3,1];
console.log(arr instanceof Array)//true

2、对象的constructor属性

var arr = [1,2,3,1];
console.log(arr.constructor === Array)//true

3、es6的方法——Array.isArray()

Array.isArray([]) //true

Js获取浏览器URL中查询字符串中的参数

使用location.search获取URL中查询字符串中的参数。

了解过ts吗？会使用吗？和js有什么区别？（typeScript）

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。
应用：vue3.0，angular2.0，vscode…

编译型语言：编译为 js 后运行，单独无法运行;
强类型语言;
面向对象的语言;

优势
类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用；
可以在编译阶段就发现大部分错误，这总比在运行时候出错好；
增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等；
总结：TypeSctipt增加了代码的可读性和可维护性。

区别
JavaScript 是轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行。而TypeScript 是JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发

promise是什么，共有几种状态？

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列
4、解决回调地狱
三个状态：pending、fulfilled、reject
两个过程：padding -> fulfilled、padding -> rejected

对象的深拷贝

1、通过JSON对象来实现深拷贝

Var obj = {a:1,b:2};
var _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);

2、通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝

3、 Object.assign来实现深拷贝

var obj = {
    a: 1,
    b: 2
}
var obj1 = Object.assign({}, obj); // obj赋值给一个空{}
obj1.a = 3;
console.log(obj.a)；// 1

4、使用扩展运算符实现深拷贝
// 当value是基本数据类型，比如String，Number，Boolean时，是可以使用拓展运算符进行深拷贝的
// 当value是引用类型的值，比如Object，Array，引用类型进行深拷贝也只是拷贝了引用地址，所以属于浅拷贝

var car = {brand: "BMW", price: "380000", length: "5米"}
var car1 = { ...car, price: "500000" }
console.log(car1); // { brand: "BMW", price: "500000", length: "5米" }
console.log(car); // { brand: "BMW", price: "380000", length: "5米" }

5、循环遍历实现对象的深拷贝

var objDeepCopy = function(source){
    var sourceCopy = {};
    for (var item in source) {
    	sourceCopy[item] = source[item];
    }
    return sourceCopy;
}

数组和对象的浅拷贝

Var arr1 = [1,2,3]
Var arr2 = arr1;


Var obj 1= {a:1,b:2};
Var obj2 = obj1;
object.assign(obj1,obj2)

注:
深拷贝中，副本和原对象不共享属性
深拷贝递归的复制属性
深拷贝的副本不会影响到原对象，反之亦然
js中所有的原始数据类型默认执行深拷贝，比如Boolean, null, Undefined, Number,String等

箭头函数的优点

优点
更简洁的语法
没有局部this的绑定
隐式返回值
缺点
做为构造函数的时候不能使用箭头函数
箭头函数中没有arguments对象，可以使用rest参数代替

for of for in

fo in的特点
1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组。
For…of的特点
for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法：

let a =1;var b = 2;打印window.a window.b 为什么window.a是undefined?

因为let在顶级作用域中声明变量不是window的属性

浏览器

28.问题：前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域

29.你知道TCP协议、IP协议、HTTP协议分别在哪一层吗？

TCP协议在传输层，IP协议在网络层，HTTP协议在应用层。

30.请说出三种减少网页加载时间的方法

1.服务器角度
采取CDN加速 开启gzip压缩 允许使用强缓存或协商缓存 增加服务器带宽
2.客户端角度
合理组织CSS、JavaScript代码位置 减少DOM操作、添加事件委托 部分操作可设置防抖和节流 对于可预见的操作采取preload或prerender的预加载 对于图片可以懒加载 合并CSS图片（精灵图/雪碧图） 减少使用iframe 资源优化打包角度
3.资源优化打包角度
使用打包工具将Js文件、CSS文件和静态文件进行恰当打包处理。

31.什么情况下会遇到跨域问题

跨域问题来自于浏览器的同源策略，即当协议、域名、端口号任意一个不同时，都会引发跨域问题。
jsonp、CORS可以用来解决跨域问题

32.web 性能优化（2021.12.24）更新

1、减少http请求，合理浏览器缓存
2、启用压缩：HTML、CSS、javascript文件启用GZip压缩可达到较好的效果
3、CSS Sprites：合并 CSS图片，减少请求数的又一个好办法。
4、LazyLoad Images：在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片（图片懒加载）
5、CSS放在页面最上部，javascript放在页面最下面：让浏览器尽快下载CSS渲染页面
6、缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage
7、Javascript代码优化

33.浏览器渲染机制、重绘、重排（2021.12.24）更新

网页生成过程：

1. HTML被HTML解析器解析成DOM 树
2. css则被css解析器解析成CSSOM 树
3. 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
4. 生成布局（flow），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上
   重排(也称回流)：
   当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 触发：
   1.添加或者删除可见的DOM元素
   2.元素尺寸改变——边距、填充、边框、宽度和高度
   重绘：
   当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 触发：
6. 改变元素的color、background、box-shadow等属性

重排优化建议：

1. 分离读写操作
2. 样式集中修改
3. 缓存需要修改的DOM元素
4. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
5. 动画开始GPU加速，translate使用3D变化

transform 不重绘，不回流
是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

34.http协议的常见状态码和意思

200请求成功。
301 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
304未修改。所请求的资源未修改。服务器返回此状态码时，不会返回任何资源
404服务器无法根据客户端的请求找到资源（网页）。
500服务器内部错误，无法完成请求
503 由于超载或系统维护，服务器暂时的无法处理客户端的请求

Ajax的五个状态(2022.1.21更新)

0--------------------XMLHttpRequest对象还没有完成初始化
1 ---------------------XMLHttpRequest对象开始发送请求
2 ---------------------XMLHttpRequest对象的请求发送完成
3 ---------------------XMLHttpRequest对象开始读取服务器的响应
4 ---------------------XMLHttpRequest对象读取服务器响应结束

未完持续更新