cteng的专栏

HTML CSS布局的概念里，<img>和text默认都是inline的，但text默认不对应HTML Element（对应DOM的Text node）。当把图片<img>元素和文本默认放在一起时，由于默认文档流的流式布局，<img>图片元素和文本显示在一行上，基于文本的baseline位置水平对齐。奇怪的是，假如图片的高度不止一行文本时，则图片的右边只有一行文...

问题：1、img元素的onload设置后，设置/修改其src属性不会触发onload回调，因此你无法知道页面中的动态图片什么时候加载完，暂时只能setTimeout 5秒；2、页面JS捕获了scroll事件以做到延迟加载，这种情况下可以调用img Element的scrollIntoView，但问题是这个API设计得有问题，W3C那帮人就是白痴，照理说应该和ES6 JavaScript的P

一种基于浏览器内核修改的复杂网站layout/渲染bug的HTTP重放调试系统缘起做移动浏览器开发/浏览器内核定制修改的，总会遇到这么一些诡异的问题：某网站A，出现奇怪的渲染显示错误、UI界面阻塞、乃至突然崩溃。一般来说，我们有下面几种解决问题的思路：在浏览器内核代码中打log，前提是你已经大概估计到了问题原因的大概范围使用远程调试，即使用桌面版Chrome的D

全怪垃圾的Chrome？或者罪魁祸首是W3C？最新版本的浏览器一般都提供了oncopy事件，这使得网站JS可以监听并清空当前的系统Clipboard。 知乎网站也启用了禁止复制的功能。。。靠，本想F12通过DevTools查看源代码再复制出来，却发现每个段落没有使用单个的div或p元素，导致这么做也很麻烦。看起来，不得不做一个插件，绕过这种垃圾屏蔽机制。。。通过检测

http://nightly.webkit.org/builds/trunk/src/1Archived Nightly Builds of Trunkr18938455.2 MB2015-09-04 23:30:37 GMTr18918355 MB2015-09-01 01:42:00 GMTr174650

基于浏览器内核的被动式爬虫任务下发框架现有基于浏览器的客户端测试框架通过ChromeDriver这类组件来主动控制，但主动控制有缺点：重新load下一个页面时，上一个页面可能仍有JS代码在执行，或者网络层的连接阻塞、UI线程阻塞什么的；通过WebView接口注入执行的JS代码可能因为各种情况意外出错，出错的话无法获得通知无法可靠地向浏览器查询，获得当前任务是否已经执行完

浏览器客户端智能自动化：如何取得页面中JavaScript运行时动态生成的URL？需求“页面智能拼接”指的是通过启发式查询DOM树，判断出“下一页”链接，取出其href属性。Chromium的官方插件DOM Distiller完成类似的工作，主要目的就是为了将多页点击流程变成单页的Ajax连续阅读体验。问题是，现在有些网站为了阻止浏览器客户端这么做，将href属性设

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

