从浏览器内核级别修改layout相关的UI行为

具体说来,有几个不同的代码修改层次。

最底层上layer树硬件合成加速部分的修改,在这一层你可以做到的是让某个图层显示往上或者往下一点,同时页面的JS代码根本不知道这一点;但是要注意,页面交互所依赖的HitTest作用在这一层,一个最顶上的RenderLayer对象最先hitTest测试。所以你要确保不会影响原来的hitTest逻辑,思路就是维护两套索引:用于显示的,和用于model的。

接下来可以修改RenderObject层。实际上,这一层正是layout的核心。你需要了解不同RenderObject的OOP层次结构。譬如文本对应RenderText,图像对应RenderImage。不同之处在于,当文本重新布局时,RenderText所拥有的InlineTextBox可能删除重建;而DOM元素的display属性变化时,render对象的局部render子树的结构也可能发生变化。这一层做修改时,除非你深刻了解WebKit的layout原理,否则可能需要使用DRT(DumpRenderTree)这样的工具来查看render子树的结构。render树的某个子树属性修改完后,可以setNeedsLayout,下一次layout回调时就会触发啊重现layout。注意:触发重新layout并不会重新应用解析CSS字符串数据。

实际上,当前Web规范只是针对DOM树的,也就是说,JS只能通过设置DOM元素的style来改变外观显示。最近有一个未成型的CSSOM规范,但是仅仅针对CSS computedStyle,还没有达到能够以JS任意操纵修改render树的级别,事实上我希望这能够做到。譬如CSS selector都能够借助LLVM编译为机器代码,性能上应该没有什么问题。

接下来则是RenderObject关联的RenderStyle,实际上就是CSS computedStyle。由于它们是从DOM CSS层的字符串解析得到的数据,同时又是依赖于RenderObject的,修改这一层可能需要特殊的注意。

然后就到了DOM层了,在浏览器内核里直接修改DOM看似没有必要,理论上来讲,应该可以通过注入JavaScript代码(userscript类的插件)来做到,问题是某些事件回调、特殊的状态值从W3C所定义的JS/DOM API不一定能获取到,或者能够获取到但比较麻烦,所以在内核中直接修改DOM Element对象的style属性的做法还是很有必要的。记住这里设置的都是字符串类型的CSS取值,实际上设置的值还需要进一步的解析应用。好处就是你不需要担心如何一致的应用setNeedsStyleRecacle这样的状态位。缺点就是,性能上可能不是最优的。

浏览器内核也有类似Linux内核的某种上下文概念。在Linux内核驱动中,你不可以在中断上下文中调用可引起睡眠的函数,——那样会导致死锁从而触发内核panic。浏览器内核也有类似的概念,你需要理解的是当前代码运行在哪个线程,一般来说,A线程不能修改B线程拥有的状态。几个基本的线程:主UI/事件回调、JS、网络IO等等。有的时候不能直接发起嵌套函数调用,而是需要先设置状态,然后等待下一次layout回调时应用。

最后就是直接从应用外层的WebView接口注入JS的方法了。实际上这一层也能做到许多事情,比方说,你不能通过DOM API来直接修改某个文本对象的显示(当然可以修改整个文本所在的包含块,但没办法直接修改某个字符),但是可以间接做到:通过首先包装一个Range对象,然后再将此Range对象放到一个新的div元素里。这么做最大的问题是改变了DOM树的结构,不过还是可以接受的。

时间: 2024-10-03 22:40:53

从浏览器内核级别修改layout相关的UI行为的相关文章

浏览器内核-Webkit

关键字:浏览器内核,浏览器引擎,Browser,Webkit,Blink,Chromium. 本文简单介绍一下各种浏览器内核.着种介绍一下Webkit.顾名思义,浏览器内核就是浏览器的核心部分,也可以说是浏览器所采用的渲染引擎,负责对网页语法的解释(如标准通用标记语言下的一个应用HTML.JavaScript)并渲染(显示)网页.常见的浏览器内核有:Trident,Gecko,Presto,Webkit等.对于开发者来说,有了浏览器内核,你就可以开发一款你自己的浏览器.或者在你的应用中嵌入浏览器

