面试题

ZJY

2021-03-25 (Updated: 2024-07-18)

面试 › Javascript

前端

1.网络中使用图片格式有哪些？

jpeg：目前网络上最流行的图片格式，可以把文件压缩到最小的格式。在ps中以jpeg格式保存可以提供13级压缩级别。（有损压缩）
svg：可缩放矢量图形，基于xml。
png：支持高级别无损耗压缩，支持alpha 通道透明度，较旧的浏览器和程序可能不支持 PNG 文件。
gif：有损压缩，不支持Alpha透明通道。可做动画

2.简述盒子模型

一个盒子由：margin + padding + border + content
默认情况下，盒子宽高只是content的宽和高
box-sizing:content-box; 元素宽高等于content宽高
box-sizing:border-box; 元素宽高等于content宽高+padding+border

3.音视频标签的使用

视频：video

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

video 元素支持三种视频格式：MP4、WebM、Ogg。
可选属性：

autoplay:是否自动播放
src：要播放的视频的 URL。
controls：向用户显示控件，比如播放按钮
width/height：设置播放器的宽高
muted：是否静音
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
poster：规定视频正在下载时显示的图像，直到用户点击播放按钮。
loop:是否循环播放

音频：audio

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

支持的3种文件格式：MP3、Wav、Ogg

可选属性：

autoplay:是否自动播放
src：要播放的音频的 URL。
controls：向用户显示控件，比如播放按钮
muted：是否静音
preload：规定当网页加载时，音频是否默认被加载以及如何被加载。
loop:是否循环播放

4.html5新增的内容有哪些？

新增语义化标签
新增表单类型
表单元素/事件/属性
多媒体标签

5.html5新增的语义化标签

main,nav,section,article,header,footer,embed,video,audio,mark,figure,aside

6.清除浮动的方式？

1.高度塌陷
所有子元素浮动，父元素没有设置高度时，这时父元素产生高度塌陷

解决1：给父元素单独设置高度
优点：快速简单，代码少；缺点：无法进行响应式布局
解决2:给父元素设置overflow:hidden;zoom:1;(针对ie6的兼容)
优点：快速简单、代码少，兼容性高；缺点：超出部分被隐藏，布局时要注意
解决3:给浮动元素后面添加空标签，设置clear:both;height:0;overflow:hidden;
优点：快速简单、代码少，兼容性高；缺点：增加空标签，不利于页面优化；
解决4:给父元素设置overflow:auto;
优点：快速简单、代码少，兼容性高；缺点：若父元素设置了高度，子元素超出父元素宽高会出现滚动条
解决5:给塌陷的元素设置伪元素

.fater::after{
  content:'';
  overflow:hidden;
  visibility:hidden;
  clear:both;
  height:0;
  display:block;
}

优点：写法固定兼容性高；缺点：代码多

7.给元素设置水平垂直居中

一.水平居中
1.行内元素：只需要把行内元素包裹在一个属性 display 为 block 的父层元素中，并且把父层元素添加如下属性即可

1
2
3

.parent{
  text-align:center;
}

2.块状元素：给该元素设置：margin:0 auto;

3.多个块状元素，给元素设置display:inline-block,并把父元素的text-align:center

4.多个块状元素，给父元素设置display:flex;justify-content:center;

二、垂直居中
1.单行行内元素：设置height和line-height属性和父元素高度一样

2.多行行内元素：设置父元素属性：display:table-cell; vertical-align:middle;

3.已知高度的块状元素：给该元素设置属性：

position:relative;
height:100px;
top:50%;
margin-top:-50px;

三、水平垂直居中
1.已知宽度和高度

width:200px;
height:200px;
position:relative;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;

2.未知高度和宽度

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

3.使用flex布局

1
2
3

display:flex;
align-items:center;
justify-content:center;

8.display:inline-block元素间默认间距

1.给行内块元素设置浮动（需要清除浮动带来的影响）
2.给行内元素的父元素设置font-size:0;
3.给父元素添加词间距属性word-spacing,属性值为负数根据情况给出

9.html5拖拽api

dragstart:事件主体是被拖拽元素，拖拽开始时触发
drag：事件主体是被拖拽元素，拖拽时触发
dragenter：事件主体是目标元素，被拖拽元素进入目标元素时触发
dragover：事件主体是目标元素，被拖拽元素在目标元素移动时触发
dragleave：事件主体是目标元素，被拖拽元素离开目标元素时触发
drog：事件主体是目标元素，在目标元素完全接受被拖拽元素时触发
dragend：事件主体是目标元素，在拖拽完成时触发

