聊聊界面渲染引擎——UI Engine的前世今生

话说20世纪90年代出现了互联网,一开始只是用来看看静态文档。但是人们发现在浏览器网页上通过几个输入控件就可以做类似于发邮件之类的事情,慢慢就有了交互的概念。以cgi,pl,php,asp为代表的模板(template)语言盛行,它们可以生成动态网页,于是第一代界面渲染技术诞生了。

后来,随着页面功能慢慢复杂,服务端runtime逐渐被面向对象语言Java领导的servlet/jsp技术占据主流,并提出了MVC模型的概念。这后来也成为J2EE企业级开发web层的编程规范。

再到后来,人们对网页交互能力的要求越来越高,浏览器中脚本语言(javascript)的能力也越来越强,可以大大增强渲染效果并提高交互体验。还有css技术也分离出来,网页可以拥有更漂亮的布局和样式。于是前端开发的三架马车出现了。

这时候涌现了大量的前端框架,比较有名的有ext、prototype、jquey等。这也就是第二代渲染技术,即先采用template语言在服务端渲染出页面骨架,然后再到客户端Browser继续渲染细节的部分。这个技术的最高水平也是sun公司提出的,叫JSF(Java Server Faces),他还首次提出了组件树、组件生命周期管理、数据绑定等界面渲染的新指导思想。

正在这时候,我进入了阿里巴巴集团B2BCRM,跟随牛人一起开发了一个牛X的前端框架(shy3),采用了当时非常先进的XML语言来定义界面语义,然后通过template渲染,再加上js渲染,实现了当时软件开发的极致速度,增删改查功能半天就能搞定。

再到后来,随着互联网公司的群雄征战,以Google、Facebook公司为首的前端开发工程师又一次做了颠覆性创新,他们极致地提高浏览器、js引擎的性能,并在2011年提出了HTML5标准,并且css和http协议也相继跟进,近期javascript已经完成了ES6的标准制定,正在迈向ES7。。。。,还有移动互联网时代也到来了,又需要软件开发能够覆盖到三个端(PC、Pad、Mobile)。这时候涌现的技术标准有MVVM(提出了directive、双向绑定等概念)。于是最近期干脆有人提出界面渲染引擎——UI Engine的概念,即在JS Runtime之上搭建一层界面渲染层,写一次代码就可以实现三端合一,前端开发速度将进一步提升!

这也就是第三代渲染技术时代的到来!比较代表的技术有前两年的angular、近期的React、以及最近淘系前端团队刚刚开源的Weex技术等。

最后总结一下最新一代UI Render Engine的三大特征:
1、组件生命周期管理
2、基础组件定义
3、虚拟Dom技术实现双向绑定

各位开发工程师亲们,让我们拥抱前端开发的这些变化,这样才能在软件开发领域一直立于不败之地。

时间: 2024-12-11 10:58:13

聊聊界面渲染引擎——UI Engine的前世今生的相关文章

APICloud 优化渲染引擎上线,解决 App 开发适配难题

APICloud渲染优化引擎,经过为期3个月的Beta版计划,历经上万开发者及商业APP.数十万台真实手机参与测试,于4月5日正式上线,合入DeepEngine中. Web工程师使用HTML5等标准Web技术开发拥有原生体验和原生功能的APP,Deep Engine使用半翻译式原理,运行中将Web翻译成Native API,强大的混合渲染引擎提供更佳的性能体验. 一.优化后的引擎带来哪些性能提升: 1.窗口切换动画帧率得到有效提升,可达到50 fps以上,动画渲染效果与原生无差异 2.页面滚动性

统一模式的WebKit浏览器渲染引擎的利弊

Opera宣布转向使用开源的WebKit引擎 在本周前几天,欧朋浏览器(Opera)宣布正在逐步关闭其独立浏览器渲染引擎(brower rendering engine)的相关开发工作,继而转向使用开源的WebKit引擎,该消息很快引起了不小的轰动. WebKit引擎支持谷歌安卓系统和苹果IOS系统的内置浏览器,在移动领域,WebKit引擎实际上已经成为了移动浏览器内核开发的标准,而且它也非常可能成为桌面浏览器的内核标准.在全球范围内Chrome浏览器已经遥遥领先以Trident排版引擎为内核的