浏览器内核

主流浏览器内核介绍(前端开发值得了解的浏览器内核历史) 最近 "个人恶趣味" 持续发酵,突然想了解下浏览器内核的发展历史. 内核 首先得搞懂浏览器内核究竟指的是什么. 浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎.它负责取得网页的内容(HTML.XML.图像等等).整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机.浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效

浏览器内核及渲染模式的介绍

首先要引入一个概念——排版引擎(Layout Engine,Rendering Engine),就是经常上网的人也许都听说过的浏览器内核,负责解析网页语法(如HTML.JavaScript)并渲染.展示网页.各品牌浏览器的内核是不同的,不同的内核处理同一段代码的时候思路不同.因此可以说,浏览器间内核的差异是产生兼容性问题的根本原因.这就是我们苦逼前端工程师们经常希望浏览器大一统的原因了.当然这只是个梦,那好我们回归现实,下面我将对四种常用的浏览器内核进行简单的介绍.  Trident      

常见浏览器内核概述

一. 浏览器内核[Rendering Engin] (排版引擎/渲染引擎/解释引擎) 概述what? 负责对网页语法的解释并渲染网页,将网页的代码转换为终于可见的页面形式,而且决定浏览器怎样显示网页的内容以及页面的格式信息. 不同浏览器内核对网页编写语法的解释也有不同,故同一网页在不同内核浏览器中渲染效果也不尽同样,这就须要网页编写者在不同内核浏览器中測试网页显示的效果. 为什么会排版错位呢? 因为浏览器内核负责渲染网页内容的,进行排版.因此必定会出现排版错位等问题. 造成此现象的原因有:站点本

浏览器内核、排版引擎、js引擎

[定义] 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”.负责对网页语法的解释(如标准通用标记语 言下的一个应用HTML.JavaScript)并渲染(显示)网页. 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及 页面的格式信息.不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不

[ 浏览器内核 ] 渲染引擎机制

浏览器内核 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”.负责对网页语法的解释(如标准通用标记语言下的一个应用HTML.JavaScript)并渲染(显示)网页. 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息.不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同

【转】主流浏览器内核介绍

内核 首先得搞懂浏览器内核究竟指的是什么. 浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎.它负责取得网页的内容(HTML.XML.图像等等).整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机.浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同.所有网页浏览器.电子邮件客户端以及其它需要编辑.显示网络内容的应用程序都需要内核.JS 引擎则是解析 Javascript

一个Unix内核级别漏洞(一)

翻译原创稿件,prison整理翻译,首发ichunqiu,原地址:http://lsd-pl.net/kernelvuln.pdf 这是一篇关于Unix内核级别漏洞的paper,由某团队发布在一次黑客挑战上,内容很有深度,但有条理,翔实的为读者说明了该漏洞可能造成的影响,以及漏洞利用的过程.另外因为是paper形式,所以比较严谨,值得研究.难度系数:四颗星,本文较长,耐心看完的额都学到了本事! 1.引言 2.ldt x86 bug 2.1  问题描述 2.2  Solaris2.7 2.8 x8

浏览器内核、缓存的介绍第二部分

 一.浏览器内核是用什么开发的 C#, C ,C++,delphi,ObjC 等都可以 理论上你几乎可以用任何语言, 比如你用Flash做个可以输入地址载入页面的exe也未尝不可, 同样python也是可以的. 但是由于对这类使用密度很大的工具应用需要考虑综合性能,所以最好是能够高效执行的代码,比如上面的delphi和一批C系的语言. 二.浏览器中的单核与双核 浏览器双核是指有两套软件用来展示网页(即渲染引擎),如果一个引擎展示某个网站失败,就会自动换用引擎,保证网页完美显示. 例如 搜狗双