10.双边距重叠问题

多个相邻普通流中块元素垂直方向margin会发生重叠：

两个相邻的外边距都是正数时，重叠结果是2者中较大值
两个相邻的外边距都是负数时，重叠结果是2者绝对值的较大值
两个相邻的外边距一正一负时，重叠结果是2者之和

11.什么是面向对象？

面向对象是一种思想，是对面向过程而言的。面向对象就是把功能通过对象来实现，把功能封装到对象中，让对象去实现具体的细节。这种思想将数据放在第一位，是对数据的一种优化，使操作更加简单，方便简化了过程。

js本身没有class类型，但每个函数都有一个prototype属性，prototype指向一个对象，当函数作为构造函数使用时，prototype就起到类似于class的作用

面向对象的三个特点：封装、继承和多态。

12.普通函数和构造函数的区别？

1.构造函数也是普通函数，创建方式和普通函数一样，但是构造函数名首字母大写
2.构造函数内部会创建一个对象，即实例，普通函数内部不会创建新对象
3.普通函数之间调用，构造函数通过new调用
4.构造函数内部this指向新创建的对象，而普通函数this指向函数的调用者
5.构造函数默认的返回值是创建的对象（实例），而普通函数返回值是return的值
6.构造函数的函数名和类名相同

13.原型和原型链

(1)原型
1.所有引用类型都有一个proto(隐式原型)属性，属性值是一个普通的对象
2.所有函数都有一个prototype（原型）属性，属性值是一个普通的对象
3.所有引用类型的__proto__都指向它构造函数的prototype

1 2	var a = [1,2,3]; a.__proto__ === Array.prototype; //true

(2)原型链
当访问对象的一个属性或方法时，会先在这个对象的属性和方法中查找，如果没有找到就去它的__proto__隐式原型中查找，即它的构造函数的prototype，如果还没有找到就去构造函数的prototype.__proto__中查找，这样一层一层的向上查找形成的链式结构叫原型链。

例子：

function Parent(name){
  this.name = name;
}
var child = new Parent('child');
console.log(child.name); //'child'
console.log(child.age); //undefined

在child中查找某属性时：
1.在child中查找属性，本身有该属性时，返回值，没有去child.proto__，即Parent.prototype中查找
2.如果child.__proto__，即Parent.prototype有该属性，返回值，没有则去Parent.prototype.__proto__，即Object.prototype中查找
3.如果Parent.prototype.__proto__，即Object.prototype中有该属性，则返回值，没有则去Object.prototype.__proto,即null中查找
4.Object.prototype.proto === null,返回undefined

一直往上层查找，直到null还没有找到，返回undefined
Object.prototype.proto === null
所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象

14.clientHeight,offsetHeight,scrollHeight的区别？clientTop,offsetTop,scrollTop的区别？

clientHeight:表示可视区域的高度，不包含border和滚动条（包含padding）
offsetHeight:表示可视区域的高度，包含border和滚动条（包含padding）
scrollHeight:表示所有区域的高度，包含被隐藏的部分

clientTop:表示边框border的厚度，未指定情况一般为0
offsetTop:获取元素顶部距离相对于已定位的父元素或body顶部距离的高度
scrollTop：滚动后被隐藏的高度

