css动画好在哪里,你能清晰的知道js的执行顺序吗

• 页面的加载过程
• 重排 重绘,为什么css动画比js动画性能更好
• js的执行过程
• v8的垃圾回收机制
• 事件循环中微任务宏任务和延迟任务的关系

页面的加载过程

预解析资源(css/js) =>

parseHtml: 遇到js停止解析等待js资源放回并执行,js资源放回需等待css资源全部放回才会执行

关系: html 与 css相互不阻塞;

html 与 js相互阻塞;

js 需等待 css 完成才能执行;

不考虑js阻塞时的完整渲染流程:

html=>css=>layout=>layer=>paint=>composite layers

重排 重绘,为什么css动画比js动画性能更好

• 重排

  修改了触发重新布局的属性比如 width

  css => layout => layer => paint => composite layers

• 重绘

  修改了只触发绘制的属性, 比如color

  css => layer => paint => composite layers

• css动画(合成)

  css动画生产了独立图层拥有独立图层看似修改了布局,却不在一个图层中,所有没有却触发layout,同时越过paint直接进入到合成线程

  css => layer => composite layers

js的执行过程

v8的垃圾回收机制

v8 分为新老生代 新生代: 8m左右: 平分两个区域 老生代: 新生代两次回收还还存在的进入老生代,占用内存大的直接进入老生代

新生代 一个区域满后,查询stack,查找到还在引用的数据,进入另一个区域,原来区域中的数据全部清理.所以不会产生碎片空间

老生代 清理时只将失效的清理,所以产生碎片空间,当进入的数据占用的内存过大,碎片空间中没有能满足的,就会触发整理碎片机制

事件循环中微任务宏任务和延迟任务的关系

大家都听过消息队列,消息队列里全部时宏任务

每个宏任务中还维护这微任务

延迟任务进入延迟任务列表中

消息队列中的任务全部执行完毕,会去延迟任务中查找所有到期任务,并按照过期时间排序进去消息队列执行

function callback(){
    console.log(1)
}
setTimeout(callback,0)

new Promise((resolve, reject)=>{
    console.log(2)
    resolve()
    console.log(3)
}).then(()=>{
    console.log(4)
})

function cons (){
    console.log(5)
}

cons()