vue渲染页面原理

最新推荐文章于 2024-07-04 10:01:18 发布

那年风吹雪正

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量1k

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/weixin_45851686/article/details/120832342

版权

vue.js javascript html5

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

1.代码发现

在vue代码前后各console.log一次渲染的元素会得到：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue渲染作用</title>
</head>
<body>
  <div id="app">
<p>{{msg}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
//在vue代码之前输出一下div#app
      console.log(app);
   
    var vm = new Vue({
      el:'#app',
      data:{
          msg:"hello"
      },
      methods:{
      }
     });
//在vue代码后面输出一下div#app
     console.log(app);

  </script>
</body>
</html>

运行结果：

从表面看是 vue把{{}}内的值改变了

实际上

点击console端第一个 div#app元素，页面的hello周围并没有高亮

点击console端第二个 div#app元素，hello周围出现了彩色和高亮

2. 结论：

vue会在原来的DOM基础上，生成新的元素，替换原来的元素，不过利用的是vue的虚拟DOM

3.vue的虚拟DOM

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

DOM树的构建是文档加载完成开始的？构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。

Render树是DOM树和CSSOM树构建完毕才开始构建的吗？这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。

CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。

4.为什么需要虚拟DOM，它有什么好处?

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

了解vue虚拟DOM和插值表达式点击这里

。

那年风吹雪正

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue渲染页面原理

1.代码发现在vue代码前后各console.log一次渲染的元素会得到：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conten
复制链接

扫一扫

专栏目录