前端面试题（日更）

young_peace
238 阅读10分钟

JS

2022.3.28

1.清除浮动的方法

浮动产生的原因：父盒子很多情况下，不适合给高度，但子盒子浮动又不占有位置，父盒子高度为0时，就会影响下面的标准流。
清除浮动的时机：父级没高度、子盒子浮动了、影响下面布局了
清除浮动元素造成的影响：清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了。
方法：
（1）额外标签法 在浮动元素的末尾添加一个空标签（这个标签必须是块级元素）

<div style="clear:both"></div>

优点：通俗易懂、书写方法
缺点：添加无意义标签，导致结构性变差
（2）给父级添加overflow：hidden/auto/scroll
优点：代码简洁
缺点：无法显示溢出部分
（3）after伪元素法
给父元素添加

.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}

优点：没有添加标签，结构更简单
缺点：照顾低版本浏览器
（4）双伪元素清除浮动
给父元素添加

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器

2.子元素如何在父元素中居中

2.1 水平居中
（1）子元素 margin:0 auto
（2）父元素 text-align:center 子元素display:inline-block
2.2 垂直居中
（1）
父元素

position:relative

子元素

position:absolute
top:50%
left:50%
margin-top:width/2 px
margin-left:height/2 px

(2)
父元素

display:table-cell  
vertical-align:middle

子元素

margin：auto

（3）css3
子元素

position:relative/absolute
top:50%
left:50%
transform:translate(-50%,-50%)

（4）弹性布局
父元素

display:flex
justify-content:center
align-item:center

3.外边距折叠

多个相邻的普通流的块元素垂直方向margin会重叠
解决方案：
（1）为父元素（外层元素）定义边框
border:1px solid transparent
（2）为父元素定义内边距
padding:1px
（3）为父元素添加
overflow:hidden

4.JS的垃圾回收机制

JS解释器可以检测到程序何时不再需要这个对象了，并将它占用的内存释放掉（每隔一段时间自动运行）
两种回收方法：
（1）标记清除（常用）
变量进入上下文，被加上存于上下文中的标记；变量离开上下文时，加上离开上下文的标记
（2）引用计数
对每个值记录它被引用的次数。
声明变量并赋一个引用值时，这个值的引用数为1；
如果保存对该值引用的变量被其他值覆盖了，引用计数减1；
当一个值的引用计数为0时，就无法访问这个值了。

5.JS的语言特性

运行在客户端浏览器上，与操作系统无关，跨平台语言
不用预编译，直接解析执行代码
弱类型语言，较为灵活（允许变量的隐式转换、允许强制转换等）

6.文档模式doctype

告诉浏览器以何种方式渲染页面
（1）混杂模式，让IE像IE5一样只吃一些非标准的特性
（2）标准模式，让IE具有兼容标准的行为

2022.3.29

7.promise

一种解决异步编程的方案
本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了
三种状态：
待定（pending），初始/等待状态
兑现（fulfille），成功状态
拒绝（rejected），失败状态
两个特点：
（1）promise对象的状态不受外部条件的影响
（2）promise对象的状态不可逆
三个缺点：
（1）一旦新建就会立即执行，无法取消
（2）如果不设置回调函数，Promise 内部抛出的错误，不会反映到外部
（3）当处于 pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
解决的问题：
（1）回调地狱
（2）支持多并发请求，获取并发请求中的数据

8.get请求传参长度的误区

HTTP协议未规定GET和POST的长度限制，GET的最大长度显示是因为浏览器和web服务器限制了url的长度

9.this的指向

全局this，指向window
对象中的this，指向其本身
事件中的this，指向事件对象

10.JSONP的工作原理是什么？为什么不是真正的ajax

jsonp工作原理：
一个非官方的跨域解决方案，只支持get请求
工作原理：网页上一些标签天生具有跨域能力，比如：img link iframe script，JSONP就是利用script标签的跨域能力来发送请求的。通过script标签的src属性，请求跨域的数据接口，通过函数调用的形式，接收跨域接口响应回来的数据。
为什么不是真正的ajax
ajax和jsonp之间没有任何关系，ajax的核心是通过xhr对象获取本页内容，而jsonp的核心是动态添加script标签来调用服务器提供的js脚本。

11.数组去重的方式

（1）indexof()，新建一个空的结果数组，for循环原数组，判断结果数组中是否存在当前元素(返回某个字符串在字符串出现的位置，不存在返回-1)，如果存在，跳过，不存在，push进结果数组。
（2）sort()，先将数组排序，再在数组中进行相邻元素的比对
（3）filter()和indexof()

r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
}

indexof()总是返回元素的第一个索引，其他重复的元素因为索引不同都被过滤掉了 （4）set（ES6）& array.form

function unique (arr) {
  return Array.from(new Set(arr))
}

（5）includes()，for循环遍历，查看结果数组中是否包含原数组的值
（6）双重for循环&splice()，前一个元素和后一个元素相等，splice删除后一个元素（ES5常用）

