1、清除浮动。
在一个元素脱离文档流之后,可能会对上下元素的布局造成影响,这时候需要清除浮动,可用方式
clear: left | right | both
overflow: hidden | auto
触发BFC快格式化上下文
- BFC是就像一道屏障,隔离出了BFC内部和外部,内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则,不影响外部渲染,也不受外部渲染影响。
- BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说,外部任何浮动元素区域和BFC区域是泾渭分明的,不可能重叠。
- BFC在计算高度的时候,内部浮动元素的高度也要计算在内。也就是说,即使BFC区域内只有一个浮动元素,BFC的高度也不会发生塌缩,高度是大于等于浮动元素的高度的。
- 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