2020前端面试题补02
2020前端面试题补02
1 原生篇
- 什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea;
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote;
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img;
3.什么叫优雅降级和渐进增强？
渐进增强progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
4.浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发);
微信的浏览器内核: X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。
- 块元素和行内元素什么区别 ?
- a. display:inline;转换为行内元素
- b. display:block;转换为块状元素
- c. display:inline-block;转换为行内块状元素
行内元素特征：- (1)设置宽高无效；
- (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效即会撑大空间，行内元素尺寸 由内含的内容决定，盒模型中padding，border 与块级元素并无差异，都是标准的盒模型，但是 margin 却只有水平方向的值，垂直方向并没有起作用。行内元素的水平方向的padding-left，padding-right，margin-left，margin-right 都产生边距效果，但是竖直方向的padding-top，padding-bottom，margin-top，margin-bottom都 不会产生边距效果。padding设置上下左右都有效，即会撑大空间但是不会产生边距效果；
- (3)不会自动进行换行。
块状元素特征：- (1)能够识别宽高；
- (2)margin和padding的上斜体样式下左右均对其有效；
- (3)可以自动换行；
- (4)多个块状元素标签写在一起，默认排列方式为从上至下。
行内块状元素特征：- (1)不自动换行；
- (2)能够识别宽高；
- (3)默认排列方式为从左到右。
6.html5中新增哪些api？
1、
getElementsByClassName()方法：
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。
2、classList 属性：
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
3、自定义数据属性：
HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可
4、outerHTML 属性：
outerHTML 属性和innerHTML 有点类似；在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下，outerHTML会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素
5、insertAdjacentHTML()方法：
插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数：插入位置和要插入的HTML 文本。
7.Css3动画有哪些？
1、animation-name属性
定义动画名称，用于指定由规则定义的动画的一个或多个名称。
2、animation-duration属性
用于指定执行一个周期动画应该花多长时间
3、animation-timing-function属性
用来设置播放方式的，它可以指定定时函数，该函数定义动画对象随时间的速度。它描述了动画在其持续时间的一个周期内如何进展，允许它在其过程中改变速度
4、animation-delay属性
定义动画何时开始（开始时间），它允许动画在应用后的某个时间开始执行，或者在应用之前看似已经开始执行一段时间
5、animation-iteration-count属性
用于指定动画停止前播放动画循环的次数，即：播放次数
6、animation-direction属性
用于指定动画是否应在某些或所有循环或迭代中反向播放，即：播放方向
7、animation-fill-mode属性
定义动画在播放后的状态。更具体地说，它定义了在动画延迟时间内以及动画完成执行后应用于元素的样式。
8、animation-play-state属性
用于检索或设置对象动画的状态，即：指定CSS 动画是正在运行还是暂停
8.说下遇到的各种兼容性的处理方法？
- IE6不支持png-24透明图片 问题出现的浏览器：IE6及其更低的版本
问题描述：在IE6浏览器上，使用png24为的图片不透明，出现背景
解决方法：图片使用gif格式，或者png-8格式图片。- 3像素问题 问题出现的浏览器：IE6及其更低的版本
问题描述：两个相邻的div之间有3个像素的空隙，一个div使用了float,而另一个没有使用产生的。
解决方法：对另一个div也使用float;- 浏览器默认的margin和padding不同，
解决方案是加一个全局的*{margin:0;padding:0;}来统一。- IE5-IE8不支持opacity 问题出现的浏览器：IE8及其更低的版本
问题描述：IE5-IE8不支持css属性opacity
解决方法：这时可以另外添加ie滤镜alpha- IE6不能定义1px左右宽度的容器 问题出现的浏览器：IE6及其更低的版本
问题描述：创建一个高度为1px的容器，在IE6中没效果。
解决方法：因为行高line-height在IE6下有默认值，设置 line-height:1px|overflow:hidden|zoom:0.08.- IE6不支持min-*:， 问题出现的浏览器：IE6及其更低的版本
问题描述：IE6不支持min-height属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度。
解决方法：利用IE6不识别！Important，给元素设置固定高度，并且设置元素高度自动。- 双外边距浮动问题 IE6及其更低的版本
问题描述：块属性标签float后，又有横行的margin情况下，在IE 6显示margin比设置的大。任何浮动的元素上的外边距加倍，例如：如果元素设置的外边距为maigin-left:15px, 在浏览器里会显示为margin-left:30px.
解决办法：将元素的display属性设置为inline，因为元素是浮动的，所以这么设置不会影响元素在浏览器的显示。块级元素就加display：inline；行内元 素转块级元素display：inline后面再加display：table。- Firefox点击链接出现的虚线框 Firfox浏览器
问题描述：Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。
解决方法：我们为了和其他浏览器保持一致，需要去掉虚线框，我们可以给a标签设 置outline属性
9…前后端分离是怎样的？
前端：负责html/css/js/模块化开发，通过ajax发送请求获取数据进行页面的渲染
后端：编写数据接口，根据不同的请求方式和路径做出不同的响应（RESTful规范）
好处：
1、方便维护和迭代；
2、前后端可以同时展开工作，不用等待对方；
3、提高前端优化力度，构建前端页面更细致，项目性能更好
10.const、let、var的区别？
var:声明变量：声明会提前，声明会提升（到当前作用域的头部），全局声明时可用window调用。
let:声明变量：声明不会提前（必须先声明），不允许反复声明，识别块级作用域。
const:声明常量：不可改变，声明不会提前（必须先声明），不允许反复声明，识别块级作用域。
11.懒加载和预加载？
1）懒加载：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
2）预加载：预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。
12.跨域的方式？怎么判断某个接口可以使用jsonp跨域？
- jsonp ，允许 script 加载第三方资源;
- 服务器代理;
- cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息
接口的url地址栏的后面callback或者cd这些参数的，一般可以使用jsonp跨域.
13.DOM事件流包括哪些阶段？
DOM事件流 DOM事件流包括三个阶段。 事件捕获阶段 处于目标阶段 事件冒泡阶段
DOM事件流刚开始时从元素出发，一层层向上传播，直到根节点，这就是冒泡阶段；然后从根节点开始往回传播，直到目标节点，这是捕获阶段；等到达目标节点的时候就变成了目标阶段。
14.对箭头函数的理解？
箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致！先来看一个最简单的箭头函数：
1、如果只有一条语句，可以将{}和return省略掉
2、如果语句为多条，则不可以省略{}和return
3、箭头函数没有prototype属性
4、箭头函数不绑定arguments
5、箭头函数不能用于构造函数
15.bind，apply，call的区别 ?
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法，apply最多只能有两个参数——新this对象和一个数组。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法，第一个参数和apply一样，是用来替换的对象，后边是参数列表。
bind除了返回是函数以外，它的参数和call一样。
16.JavaScript监听对象属性的改变？
- 基于ES5的getter和setter
在ES5中新增了一个Object.defineProperty， 直接在一个对象上定义一个新属性， 或者修改一个已存在的属性，并返回这个对象。- 脏值检测
脏值检测原理就是比较新值和旧值， 当值真的发生改变时再去更改DOM，目前Angular使用脏值检测
缺点是如果不注意，每次脏值检测会检测大量的数据， 而很多数据是没有检测的必要的，容易影响性能。
17.什么叫闭包函数？为什么不声明一个全局变量
闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)；
1、函数里面包含的子函数，子函数访问父函数的局部变量；
2、通过return将子函数暴露在全局作用域，子函数就形成闭包；
3、通过闭包，父函数的局部变量没有被销毁，可通过闭包去调用 ，但同时，这个局部变量也不会被全局变量污染。
18.什么是密钥token？
1.客户端使用用户名跟密码请求登录
2.服务端收到请求，去验证用户名与密码
3.验证成功后，服务端会签发一个 Token，这个Token是与用户名一一对应的，token一般可以存储在缓存或数据库中，以方便后面查询出来进行验证。再把这个 Token 发送给客户端
4.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
5.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
6.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
Token存在过期时间，在Token生成的时候可以打上一个时间戳，验证token的时候同时验证是否过期，并告知终端。终端接收到token过期的返回后，则要求用户重新输入用户名跟密码，进行登录。
19.什么是事件委托？事件委托的好处是什么？
事件委托就是利用事件冒泡机制，将事件绑定在父节点身上，
好处：
1、减少事件的绑定次数，优化页面性能
2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。
3、提高事件的处理速度，减少内存的占用。
20.数组常用方法?
Array.forEach()：是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组;
Array.map()：是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组;
Array.filter()：是将所有元素进行判断，将满足条件的元素作为一个新的数组返回;
Array.every()：是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：
Array.some()：是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false：
Array.reduce()：是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：
Array.push()：是在数组的后面添加新加元素，此方法改变了数组的长度：
Array.pop()：在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：
Array.shift()：在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：
Array.unshift()：是将一个或多个元素添加到数组的开头，并返回新数组的长度：
Array.isArray()：判断一个对象是不是数组，返回的是布尔值
Array.concat()：是一个可以将多个数组拼接成一个数组：
Array.toString()：将数组转化为字符串：
Array.join()：是将数组转化为字符串：
Array.splice(开始位置， 删除的个数，元素)=》万能方法，可以实现增删改：
21.数组去重有几种方法?
1）ES6新特性 Set特性去重，将数组转换为Set格式的伪数组，再将Set转换回来就自动去重了
```js
function unique (arr) {
return Array.from(new Set(arr))
}
2）使用ES6中的 Array.filter()方法和字符串的方法 String的方法indexOf（）完成去重，
原理：使用filter遍历一个数组，用indexOf（）会返回该元素在数组中第一次出现的索引，用这个值来判断是否与重复出现的元素的索引是否相同，而filter的特性会返回通过判断的元素，以此来实现去重
arr.filter((item,index)=>{
return indexOf(item)===index;
}
3)双重for循环去重，外层循环遍历元素，内层循环检测元素是否重复，然后在push进数组
```js
let arrA=[];
for (let i=0, len=arr.length; i<len; i++) {
for (let j=i; j<len; j++) {
if(!arrA.indexOf(arr[j])){
arrA.push(arr[j]);
}
}
}
4）利用for..of循环来遍历数组的值，也是检测空数组是否存在该值，再push或splice；
```js
let result = [];
for (let i of arr) {
!result.includes(i) && result.push(i)
}
22.说说你对原型链的理解？
原型：所有的函数都有一个特殊的属性prototype(原型)，prototype属性是一个指针，指向的是一个对象(原型对象)，原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象，这些对象实例都可以共享构造函数的原型的方法。
原型链：原型链是用于查找引用类型（对象）的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中。
23.ajax同步与异步的理解？
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
AJAX的核心是客户端的JavaScript程序能够实现异步执行,异步执行是相对与同步执行的.同步执行意味着代码必须顺序执行。