什么是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. Springboot使用ehcache缓存

    本文部分步骤继承于springboot使用cache缓存,如果有不清楚的,请移驾springboot使用cache缓存 ehcache是一种广泛使用的开源Java分布式缓存.主要面向通用缓存,Java ...

  2. H3C 12508 收集诊断信息

        案例:H3C 12508单板卡出现remove状态,需要配合研发收集诊断信息. (此文档只展示研发要求的诊断信息.) 总体:12500交换机返回三种文件----故障时诊断信息,主备单板的日志文 ...

  3. CentOS下安装FreeTDS

    导读 官方网站:http://www.freetds.org 下载地址:http://ibiblio.org/pub/Linux/ALPHA/freetds/stable/freetds-stable ...

  4. sysstat工具包之mpstat

    mpstat 1 简介 mpstat是一个实时监控工具,主要报告与CPU相关统计信息,信息存放在/proc/stat文件中: 在多核心cpu系统中,不仅可以查看cpu平均信息,还可以查看指定cpu信息 ...

  5. 【maven】【IDEA】idea中使用maven编译项目,报错java: 错误: 找不到符号 【2】

    =================================================================================== idea中使用maven编译项目 ...

  6. Linux CentOS内核升级

    1. 说明 正在使用的阿里云服务器报了几个内核漏铜,使用自带[一键修复]需要额外的支付费用,所以尝试采用升级系统内核的方式来修复漏洞. 1.1 服务器参数 操作系统:CentOS 7.4 64位 当前 ...

  7. 使用xkbeancomparator对比javabean,生成操作记录

    xkbeancomparator是一个 java bean 对比修改并输出差异的工具.github地址 适用场景:用户编辑提交时,需要记录修改内容,修改前后的值对比,生成操作记录:可以选择记录的字段和 ...

  8. .Net捕获网站异常信息记录操作日志

    第一步:在Global.asax文件下的Application_Error()中写入操作日志 /// <summary> /// 整个网站出现异常信息,都会执行此方法 /// </s ...

  9. 在ie下转换时间戳出错

    在将特定格式转换为时间戳的时候,我们通常的做法事new Date(str).getTime(), 这个方法在谷歌上是可行的,但是在ie上需要注意一点,就是这个str如果是“2019-11-15”的格式 ...

  10. python3访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...