2022前端面试题《21题-40题》（每日更新）

二十一、link和important的区别

1、link引用css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载

2、link时XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

3、link支持使用JavaScript控制DOM去改变样式；而@import不支持。

二十二、CommonJS、AMD、CMD和ES6模块化区别？

CommonJS：NodeJS是CommonJS规范的的实现，基于服务端，语法是require和Module、exports，

AMD：基于浏览器端，推崇依赖前置

CMD：CMD规范seaJs规范，推崇依赖就近

ES6：模块化是CommonJS和AMD规范

二十三、css属性那些脱离文档流

浮动、绝对定位、overflow：hidden

二十四、function（函数）

将可复用的代码封装起来，可以多次调用

分类：

普通函数、构造函数、变量函数、匿名函数、闭包、回调函数、递归函数、自调函数

二十五、数组去重的方式

1、利用ES6 Set去重（ES6中最常用）

2、利用for嵌套for，然后splice去重（ES5中最常用）

3、 利用indexOf去重

二十六、找出数组最大值

方法一（使用递归函数）

方法二（使用for循环遍历）

方法三（使用apply将数组传入max方法中直接返回）

二十七、Css动画和js动画的区别

1、js动画代码相对复杂一些

2、动画运行时，对动画的控制程度上，js能够让动画暂停、取消、终止，css动画不能添加事件

3、动画性能看，js动画多了一个js解析的过程，性能不如css动画好

二十八、clientX、pageX、offsetX、screenX的区别

clientX、clientY：

相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。

pageX、pageY：

类似于clientX、clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

offsetX、offsetY：

相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

screenX、screenY：

相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。

client 是客户端，客户端就是浏览器，也就是相对浏览器的坐标。

Page 就是文档，也就是相对网页的坐标，也就是相对于浏览器可视区域的坐标   还要加上滚动条。

offset就是偏移，也就是想相对于源元素的偏移位置。

screen就是屏幕，也就是相对于屏幕的坐标。

二十九、JS中深拷贝与浅拷贝的区别？

1、深拷贝递归的复制新对象中的所有值或属性，而拷贝只复制引用。

2、再深拷贝中，新对象中的更改不会影响原始对象，而在浅拷贝中，新对象中的更改，原始对象中也跟着改

3、在深拷贝中，原始对象不与新对象共享相同的属性，而在浅拷贝中，它们具有相同的属性

三十、mouseover、mouseout、mouseenter、mouseleave的区别

1、只要鼠标指针移入（或移出）事件所绑定的元素或子元素，都会触发mouse over（或 mouseout)事件

2、只有鼠标指针移入（或移出）事件所绑定的元素，才会触发mouseenter（或mouseleave）事件

三十一、onload()与ready()区别？

加载时：

onload()必须等待网页全部加载完毕（包括图片等），再执行js代码

ready()只需要等待网页中的DOM解构加载完毕，就能执行js代码

执行次数：

onload()只能执行一次，如果第二次，那么第一次的执行会被覆盖

ready()可以执行多次，都不会被上一次覆盖

三十二、this的指向

1、在普通函数中，this指向window

2、在构造函数中，this指向创建的对象

3、在方法声明中，this指向调用者

4、在定时器中，this指向window

5、在事件中，this指向事件源

三十三、什么时候会产生异步问题

Ajax、定时器、promise

三十四、动态页面和静态页面

程序是否也在服务器端运行，是重要标志。

在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页。

运行于客户端的程序、网页、插件、组件，属于静态网页

三十五、字符串转json，json转字符串

json.parse(jsonstr)；//可以将json字符串转换成json对象

json.stringify(jsonobj)；//可以将json对象转换成json字符串

三十六、数组排序

1、sort() 数组对象排序 其原理是冒泡排序，即比较相邻的元素，如果第一个比第二个大，就交换他们两个。

2、插入排序，每次处理就是将无序数列的第一个元素与有序数列的元素从后往前逐个进行比较,找出插入位置,将该元素插入到有序数列的合适位置中

3、冒泡排序 即比较相邻的元素，如果第一个比第二个大，就交换他们两个。

三十七、js中两种定时器，setTimeout和setInterval的区别

setTimeout 只在指定时间后执行一次

setInterval 以指定时间为周期循环执行

一般情况下 setTimeout用于延迟执行某方法或功能，setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

销毁两种定时器的方法：

1、清除Timeout的定时器，传入id（创建定时器时会返回一个id） claerTimeout（i）

2、清除Interval的定时器，

传入id（创建定时器时会返回一个id） claerInterval（i）

三十八、块级元素和行级元素怎么转换，转换成行内块会遇到什么问题？

display：block（转换成块级元素）

display-inline（转换成行内元素）

display-inline-block（改成行内块）转换后会有间隙

三十九、说出px、em、rem的区别？

px是绝对单位，

em和rem是相对单位

em参照父级 

rem以html根节点为参照

四十、说说nth-child  nth-of-type？

nth-child是先找元素，再找父级下的第几个，有则改变，没有则忽略

nth-of-type是先找父级，再找父级元素下的第几个