2021前端面试题

前言：最近不是很忙，就整理了一下2021常见面试题

一、html

1、`<img>`的title和alt有什么区别?

1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要

2、html5有哪些新特性、移除了那些元素？

（1）新增特性
a、新增标签
article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、
hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
其中常用标签：article、aside、audio、video、canvas、footer、header、nav、sectionb、新增localStorage、sessionStoragec、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）d、Geolocation 地理定位（2）移除特性<basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，<u> 下划线，<big> 大字体<strike> 中横线，<tt> 文本等宽

3、WEB标准以及W3C标准是什么?

1、标签闭合
2、标签小写
3、嵌套正确
4、外部链接css和js
5、提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）

4、xhtml和html有什么区别?

1、其基础语言不同a、XHTML是基于可扩展标记语言（XML）。b、HTML是基于标准通用标记语言（SGML）。
2、语法严格程度不同a、XHTML语法比较严格，存在DTD定义规则。b、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
3、可混合应用不同a、XHTML可以混合各种XML应用，比如MathML、SVG。b、HTML不能混合其它XML应用。
4、大小写敏感度不同a、XHTML对大小写敏感，标准的XHTML标签应该使用小写。b、HTML对大小写不敏感。
5、公布时间不同a、XHTML是2000年W3C公布发行的。b、HTML4.01是1999年W3C推荐标准。

5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2. 严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

6、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素  span、b、em、strong、a、input、label等
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行块级元素  div、h1-h6、p、ul、ol、li、blockquote、address等
1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行空元素
空元素一般指的是无须闭合的标签
<br/>、<hr/>、<input/>、<img/>、<link/>、<meta/>等

7、HTML全局属性(global attribute)有哪些

html属性赋予元素意义和语境，可以用于任何的html元素
1、class：为元素设置类标识
2、data-*：为元素增加自定义属性
3、id：元素id，文档内唯一
4、lang：元素内容的语言
5、style：行内css样式
6、title：元素相关的建议信息
7、dir：规定元素中内容的文本方向（ltr：从左到右， rtl：从右到左）
8、contenteditable：html新增属性，设置true后可编辑元素
9、hidden：隐藏一个html元素

8、Canvas和SVG有什么区别？

Canvas
1、可伸缩矢量图形
2、放大缩小不会失真SVG
1、HTML5新加的元素
2、使用XML描述2D图形的语言

9、HTML5 为什么只需要写？

<!DOCTYPE HTML> 是文档类型声明，它声明了文档类型为html5，告诉浏览器和其他开发者，该文档使用的是html5标准

二、CSS

1、实现一个div在不同分辨率下的水平垂直居中

.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}

2、左右固定，中间自适应样式

<style>.box {display: flex;height: 200px;}.left {flex: 0 0 200px;background-color: pink;}.center {flex: 1;background-color: yellow;}.right {flex: 0 0 200px;background-color: skyblue;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body>

3、阐述清楚浮动的几种方式（常见问题）

1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container"> <div class="left">left浮动</div> <div class="right">right浮动</div><div  style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {content: ' ';display: block;clear: both;}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用

4、解释css sprites ，如何使用？

1、什么是精灵图
将一些小图标放在一张图上2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗3、精灵图的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px  20px;
}
// 第一个数是x轴， 第二个数是y轴

5、box-sizing常用的属性有哪些？分别有什么作用？

（1）content-box
宽高是元素本身的宽高 不包含border+padding（2）border-box
元素的宽高已经包含了border+padding（3）inherit
从父元素继承box-sizing属性

6、CSS样式覆盖规则

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

7、请简要描述margin重合问题，及解决方式

问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin解决：（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block

8、display:none; visibility:hidden区别？

1、dispaly:none  设置后该元素在dom元素中消失，不在占用空间
2、visibity:hidden 设置后该元素还存在只是不可见，还占用空间，影响布局，具有继承性

9、重绘和回流

1、重绘  当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。2、回流   当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。3、重绘与回流区别
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

10、说说你对语义化的理解

   根据内容的结构选择合适的标签1、样式丢失后，页面依然展示清晰的结构2、有利于seo便于爬虫去爬取更多有用的信息3、方便其他设备渲染页面4、更具有可读性，便于开发团队维护

11、为什么要初始化css样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。

12、移动端适配1px问题

