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

返回的HTTP Response是包含着全部页面内容,可以让用户更加快捷的看到页面的主体部分。也方便了网站的seo(搜索引擎优

化)。

b.纯前端渲染

能够分离表现层和数据层,js代码负责交互展现,后端以API(应用程序接口)形式提供纯粹的数据。优点是交互的部分可以

脱离数据接口独立的进行开发和调试,使得站点的交互能力大幅度提升。

c.服务端的js渲染结合前端渲染

主要是把前两个阶段中,一些交给纯后端DOM渲染逻辑分离的不好,但是交给纯前端DOM渲染又会造成较高延迟的部分单独
分离出来形成了一独立DOM渲染阶段,保留的代码中天然的展示层和数据层的分离,又把API请求的累计延迟减少了很多,从
SEO角度来说渲染结果对搜索引擎也很友好。当然,这样的做法需要给整体的架构增加一个独立的单元,给开发和部署都带
来了更高复杂性。

前端之:传统的DOM是如何渲染的?的更多相关文章

  1. 传统的DOM渲染方式?

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

  2. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  3. 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

    hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付 ...

  4. 前端(4)BOM与DOM

    前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...

  5. 第四章、前端之BOM和DOM

    目录 第四章.前端之BOM和DOM 一.解释BOM和DOM 二.window对象 三.window子对象 四.弹出框 五.计时相关 六.HTML的DOM树 七.查找元素 八.节点操作 九.JS操作CS ...

  6. 04 前端之BOM与DOM

    目录 前端之BOM与DOM BOM与DOM操作 BOM操作 前端之BOM与DOM BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>& ...

  7. 传统的DOM渲染方式

    什么是DOM渲染: DOM渲染是浏览器展现给用户的DOM文档的生成的过程. DOM渲染的演化过程: ①纯后端渲染 ②纯前端渲染 ③服务端的js渲染结合前端渲染 纯后端渲染:DOM树的生成完全是在后端服 ...

  8. 传统的dom的渲染方式

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

  9. 前端性能优化--为什么DOM操作慢?

    作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部 ...

随机推荐

  1. Dart 自增++自减--和循环语句

    void main(){ /* ++ -- 表示自增 自减 1 在赋值运算里面 如果++ -- 写在前面 这时候先运算 再赋值,如果++ --写在后面 先赋值后运行运算 var a=10; var b ...

  2. Spark ML 中 VectorIndexer, StringIndexer等用法(转载)

    VectorIndexer 主要作用:提高决策树或随机森林等ML方法的分类效果.VectorIndexer是对数据集特征向量中的类别(离散值)特征(index categorical features ...

  3. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...

  4. Qt编写气体安全管理系统15-网络转发

    一.前言 在本系统中网络转发是个什么功能含义呢,其实就是将本地采集设备的所有数据打包发送到指定的网络地址,默认采用UDP的形式,无连接开销小,我也是看到很多的组态软件有这个功能,其实现有的很多的气体探 ...

  5. Spring MVC 验证表单

      在实际工作中,得到数据后的第一步就是检验数据的正确性,如果存在录入上的问题,一般会通过注解校验,发现错误后返回给用户,但是对于一些逻辑上的错误,比如购买金额=购买数量×单价,这样的规则就很难使用注 ...

  6. springboot整合mybatis的时候报错Caused by: java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    今天闲来无事,学习springboot整合mybatis,在bilibili看视频学的,视频中在dao层的interface上面加上org.apache.ibatis.annotations.Mapp ...

  7. line-height超出隐藏显示的行数和垂直居中

    line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...

  8. HTML布局排版2如何设置div总是相对于页面居中

    由于浏览器页面有大有小,为了适应浏览器宽度,可以让div总是对于浏览器居中,设置div左右两边的margin为auto可以实现这个效果.如图,第一个是默认div,无上下左右外边距,第二个是设置了mar ...

  9. 测试框架nunit之assertion断言使用详解

    任何xUnit工具都使用断言进行条件的判断,NUnit自然也不例外,与其它的xUnit(如Junit.phpUnit.pythonUnit)相比,由于大量使用了Generic.Attribute等语言 ...

  10. jquery weui 图片浏览器Photo Browser

    jquery weui 图片浏览器Photo Browser 如何使用? 对应组件地址:http://jqweui.com/extends#swiper 先说说业务场景:类似朋友圈这样的布局效果,点击 ...