12.foreach和map有什么区别

foreach，不会返回执行的结果，会修改原来的数组
map不会对空数组进行检测，会返回一新数组，不会对原数组产生影响

13.预加载和懒加载

预加载，在页面加载完成之前，提前将所需资源下载，之后需要的时候从缓存调出
懒加载，延迟加载，按照一定的条件或者需求满足条件的时候再加载资源
区别： 前者是提前加载，会增加服务器的压力；后者是迟缓加载甚至不加载，对服务器前端压力有一定的缓解作用。

14.节流和防抖

防抖，当事件被触发后，延迟n秒后再次执行回调，如果在这n秒内事件又被触发，则重新计时（事件被触发时，只有足够的空闲时间，才执行代码一次）
优点：事件被频繁触发时只发送一次网络请求
实现：需要一个延时器来辅助实现，延迟执行需要执行的代码，如果方法多次触发，把上次记录的延迟执行代码用cleartimeout清除掉，如果计时完毕，没有方法来触发访问，则执行代码。
应用场景：用户在输入框连续输入一串字符时，可以通过防抖策略，只有在输入完成后，才执行查询请求，这样可以有效减少请求次数，节约请求资源

节流，减少一段时间内事件的触发频率（一定时间内方法只执行一次）
优点：防止事件无限制的被触发
实现：声明一个变量当标志位，记录当前代码是否在执行，如果正在执行，取消这次方法执行，直接return，如果空闲，正常触发执行
应用场景：（1）鼠标连续不断地触发某事件（如点击），旨在单位时间内触发一次；（2）懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率

2022.3.30

15.事件委托

不在事件发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过事件发生元素的DOM类型，来做出不同的响应。
案例：最经典的就是ul和li标签的事件监听，比如我们在添加事件的时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
优点：
（1）避免对每个子事件都添加事件监听机制，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能；
（2）只有父元素和DOM交互，其他操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

16.JS的各种位置的区别

offest：（1）距离带有定位父元素的位置；（2）获得自身的大小
client：元素可视区（不包含边框）
scroll：元素大小、滚动距离

offsetHeight：返回自身包含padding、border、content的高度，返回数值不带单位 clientHeight：返回自身包含padding、content的高度，返回数值不带单位 scrollHeight：返回自身实际高度，不含边框，返回数值不带单位

clipboard.png offsetTop：返回元素带有分为父元素上方的偏移
clientTop：返回元素上边框的大小
scrollTop：滚动后被隐藏的高度

2022.3.31

17.什么是事件代理/委托，有什么好处

原理：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点
减少dom操作的原因：不断操作dom，那么引起浏览器重绘和回流的可能性也就越多，页面交互事件也就变得越长。
三个阶段：
（1）捕获阶段：Window对象——>目标节点（从外到里，不响应任何事件）
（2）目标阶段：在目标节点上触发
（3）冒泡阶段：目标节点——>Window对象（从里到外）

18.css的渲染层合成是什么，浏览器如何创建新的渲染层

在DOM树中每个节点都会对应一个渲染对象，当这些渲染对象处于相同的坐标空间时，就会形成一个渲染层，渲染层保证页面以正确的顺序堆叠，这是就会出现层合成，从而正确处理透明元素&重叠元素的显示。

2022.4.1

19.apply、call、bind的区别

都可改变this的指向，第一个参数都是this要指向的对象，默认指向全局Window
传参
一次性传入参数：apply（数组），bind（参数列表）；bind，分多次传入
执行时间
立即执行：apply、call；bind，绑定this之后的函数，稍后调用
注意
bind会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个对象，那么此时this的指向用new创建的实例，而不是bind的第一个参数

20.http3.0对2.0的改进

2.0特性
二进制分帧传输
多路复用
头部压缩
服务器推送
（多路复用是在协议栈中添加二进制分帧层实现的，有了二进制分帧层还能够实现请求的优先级、服务器推送、头部压缩等特性）
3.0特性
连接迁移（TCP——>UDP）
无队头阻塞（同一物理连接上可以有多个独立的逻辑数据流）
自定义拥塞控制
前向安全和前向纠错（TLS）
参考链接HTTP1、HTTP2、HTTP3 - 掘金 (juejin.cn)

2022.4.2

21.HTTP和HTTPS

HTTP
不安全（使用明文请求）
无状态（协议对客户端没有状态存储）
无连接（每次请求需要TCP三次握手四次挥手和服务器重新建立连接）
HTTPS
传输加密（通过SSL/TLS提供加密处理数据、验证对方身份以及数据完整性保护）
身份认证（通过整数认证客户端访问的是自己的服务器）
数据完整（传输过程防止被篡改）

22.跨域的解决方案

协议、域名、端口，其中任一一个不同都会构成跨域
JSONP、CORS、Node中间代理、Websocket

avatar
文章
阅读
粉丝