1、在ios8+中当devicePixelRatio=2的时候使用0.5px2、伪元素 + transform 实现对于老项目伪元素+transform是比较完美的方法了。原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。3、viewport + rem 实现这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。在devicePixelRatio = 2 时，输出viewport：在devicePixelRatio = 3 时，输出viewport：4、使用box-shadow模拟边框利用css 对阴影处理的方式实现0.5px的效果

13居中为什么要使用transform（为什么不使用marginLeft/Top）

1、transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些2、top/left属于布局属性，会引起页面layout回流和repaint重绘。

14、介绍css3中position

1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。3、position: absoluteabsolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。4、position: fixed可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。5、inherit继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。6、stickyposition属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。可以知道sticky属性有以下几个特点：- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

15、上下固定，中间滚动布局如何实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}#app {display: flex;flex-direction: column;height: 100vh;}.header {width: 100%;/* height: 100px; *//* position: absolute;top: 0; */background-color: #000;}.footer {width: 100%;/* height: 100px;position: absolute;bottom: 0; */background-color: #000;}.main {width: 100%;/* position: absolute;top: 100px;bottom: 100px;height: auto; */flex: 1;overflow: auto;background-color: brown;}</style>
</head><body><div id="app"><div class="header">header</div><div class="main">main<divstyle="height: 2000px;"></div></div><div class="footer">footer</div></div><script></script>
</body></html>

16、css实现border渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>border渐变</title><style>button{color: #23b7cb;font-size: 15px;padding: 5px 15px;background: #fff;border: 1px transparent solid;border-radius: 30px;position: relative;}button:after{content:'';position: absolute;top: -3px; bottom: -3px;left: -3px; right: -3px;background: linear-gradient(135deg,#000781, #23b7cb);border-radius: 30px;content: '';z-index: -1;}</style>
</head>
<body>
<button>进入平台</button>
</body>
</html>

19、 css实现一个旋转的圆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>旋转</title>
</head>
<style>.wrapper{width: 600px;height:600px;background: #F8F8F8;display: flex;justify-content: center;align-items: center;
}.z{display: inline-block;height: 40px;width: 40px;text-align: center;background: red;background: #F8F8F8;color: #FFF;border-radius: 100%;margin: 6px;border: 2px solid #666;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 0.75s linear infinite;animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}
}
@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}
}</style>
<body><div class="wrapper"><div class="z">zou</div></div>
</body>
</html>

20、css----BFC,IFC,GFC，FFC的区别

1、FC：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。2、BFC:“块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？float的值不为none。overflow的值不为visible。position的值不为relative和static。display的值为table-cell, table-caption, inline-block中的任何一个。作用：结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。3、IFC:“内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。作用：水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。4、GFC：“网格布局格式化上下文”，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。5、FFC：“自适应格式化上下文”，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

21、css3有哪些新特性

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}弹性盒模型 display: flex;多列布局 column-count: 5;媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}颜色透明度 color: rgba（255, 0, 0, 0.75）；圆角 border-radius: 5px;渐变 background:linear-gradient（red, green, blue）；阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；倒影 box-reflect: below 2px;文字装饰 text-stroke-color: red;文字溢出 text-overflow:ellipsis;背景效果 background-size: 100px 100px;边框效果 border-image:url（bt_blue.png） 0 10;转换
旋转 transform: rotate（20deg）；倾斜 transform: skew（150deg, -10deg）；位移 transform:translate（20px, 20px）；缩放 transform: scale（。5）；平滑过渡 transition: all .3s ease-in .1s;动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

22、CSS3新增伪类有那些？

:root 选择文档的根元素，等同于 html 元素:empty 选择没有子元素的元素:target 选取当前活动的目标元素:not(selector) 选择除 selector 元素意外的元素:enabled 选择可用的表单元素:disabled 选择禁用的表单元素:checked 选择被选中的表单元素:after 在元素内部最前添加内容:before 在元素内部最后添加内容:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数:nth-child(odd):nth-child(even):nth-child(3n+1):first-child:last-child:only-child:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数:nth-of-type(odd):nth-of-type(even):nth-of-type(3n+1):first-of-type:last-of-type:only-of-type::selection 选择被用户选取的元素部分:first-line 选择元素中的第一行:first-letter 选择元素中的第一个字符

23、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型(IE盒模型、怪异盒模型)有什么不同的？

1、CSS盒子模型:  外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)2、CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样3、标准的CSS的盒子模型的宽高：内容区的宽高4、低版本IE的盒子模型的宽高：内容区+内边距+边框

24、行内元素float:left后是否变为块级元素？

1、行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%，行内元素默认100%宽度占据一行2、这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的

