传统的DOM渲染方式
什么是DOM渲染:
DOM渲染是浏览器展现给用户的DOM文档的生成的过程。
DOM渲染的演化过程:
①纯后端渲染
②纯前端渲染
③服务端的js渲染结合前端渲染
纯后端渲染:DOM树的生成完全是在后端服务器中完成,服务器的程序会把各种的数据拼成一个DOM树。采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,和服务器返回的DOM基本一致。这个过程会有少部分js代码,不过这并不影响DOM的主体是服务器返回的。
纯前端渲染:后端只返回一个DOM框架,DOM生成的主体逻辑在前端,js代码将页面的主体渲染到前端。
服务端的js渲染结合前端渲染:前面两种渲染中有一些任务,交给纯后端DOM渲染逻辑分离的不好,交给纯前端DOM渲染会造成较长的延迟,所以分离出来了一个独立DOM渲染阶段。从SEO角度来说很友好,但是加大了开发难度。
传统的DOM渲染方式的更多相关文章
- 传统的DOM渲染方式?
1.什么是DOM渲染? 所谓的DOM渲染是指的是对于浏览器中展现给用户的DOM文档的生成的过程. 2.DOM渲染的过程,大致可以分为三个阶段: --纯后端渲染 --纯前端渲染 --服务端的JS渲染结合 ...
- 传统的dom的渲染方式
DOM渲染的过程大致分为三个阶段: 后端渲染 前端渲染 独立DOM渲染(前后端相结合渲染) 1.后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端D ...
- 前端之:传统的DOM是如何渲染的?
a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容 ...
- Javascript:再论Javascript的单线程机制 之 DOM渲染时机
Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...
- vue2.0的虚拟DOM渲染
1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...
- Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- 用java操作XML文件(DOM解析方式)
XML 可扩展标记语言(Extensible Markup Language),是独立于软件和硬件的传输工具. XML的作用: (1)用作配置文件 (2)简化数据共享 (3)简化数据传输 XML DO ...
- document.compatMode(判断当前浏览器采用的渲染方式)
转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...
随机推荐
- 实现ElementUI Dialog宽度响应式变化
在ElementUI的Dialog中,需要实现其宽度随浏览器宽度变化而变化,并设定默认值,当浏览器宽度大于该值时,Dialog保持该宽度,小于该值时,使用100%宽度. 代码使用 window.onr ...
- 物联网架构成长之路(32)-SpringBoot集成MQTT客户端
一.前言 这里虽然是说MQTT客户端.其实对于服务器来说,这里的一个具有超级权限的MQTT客户端,就可以做很多事情.比如手机APP或者网页或者第三方服务需要发送数据到设备,但是这些又不是设备,又不能让 ...
- 大话设计模式Python实现-适配器模式
适配器模式(Adapter Pattern):将一个类的接口转换成为客户希望的另外一个接口. 下面是一个适配器模式的demo: #!/usr/bin/env python # -*- coding:u ...
- linux软链接
这是linux中一个非常重要的命令,他的功能是为某一个文件在另一个位置建立一个同步的链接,这个命令最常用的参数是-s, 具体用法是: ln -s 源文件 目标文件 当我们需要在不同的目录,用到相同的文 ...
- matplotlib画图相关
一. plt显示一副图像 1. import matplotlib.pyplot as plt 2. plt.figure() # 图像名称 3. plt.ims ...
- cuda,cudnn
20191008 服务器上的cuda总是被人搞坏掉,好烦.记录下: 卸载干净cuda sudo rm -rf /usr/local/cuda sudo apt-get remove cuda sudo ...
- Spring Boot自定义配置实现IDE自动提示
一.背景 官方提供的spring boot starter的配置项,我们用IDE配置的时候一般都有自动提示的,如下图所示 而我们自己自定义的配置却没有,对开发非常不友好容易打错配置,那这个是怎样实现的 ...
- c#之添加window服务(定时任务)
本文讲述使用window服务创建定时任务 1.如图,新建项目,windows桌面->windows服务 2.如图,右键,添加安装程序 3.在下图安装程序 serviceInstaller1 上右 ...
- Asp.Net MVC 的19个管道事件
httpApplication调用ProcessRequest方法,内部执行19个管道事件,如下 BeginRequest 开始处理请求 AuthenticateRequest 授权验证请求开始,获 ...
- 百度地图分布图(百度地图api司机位置实时定位分布图)
就类似于我们使用共享单车app的时候,可以看到我们周围的空闲单车分布.e代驾在后台管理系统需求里也有此功能,目的是为了实时看到目标城市下的所有司机状态. 一.controller //controll ...