面试题与答案记录Day02

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

1.浏览器从输入URL到页面渲染经历了哪些过程？

简单说明：

1. 输入URL后解析出协议、主机、端口、路径等信息，并构造出一个http请求
2. DNS域名解析
3. TCP连接
4. http请求
5. 服务器处理请求并返回HTTP报文
6. 浏览器渲染页面
7. 断开TCP连接 详情参照：juejin.cn/post/692867…

2.怎么理解宏任务和微任务

首先，从EventLoop入手。

JS是单线程的，如果某个任务很耗时，可能会导致我们的程序假死的问题。 故，JS将任务分成两种：

• 同步任务 也称非耗时任务。在JS主线程上排队执行，只有上一个任务执行完毕，才能执行下一个任务。
• 异步任务 也称耗时任务。由JS委托给宿主环境进行执行，当宿主环境执行完毕后送入任务队列中，JS主线程执行完同步任务后会从任务队列中将异步任务的回调函数移入执行栈中进行执行。

---

解释：

1. 同步任务由JS主线程依次执行
2. 异步任务委托给宿主环境（浏览器或Node.js）执行
3. 已完成的异步任务对应的回调函数放到任务队列中，等待执行
4. JS主线程的执行栈被清空后，会读取任务队列中的回调函数，依次执行
5. JS主线程不断重复第4步

---

JS中又对异步任务进行进一步划分，异步任务分为两类：

• 宏任务：
  • 异步Ajax请求
  • setTimeout、setInterval
  • 文件操作
  • 其他宏任务
• 微任务：
  • Promise.then、catch和finally
  • process.nextTick（Node.js环境） 每个宏任务执行完毕后，都会检查是否存在待执行的微任务。如果有，则执行所有的微任务之后，再继续执行下一个宏任务。

3. 在JS中创建对象的方法有哪些？

1. 字面量
2. new Object关键字
3. 构造函数
4. Class（ES6之后，语法糖）

4. bind、apply、call函数的区别和作用

call：改变this的指向，且执行函数。第二个参数为原函数参数。（常用于：继承）

apply：改变this指向，且执行函数。第二个参数为伪数组。（常用于：借助数学内置对象求最值）

bind：改变this指向，但不执行函数。第二个参数为原函数参数。（常用于：定时器函数）

5. http协议和https协议的区别

区别	HTTP	HTTPS
URL开头	http://	https://
安全性	不安全	安全
端口	80	443
OSI网络模型中的工作层	工作在应用层	安全传输机制工作在传输层
数据传输加密	不加密	加密
证书	无需证书	需要CA机构wosign的颁发SSL证书

6.html中!Doctype的作用

告诉浏览器文档的类型保证浏览器能正确渲染内容

7.css中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。

• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。

• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

• transform: scale(0,0) ：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

8.href和src的区别

二者都是用来引入外部资源，区别如下：

• src：表示对资源的引用。它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档，如请求js脚本。
• href：表示超文本的引用。它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在a、link等标签上。

9.什么是外边距重叠？重叠的结果是什么？怎么解决？

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。（垂直外边距主要指：margin-top、margin-bottom）

1. 相邻块元素垂直外边距合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直间距不是margin-top与margin-bottom之和。而是取两者之中的较大者。

解决方案：

尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距合并 对于两个嵌套关系的块元素，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 可以为父元素定义上边框（设置透明）
2. 可以为父元素定义上内边距padding-top
3. 可以为父元素添加overflow:hidden

10.ES6做了哪些扩展？

• let
• const
• 解构
• 箭头函数
• Promise
• 剩余参数
• 扩展运算符
• Array扩展方法
• 模板字符串
• String扩展方法
• Set、Map数据结构