转载请注明原文地址:http://blog.csdn.net/milado_nju ## 概述 在前面的章节中,笔者介绍了WebKit渲染引擎是如何有HTML网页构建DOM树.RenderObject树到RenderLayer树,以及它们之间的对应关系.这一渲染基础被软件渲染和硬件渲染共享,也就是说不管哪种类型的渲染机制,WebKit渲染引擎都会构建它们.不过对于软件渲染而言,到RenderLayer树就结束了,后面不会建立其它额外的树来对应于RenderLayer树.但是,对于硬件渲染来说,这…

前言   基础篇 WebKit, WebKit2, Chromium和Chrome介绍 WebKit和Blink WebKit和Chromium代码目录结构介绍 WebKit和Chromium功能模块 Chromium界面(UI) Chromium多进程模型 Chromium的多线程机制 消息循环 页面渲染的基本过程 HTML解析和DOM CSS基础 WebKit渲染基础 渲染主循环(main loop)和requestAnimationFrame WebKit资源加载机制 Chromium的多…

在Chromium中.Render端和WebGL端绘制出来的UI终于是通过Browser端显示在屏幕上的.换句话说.就是Browser端负责合成Render端和WebGL端的UI.这涉及到不同OpenGL上下文之间的资源传递和同步问题.当中,资源传递问题通过Mailbox机制解决,同步问题通过Sync Point机制解决.本文接下来就分析Browser端合成Render端和WebGL端UI的过程. 老罗的新浪微博:http://weibo.com/shengyangluo.欢迎关注! <Andr…

转载请注明原文地址:http://blog.csdn.net/milado_nju ## 概述 相信读者已经注意到了,在最新的Android 4.4 Kitkat版本中,原本基于Android WebKit的WebView实现被换成基于Chromium的WebView实现.在前面的章节中,笔者也介绍过基于Chromium的WebView实现即将成为Android系统上的缺省实现方式,笔者也一直期待这一重大转变,现在它真的发生了.而之前基于WebView接口的应用程序甚至可以直接工作在该实现上而不…

转载请注明原文地址:http://blog.csdn.net/milado_nju ## 数据对比 前面介绍过Chromium WebView的时候,说过有关ChromiumWebView同Chrome浏览器有很多不同之处,下面以Chromium Content Shell来对比来描述Chromium WebView,这是因为Chrome浏览器的渲染机制等同Content Shell是类似的,不过Chrome浏览器上层代码是源的,所以笔者使用自己编译的Content Shell来分析. 在仔细介…

转载请注明原文地址:http://blog.csdn.net/milado_nju 1. Android上的调试技术 在Android系统上,开发人员能够使用两种不同的语言来开发应用程序,一种是Java语言,开发人员使用的是Android SDK来配置和编译这些代码,生成Java语言的class文件,也就是Java虚拟机执行的二进制代码.Android系统使用.dex文件将一系列的class文件压缩在一起.第二种是C/C++语言,使用Android NDK来配置和编译这些代码.这些代码经过NDK…

转载请注明原文地址:http://blog.csdn.net/milado_nju 1. 什么是JavaScript引擎 什么是JavaScript引擎?简单来讲,就是能够提供执行JavaScript代码的运行环境.要解释这一概念,需要了解一些编译原理的基础概念和现代语言需要的一些新编译技术. 首先来看C/C++语言.它们是比较悠久的语言了,实际上就是使用编译器直接将它们编译成本地代码,这一切都是由开发人员在代码编写完成之后实施.用户只是使用这些编译好的本地代码,这些本地代码被系统的加载器加载执…

转载请注明原文地址:http://blog.csdn.net/milado_nju1. 什么是JavaScript引擎什么是JavaScript引擎?简单来讲,就是能够提供执行JavaScript代码的运行环境.要解释这一概念,需要了解一些编译原理的基础概念和现代语言需要的一些新编译技术. 首先来看C/C++语言.它们是比较悠久的语言了,实际上就是使用编译器直接将它们编译成本地代码,这一切都是由开发人员在代码编写完成之后实施.用户只是使用这些编译好的本地代码,这些本地代码被系统的加载器加载执行,…

