前端面试题：清除浮动、前端路由实现、微任务、宏任务 event loop、堆栈队列...

1、清除浮动。

在一个元素脱离文档流之后，可能会对上下元素的布局造成影响，这时候需要清除浮动，可用方式

clear: left | right | both

overflow: hidden | auto 

触发BFC快格式化上下文

1. BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
2. BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
3. BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。
4. HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染

 

2、前端路由实现原理

1，使用 window.hashchange监听hash变化从而做出响应

2，使用window.history API对页面URL变动做出响应

3、微任务、宏任务 event loop

微任务 promise process.nextTick

宏任务 setTimeout setInterval I/O script

同一次事件循环中 微任务永远在宏任务之前执行

setTimeout(function(){
     console.log('定时器开始啦')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环啦');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数啦')
 });
 
 console.log('代码执行结束');

首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里

遇到 new Promise直接执行,打印"马上执行for循环啦"

遇到then方法,是微任务,将其放到微任务的【队列里】

打印 "代码执行结束"

本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"执行then函数啦"

到此,本轮的event loop 全部完成。


下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"

【马上执行for循环啦 --- 代码执行结束 --- 执行then函数啦 --- 定时器开始啦】

 4、栈（stack) 、堆（heap)、 队列（queue)

4.1、栈（stack）

栈的特点是"LIFO，即后进先出（Last in, first out）"。数据存储时只能从顶部逐个存入，取出时也需从顶部逐个取出。即只有同一个口出入。类似于数组方法中push和pop。

4.2、堆（heap)

堆的特点是"无序"的key-value"键值对"存储方式。堆的存取方式跟顺序没有关系，不局限出入口

4.3、队列 （queue)

队列的特点是是"FIFO，即先进先出（First in, first out）" 。
数据存取时"从队尾插入，从队头取出"。类似于数组方法的push和shift

4.4、在JavaScript中的应用

• 运行方式。

JavaScript中的应用比如函数的调用栈，最易于理解的就是递归函数，在每一层递归时都会把函数依次压入栈中，函数结束后推出依次推出栈。

• 内存存储

基础类型的值保存在栈中，这些类型的值有固定大小，"按值来访问"；

引用类型的值保存在堆中，栈中存储的是引用类型的引用地址（地址指针），"按引用访问"，引用类型的值没有固定大小，可扩展（一个对象我们可以添加多个属性）。

• 事件轮询（队列）

JavaScript中事件轮询（Event Loop）的执行机制，就是采用队列的存取方式，比如上面的微任务、宏任务、事件轮询里描述

• 按拷贝类型

浅拷贝只是拷贝的值（基本类型）或者指向堆中对象内存地址的指针(引用类型)，相当于从栈中创建一个空间复制值

深拷贝是拷贝的堆中的对象。同样在栈中创建一个新值。堆中开辟一个新内存空间

参考文档：https://www.cnblogs.com/kenz520/p/10291227.html

 

 

转载于:https://my.oschina.net/mdu/blog/3094455