25、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

- 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等- 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after- 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类- 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素- 单冒号（：）用于css3的伪类- 双冒号（：：）用于css3的伪元素- 想让插入的内容出现在其它内容前，使用::before，否者，使用::after；- 在代码顺序上，::after生成的内容也比::before生成的内容靠后。- 如果按堆栈视角，::after生成的内容会在::before生成的内容之上- ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

26、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

27、垂直塌陷及解决方法

详见

三、js

1、es6的新特性

const let
模板字符串
箭头函数
函数的参数默认值
对象和数组解构
for...of 和 for...in

2、promise的使用，怎么用es5实现promise

详见

3、if有作用域吗

只有函数有作用域，if是没有作用域的。但是有一种情况会让if看上去有作用域，就是在if {}语句中，使用const、let，他们会有块级作用域。

4、原型链和作用域链的区别

（1）原型链
当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，
直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object

5、js判断类型

1、typeof
检测不出null 和 数组，结果都为object，所以typeof常用于检测基本类型2、instanceof
不能检测出number、boolean、string、undefined、null、symbol类型，所以instancof常用于检测复杂类型以及级成关系3、constructor
null、undefined没有construstor方法，因此constructor不能判断undefined和null。
但是contructor的指向是可以被改变，所以不安全4、Object.prototype.toString.call
全类型都可以判断

6、数据类型怎么检测

1、typeof
例：console.log(typeof true) // boolean2、instanceof
例：console.log([1,2] instanceof Array) // true3、constructor
例： console.log([1, 2].constructor === Array) // ture4、Object.prototype.toString.call
例：Object.prototype.toString.call([1, 2]) // [object Array]

7、普通函数和箭头函数的区别

1、普通函数
可以通过bind、call、apply改变this指向
可以使用new2、箭头函数
本身没有this指向，
它的this在定义的时候继承自外层第一个普通函数的this
被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
箭头函数外层没有普通函数时，this指向window
不能通过bind、call、apply改变this指向
使用new调用箭头函数会报错，因为箭头函数没有constructor

8、如何用原生js给一个按钮绑定两个onclick事件？

var btn = document.getElementById('btn')
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)function fn1 () {
console.log('我是方法1')
}function fn2 () {
console.log('我是方法2')
}

9、document.write和innerHTML的区别

document.write 将内容写入页面，清空替换掉原来的内容，会导致重绘document.innerHTML 将内容写入某个Dom节点，不会重绘

10、栈和堆的区别

1、堆
动态分配内存，内存大小不一，也不会自动释放2、栈
自动分配相对固定大小的内存空间，并由系统自动释放3、基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据。

11、undefined 和 null 区别

1、null
什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）
2、undefined
没有设置值的变量，会自动赋值undefined
3、区别
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

12、eval()的作用

eval(string) 函数计算 JavaScript 字符串，并把它作为脚本代码来执行如果参数是一个表达式，eval() 函数将执行表达式；如果参数是Javascript语句，eval()将执行 Javascript 语句；如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数。特殊：eval("{b:2}") // 声明一个对象eval("（{b:2}）") // 返回对象{b:2}

13、JS哪些操作会造成内存泄露

这个文章讲的通俗易懂，可以参考具体案例 https://www.jianshu.com/p/763ba9562864内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
1、意外的全局变量
2、闭包
3、没有清理的dom元素
dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调

14、谈谈垃圾回收机制方式及内存管理


JavaScript 在定义变量时就完成了内存分配。当不在使用变量了就会被回收，因为其开销比较大，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
（1）垃圾回收
标记清除法
当变量进入环境时，将这个变量标记为'进入环境'。当标记离开环境时，标记为‘离开环境’。离开环境的变量会被回收
引用技计数法
跟踪记录每个值被引用的次数，如果没有被引用，就会回收
（2）内存管理
内存分配=》内存使用=》内存回收

15、什么是闭包，如何使用它，为什么要使用它？

（1）闭包就是能够读取其它函数内部变量的函数
（2）使用方法：在一个函数内部创建另一个函数
（3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
（4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）

16、请解释JSONP的工作原理，以及它为什么不是真正的AJAX

JSONP 是一种非正式传输协议，允许用户传递一个callback给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。它们的实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
jsonp只支持get请求，ajax支持get和post请求

17、请解释一下JavaScript的同源策略

同源指协议，域名，端口相同，
同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

18、关于JS事件冒泡与JS事件代理（事件委托）