Android WebView启动Chromium渲染引擎的过程分析

 首先感谢罗升阳的分享,原文链接http://blog.csdn.net/Luoshengyang/article/details/53237189   Android WebView加载了Chromium动态库之后,就可以启动Chromium渲染引擎了.Chromium渲染引擎由Browser.Render和GPU三端组成.其中,Browser端负责将网页UI合成在屏幕上,Render端负责加载网页的URL和渲染网页的UI,GPU端负责执行Browser端和Render端请求的GPU命令.本文

win10预览版10041无斯巴达浏览器 IE浏览器Edge渲染引擎更新

  3月19日消息,微软在官方IE博客中不仅确认了斯巴达浏览器预览版将包含在下个Win10版本中,而且还列出了本次Build 10041版本中IE浏览器Edge渲染引擎更新的细节.本次更新的引擎功能是斯巴达浏览器的一部分,感兴趣的用户可以暂时用IE浏览器实验功能来"抢先"体验. 本次更新的渲染引擎内容比较丰富,主要包括以下几个方面: • 提升ECMAScript 6兼容性(在当前Win10预览版的Kangax ES6兼容性测试中提高74%) • 扩展支持DOM L3 XPath • 支

浅析渲染引擎与前端优化

本文主要是两方面内容: 浅析浏览器内核的工作原理(以 WebKit 2 为例). 浅析由浏览器内核想到的前端优化,或者说前端优化规则是从哪儿来的. 大家知道,大部分的 WEB 页面依托浏览器呈现,而浏览器能够将页面展示出来,基本依赖于浏览器的内核,即渲染引擎.今天以 Chrome 浏览器的内核 WebKit(更确切是 WebKit 分支 Blink,以下统称为 WebKit )为例,对渲染引擎如何展示页面做个简单.全面的了解. 浏览器的渲染引擎及其依赖模块 渲染引擎主要是将 WEB 资源如 HT

jsp-Struts中有没有办法在渲染每个UI控件时都执行一段代码

问题描述 Struts中有没有办法在渲染每个UI控件时都执行一段代码 我有这么个需求:希望能通过数据库配置来指定每个页面上的每个UI控件是否最终显示出来.表结构例如: page | component_id | is_display 有什么办法能够加个拦截器之类的东西,在Struts渲染每个UI控件之前能执行这个拦截器,在拦截器里能取到当前被渲染的控件对象,并修改控件对象的属性吗? 我只知道Struts有Interceptor,但貌似只是拦截后台Action的,不知道是不是能处理UI控件. 请各

AMD 开源照片级渲染引擎 Radeon ProRender

除了Radeon Pro WX.Radeon Pro Solid State两款全新的专业显卡,AMD今天还宣布,Radeon ProRender渲染引擎即将开放源代码,开发人员可任意使用.AMD去年发起了GPUOpen项目,是其有史以来最大规模的开源工程,游戏.图形.计算开发者可以从AMD那里得到几乎所有需要的资源,包括开发套件.效果库等等.Radeon ProRender引擎的开源就是该项目的一部分. 该引擎此前叫做FireRender,是一个纯粹基于物理的渲染引擎,采用OpenCL计算标准

Chrome 渲染引擎 Blink 的 2014 年计划

Google工程师公布了Chrome渲染引擎Blink的2014年工作目标.Google在2013年4月宣布从WebKit切换到Blink.Blink的2014年目标主要是集中在改进移动版性能,包括改进平滑滚动.动画和输 入响应,以及减少内存占用和电力消耗. 其它目标集中在改进浏览器移动Web平台,模糊本地应用和浏览器Web应用的界限,支持应用离线模式,Web应用支 持推送通知和硬件特定功能. Google还将继续从Blink中清理它不需要的代码.Blink的路线图过度向移动倾斜可能与Boss

Chrome将基于WebKit开发自主渲染引擎Blink

硅谷网讯 据腾讯科技(玉临)北京时间4月4日消息,据国外媒体报道,今天互联网上发生了一件大事:谷歌(微博)对外宣布,将停止使用WebKit作为Chrome浏览器的渲染引擎,但WebKit并不会马上被淘汰,而是作为全新渲染引擎"Blink"的后台技术.谷歌表示,此举是为了减少WebKit的复杂度,从而加快Chrome浏览器的开发进度.一直以来,Chrome所使用的网页加载机制("多进程架构",某一个标签页的崩溃不会影响到整个浏览器)就与其他浏览器有些不同,它还试图将软