DOM渲染的详细过程

最新推荐文章于 2024-07-23 11:23:13 发布

可可爱爱的葡萄酱

最新推荐文章于 2024-07-23 11:23:13 发布

阅读量1k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/zzwAriel/article/details/108279957

版权

本文详细介绍了DOM渲染的三个阶段：纯后端渲染、纯前端渲染和服务器端JS渲染结合前端渲染。对比了它们的优缺点，强调了服务器端渲染在减少网络延迟和改善SEO方面的优势，以及前端渲染对于交互体验和代码解耦的贡献。最后指出，根据具体场景选择合适的渲染方式至关重要。

摘要由CSDN通过智能技术生成

DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。在Chrome中，这个渲染好的DOM，就是在开发者工具中元素这个tab中，递归的展开之后得到的整个文档。

DOM渲染的演化过程，大致可以分为可以分为三个阶段：

纯后端渲染

纯前端渲染

服务端的js渲染结合前端渲染

下面我们分阶段来做一下说明。

第一个阶段是纯后端渲染。采用这样的渲染方式，就是每一个页面中，在Chrome中展开得到的DOM，和服务器返回的DOM是基本一致的（可以通过查看网页源代码来得到服务器返回的DOM）。当然，这里是“基本”一致，因为实际操作中，页面或多或少还是会带有一些js代码，并且在浏览器端中运行这些js代码来对DOM进行的渲染，不过这一部分js代码并不影响DOM的主体是由服务端返回的。纯后端的DOM渲染，DOM树的生成完全是在后端服务器中完成的，相当于后端服务器的程序会把各种的数据拼成一个DOM树，并转换成一个字节流作为HTTP Response的body返回给浏览器。这种渲染的逻辑如下图所示：

在这里插入图片描述

纯后端的渲染的整体的结构是最简单的，把全部的逻辑都交给后端来完成。这样的优点在于返回的HTTP Response是包含着全部页面内容的，相对来说页面的主体DOM结构都会在这个响应中返回，可以让用户更快的看到页面的主体部分，而这样的响应对于浏览器爬虫来说也更有好，对SEO更有帮助。但是也正是由于这样的简单的结构，如果返回的DOM比较复杂，尤其是带有复杂的交互的页面