转载请注明原文地址:http://blog.csdn.net/milado_nju ##概述 插件和扩展是一种扩充浏览器功能的技术,在之前我们介绍过NPAPI插件技术,在Chromium中,远远不只是这一种技术,这里面包括PPAPI机制,NativeClient技术和Extension机制.这些新技术极大的扩展了浏览器的能力,下面逐次来介绍它们.限于篇幅,这里只是简单介绍一下它们的基础知识,详细的内容会有专门的文章来介绍它们. ## PPAPI插件 PPAPI的提出是因为NPAPI的可移植性和性…

转载请注明原文地址:http://blog.csdn.net/milado_nju ## 概述 前面介绍了一些渲染引擎的功能,包括网络,资源加载,DOM树,RenderObject树等等,但是,给人以零乱的感觉,因为没有一个整体的过程描述它们在这个过程中的位置,它们只是整个渲染引擎工作的一个或者多个步骤而已. 渲染引擎的主要目的就是从一个网页的URL开始,经过一系列的复杂处理过程之后,变成一个可视化的结果,这一过程就是这里所说的页面渲染的基本过程. 所谓的渲染,就是根据描述或者定义构建数学模型,…

转载请注明原文地址:http://blog.csdn.net/milado_nju ## 概述 想象一下,如果没有磁盘缓存的世界.当用户访问网页的时候,每次浏览器都需要从网站下载网页,图片,JS等资源,这其实费力又不讨好.解决这一问题的方法就是将之前浏览器下载的资源保存下来,存到磁盘中,以备今后使用.当然,资源有时效性,也会变的不再有效,所以有相应的退出机制来解决这一问题.在现代浏览器中,绝大多数浏览器都有磁盘缓存机制,因为它确实能够提高网页的加载速度,能够省去了网络的时间. ## 特性 为了适…

转载请注明原文地址:http://blog.csdn.net/milado_nju ##概述 前面介绍了WebKit中的资源加载机制,其实它只是一个框架性的东西,实际的资源加载依赖于各个WebKit移植的实现.在Chromium中,它采用了多进程资源加载机制.本章带你了解背后的故事. ##多进程资源加载机制 Chromium的资源加载机制,其实也就是实现ResourceHandle之下的工作.Chromium的资源加载进程如下图所示. 通过对Chromium多进程架构的了解,我们知道Browse…

转载请注明原文地址:http://blog.csdn.net/milado_nju 注:鉴于这一领域非常热,自己也投身其中,会单独开辟一个专题介绍Web应用和Web运行环境. ## 概述 Web已经从web网页向web应用(web application)方向发展,这一推动需要加入大量现有操作系统提供的能力,例如各个传感器的功能已经通过JavaScript接口提供给了web应用,文件或者存储系统,用户交互,网络连接,应用的生命周期,安装和卸载等管理.这些方面有些已经成熟,但是还有更多的在制定过程…

转载请注明原文地址:http://blog.csdn.net/milado_nju ## 概述 前面讲到Chromium的资源加载机制,在调用栈上,提到URLRequest之后就戛然而止,在这之下就是Chromium的网络模块部分,它是在Browser进程中工作的,这部分其实包含很多内容,例如调用栈,Cookie,磁盘缓存,域名解析,网络协议,代理,安全机制等.它们的主要作用是使用网络来下载各种类型的资源,当然网络部分的内容远不只这些 ,它还需要支持最新的HTML5功能-WebSockets .…

Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的Chromium代码分析,HTML5 video播放硬件加速,终于是使用MediaCodec.java来利用本地native的硬件资源来做video视频播放加速的. Chromium的MediaPlayer或称MediaFramework, 首先是HTMLMediaElement调用一个MediaPl…

Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some of the most complex compute operations on the modern web.  Moving these operations from software running on general-purpose CPUs to dedicated hardwar…