（1）事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window，过程就像冒泡泡 。如果在某一层想要中止冒泡，使用 event.stopPropagation() 。
但是当大量标签大量事件的时候先然不可能为每个元素都加上事件，（事件绑定占用事件，浏览器要跟踪每个事件，占用更多内存。而且并不是所有事件都会被用户使用到）。所以需要事件委托来解决这个问题。
（2）事件委托
将事件给最外层的元素，自己不实现逻辑，由最外层元素来代理。（判断事件源，做不同处理）

19、new操作符到底到了什么

//（1）
var obj = new Fun() 做了三件事var obj  = {}  // 创建一个空对象
obj.__proto__ = Fun.prototype //空对象的__proto__指向构造函数的原型对象
Fun.call(obj) // 构造函数this指向替换成obj//（2）实现一个new
function _new(fn, ...arg) {
const obj = Object.create(fn.prototype);
const ret = fn.apply(obj, arg);
// 根据规范，返回 null 和 undefined 不处理，依然返回obj，不能使用
// typeof result === 'object' ? result : obj
return ret instanceof Object ? ret : obj;
}

20、js延迟加载的方式有哪些？

（1）defer属性
<script src="test.js" defer="defer"></script>
立即下载，但是会等到整个页面都解析完成之后再执行
（2）async属性
<script src="test.js" async></script>
不让页面等待脚本下载和执行（异步下载），但是无法控制加载的顺序
（3）动态创建script标签
（4）使用定时器延迟
（5）让js最后加载

21、promise、async有什么区别

1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解区别，async/await让代码更像同步，进一步优化了代码

22、== 和 =的区别，什么情况下用相等

”==” 是判断转换后的值是否相等,”===” 是判断值及类型是否完全相等不需要判断类型时可以使用==

23、bind、call、apply的区别

var a = {
user:"良人",
fn: function(arg1, arg2) {
console.log(this.user)  // 良人
console.log(arg1+ arg2) // 2
}
}
var b = a.fn//1、bind
var c = b.bind(a) // 返回一个已经切换this指向的新函数
c(1,1)//2、apply
b.apply(a, [1, 1])  // 将b添加到a环境中
//第一个参数是this指向的新环境
//第二个参数是要传递给新环境的参数
//注意： 第一个参数为null时表示指向window//3、call
b.call(a, 1, 1) // 将b添加到a环境中
//第一个参数是this指向的新环境
//第二、三...个参数是传递给新环境的参数
//注意： 第一个参数为null时表示指向window//小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。

24、介绍暂时性死区

在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。

25、两个对象如何比较

有思路即可，步骤：
（1）判断两个类型是否对象
（2）判断两个对象key的长度是否一致
（3）判断属性value值的数据类型，根据不同数据类型做比较
a、是对象，重复这个步骤
b、是数组，转字符串比较
c、是基本类型，直接判断

26、介绍各种异步方案

（1）回调函数
（2）promise
（3）async/await

27、Promise和Async处理失败的时候有什么区别

（1）Promise错误可以在构造体里面被捕获，而async/await返回的是promise,可以通过catch直接捕获错误。
（2）await 后接的Promise.reject都必须被捕获，否则会中断执行

28、JS为什么要区分微任务和宏任务

（1）js是单线程的，但是分同步异步
（2）微任务和宏任务皆为异步任务，它们都属于一个队列
（3）宏任务一般是：script，setTimeout，setInterval、setImmediate
（4）微任务：原生Promise
（5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务

29、Promise和setTimeout执行先后的区别

Promise是微任务，setTimeout是宏任务，先执行微任务，如有还有微任务执行完微任务再执行下一个宏任务

30、 setTimeout(0)和setTimeout(2)之间的区别

定时器表面意思是过指定时间后执行，但是真正的含义是每过指定时间后，会有fn进入事件队列
(1)setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行
(2)setTimeout(fn,1) 1毫秒后执行，但是因为要先执行前面的宏任务，所以不一定就是在一毫秒后执行，取决于队列里任务执行的速度

31、for…in 和 object.keys的区别

Object.keys不会遍历继承的原型属性
for...in 会遍历继承的原型属性

32、XML和JSON的区别？

1，xml是重量级的，json是轻量级的。
2，xml在传输过程中比较占带宽，json占带宽少，易于压缩。
3，xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

33、说说你对AMD和Commonjs的理解

