【学习日记】nextTick、事件循环机制、BFC、脱离文档流、var、let、const、动画2020-8-15

最新推荐文章于 2024-05-10 16:05:56 发布

Troy_boi

最新推荐文章于 2024-05-10 16:05:56 发布

阅读量352

点赞数

分类专栏：学习日记文章标签： js

本文链接：https://blog.csdn.net/weixin_43668630/article/details/108311387

版权

学习日记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue.nextTick()

接收一个函数，在同步任务执行完成，DOM更新完成之后再调用nextTick里的函数，此时就是基于已经更新的视图进行操作。通常用于在更新数据，需要立即获取更新后的视图的情况。

nextTick()：属于异步任务中的微任务。

微任务：process.nextTick，Promise.then，catch，finally，Mutation Observer
宏任务：setTimeOut、setInterval、setImmediate

JS事件循环机制：

js单线程，同步任务放在执行栈上执行，遇到异步任务，将异步任务的结果放到任务队列。当执行栈中的任务执行完成，就会读取任务队列中的任务，放在执行栈进行执行。
异步任务又分为微任务、宏任务，同一个事件循环里先执行微任务，再执行宏任务。

BFC：块级格式上下文

是一个独立的渲染区域，父级BFC，里面浮动的元素高都会被计算。BFC的盒子不会被浮动的盒子覆盖，给一个盒子触发BFC，不会产生margin塌陷。

触发BFC的方式：

dispay：flex/inline-block
position：absolute/fixed
float：left/right
overflow:hidden/auto/scroll
根元素<html>

1、position：absolute/fixed
常见于页面中的广告，关闭之后不会对页面造成影响

2、float：left；overflow:hidden
常用于文字包裹图片，图片和文字都float：left，父元素overflow:hidden撑开盒子。

<div class="wrapper">
	<img src="">
	<div class="text">
		<h1>文字文字。。。。</h1>
	</div>
</div>

.wrapper{
	overflow: hidden;
}
img{
	float:left;
}
.text{
	float:left;
}

3、dispay：flex/inline-block
常用于给父盒子设置，要包裹着浮动的子盒子

4、dispay：inline-block
常用于解决外边距塌陷，子盒子设置dispay：inline-block触发BFC

脱离文档流：

1、position：absolute
其他会无视position：absolute的盒子
2、position:fixed
相对于浏览器窗口进行定位，完全脱离文档流
3、float
其他盒子会无视float的盒子，但是其他盒子里的文本仍然会为这个盒子让出位置

var、let、const

动画：

1、css3的animation、transtion
2、js中使用setTimeOut
3、html5提出的requestAnimationFrame【请求动画帧】

css3动画：

transition：

img{
	transition:1s 1s height ease
}

1、需要事件触发，eg：

img:hover{ 
	height:200px
}

2、一次性
3、只能定义开始和结束状态

animation：

//用来通过定义关键帧
@keyframes name{
0%{...}
50%{...}
}
div:hover{
	animation:1s name
}
//animation:duratation delay name timing-function 循环次数 fill-mode direction

CSS动画代替JS动画的好处：

1、JS动画是通过不断操作DOM的css来实现视觉上的动画，浏览器会不停进行重排和重绘
css是通过浏览器渲染引擎解析渲染，通过GPU计算。
2、JS在浏览器的主线程中运行时，会阻塞后面的JS操作。
css动画的transform和opacity属性，会在独立的合成处理器进程中进行处理，支持GPU硬件加速。css transform创建了一个新的复合图层，可以被GPU直接用来执行transform操作。

浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform 是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

css的transform，opacity、filter属性支持cpu硬件加速：

拥有transform，opacity、filter属性的css样式，在渲染引擎中生成渲染树后，渲染树里的渲染元素会被分到图层中，这些图层会被加载到GPU中形成纹理，而拥有transform，opacity、filter属性会具有独立的图层，这些图层会由独立的合成器进程进行处理。

3D 和 2D transform 的区别

浏览器在页面渲染前为3D动画创建独立的复合图层，而在运行期间为2D动画创建。所以2Dtransform在开始和结束时也会发生两次repaint。为了避免，可以设置3Dtransform，直接创建独立的复合图层

.example1 { transform: translateZ(0); }
.example2 { transform: rotateZ(360deg); }

绝对定位和transform进行动画的区别：

绝对定位情况为：

.ball-running {
animation: run-around 4s infinite;
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
}
 
@keyframes run-around {
        0%: {
            top: 0;
            left: 0;
        }
        25% {
            top: 0;
            left: 200px;
        }
        50% {
            top: 200px;
            left: 200px;
        }
        75% {
            top: 200px;
            left: 0;
        }
    }

会触发页面一直进行重绘重排。
transform情况为：

.ball-running {
        animation: run-around2 4s infinite;
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
    }
    
@keyframes run-around2 {
        0%: {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(200px, 0);
        }
        50% {
            transform: translate(200px, 200px);
        }
        75% {
            transform: translate(0, 200px);
        }
    }

2Dtransform，在运行期间为2D动画创建独立图层，由独立的合成器进程进行操作，支持GPU加速，只会在动画开始和动画结束发生重绘。

setTimeOut和requestAnimationFrame的比较：

setTimeOut为指定的时间间隔将事件放入异步队列，实际执行时间不确定，有可能发生卡顿、丢帧。当页面隐藏或最小化时，setTimeOut还在执行，浪费资源。
requestAnimationFrame：由系统决定回调函数的执行时机，每秒60帧。每次刷新的间隔中会执行一次回调函数。不会发生卡顿丢帧。最小化或隐藏时不会执行。

var progress = 0;
//回调函数
function render() {
 	progress += 1; //修改图像的位置
 	if (progress < 100) {
	 //在动画没有结束前，递归渲染
 		window.requestAnimationFrame(render);//传入执行内容的函数
 	}
}
//第一帧渲染
window.requestAnimationFrame(render);