当前位置:网站首页>传统的DOM渲染方式?
传统的DOM渲染方式?
2022-06-12 11:59:00 【mustang(野马)】
1.什么是DOM渲染?
DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。
2.DOM渲染的演化过程,大致可以分为可以分为三个阶段:
纯后端渲染
纯前端渲染
服务端的js渲染结合前端渲染
(1).纯后端渲染:
采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,和服务器返回的DOM是基本一致的(可以通过查看网页源代码来得到服务器返回的DOM)。当然,这里是“基本”一致,因为实际操作中,页面或多或少还是会带有一些js代码,并且在浏览器端中运行这些js代码来对DOM进行的渲染,不过这一部分js代码并不影响DOM的主体是由服务端返回的。
纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器。
(2)纯前端渲染:
纯前端渲染可以解决纯后端渲染中出现的各种体验问题。纯前端渲染把DOM生成的主题逻辑都放在了前端,这时后端只会返回一个框架的DOM结构,比如只带一个容器元素的的DOM,然后由js代码把页面的主题渲染到这个容器元素中。
(3)服务端的js渲染结合前端渲染:
目前是最适于提供最优的使用体验,但不一定开发中最好的方式,在不同的地方,根据不同的方法来解决。
边栏推荐
- LeetCode 890. 查找和替换模式(模拟+双哈希表)
- Byte order (network / host) conversion
- QML学习 第一天
- TinyMCE series (I) TinyMCE environment construction
- Process creation and recycling
- QT adds a summary of the problems encountered in the QObject class (you want to use signals and slots) and solves them in person. Error: undefined reference to `vtable for xxxxx (your class name)‘
- Reprint --win10 open the task manager to solve the blue screen problem
- [QNX hypervisor 2.2 user manual] 4.1 method of building QNX hypervisor system
- Pseudo instruction of arm instruction set
- conda环境下pip install 无法安装到指定conda环境中(conda环境的默认pip安装位置)
猜你喜欢

异步路径处理

6.6 分離卷積

5G NR協議學習--TS38.211下行通道

M-arch (fanwai 10) gd32l233 evaluation -spi drive DS1302

UML series articles (31) architecture modeling - deployment diagram

6.6 separate convolution

QT添加QObject类(想使用信号和槽)遇到的问题汇总,亲测解决有效error: undefined reference to `vtable for xxxxxx(你的类名)‘

Create servlet project

Video JS library uses custom components

Cookies and sessions
随机推荐
Basic principle of Doppler effect
UML系列文章(30)体系结构建模---制品图
LeetCode_ String_ Simple_ 344. reverse string
The first thing with a server
5g NR protocol learning -- ts38.211 downlink channel
Channel shuffle class
FPGA Development - Hello_ World routine
视频分类的类间和类内关系——正则化
conda环境下pip install 无法安装到指定conda环境中(conda环境的默认pip安装位置)
Process creation and recycling
QML first day
Naming specification / annotation specification / logical specification
LeetCode 890. 查找和替换模式(模拟+双哈希表)
M-arch (fanwai 10) gd32l233 evaluation -spi drive DS1302
Pseudo instruction of arm instruction set
Rich text editor copying pictures in word documents
ARM指令集之跳转指令
Cookie和Session
A. Prefix range
淘宝新改版商家如何操作,需要注意的点有哪些