HTML5, WebKit, Chromium

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

转载请注明原文地址：http://blog.csdn.net/milado_nju

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

相信读者已经注意到了，在最新的Android 4.4 Kitkat版本中，原本基于Android WebKit的WebView实现被换成基于Chromium的WebView实现。在前面的章节中，笔者也介绍过基于Chromium的WebView实现即将成为Android系统上的缺省实现方式，笔者也一直期待这一重大转变，现在它真的发生了。而之前基于WebView接口的应用程序甚至可以直接工作在该实现上而不需要任何特别的改变。举个例子来说，Android系统上的缺省浏览器（AOSP中的浏览器），可以不需要任何改变

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

转载请注明原文地址：http://blog.csdn.net/milado_nju##概述##

转载请注明原文地址：http://blog.csdn.net/milado_nju## 概述## Packaged App和Host App## Crosswalk参考资料1. https://www.crosswalk-project.org/2. https://github.com/crosswalk-project/crosswalk

转载请注明原文地址：http://blog.csdn.net/milado_nju##概述##

转载请注明原文地址：http://blog.csdn.net/milado_nju## 概述想象一下，如果没有磁盘缓存的世界。当用户访问网页的时候，每次浏览器都需要从网站下载网页，图片，JS等资源，这其实费力又不讨好。解决这一问题的方法就是将之前浏览器下载的资源保存下来，存到磁盘中，以备今后使用。当然，资源有时效性，也会变的不再有效，所以有相应的退出机制来解决这一问题。在现代浏

#概述

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

转载请注明原文地址：http://blog.csdn.net/milado_nju##概述前面介绍了WebKit中的资源加载机制，其实它只是一个框架性的东西，实际的资源加载依赖于各个WebKit移植的实现。在Chromium中，它采用了多进程资源加载机制。本章带你了解背后的故事。##多进程资源加载机制Chromium的资源加载机制，其实也就是实现ResourceHandle之下

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

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

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

转载请注明原文地址：http://blog.csdn.net/milado_nju## 概述熟悉Android系统和HTML编程的人可能都听说过Android提供的一个重要类android.webkit.WebView，它继承于View类，这是它同其它很多控件的相似之处。不同之处在于，它能够用来渲染网页。当前，WebView的实现是基于现有的缺省WebKit内核（Android缺省

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

转载请注明原文地址：http://blog.csdn.net/milado_nju/article/details/8107712#Chromium的移动版 (Chromium for Mobile)##概述Chromium的诞生于桌面（desktop)系统之上的，这其中包括Windows， Linux和Mac。这奠定了Google Chrome的地位，市场份额不断上升。随着移动操作系

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

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

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

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

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

转载请注明原文地址：http://blog.csdn.net/milado_nju/article/details/7216145# Chromium的GPU硬件加速## 概述这里所说的GPU硬件加速是指应用GPU的图形性能对chromium中的一些图形操作交给GPU来完成，因为GPU是专门为处理图形而设计，所以它在速度和能耗上更有效率。但是，使用GPU加速有些额外开销，并且某些图形操

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

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

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

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

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

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

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

转载请注明出处：http://blog.csdn.net/milado_nju/# 消息循环## 概述前面介绍了线程间如何传递chromium自定义任务(task)，那么在线程内，消息循环（messageloop）是如何处理这所有的消息和任务呢？本章节重点介绍消息循环的工作原理。在Chromium里，需要处理三种类型的消息：chromium自定义的任务，Socket或者文件等I

转载请注明出处：http://blog.csdn.net/milado_nju/# Chromium多线程机制## 概述前面我们介绍过Chromium是基于多进程模型的架构设计，那么各个进程内的情况呢？事实是每个进程都有很多的线程，特别是browser进程，因而它也基于多线程模型的。介绍多线程机制之前，先来看一下残酷的现实吧，下面是各个进程的线程信息情况(基于Linux平台，其它平

转载请注明原文地址：http://blog.csdn.net/milado_nju/article/details/7725510#Chromium的进程模型##概述相信你一定有这样的经历：打开很多个页面，不幸的是其中某个页面不响应了或者崩溃了，随之而来的是更不幸的事，所有页面都不响应或者都崩溃了。最让人崩溃的是其中一些页面还有未保存或者未发送的信息！这绝对是不堪回首的过去。但是，

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

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

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

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