页面渲染过程以及组件渲染过程，生命周期渲染顺序

页面渲染过程顺序以及优化渲染

解析HTML文件，并且构建DOM树，DOM树是由DOM元素节点组成的
然后对css进行解析，生成CSSOM规则树
有了CSSOM与DOM也就开始了渲染树，渲染树的节点就是称为渲染对象，渲染对象也即是一些由css属性的盒子，和DOM树有对应关系，但并不是和DOM树一一对应，因为隐藏的元素不会被插入渲染树中，此时并没有进行布局

link标签引入css文件会增加一条线程去加载，然后继续想下加载，cssom也是会堵塞渲染过程的，需要完成cssom的构建和下载之后才会继续解析(尽可能优化，压缩文件加快加载速度)
下一步就是对渲染树中的对象进行布局操作，按照样式设置的布局进行布局
布局完之后就是进行绘制，渲染，显示在浏览器页面中呈现出来

注意的是为了更好的用户体验，渲染时引擎会尽早的将内容呈现到屏幕上，并非是等待所有html文件解析完，解析的就是一部分显示内容，其它内容可能还在加载中，如果长时间没有记载完成，就会先使用页面默认的css样式

在解析过程中，js文件会堵塞HTML文件加载，会阻止解析，因此有必要进行一些优化

将javascript放在body后面，加载完所有DOM元素后进行加载防止堵塞
在script标签中加入async/defer，也就是说异步加载js文件
1. async异步加载：立即异步加载，加载完之后立即执行，无法保证加载的顺序
2. defer异步加载: 立即异步加载，加载完之后是在DOM树构建完之后进行执行，如果有多个defer标签则按照顺序执行

附图页面渲染过程

vue组件之间的渲染顺序分为同步和异步，当在父组件引入子组件时，也就是

import xxx from xxx，此时是同步引入子组件，而路由采用懒加载是就是异步，使用也就有不同的渲染顺序

引入方式

引入方式：
   import Page from  '@/components/page'

加载顺序：

加载阶段：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
也就是父组件会先获取所有数据、模板，然后等待子组件挂在完成之后挂载

更新顺序

更新阶段：
   父beforeUpdate->子beforeUpdate->子updated->父updated

销毁顺序

销毁阶段：
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结一句话就是每一阶段都是父组件先进行到最后一个生命周期就暂停等待子组件完成所有生命周期过程，最后再去结束父组件某个阶段的最后一个生命周期

引入方式

引入方式：
   const Page = () => import('@/components/page')
   或
    const Page = resolve => require(['@/components/page'], page)

异步子组件时，唯一不同的就是在加载阶段时，先加载完所有的父组件生命周期直至挂载之后再去加载子组件生命周期

加载阶段：
   父beforeCreate->父created->父beforeMount->父mounted->子beforeCreate->子created->子beforeMount->子mounted

总结

父子组件之间加载时，会先从父到子按 beforeCreate created beforeMount 触发，然后从子到父触发 mounted。
父子组件之间销毁时，会先从父到子触发 beforeDestroy，再从子到父触发 destroyed。
兄弟组件之间加载时，会依据组件渲染顺序从上到下按 beforeCreate created beforeMount 组件单独触发，然后按顺序触发 mounted。
兄弟组件之间销毁时，依据组件渲染顺序从上到下按 beforeDestroy destroyed 触发。
组件切换显示时，先执行被显示组件的 beforeCreate created beforeMount，再执行被销毁组件的 beforeDestroy destroyed，最后执行被显示组件的 mounted。（这么做是为了减少白屏时间）

在个人小案例TodoList就是依靠生命周期进行数据获取渲染(懵懵懂懂完成的)，现在可以更好的进行理解路径vue_project---TodoList案例

posted @ 2022-10-25 22:40 YYYang333 阅读(678) 评论(0) 收藏举报

刷新页面返回顶部