两者都是为了实现模块化编程而出现的
（1）commonjs
通常被应用于服务器，在服务器端，模块的加载和执行都在本地完成，因此，CommonJS并不要求模块加载的异步化。
核心思想：
一个单独文件就是一个模块，通过require方法来同步加载要依赖的模块，然后通过extports或则module.exports来导出需要暴露的接口。
（2）AMD
可以实现异步加载依赖模块，预加载，在并行加载js文件同时，还会解析执行该模块。虽然可以并行加载，异步处理，但是加载顺序不一定
（3）CMD
懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。

34、js的涉及模式

单例模式、策略模式、代理模式、迭代器模式...等等
这篇文章觉得很好，简介明了能让人大致懂得这些模式，具体还是要自己去学习 https://www.cnblogs.com/imwtr/p/9451129.html

35、[“1”, “2”, “3”].map(parseInt) 答案是多少？

这题看到的时候都懵逼了，还是太菜了 = =...
（1）map用法：
arr.map(function(el, index, arr) {
return el
})
map方法接收一个函数参数，并且这个函数可以接收三个参数
el：遍历过程中的当前项，
index：遍历过程中的当前下标
arr: 原数组（2）parseInt用法：
parseInt(str, num)
根据num解析str，并返回一个整数。
str: 要解析的字符串，如果字符第一个数不能被转换，返回NaN。
num: 基数，介于 2 ~ 36 之间，如果传0，则默认用10计算。num不在区间内，返回NaN（3）所以这道题，关键点就在num
el和index 相当于 str 和 num 带入一下
parseInt('1', 0) // '1' 用基数10算 为1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN

36、常见兼容性问题？

（1）事件对象兼容
e  = e || window.event;
（2）阻止事件冒泡兼容
event.stopPropagation? event.stopPropagation():event.cancelBubble=true;
（3）阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
（4）事件监听兼容
addEventListener  ? addEventListener  : attachEvent()
removeEventListener() ? removeEventListener() : detachEvent()
（5）事件目标对象兼容
var src = event.target || event.srcElement;

37、说说你对promise的了解

（1）promise是为解决异步处理回调金字塔问题而产生的
（2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变
（3）then接收resolve()，catch接收reject()

38、介绍js有哪些内置对象？

String对象、Array对象、Object对象、Number对象
Math对象、Date对象、Boolean对象

39、说几条写JavaScript的基本规范？

1、不要在同一行声明多个变量
2、使用 === 和 !== 来比较
3、不要使用全局函数
4、变量在使用之前的位置声明（减少变量提升干扰）
5、if用花括号包起来即使只有一行
6、写注释

40、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

栈：原始数据类型（Undefined  Null  Boolean  Number  String）
堆：引用数据类型（对象、数组、函数）

41、href="#"与href=“javascript:void(0)的区别”？

1、# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。2、javascript:void(0), 仅仅表示一个死链接。如果你要定义一个死链接请使用 javascript:void(0)

42、对this的理解

1、单独使用，this表示全局对象
2、在函数中，this表示全局对象
3、在对象的一个函数方法中，this表示这个对象
4、可以通过apply、bind来更改this的指向ps： this永远指向的是最后调用它的对象，仅当它在对象的一个函数方法中时会有差异

43、promise.all 返回什么

如果没有报错，返回执行结果[res1, res2,...]
如果报错，则返回第一个报错的promise的结果

44、多个await的执行顺序，如果要同步执行如何实现？

使用Promise.all
promise.all是等所有异步操作都完成之后返回结果，相当于让这些异步同步了

2021最新前端面试题相关推荐