一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素,也就是滚动条的默认的始作俑者<html>元素.这就是为什么,绝对定位元素在left/top等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因. 2.定位元素与传统层叠上下文 对于包含有position:relative/position:absolute的定位元素,以及Fire…

这几天在做dxva2硬件加速,找不到什么资料,翻译了一下微软的两篇相关文档.这是第二篇,记录用ffmpeg实现dxva2. 第一篇翻译的Direct3D device manager,链接:http://www.cnblogs.com/betterwgo/p/6124588.html 第二篇翻译的在DirectShow中支持DXVA 2.0,链接:http://www.cnblogs.com/betterwgo/p/6125351.html 在做dxva2的过程中,参考了许多网上的代码,这些代码…

国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电…

翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css. 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅. 在桌面端和移动端用CSS开启硬件加速 CSS…

Android从3.0(API Level 11)开始,在绘制View的时候支持硬件加速,充分利用GPU的特性,使得绘制更加平滑,但是会多消耗一些内存. 开启或关闭硬件加速: 由于硬件加速自身并非完美无缺,所以Android提供选项来打开或者关闭硬件加速,默认是关闭.可以在4个级别上打开或者关闭硬件加速: Application级别:<applicationandroid:hardwareAccelerated="true" ...> Activity级别:<acti…

-----图形性能部分-----Qt的widgets部分,运行时的图像渲染性能是一般的,因为大部分的界面内容都是Qt自绘,没有走硬件加速,也就是说很多图形内容都是CPU算出来的.但是widgets底层毕竟是C++,而且Qt的模块写的也不错,做过很多优化,这个渲染的性能在桌面上与有硬件加速的框架比差别不大,除非是有很多动画的复杂场景才能看出区别.不过在手机上或者嵌入式上,就会明显觉得widgets的渲染性能低了. 那么怎么办呢,Qt是不会抱死在widgets一个框架上的.所以Qt推出了Quick和…

国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/yzw7489757/ 原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于…

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅. 在桌面端和移动端用CSS开启硬件加速 CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行.那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CS…

转:http://zuiniuwang.blog.51cto.com/3709988/721798 从Android 3.0开始,Android 2D的绘制流程就设计为能够更好地支持硬件加速.使用GPU的View在Canvas上进行画的操作时都会使用硬件加速.在最新的Android版本里,图形硬件加速及绘制技巧得到了更好的提升,51CTO特约了最牛网站长作为本站专栏作者,为各位网友撰写Android 4.0开发相关文章. 1.Android 4.0硬件加速的使用 1.1 硬件加速的控制级别 启用…

现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放和旋转操作).这些特性在实现一个流畅的动画时特别有用.浏览器不会在动画的每一帧都绘制一次,而是生成DOM元素的快照,并作为GPU纹理(也被叫做层)存储起来.之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果.这就叫做GPU合成,也经常被称这种借助于显卡的优势改变渲染操作:通常被笼统…

一.什么是硬件加速 硬件加速就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器,这样就可以使得animation与transition更加顺畅.我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能. 二.硬件加速的原理 浏览器接收到页面文档后,会将文档中的标记语言解析为DOM树.DOM树和CSS结合后形成浏览器构建页面的渲染树.渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被…

现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放和旋转操作).这些特性在实现一个流畅的动画时特别有用.浏览器不会在动画的每一帧都绘制一次,而是生成DOM元素的快照,并作为GPU纹理(也被叫做层)存储起来.之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果.这就叫做GPU合成,也经常被称这种借助于显卡的优势改变渲染操作:通常被笼统…

做项目时,引导页面的ViewPager报了OOM异常,图片并不大,在清单文件Application节点中添加了两行代码就解决了这个问题 android:hardwareAccelerated="false"android:largeHeap="true" 从Android3.0(API Level 11)开始,Android 2D渲染管道能够更好的支持硬件加速.硬件加速执行的所有的绘图操作都是使用GPU在View对象的画布上来进行的.因为启用硬件加速会增加资源的需求…

原文永久链接 CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行. 那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则. 现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启, 最显著的特征的元素的3D变换. 例如: .cube { -webkit-transform…