前后端渲染页面的区别?
2016-07-04 18:20
225 查看
我们都知道模板都是需要渲染的,最近在使用react,它是后端渲染的,而angular是前端渲染的。要弄清前后端渲染的区别,先来看看浏览器在完整展示一个页面前做了哪些工作:
① 加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)
② 解析:从html解析出DOM tree,解析css产生css规则树(计算css样式),js,通过DOM api和Css api操作DOM tree和CSS ruletree。
③ 渲染:解析完成后,浏览器引擎会通过DOM tree和CSS RuleTree来构造Rendering tree(渲染树)(不包含Header等不需要显示的东西),也
就是将CSS rule加到每一个DOM结点上(或者叫做Frame)。定位坐标和大小,是否换行等。
④ 绘制:最后调用操作系统的Native GUI的API绘制。
前后端渲染的区别:
前端渲染:
指的是后端返回json数据,前端利用预先写的html模板,循环读取json数据,拼接字符串,并插入页面。
好处:网络传输数据量小。不占用服务端运算资源(解析模板),模板在前端(很有可能仅部分在前端),改结构变交互都前端自己来了,改完自己调就行。
坏处:前端耗时较多。占用(一部分、少部分)客户端运算资源(解析模板)。前端代码多点,毕竟包含模板代码了么。
后端渲染:
前端请求,后端用后台模板引擎直接生成htm,前端接受到数据之后,直接插入页面。
好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板)
坏处:占用服务器资源。
① 加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)
② 解析:从html解析出DOM tree,解析css产生css规则树(计算css样式),js,通过DOM api和Css api操作DOM tree和CSS ruletree。
③ 渲染:解析完成后,浏览器引擎会通过DOM tree和CSS RuleTree来构造Rendering tree(渲染树)(不包含Header等不需要显示的东西),也
就是将CSS rule加到每一个DOM结点上(或者叫做Frame)。定位坐标和大小,是否换行等。
④ 绘制:最后调用操作系统的Native GUI的API绘制。
前后端渲染的区别:
前端渲染:
指的是后端返回json数据,前端利用预先写的html模板,循环读取json数据,拼接字符串,并插入页面。
好处:网络传输数据量小。不占用服务端运算资源(解析模板),模板在前端(很有可能仅部分在前端),改结构变交互都前端自己来了,改完自己调就行。
坏处:前端耗时较多。占用(一部分、少部分)客户端运算资源(解析模板)。前端代码多点,毕竟包含模板代码了么。
后端渲染:
前端请求,后端用后台模板引擎直接生成htm,前端接受到数据之后,直接插入页面。
好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板)
坏处:占用服务器资源。
相关文章推荐
- 页面加载顺序及解析流程分享
- 浏览器页面渲染基本过程
- HTML5页面渲染性能的”程序转换“思路
- Diy页面服务端渲染解决方案
- yii框架页面渲染
- Velocity源码分析以及Spring集成
- 【前端性能】高性能滚动 scroll 及页面渲染优化
- 页面渲染,不能加载下一页数据
- JS抓取动态页面小程序
- JSP tld文件配置 自定义标签简单示例
- JSP tag文件配置 自定义标签简单示例
- 前端实现图片懒加载(lazyload)的两种方式
- 用URL请求页面流程
- 高性能JavaScript模板引擎-artTemplate快速上手
- SSM后台数据与前端(PC、M站、Android、IOS)的交互——页面渲染
- vue渲染页面,获取不到元素
- 从输入URL到浏览器显示页面,后台发生了什么?
- 在非MVC下RazorEngine的使用
- 写给vue新手们的vue渲染页面教程