HTML5, WebKit, Chromium

转载请注明出处：http://blog.youkuaiyun.com/milado_nju/# Chromium渲染主循环(mainloop)和requestAnimationFrame## 概述曾经写过一段JavaScript代码，因为涉及到需要循环调用某个函数来实现动画的功能，很自然地，我想到了使用setInterval函数（或者setTimeout，大家是否有类似经历呢？），然后心满意足

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju## 概述回顾整个渲染过程，本系列介绍了HTML文本到DOM到Render树及RenderLayer树，以及后面的绘图等，这里面还缺了一块重要部分，就是WebKit如何加载各种资源和网络栈。这里资源是指WebKit从网络或者本地文件系统获取的各种信息，例如HTML文本，JavaScript文本等。本章将介

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7854312# WebKit布局(layout)基础## 概述一个网页从文本信息到最后的渲染结果，要经过很多复杂的过程，前面介绍过DOM树、Render树的创建，也阐述了页面如果被渲染的，其实，这两者中间还有一个非常重要的步骤――布局计算，这是因为在渲染每个元素之前，渲

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju# HTML解析和DOM## 概述前面介绍了很多眼花缭乱的新技术，关于渲染，关于硬件加速，关于布局，关于其他很多，同大家一样，我也花了很多时间来消化它们。本章介绍稍微基础些的话题（本系列的写作顺序完全是随心所欲地），就是在渲染整个过程的初始阶段---HTML解析。不过这不表示它简单，其实这里是非常绕人

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7685517# CSS在WebKit和Chromium中的实现## 概述前面章节介绍了CSS的三种基本要素，大概可以分成选择器，各种基本样式和CSS3引入的变形、变换和动画等。本章在此基础上，着重介绍CSS是如何在WebKit和Chromium得到支持的。首先介绍的

转载请注明出处：http://blog.youkuaiyun.com/milado_nju/关注Web和HTML5领域的人最近应该都有了解WebKit项目的重磅消息，那就是Google退出WebKit项目，创建自己的渲染引擎Blink。这其实不能说完全没有先兆，合合分分，纯属正常。其实，之前关于WebKit2，双方的争论就非常的大。Apple希望它可以随便加入和删除代码而无需担心它会破坏其它Ports

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7216136# 插件机制(NPAPI plugin)## 概述Chromium中的NPAPI插件(plugin)来源于mozilla的插件机制。因为它被广泛的应用，很多插件厂商或者开发者基于它编写了数以万计的插件，因而chromium对它也提供了支持，不过chromiu

1. 讲稿地址：http://djt.qq.com/ppt/2372. 一些个人见解，不一定准确，欢迎发表自己的观点：http://www.infoq.com/cn/news/2013/04/interview-zhuyongsheng

abchttps://docs.google.com/presentation/d/1dDE5u76ZBIKmsqkWi2apx3BqV8HOcNf4xxBdyNywZR8/edit?pli=1#slide=id.g9ade3ed5_017

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju1. 什么是JavaScript引擎什么是JavaScript引擎？简单来讲，就是能够提供执行JavaScript代码的运行环境。要解释这一概念，需要了解一些编译原理的基础概念和现代语言需要的一些新编译技术。首先来看C/C++语言。它们是比较悠久的语言了，实际上就是使用编译器直接将它们编译成本地代码，这一切都是由开发

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju这几年来，我阅读了很多WebKit和Chromium的代码，也给它们提交过一些的代码补丁包(patch)，一个感觉是代码量真的很大，常常看了这块忘了那块；另一个感觉是文档真的很少，特别是WebKit（chromium有不少设计文档，但是还不够详细，不够系统）。这让我觉得非常痛苦，常常摸不着头绪。鉴于自己的经历，觉得很

转载请注明出处：http://blog.youkuaiyun.com/milado_nju/# Chromium的Android版## 概述在前面的Chromium的移动版章节中，我们对Chromium的Android版作过简单介绍，本章则进一步阐述其中的细节。2012年，Google发布了第一版的ChromeFor Android。该产品受到了巨大的关注，但是同桌面版的Chrome浏

