传统的DOM是如何进行渲染的?以及单页面开发与多页面开发的优缺点。

分为三种:纯后端渲染,纯前端渲染,服务端的js渲染结合前端渲染。

纯后端渲染

纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器。

纯前端渲染

纯前端渲染可以解决纯后端渲染中出现的各种体验问题。纯前端渲染把DOM生成的主题逻辑都放在了前端,这时后端只会返回一个框架的DOM结构,比如只带一个容器元素的的DOM,然后由js代码把页面的主题渲染到这个容器元素中。

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

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

单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。

  

  多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新

单页面的优点:

1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小

2,前后端分离

3,页面效果会比较炫酷(比如切换页面内容时的专场动画)

单页面缺点:

1,不利于seo

2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)

3,初次加载时耗时多

4,页面复杂度提高很多

原文地址:https://www.cnblogs.com/Fairy-Tail-blogs/p/10867341.html

时间: 2024-10-14 00:26:29

传统的DOM是如何进行渲染的?以及单页面开发与多页面开发的优缺点。的相关文章

传统的DOM是如何进行渲染的

在这篇文章里,DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程.在Chrome中,这个渲染好的DOM,就是在开发者工具中元素这个tab中,递归的展开之后得到的整个文档. DOM渲染的演化过程,大致可以分为可以分为三个阶段: 纯后端渲染 纯前端渲染 服务端的js渲染结合前端渲染 下面我们分阶段来做一下说明. 第一个阶段是纯后端渲染.采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,和服务器返回的DOM是基本一致的(可以通过查看网页源代码来得到服务器返回的DOM

传统开发模型vs敏捷开发模型——过程模型的变革

一.概念框架 在了解一个新概念的时候,最好的方法就是把它插入到原有的概念体系中.在不仅有助于对概念的记忆,更利于深刻地认识概念的本质.精髓.下图说明了"敏捷开发"在软件工程理论体系中的位置. 为什么需要软件工程?很简单,为了让我们更好地生产软件.这里的"好"包含多重含义,有成本上的"好".维护上的"好"等等.但是我们知道,不可能坐着想"我要写好软件",然后就软件就能写好了.我们需要一套系统化.理论化.工程化

传统软件开发VS敏捷软件开发

在上世纪60年代,由于计算机的计算能力显著提升,人们需要处理问题的复杂程度也得到提升,导致了一系列问题比如项目运行超过预算.项目运行超过时间.软件十分低效.软件质量很低.软件无法满足需求.项目缺乏管理,代码难以维护.软件难以交付,称为软件危机.人们意识到,软件开发不仅仅是让程序员编写程序那么简单,而是一项工程,需要科学的开发方法,从而人们提出了软件工程的概念,采用工程化的方法对软件开发进行管理.而在当今,软件工程中软件开发方法主要分为传统软件开发和敏捷软件开发.本文主要介绍这两种软件开发方法以及

Web开发中,页面渲染方案

转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染引擎渲染好HTML页面发送给浏览器 客户端渲染,客户单端通过RESTAPI获取数据在浏览器上动态渲染页面 前者的技术栈包括:Thymeleaf.Apache Velocity .Freemarker 等主流方案,后者有React.AngularJS.vue.js.Backbone.js等前端渲染框架

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

a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容,可以让用户更加快捷的看到页面的主体部分.也方便了网站的seo(搜索引擎优 化). b.纯前端渲染 能够分离表现层和数据层,js代码负责交互展现,后端以API(应用程序接口)形式提供纯粹的数据.优点是交互的部分可以 脱离数据接口独立的进行开发和调试,使得站点的交互能力大幅度提升. c.服务端的js渲

传统的DOM渲染方式?

1.什么是DOM渲染? DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程. 2.DOM渲染的演化过程,大致可以分为可以分为三个阶段: 纯后端渲染: DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端DOM节点组成的DOM树,并转化成字节流作为HTTP Response的body返回浏览器 纯前端渲染: 前端渲染把DOM生成的主体逻辑都放在前端,后端之后返回一个框架的DOM结构,然后由js代码把页面的主题渲染到框架中.可以解决后端渲染中出现的

传统软件开发与敏捷软件开发的比较

本篇博客分别基于软件开发生命周期和范围管理这两个不同的方面对传统软件开发方法和敏捷软件开发方法进行分析比较,希望与读者分享交流. 传统方法: 从本质来讲,传统软件开发方法是一个软件开发架构,其开发过程是通过一系列阶段顺序展开的.通常,这一方法不能很好地表达和描述用户的需求,而且在项目整个开发周期的所有阶段都有需要不断完善的文档. 敏捷方法: 软件行业飞快发展,软件技术不断创新,客户期望迅速变化,考虑到需要克服传统开发方法的缺点,敏捷开发在近十年来兴起,以其灵活性,易操作性得到软件行业的广泛关注.

Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器

from flask import Flask from flask import request from flask import render_template from flask_wtf import CSRFProtect as WTF # 利用表单类去渲染模板时需要用到 from forms import LoginForm app = Flask(__name__) WTF(app) # 在app上注册一个 WTF (所有的flask插件都必须进行注册) app.config.f

layui渲染form表单

有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的内容,如果要局部刷新表单,则加上如下代码: layui.use('form', function() { var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); 即可 原文地址:https://www.cnblogs.com/shuo1208/p/8918985.html