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

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

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

化)。

b.纯前端渲染

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

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

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

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

原文地址:https://www.cnblogs.com/lijinxiao/p/11191974.html

时间: 2024-10-14 04:13:13

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

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

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

传统的DOM渲染方式?

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

前端性能优化之DOM(三)

DOM和JavaScript在浏览器中是独立实现的; IE : DOM-> 一个名为mshtml.dll的库(内部称为Trident) JavaScript-> 它的实现名为JScript,位于jscript文件中 Safaria : JavaScript-> 由独立的JavaScriptCore引擎(最新版本名字为SquirrelFish)实现 DOM-> 使用webkit的WebCore实现 Chorme: JavaScript-> V8 DOM-> 使用webki

CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配

在浏览器内核(排版引擎)CSS规则树和HTML的DOM树合成渲染树的时候,会涉及到渲染树的位置属性的问题,因为其位置属性将通过CSS选择器链的优先级来决定,而渲染树的某个结点可能会同时满足多个选择器链,这时候就要通过选择器的优先级来完成属性的赋值. 在这个地方,我仅仅处理了几个简单的选择器情况:{(.class)     (#id)       (element)      (#id,.class,elememt)      (#id>.class)        (#id element)  

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

hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂.因此洗(wang)心(yang)革(bu)面(lao),小结一下最近玩出来的成果. 友情提示,本文也是小白向为主,如果直接想看结论可以拉到最下面看的~ 由于关系到文件的读取,那是肯定需要服务器的,我会把全部的文件放在github上,给我点个 star 我会开心

CSS 与 JS 是这样阻塞 DOM 解析和渲染的

估计大家都听过,尽量将 CSS 放头部,JS 放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂.因此洗(wang)心(yang)革(bu)面(lao),小结一下最近玩出来的成果. 友情提示,本文也是小白向为主,如果直接想看结论可以拉到最下面看的~ node 端唯一需要解释一下的是这个函数: function?sleep(time)?{??return?new?Promise(functi

Web前端之 BOM 和 DOM

前端之BOM和DOM BOM (Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话" DOM(Document Object Model))是指文档对象模型,通过它,可以访问HTML文档的所有元素 Window 对象是客户端 JavaScript 最高层对象之一,由于Windon对象是其它大部分对象的共同祖先,在调用 Window 对象的方法和属性时,可以省略 Window 对象的引用.例如:window.documenet.

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

分为三种:纯后端渲染,纯前端渲染,服务端的js渲染结合前端渲染. 纯后端渲染 纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器. 纯前端渲染 纯前端渲染可以解决纯后端渲染中出现的各种体验问题.纯前端渲染把DOM生成的主题逻辑都放在了前端,这时后端只会返回一个框架的DOM结构,比如只带一个容器元素的的DOM,然后由js代码把页面的主题渲染到这个容器元素中. 服务

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

作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部 使用CDN(这部分,不少前端都不用考虑,负责发布的兄弟可能会负责搞好) 缓存…… 等等…… 有兴趣的同学,可以自行搜索雅虎关于前端优化的十四条规则.但这些规则当中,有多少是需要前端工程师付诸实践的?就我来说,CDN.缓存的设置,就是不需要我去关心的(作为一个苦逼外包,是没有权限去生产环