转载请注明出处：http://blog.youkuaiyun.com/milado_nju/# 浏览器简介浏览器发展到今天还是很令人吃惊的，这很大程度上得益于互联网的快速发展和新的技术不断涌现。浏览器的核心是渲染引擎，通常也称为浏览器的内核，其是将文本，图片等信息渲染成图像，这也是浏览器的主要功能。现代浏览器的始祖应该是1993发布的Mosaic，其领导者Marc Andreessen也就是Net

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7300074在“WebKit，WebKit2，Chromium和Chrome介绍”中，大致了解了WebKit是一个渲染引擎，Chromium是一个浏览器，它们那么分别包含哪些不同的功能模块？它们是如何划分地？本章节来为大家详细解读一下。WebKit:1. HTML解

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7455348# Chromium的软件渲染基础## 概述本章将介绍chromium渲染的最基础部分，同时也是最常见的部分－软件渲染。故名思路，软件渲染就是利用CPU，根据一定的算法来计算生成网页的内容，其没有那么多复杂难懂的概念和架构。如果了解了那么多地关于硬件加速的知

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7293012# Canvas 2D及其在WebKit和Chromium中的实现## 概述Canvas是HTML5新引入的元素，它是一个画布。开发者可以用JavaScript脚本在该元素上绘制任意图形（2D或者3D）。Canvas元素有两个属性“width”和“heigh

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7292164##概述在介绍本系列各个专题之前，有必要先解释一下极其容易混淆的几个概念，它们是WebKit，WebKit2，Chromium和Chrome。首先来了解WebKit。广义上来说，WebKit是一个开源的项目，其前身是来源于KDE的KHTML和KJS。该项

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7455373# Content API及CEF3## 概述相信你一定看过下面这张图（没看过的话去上官网阅读一下“how chromium displays web pages”）。这是一幅介绍页面如果被渲染和显示的概括性的层次结构图。Renderer进程

转载请注明来源： http://blog.youkuaiyun.com/milado_nju/article/details/7300058WebKit和Chromium的代码量很大(这两个项目都是几百万行代码的级别，不包括它们依赖的第三方库），读起来是相当的不容易。但是良好的代码组织结构很好的帮助了开发者和学习者们，下面大致介绍一下它们的目录结构及其用处，方便了解和学习，进而快速地理解整个项目。因为

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7293065# WebGL及在WebKit和Chromium中的实现## 概述前面章节介绍了Canvas2D，同时也介绍了在canvas中同样也可以绘制3D图形，也就是Canvas3D或者称为WebGL。同Canvas2D不一样的是，WebGL标准草案不是由W3C来起草

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7292174# Chromium硬件加速合成(hardware accelerated compositing)## 概述在介绍硬件加速合成之前，让我们先大概了解一下基本的做法是如何渲染生成网页内容的。一个网页通常可以包含很多层，这个我们在WebKit渲染基础中讲过

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7216117Chromium的界面相当简洁，这是她的设计理念。大体上可以把界面分成两个主要部分：网页内容和外边的修饰控件（例如，tab管理，工具栏，设置按钮等）。整个chromium浏览器是个顶层窗口。每个tab都对应一个顶层窗口的子窗口，每个网页内容都会绘制在一个子窗口中

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7292131# WebKit渲染基础## 概述WebKit是一个渲染引擎，而不是一个浏览器，它专注于网页内容展示，其中渲染是其中核心的部分之一。本章着重于对渲染部分的基础进行一定程度的了解和认识，主要理解基于DOM树来介绍Render树和RenderLayer树的构建由

转载请注明来源： http://blog.youkuaiyun.com/milado_nju/article/details/7529549# CSS初探## 概述先谈谈HTML网页的开发者们所遭遇地痛苦和悲惨的经历。在CSS出现前或者出现早期，HTML因为要设计不同风格和样式的元素，所以在不停地加入很多新的元素来表示，例如p，span。然后，问题还是存在，那就是大量的使用表格（Table）元

## 数据对比前面介绍过Chromium WebView的时候，说过有关ChromiumWebView同Chrome浏览器有很多不同之处，下面以Chromium Content Shell来对比来描述Chromium WebView，这是因为Chrome浏览器的渲染机制等同Content Shell是类似的，不过Chrome浏览器上层代码是源的，所以笔者使用自己编译的Content Shell来分