本篇目录：
HTML页面渲染及优化详解
当子元素如（li）元素都绑定事件时，可以只需绑定父元素（ul）来达到相同的效果，这样不仅减少了对dom的操作，减少重排或重绘，而且不用分配大量变量来保存dom，减少了内存。
渐进式渲染是指浏览器在渲染页面时，不是等到所有的 HTML、CSS、JavaScript 和其他资源都加载完成之后再显示页面，而是在加载过程中，尽早地显示可用的内容。这样可以使用户在页面加载时有一个更好的体验。
优化 HTML 页面的图像可以提高网页性能和用户体验。以下是一些常见的手段来优化图片显示速度： 图片压缩：使用图像压缩工具来减小图片文件的大小，例如使用图像编辑软件、在线压缩工具或专门的图像压缩库。
概括的说，关键路径绘制包括：了解网页渲染过程，有助于我们优化网页，提示渲染速度。
渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。
vue中虚拟dom什么时候进行渲染
1、挂载完毕，DOM节点被渲染到文档中，DOM操作可以正常进行 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
2、虚拟DOM的解决方式是，通过状态生产一个虚拟状态Dom，然后根据虚拟节点进行渲染，假如是首次渲染的就会直接渲染，但是二次往后的话就是进行虚拟状态树的对比，只更新不同的地方。
3、vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。mounted（挂载后）vue 实例挂载完成，data.message 成功渲染。
4、数据更新时调用，发生在虚拟 DOM 打补丁之前。
5、mounted。挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。beforeUpdate。
6、载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
浏览器如何渲染页面
在html中增加测试数据，用来测试checkbox是否选中。编写javascript，按钮点击时，触发事件，将选中的checkbox值获取。美化页面，增加样式文件，和引入jquery文件。打开浏览器，打开测试页面。
我们从浏览器渲染页面的大概过程开始说起：由从服务器接收到的 HTML 形成 DOM（文档对象模型）。样式被加载和解析，形成 CSSOM（CSS 对象模型）。
html。在index.html中的标签，输入js代码：var a = ；document.body.innerText = a；。浏览器运行index.html页面，此时html代码被当成字符串渲染到了页面上。
面试中的网红Vue源码解析之虚拟DOM,你知多少呢?深入解读diff算法_百度...
1、Diff算法是虚拟DOM的核心，它用于比较新旧虚拟DOM树之间的差异。Vue中使用的是经典的Diff算法，具体包括以下几个步骤： Walk：遍历新旧虚拟DOM树，对比节点，并记录差异。 Update：根据差异进行更新。
2、diff发生在虚拟DOM上。diff算法是在新虚拟DOM和老虚拟DOM进行diff（精细化比对），实现最小量更新，最后反映到真正的DOM上。
3、因为diff 算法是 vuex ， vuex 以及 react 中关键核心点，理解 diff 算法，更有助于理解各个框架本质。 说到「diff 算法」，不得不说「虚拟 Dom」，因为这两个息息相关。
4、首先明确DOM的相关操作需要调用webapplication对性能损耗是比较高的。先看看常规的思路改良思路（仍然使用DOM）React的思路Vue和react的虚拟DOM的原理和步骤是完全一致的。
5、__patch__ 是 createPatchFunction 方法内部返回的一个方法，它接受一个对象：nodeOps 属性：封装了操作原生 Dom 的一些方法的集合，如创建、插入、移除这些，再使用到的地方再详解。
到此，以上就是小编对于dom渲染在哪个周期中就已经完成的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位老师在评论区讨论，给我留言。
微信扫一扫打赏
