什么是DOM渲染:

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

DOM渲染的演化过程:

  ①纯后端渲染

  ②纯前端渲染

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

  纯后端渲染:DOM树的生成完全是在后端服务器中完成,服务器的程序会把各种的数据拼成一个DOM树。采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,和服务器返回的DOM基本一致。这个过程会有少部分js代码,不过这并不影响DOM的主体是服务器返回的。

  纯前端渲染:后端只返回一个DOM框架,DOM生成的主体逻辑在前端,js代码将页面的主体渲染到前端。

  服务端的js渲染结合前端渲染:前面两种渲染中有一些任务,交给纯后端DOM渲染逻辑分离的不好,交给纯前端DOM渲染会造成较长的延迟,所以分离出来了一个独立DOM渲染阶段。从SEO角度来说很友好,但是加大了开发难度。

传统的DOM渲染方式的更多相关文章

  1. 传统的DOM渲染方式?

    1.什么是DOM渲染? 所谓的DOM渲染是指的是对于浏览器中展现给用户的DOM文档的生成的过程. 2.DOM渲染的过程,大致可以分为三个阶段: --纯后端渲染 --纯前端渲染 --服务端的JS渲染结合 ...

  2. 传统的dom的渲染方式

    DOM渲染的过程大致分为三个阶段: 后端渲染 前端渲染 独立DOM渲染(前后端相结合渲染) 1.后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端D ...

  3. 前端之:传统的DOM是如何渲染的?

    a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容 ...

  4. Javascript:再论Javascript的单线程机制 之 DOM渲染时机

    Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...

  5. vue2.0的虚拟DOM渲染

    1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...

  6. Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  7. Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  8. 用java操作XML文件(DOM解析方式)

    XML 可扩展标记语言(Extensible Markup Language),是独立于软件和硬件的传输工具. XML的作用: (1)用作配置文件 (2)简化数据共享 (3)简化数据传输 XML DO ...

  9. document.compatMode(判断当前浏览器采用的渲染方式)

    转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...

随机推荐

  1. MySQL如果频繁的修改一个表的数据,那么这么表会被锁死。造成假死现象。

    MySQL如果频繁的修改一个表的数据,那么这么表会被锁死.造成假死现象. 比如用Navicat等连接工具操作,Navicat会直接未响应,只能强制关闭软件,但是重启后依然无效. 解决办法: 首先执行: ...

  2. APP兼容性测试 (一) 机型选择概要

    一.App兼容性问题有哪些 安装失败.启动失败.卸载失败,卸载不干净. 程序运行过程中闪退 部分控件显示不完整或者功能失效 屏幕显示异常 图片展示不全等 二.App兼容性测试的核心要点 测试软件是否能 ...

  3. XStream处理XML用法

    参考:https://www.yiibai.com/xstream/xstream_json.html 1.简介: XStream是一个简单的基于Java库,Java对象序列化到XML,反之亦然(即: ...

  4. 修改VisualStudio的智能提示字体大小

    最近换了一个高分辨率显示器,便觉得VisualStudio的字体过小了,虽然VisualStudio换字体还比较简单,大部分位置的字体基本上很顺利的就换掉了,然而一直找不到智能提示的字体所在位置,放狗 ...

  5. linq,skip(),take实现分页

    using (AdventureWorks2012Entities db = new AdventureWorks2012Entities()) { int num = (from stu in db ...

  6. Wine添加路径PATH办法

    使用wine运行某些程序时,可能会提示某些DLL找不到,需要手动把这些DLL的路径添加进去.添加方法是:wine regedit打开注册表工具:添加一个键HKEY_CURRENT_USER/Envir ...

  7. WebApi使用Unity实现IOC

    最近在学习ASP.NET MVC,使用Unity作为依赖注入容器.分别在WebAPI和MVC中使用.这篇文章介绍WebAPI,MVC的在下篇文章中介绍.下面是学习的一点经验. 一 IOC简单介绍 Io ...

  8. 让windows 10 家庭版 支持 Hyper-v 的方法

    pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt for /f ...

  9. leetcode整理(一)

    leetcode题目整理,基本上不是最优解 1. 回文数 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 ...

  10. K8s容器编排

    K8s容器编排 Kubernetes(k8s)具有完备的集群管理能力: 包括多层次的安全防护和准入机制 多租户应用支撑能力 透明的服务注册和服务发现机制 内建智能负载均衡器 强大的故障发现和自我修复能 ...