15.html5的拖拽

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  function allowDrop(ev)
  {
    ev.preventDefault();
  }

  function drag(ev)
  {
    ev.dataTransfer.setData("Text",ev.target.id);
  }

  function drop(ev)
  {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
</script>
</head>
<body>

  <div id="div1" ondrop="drop(event)"
  ondragover="allowDrop(event)"></div>
  <img id="drag1" src="img_logo.gif" draggable="true"
  ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

16.js中垃圾回收机制

为什么需要垃圾回收？

由于字符串、对象、数组没有固定的大小，所以当他们已知大小时才能进行动态的存储分配。js程序每次创建字符串、对象和数组时，解释器都必须分配内存来存储那个实体。只要像这样动态的分配了内存，最终都要释放内存以便他们能够被再用，否则，js的解释器会消耗完系统中所以可用的内存，造成系统崩溃。

js解释器可以检测到何时程序不再使用一个对象了，就可以把它占用的内存释放掉。

垃圾回收的方法：

1.标记清除：当变量就去环境时，就标记这个变量为“进入环境”，当离开环境时，就标记为离开环境。永远不能释放进入环境的变量所占用的内存。
垃圾回收器在运行时会给存储在内存中的变量都加上标记，然后去除环境变量中的变量，以及被环境变量中的变量所引用的变量，删除所有被标记的变量，然后垃圾回收器完成内存的清除工作，并回收他们占用的内存。

2.引用计数法：计算每个引用类型的变量的引用次数，当引用次数为0时就说明没有方法访问这个值了，垃圾回收器再次运行的时候就会释放引用次数为0的值。

17.http

http1.1：
1.长连接
2.管道传输：在同一个TCP连接里，可发起多个请求，只要第一个请求发出去了，不必等其回来，就可发第二个请求出去，可以减少整体的响应时间。但是服务器还是按照顺序，先回应 A 请求，完成后再回应 B 请求
3.队头阻塞：因为当顺序发送的请求序列中的一个请求因为某种原因被阻塞时，会导致后面的请求也被阻塞，客户端一直请求不到数据，这也就是对头阻塞。

http2:
http2基于https的，所以安全有保障
1.头部压缩：会压缩头（Header）如果你同时发出多个请求，他们的头是一样的或是相似的，那么，协议会帮你消除重复的分
2.HTTP/2 不再像 HTTP/1.1 里的纯文本形式的报文，而是全面采用了二进制格式，头信息和数据体都是二进制，并且统称为帧（frame）：头信息帧和数据帧
3.多路复用：可以在一个连接中并发多个请求或回应，而不用按照顺序一一对应。
4.服务器推送：在一定程度上改善了传统的「请求 - 应答」工作模式，服务不再是被动地响应，也可以主动向客户端发送消息

http2有哪些缺陷？
多个http请求在复用同一个tcp连接时，下层的tcp协议是不知道有多少个http请求的
所以一旦发生了丢包现象，就会触发 TCP 的重传机制，这样在一个 TCP 连接中的所有的 HTTP 请求都必须等待这个丢了的包被重传回来。
这都是基于 TCP 传输层的问题，所以 HTTP/3 把 HTTP 下层的 TCP 协议改成了 UDP

18.map和set的区别？

map：map对象保存健值对，并且能够记住原始插入顺序。
描述：map对象在迭代时会根据原始插入顺序来进行for…of遍历，返回一个[key,value]的数组

属性

Map.prototype.constructor
返回一个函数，它创建了实例的原型。默认是Map函数。

Map.prototype.size
返回Map对象的键/值对的数量。

方法

Map.prototype.clear()
移除Map对象的所有键/值对。

Map.prototype.delete(key)
如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。随后调用 Map.
prototype.has(key) 将返回 false 。

Map.prototype.entries()
返回一个新的 Iterator 对象，它按插入顺序包含了Map对象中每个元素的 [key, value] 数组。

Map.prototype.forEach(callbackFn[, thisArg])
按插入顺序，为 Map对象里的每一键值对调用一次callbackFn函数。如果为forEach提供了thisArg，它将在每次回调中作为this值。

Map.prototype.get(key)
返回键对应的值，如果不存在，则返回undefined。

Map.prototype.has(key)
返回一个布尔值，表示Map实例是否包含键对应的值。

Map.prototype.keys()
返回一个新的 Iterator对象，它按插入顺序包含了Map对象中每个元素的键。

Map.prototype.set(key, value)
设置Map对象中键的值。返回该Map对象。

Map.prototype.values()
返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的值。

set：允许存储任何类型的唯一值，无论是原始值或者是对象引用。
描述：Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

实例属性

Set.prototype.size
返回 Set 对象中的值的个数

实例方法

Set.prototype.add(value)
在Set对象尾部添加一个元素。返回该Set对象。

Set.prototype.clear()
移除Set对象内的所有元素。

Set.prototype.delete(value)
移除Set中与这个值相等的元素，返回Set.prototype.has(value)在这个操作前会返回的值（即如果该元素存在，返回true，否则返回false）。Set.prototype.has(value)在此后会返回false。

Set.prototype.entries()
返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值的[value, value]数组。为了使这个方法和Map对象保持相似，每个值的键和值相等。

Set.prototype.forEach(callbackFn[, thisArg])
按照插入顺序，为Set对象中的每一个值调用一次callBackFn。如果提供了thisArg参数，回调中的this会是这个参数。

Set.prototype.has(value)
返回一个布尔值，表示该值在Set中存在与否。

Set.prototype.keys() (en-US)
与values()方法相同，返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。

Set.prototype.values()
返回一个新的迭代器对象，该对象包含Set对象中的按插入顺序排列的所有元素的值。