什么是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. golang实战--家庭收支记账软件(面向过程)

    1.开发流程 2.目标 模拟实现一个基于文本界面的(家庭记账软件) : 初步掌握编程技巧和调试技巧: 主要包含以下知识点:局部变量和基本数据类型.循环语句.分支语句.简单屏幕格式输出.面向对象编程: ...

  2. 【shell脚本】自动监控tomcat服务===autoCheck.sh

    自动监控tomcat服务,当tommcat服务挂掉时自动重启 一.脚本内容 [root@localhost ]# cat /root/autoCheck.sh #!/bin/bash startTom ...

  3. oracle聚合函数XMLAGG用法简介

    XMLAGG函数语法基本如图,可以用于列转行,列转行函数在oracle里有好几种方法,wm_concat也可以做 这里介绍wm_concat是因为XMLAGG实现效果和wm_concat是一样的,只是 ...

  4. POJ 3252 (数位DP)

    ###POJ 3252 题目链接 ### 题目大意:给你一段区间 [Start,Finish] ,在这段区间中有多少个数的二进制表示下,0 的个数 大于等于 1 的个数. 分析: 1.很显然是数位DP ...

  5. c#的文本格式化形式展示

    假设你使用的是新版本的的c#语法 c#的格式化形式有如下几种 string text = "Hello World!"; Console.WriteLine("Hello ...

  6. NoSql之Redis系列(.Net Core)

    一. 简介 1. 什么是Redis? 全称“Remote Dictionary Server”,基于内存管理数据,它有多种数据结构(常用的5种),分别应对不同场景:它是单线程模型的,所以不会存在并发问 ...

  7. 一小段 Dapper 的简单示例

    关于 Dapper 的介绍,请参考:Dapper - 一款轻量级对象关系映射(ORM)组件,DotNet 下 using System; using System.Collections.Generi ...

  8. Python getopt 模块

    Python getopt 模块 getopt模块,是配合sys.argv使用的一个扩展.他可以接收终端的参数.格式扩展为“-n” 或 “--n”两种类型,下面是具体解释. 使用 improt get ...

  9. 【maven】父子项目的一般姿势

    一.为什么需要创建maven父子项目. 一般一个业务较多的项目,如果我们做服务拆分的话,有些公共的模块就只能做成jar包了.你将util.constant.model封装成jar包是比较好的,如果da ...

  10. 关于css中的定位

    关于前端的几种定位方式 近期自己感觉自己对于前端定位的知识还是不是太理解,所以自己就在这里做一个总结 1.元素的定位属性主要包括定位模式和边偏移两部分. 边偏移属性 描述 top       bott ...