测试代码：Duration: currentTime: var element_d = document.getElementById("d");var element_c = document.getElementById("c");var A = new Audio("test.mp3");A.loop=true;A.ondurationchange=function(){

此脚本的主要目的：让浏览器客户端首先通过此代理，然后再访问目标网站。可基于特定的url做正则表达式匹配，然后替换为本地修改的版本。    主要用于浏览器内核研发过程中某些怀疑是特定网站JS脚本执行出错导致的渲染异常bug。可在JS脚本中插入console.log以定位出错点。var ProxyPort = 8888;var http = require('http'), net

（1）通过某种UI操作，进入“信息收集”模式；（2）在此模式下，用户通过连续的touch事件选择他感兴趣的内容（实际上产生一个hit test命中一个element），最终创建的dom fragment将是这些element的LCA（最小公共祖先）；（3）序列化此fragment，此对应的html内容存储进浏览器本身的sqlite数据库中 注意，上述（2）最终的LCA要求整

# -*- coding: gbkimport SimpleHTTPServerimport BaseHTTPServerimport timeimport SocketServerimport osimport threadingimport socketimport re#下面的导入从SimpleHTTPServer.py复制：import posixpathimpo

还有一个是从AST直接生成机器码，但是这个现在已经被换成了Ignition（解释器）+TurboFan（类型优化编译器）的架构了。先说隐藏类：对一个JS对象的属性访问而言，最简单的解释器实现会把属性建模为运行时的hash查询。然而这个性能太慢，怎么优化呢？简单的说就是参考静态编译器的思路，把属性field的按名字访问，抹掉名字信息，变成按offset访问。——不过这样就需要一个clas

最近重新看Google Chromium讲Ignition的一个ppt，最后提及JSC是Direct-threaded dispatch，而v8属于Indirect-threaded dispatch。Contemporary JavaScript EnginesJavaScriptCore (Apple)● Direct threaded (== bigger code an

关于CSS布局的核心概念的快速入门指南# CSS布局的核心流程CSS布局的过程是‘’‘自顶向下’‘’的。即是说，最顶层的body元素对应最外面window的大小，父元素作为子元素的容器。当子元素超出父元素范围时，可以溢出、截断或者引入滚动视图。CSS布局无法实现类似于android里wrap-content的布局（即设置父view的size为恰好装下子view内容）。这里我

原题：https://gold.xitu.io/post/587dab348d6d810058d87a0a我发现又是腾讯这种变态公司。垃圾！垃圾！垃圾！简单的答案是基于CSSOM getComputedStyle()。当然这个不是面试官想要的答案。所以你再想一想，实际上要考虑多个元素叠在一起的时候，以及背景色带透明度的情况下，alpha blending的问题。当然，C

实现一个Web内容片段收集引擎的设想现在许多Web内容都不是开放提供的，而是由封闭的社交系统分享的。自动的浏览器爬虫通常爬取这些内容会遇到技术性困难（反爬虫），或者是robots.txt策略阻止。解决这个问题的思路就是引入人工协作式交互：封闭系统的授权用户可以选取这些封闭Web页面内容中的真正有价值的片段，然后将之复制收藏到另外一个系统（数据库）中。We

做浏览器内核引擎的，一般都会考虑怎么做性能优化，这个优化实际上包括下面的内容：（1）内存占用的优化，特别是对于嵌入式设备尤其重要，chromium有个blimp thin client的模块，不知道有没有用处；（2）渲染性能的提高，注意核心就是尽量利用硬件GPU来做渲染，避免CPU计算和内存Copy的开销（3）网络IO性能的提高，改善页面加载、响应数据，乃至云加速压缩流量、广告过滤屏蔽

之前的做法是使用PhantomJS以及一个html+嵌套iframe包含目标网站URL+跨域dom操作的简单性能优化。PhantomJS实现下面的核心需求：（1）无头模式，然而PhantomJS内核基于老版本的QtWebKit，与最新版本的Chromium代码相比，版本太老了，很多特性用不了（虽然目前国内网站应该也还没开始用上这些？比如ServiceWorker、CSS Custo

实现规范：（1）当浏览器parser模块解析main document html时，如果看到标签，则强制缓存此url web应用到diskcache（忽略服务器端设置的任何no-cache no-store expires等干扰缓存的响应头部）（2）默认加载行为（load_flag）打开LOAD_FROM_CACHE_IF_OFFLINE（M43版本上有，M50版本上似乎名字没了），如果n

来源参考：http://www.chromium.org/developers/design-documents/compositor-thread-architectureRender线程的stalls：  1，style recalc  2，sync network request  3，long painting times（复杂的页面内容？）  4，GCCompos

commit0c4e9d8781aea6e52fdb4a7aee978817910c67eaauthordongseong.hwang Thu Jan 08 20:11:13 2015committerCommit bot Thu Jan 08 20:12:02 2015media: Optimize HW Video to 2D Canvas copy.Currently,

Chrome 37Firefox 32IE 8TTF(TrueType)○○○╳OTF(OpenType)○○○╳WOFF○○○╳SVG╳○╳╳local()╳○○╳EOT╳╳╳○WOFF 2.0╳╳

浏览器内核引擎开发工作的主要关注点跳转至： 导航、 搜索目录1稳定性2性能3功能4其他因素稳定性 对Android浏览器这种既有Java代码又有C++代码来说，稳定性意味着：Java代码不应该有NPE（空指针异常）C++代码不能出现内存错误，包括：null deref指针越界访问

启动到浏览器（Fire OS, Chrome OS, Web OS）与浏览器容器化本文试图阐明2种不同的技术方案：一个是启动到浏览器（如Fire OS, Chrome OS, HP Web OS, Tizen Web Rutime），另外一个我称为浏览器容器化启动到浏览器相信大家多少已经有了解，它就是通过底层的驱动支持、HTML5 Device API等等，把浏览器内核做成整个

浏览器新实用功能开发研究：单页富客户端应用的会话/视图状态复制及远程同步功能目录1一个简单的使用场景2单页（富客户端）应用的会话/视图状态表示3状态复制及远程同步4SPA情景下的Web Cache变化一个简单的使用场景我之前成功地在3台机器上使用Google OAuth账户登陆过feedly，不幸的是，后来Google的账号登陆地址被

WebKit代码在资源受限的嵌入式环境下的定制问题传统的WebKit及Chromium为了性能和丰富的HTML5功能特性而优化，即使是iPhone或Android这样的手机移动设备，其内存也动辄以2G以上计。那么，当我需要在资源受限的嵌入式环境下运行WebKit，如何进行节省资源的裁剪定制呢？这里所谓的资源受限，指的就是像车载设备、智能电视这样的终端，CPU通常

在Windows Qt-4.8.x平台上编译Qt-5.0+ WebKit（即qtwebkit-2.3.x） Debug版注意事项跳转至： 导航、 搜索目录1C++编译问题1.1从idl生成.h/.cpp失败？1.2VS编译器版本1.3名字导出问题1.4找不到int64_t类型？1.5Windows上需要pt

Windows平台上编译Qt-4.8.x Debug版注意事项跳转至： 导航、 搜索目录1为什么要编译qt-4.8.x的Windows Debug版？21 MSVC版本的选择32 WinRAR的问题43 qmake子项目裁剪54 调试QtWebKit0 为什么要编译qt-4.8.x的Windows

解决隐私问题的一个绝妙方案：Big Shareable Browserx

2周之前经由猎头推荐给腾讯深圳投了份简历于是2周后我收到了电话面试的机会？？？我告诉他最近已经入职了然后他似乎有点不爽我说可以聊聊于是他开始得意洋洋地逼问我问题他可能以为我一直是做Android Chromium的然后问我移动网络下如何解决浏览速度问题我说先从DNS解析开始，找最快的服务器于是他追问，如果有几个服务器，如何处理？我说那就并发地发请求当

Hi, I've ported Chromium M39 to 4.4 using WebView.The main modifications are:I changed AwContents::RequestDrawGL to call AwContents::DrawGL directly using Process-Sync mode when canvas input i

今天有机会与Opera的老外聊天讨论，我英语不是熟练，没办法流利地交流，感觉在70%的样子。技术上给我印象深刻的几点：1、浏览器的apk做到16MB，而chromium官方的要28MB（注意opera是基于Blink的！）2、图片直接以YUV格式解压送到GPU，而不是标准的RGBA，这有效地降低了内存占用 （他们还曾提交过一个使用OpenGL压缩纹理的patch）3、C

https://trac.webkit.org/export/178624/trunk/Source/WebCore/ChangeLog 2015-01-15 Antti Koivisto Rename Font to FontCascade https://bugs.webkit.org/show_bug.cgi?id=140442 2015-01-11 Sam Weinig Remove su

commit80f54dc1ab629289946237227e5706e19b7e7594authordcheng Wed Jan 07 19:13:49 2015committerCommit bot Wed Jan 07 19:15:28 2015Implement the Clang plugin as a RecursiveASTVisitor.The current

但为什么在某些手机上（Nexus 4）没这个问题，在这台手机上就出问题了呢？

在这里，我不会解释太多的代码，没有必要，说说原理就可以了。AdBlock的广告拦截实际上分为2个部分：1、对于URL请求的拦截这一般都是页面中DIV元素嵌入一个IFRMAE/IMAGE元素，然后加载一个广告链接或者GIF图片什么的。这部分的规则库描述比较复杂。规则大概有几万条，即使对于国内的使用，可能也会有个1000条左右。不过我觉得没必要搞这么复杂，可以通过提取出

https://github.com/crosswalk-project/crosswalk/blob/master/runtime/app/android/xwalk_main_delegate_android.cc有人跟我说CrossWalk显示图像Swipe切换动画时，有黑条现象，相同的硬件运行环境。感觉应该是Render进程启动时配置的命令行Sswitches有关。果然

void ScriptLoader::handleSourceAttribute(const String& sourceUrl){ if (ignoresLoadRequest() || sourceUrl.isEmpty()) return;bool ScriptLoader::ignoresLoadRequest() const{ VLOG(0)"Sc

https://www.youtube.com/watch?v=DDLsMw7I1kU当窗口改变大小时，Firefox的渲染引擎会使得文字发生左右摆动的现象（看起来似乎是浮点数转换为整数时的精度问题），Chrome不会。Firefox太矬了