传统的DOM渲染方式？

1.什么是DOM渲染？

　　DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。

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

纯后端渲染：
- 　　DOM树的生成完全是在后端服务器中完成的，后端服务器的程序会把需要的数据拼合成一个类似于前端DOM节点组成的DOM树，并转化成字节流作为HTTP Response的body返回浏览器
纯前端渲染：
- 　　前端渲染把DOM生成的主体逻辑都放在前端，后端之后返回一个框架的DOM结构，然后由js代码把页面的主题渲染到框架中。可以解决后端渲染中出现的各种体验问题。
服务端的js渲染结合前端渲染:
- 　　主要是把前两个阶段中，一些交给纯后端DOM渲染逻辑分离的不好，但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段，保留的代码中天然的展示层和数据层的分离，又把API请求的累计延迟减少了很多，从SEO角度来说渲染结果对搜索引擎也很友好。当然，这样的做法需要给整体的架构增加一个独立的单元，给开发和部署都带来了更高复杂性。

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

（2）纯前端渲染：纯前端渲染可以解决纯后端渲染中出现的各种体验问题。纯前端渲染把DOM生成的主题逻辑都放在了前端，这时后端只会返回一个框架的DOM结构，比如只带一个容器元素的的DOM，然后由js代码把页面的主题渲染到这个容器元素中。

（3）服务端的js渲染结合前端渲染：目前是最适于提供最优的使用体验，但不一定开发中最好的方式，在不同的地方，根据不同的方法来解决。

浏览器会解析三个东西：

（1）一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
（2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。
（3）最后通过调用操作系统Native GUI的API绘制。

转载于:https://www.cnblogs.com/yj199661/p/11198253.html

传统的DOM渲染方式？相关推荐

SSR 学习 - 传统服务端渲染 Web 应用、客户端渲染、同构渲染、优缺点和案例演示
概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案. 在这波前端技术浪潮中,涌现了诸如 React.Vue.Angular 等基于客户端渲染的前端框架. 这类框架所 ...
DOM渲染的详细过程
DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程.在Chrome中,这个渲染好的DOM,就是在开发者工具中元素这个tab中,递归的展开之后得到的整个文档. DOM渲染的演化过程,大致可 ...
DOM渲染的详细过程 1
DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程.在Chrome中,这个渲染好的DOM,就是在开发者工具中元素这个tab中,递归的展开之后得到的整个文档. DOM渲染的演化过程,大致可 ...
React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架为什么要学习React React特点 React核心 JSX语法语法详解 React开发过程实际DOM 虚拟DOM React组件函数组件类组件虚拟DOM渲染过程 R ...
react骨架屏自动生成_用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏
骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构,直到请求数据返回后再显示真正的页面内容:随着单页应用( SPA )的越来越流行,单页应用的用户体验也越来越得到前端开发者的关注:为了优化用 ...
SPA优缺点、解决单页面应用的SEO困难问题以及三种网页渲染方式
SPA特点优点缺点总结 1. 单页Web应用(SPA - Single Page web Application) 也就是说只有一个HTML文件的Web应用, 我们就称之为单页Web应用, 就称之为S ...
CPU渲染与GPU渲染的优劣，教你选择合适的渲染方式
使用计算机进行渲染时,有两种流行的系统:基于中央处理单元 (CPU) 或基于图形处理单元 (GPU). CPU 渲染利用计算机的 CPU 来执行场景并将其渲染到接近完美.这也是执行渲染的更传统方式.然 ...
前端页面渲染方式CSR、SSR、SSG
三种渲染方式: 使用预渲染之前,首先要考虑是否真的需要它. 如果初始加载时的额外几百毫秒并不会对应用产生影响,这种情况下去使用预选染将是一个小题大作之举. 首屏加载时间是绝对关键的指标,在这种情况下, ...
JavaScript基础：浅聊事件循环(Event LooP)以及微任务，宏任务，DOM渲染
一直说JavaScript是单线程的执行的(当然也可以通过其它其它的方式异步,本篇暂时不聊). 内核的组成首先聊一下浏览器的内核组成部分,当然下面也不是全部,而只是说一些常见的. 主线线程 js引擎 ...
MutationObserver -- 判断vue Dom渲染完成
MutationObserver MutationObserver -- 判断vue Dom渲染完成 MutationObserver 作用方法应用实例 MutationObserver – 判断 ...

传统的DOM渲染方式？

传统的DOM渲染方式？相关推荐

最新文章

热门文章