最新前端面试题整理和答案（全）一直更新
最新前端面试题整理和答案(全) 参考地址:https://blog.csdn.net/wdlhao/article/details/79079660 javascript: JavaScript中如何 ...
2022 最新前端面试题汇总
VUE面试题 1.v-show 和 v-if的区别,v-show 和 keep-alive 的区别答案: v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁,而 ...
2022最新前端面试题（vue方向）
前言:又到了跳槽旺季,经过几天的收集,整理出了2022年后最新的面试题及答案,坐标武汉,期望薪资15k+的.持续更新,也欢迎各位大佬的评论区补充 1.vue的运行机制 1.初始化调用vue原型上的_ ...
2021年最新前端面试题（js,vue,webpack,css,react）总结
欢迎大家留言补充面试题,或更改我的题目错误,我会根据大家意见给补充上,谢谢! 这边文章主要是最近面试加上同事的面试总结出来的,包含了大多数公司的面试题目,有些答案有出入,请多多包涵,欢迎留言一起探讨. ...
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
一阶段面试题: CSS浮动怎么理解的浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,也就是脱离文档流,所以文档的普通流中的块框表现得就像 ...
2021 字节前端面试题汇总
自我介绍.项目介绍 (1)怎么学习前端的,看了哪些书 (2)实现左中右三栏布局,左右固定宽度,中间自适应 (3)var. let. const的区别(重点) (4)看代码说输出 var length ...
2022年最新前端面试题、高频面试题、面试题总结
文章目录 html面试题 js面试题 css面试题 vue面试题 react面试题浏览器.项目优化.等其他类型高频面试题 html面试题 Doctype 作用声明文档类型 HTML5 新增的内容有 ...
2023年最新前端面试题
HTML 一.HTML5标记 <header></header> 头标记<nav></nav> 导航标记,表示页面中导航链接部分<!--main标 ...
2022年最新前端面试题，持续更新
[js面试题] 1.js数据类型基本数据类型 Number.String.Boolean.Null.Undefined.Symbol.bigInt 引用数据类型 object.Array.Date. ...
2019年 -- 最新前端面试题攻略
一.html和css部分 1.如何理解CSS的盒子模型? 每个HTML元素都是长方形盒子. (1)盒子模型有两种:IE盒子模型.标准W3C盒子模型:IE的content部分包含了border和padi ...

2021最新前端面试题

2021前端面试题

一、html

1、<img>的title和alt有什么区别?

2、html5有哪些新特性、移除了那些元素？

3、WEB标准以及W3C标准是什么?

4、xhtml和html有什么区别?

5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

7、HTML全局属性(global attribute)有哪些

8、Canvas和SVG有什么区别？

9、HTML5 为什么只需要写 ？

二、CSS

1、实现一个div在不同分辨率下的水平垂直居中

2、左右固定，中间自适应样式

3、阐述清楚浮动的几种方式（常见问题）

4、解释css sprites ，如何使用？

5、box-sizing常用的属性有哪些？分别有什么作用？

6、CSS样式覆盖规则

7、请简要描述margin重合问题，及解决方式

8、display:none; visibility:hidden区别？

9、重绘和回流

10、说说你对语义化的理解

11、为什么要初始化css样式？

12、移动端适配1px问题

13居中为什么要使用transform（为什么不使用marginLeft/Top）

14、介绍css3中position

15、上下固定，中间滚动布局如何实现

16、css实现border渐变

19、 css实现一个旋转的圆

20、css----BFC,IFC,GFC，FFC的区别

21、css3有哪些新特性

22、CSS3新增伪类有那些？

23、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型(IE盒模型、怪异盒模型)有什么不同的？

24、行内元素float:left后是否变为块级元素？

25、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

26、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

27、垂直塌陷及解决方法

三、js

1、es6的新特性

2、promise的使用，怎么用es5实现promise

3、if有作用域吗

4、原型链和作用域链的区别

5、js判断类型

6、数据类型怎么检测

7、普通函数和箭头函数的区别

8、如何用原生js给一个按钮绑定两个onclick事件？

9、document.write和innerHTML的区别

10、栈和堆的区别

11、undefined 和 null 区别

12、eval()的作用

13、JS哪些操作会造成内存泄露

14、谈谈垃圾回收机制方式及内存管理

15、什么是闭包，如何使用它，为什么要使用它？

16、请解释JSONP的工作原理，以及它为什么不是真正的AJAX

17、请解释一下JavaScript的同源策略

18、关于JS事件冒泡与JS事件代理（事件委托）

19、new操作符到底到了什么

20、js延迟加载的方式有哪些？

21、promise、async有什么区别

22、== 和 =的区别，什么情况下用相等

23、bind、call、apply的区别

24、介绍暂时性死区

25、两个对象如何比较

26、介绍各种异步方案

27、Promise和Async处理失败的时候有什么区别

28、JS为什么要区分微任务和宏任务

29、Promise和setTimeout执行先后的区别

30、 setTimeout(0)和setTimeout(2)之间的区别

31、for…in 和 object.keys的区别

32、XML和JSON的区别？

33、说说你对AMD和Commonjs的理解

34、js的涉及模式

35、[“1”, “2”, “3”].map(parseInt) 答案是多少？

36、常见兼容性问题？

37、说说你对promise的了解

38、介绍js有哪些内置对象？

39、说几条写JavaScript的基本规范？

40、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

41、href="#"与href=“javascript:void(0)的区别”？

1、`<img>`的title和alt有什么区别?

6、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

9、HTML5 为什么只需要写？

25、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用