尹立-CSDN博客

原创 Chromium/WebKit的缓存机制

[本文属于原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/details/22300467]现在假设用户用Chrome浏览器打开www.sohu.com主页，点击主页上的NBA导航链接，就跳转到sohu主页的NBA子页面中，在浏览完NBA子页面后，用户又想回到主页面，这次点击浏览器窗口上的后退按钮，即可回到主页面，这一切似乎很平常，只是让

2014-03-27 16:45:04 6643 3

原创 Chromium开源项目的代码统计

【欢迎转载，转载时请注明出处http://blog.csdn.net/yl02520/article/details/22098281】项目概述Chromium是由Google公司主导开发的一个开源项目，其中Chrome浏览器就是基于该开源项目的产品。其目的是为了提供一个快速、安全、稳定的web运行平台，从而促进Web应用（尤其是HTML5）的发展。Chromium是一个复杂而庞大的开源项

2014-03-25 21:18:12 4518

原创 Chromium的启动流程

1. 在不同平台上程序入口点的函数不同，在Linux平台上为main函数，Windows平台为wWinMain函数，之后都是调用Chrome的入口ChromeMain函数，在Linux平台上是直接在main函数中调用，而在Windows平台上程序先加载DLL文件，然后从DLL中进入ChromeMain函数。2. ContentMain作为Content模块的入口，该函数必须实现

2014-03-15 23:30:01 4108

翻译 Chromium的多进程资源加载

【欢迎转载，转载时，请注明出处http://blog.csdn.net/yl02520/article/details/21285745】原文出自Chromium的官方文档Multi-processResource Loading，本文一部分来自对原文的翻译，另外也对原文某些部分做了必要的修改和补充，也添加了一些自己的理解。在阅读本文之前，建议先阅读另外一篇博文“Chromium浏览器的多

2014-03-15 15:21:30 3078

翻译 Chromium如何显示网页

【欢迎转载，转载时，请注明出处http://blog.csdn.net/yl02520/article/details/21251867】本文主要介绍Chromium从下到上渲染和显示一个网页的各个主要组件，并对这些组件的功能给予阐述。在阅读本文之前，建议先阅读本人另外一篇博文“Chromium浏览器的多进程架构”。原文出自Chromium的官方文档，本文对原文一些内容进行了直接翻译，由于有些

2014-03-14 21:07:44 2866 1

翻译 Chromium浏览器的多进程架构

[欢迎转载，转载时请注明出处http://blog.csdn.net/yl02520/article/details/21192747]本文主要介绍Chromium的多进程架构，在原文的基础上添加里自己的一些理解。为什么引入多进程架构？在Chromium引入多进程架构之前，当前流行的浏览器都采用单进程实现，例如FireFox，IE，Safari等，浏览器所有的标签页都运行在同一个进程中

2014-03-13 22:09:05 3717

原创 WebKit的HTML解析顺序和优化

JavaScript和DOM文档解析的顺序总体上看，整个Web页面数据的解析处理模型是一个同步的过程，当在解析HTML文档时，一旦出现了标签，Web开发者期望JavaScript程序能够立即得到解析和执行，而HTML文档的解析流程就会被暂停，直到JavaScript脚本解析执行完毕后，才重新恢复原来的解析流程。当JavaScript脚本可以存放在HTML外部，并非采用嵌入式的脚本时，那么Web

2014-03-11 20:00:06 3234

转载高性能Android Canvas游戏开发

[原文出自“UC技术博客” http://tech.uc.cn/?p=2414]UC在今年年初发布了支持硬件加速的实验室版，开始实验性地支持对2D Canvas进行硬件加速。在之前发布的9.3版本中开始分开两个版本 – 普通版和加速版，针对中高端手机的加速版开始正式支持硬件加速2D Canvas渲染。并且在即将发布的9.4加速版还会带来全新的Canvas渲染架构，进一步提升性能和减少对系统

2014-03-09 10:13:39 2463

原创 WebKit中的JavaScript Binding

什么是JavaScript Binding？在html页面中，我们可以通过JavaScript语句来访问DOM节点，例如document.createElement(“canvas”); 可是document所指向的对象HTMLDocument存在于WebKit中，通过C++实现的，并不存在于JavaScript的引擎中，所以如果想要在web页面中也能通过JavaScript来访问webkit

2014-03-07 16:55:21 3665 1

原创 HTML5游戏引擎中音频的播放策略

随着HTML5 API的不断丰富和浏览器对HTML5支持的不断完善，基于HTML5开发的游戏引擎也慢慢流行，Web开发者基于HTML5游戏引擎开发的游戏可以很好的实现跨平台功能，例如游戏开发者基于Android开发一款游戏，马上就能运行在iOS设备上，这大大减少了游戏的开发周期，对开发者来说是最大的实惠。在游戏引擎中，音乐的播放是必须的，目前我们见到的游戏中几乎都有背景音乐，那

2014-02-25 21:05:51 3204

原创 WebKit/Blink 如何加载网页资源？

在浏览器渲染网页并呈现给用户之前，首先需要通过网络加载网页资源，这里把资源分成两种，一种是类似Frame的主资源文件，另外一种为类似图片，JavaScript，音频或视频的子资源文件。从WebKit的官方博客上https://www.webkit.org/blog/1188/how-webkit-loads-a-web-page/可以得知，WebKit加载这两种资源的方式不同，在代码中采用

2014-02-21 11:28:22 2849

原创 WebKit/Blink 渲染网页的主要步骤

1. 发送网络资源请求。 WebKit在渲染网页之前，首先需要从网络上下载资源文件，这里把资源文件分为两类，一类称为主资源文件，比如Frame，另外一类成为子资源文件，比如图片，JavaScript脚本，CSS脚本，字体，音频视频文件等等。以前WebKit在加载这两种资源文件时采用不同的路径，主资源文件通过DocumentLoader类来加载，子资源文件通过DocLoader类来加载

2014-02-19 09:49:28 3581

原创 HTML5 API --- Screen Orientation API简介

[本文属原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/]在移动平台的游戏中，我们经常需要通过倾斜或旋转移动设备来控制游戏中的元素，例如赛车游戏中我们需要左右倾斜来控制赛车的左右转向，神庙逃亡游戏中我们同样需要左右倾斜移动设备来控制人物行走位置的方向。设想一下，如果设备的倾斜让游戏画面产生旋转，游戏画面需要重绘来适应屏幕尺寸的改变，那对游

2014-02-16 16:04:37 8905

原创 WebKit中Page，Frame和Document的关系

在chrome浏览器中，打开一个新的标签页时，渲染进程就会创建一个新的WebView，该WebView是整个网页生成和渲染的入口，它是WebKit提供的一个公共接口。WebView的构造函数中会创建一个新的Page对象，它和WebView是一一对应的，每个WebView只存在一个Page对象。在WebView对象创建时需要立即给Page分配一个MainFrame才能完成整个WebView的初始化。

2014-02-16 12:27:44 5814

原创 HTML5 API---使用WebAudio API播放音频文件

WebAudio API主要是为音频文件添加音效而设计的，但是它也可以用来播放音频文件，这类似于HTML5 audio元素的功能，只是audio元素可以有控制界面，用户可以点击界面上的播放/停止按钮来控制文件的播放，也可以拖动界面上的进度条来控制播放进度。而采用WebAudio API实现的音频播放则没有控制界面，但对于移动平台Android，IOS确实非常有用的，例如在Android平台上Chr

2013-12-14 22:14:49 8377

原创 Chromium源码浅析---单例模式(Singleton Pattern)在Chromium中的应用

单例模式是一种常见的软件设计模式，该模式设计的目的是只允许系统中出现一个该类的实例。在Chromium的多进程架构中，有且只有一个Browser进程，所有的Renderer进程都与Browser进程通信，共享Browser进程中的资源，为了保证每个Renderer进程获取资源的统一性，所以在Browser进程引用了大量的单例模式来设计资源类，例如AudioManager，BrowserMainLo

2013-12-07 20:06:01 2630

原创 HTML5 API --- 页面可见性改变(visibilitychange)事件

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。虽然这只是一个简单的功能，但是能够广大的采用HTML5开发游戏的开发者提供方便，比如用户正在玩游戏时，突然切换到后台去发一条短信或打一个电话，再切换到游戏，那么开发者就需要捕捉对这些突发情

2013-12-06 21:44:52 13650

原创 HTML5 API ---WebAudio API与audio元素简介

HTML5中关于音频处理和播放的API有两个，即WebAudio和audio，很多人会把它们混为一团，其实它们是分别为不同的目的而设计的。下面分别给予简要介绍。WebAudio主要是用来对音频数据添加音效，例如过滤掉音频数据中的杂音让声音听起来更加圆润，也可以动态设置倾听者相对于音源的位置，让每个位置听起来的效果不一样，这在游戏中是经常需要的，就像我们在打反恐精英游戏中，在不同的位置听到敌人的

2013-12-06 21:09:31 3700

原创 Chromium源码浅析---委托模式(Delegate Pattern)在Chromium中的应用

Chromium是一个复杂的开源项目，其中应用了丰富的设计模式来组织代码，应用最广泛的应该算是Delegate Pattern（委托模式）。什么是委托模式？根据维基百科的解释，委托模式就是在面向对象的编程中，某些类自己不执行一些任务，并把这些任务委托给另外一个类去执行，那么执行任务的类就被称为委托类。下面是一个典型的Java实例（摘自http://www.princeton.edu/~

2013-12-01 19:42:30 3574

原创 Chromium原码浅析 --- Chromium多线程的实现

上文对Chromium中多线程机制做了简要说明，下面从代码上加以分析。Chromium多线程机制的实现可以说堪称经典，可以为我们好好学习和模仿。每一个线程中包含有一个MessageLoop，MessageLoop实际上可以看作是任务的队列，线程就是不停的从MessageLoop中选择任务投入运行。一个任务运行完毕后，再从队列上选择下一个任务投入运行，直到队列上没有任务为止，然后线程处于休眠

2013-11-30 19:44:19 2596

原创 Chromium源码浅析 --- Chromium的多线程机制

Chromium是一个多进程架构，里面包含Browser进程，Render进程和GPU进程等等，而在每个进程中又包含有丰富的线程，特别是在Browser进程中，由于Browser进程是其他所有进程的总管，负责的任务具备多样性和复杂性，比如响应用户的输入，与Render进程和GPU进程通信，打开或读取各种文件设备操作等等。如果把这些任务统统放在一个线程中去实现，就不能很好的发挥CPU多核的功能，另外

2013-11-28 16:21:14 2296

原创 Chromium源码浅析 --- MessagePort通信的实现

MessagePort是HTML5中新增加的一个API，它能完成不同上下文之间的消息传递，例如Worker上下文与Document上下文之间的通信就是通过MessagePort来实现的，也可以利用MessagePort来实现浏览器中多个标签页之间的通信。MessagePort对象一般封装在MessageChannel中使用，当开发者申请一个MessageChannel对象时，就得到了配对的两个Me

2013-11-28 14:36:37 2689 1

原创 HTML5 API --- 跨文档消息(cross-document message)简介

为什么引入跨文档消息机制？现假设在一个网页中包含有一个Frame子页面，暂且称网页为主页面，Frame为子页面，一般情况下，主页面需要传递消息给子页面，完成对子页面进行控制，典型的应用就是在页面中嵌入广告或嵌入地图应用，广告或地图设计为一个子Frame，它需要接收父页面的控制消息，完成相应的广告画面变换或地图位置的跳转等功能。而这里通常情况下广告页面或地图页面都是由第三方服务商提供的，所以它们

2013-11-27 16:34:46 3083

原创 HTML5 API --- Web Worker的高级用法

Web Worker是HTML5引进的一个重要的API，它让一直受人诟病的单线程运行的JavaScript有了多线程的能力，有了Web Worker，开发者就可以把一些重量级耗时的计算任务单独放在另外一个线程中去运行，这样就可以让多个线程同时运行，最大限度的发挥CPU多核的功能。Web Worker基本的用法如下：var worker = newWorker(“background.js”

2013-11-22 10:54:32 4369

原创 Chromium源码浅析--- Content API (一)

[本文属原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/]为什么要开发Content 模块？正如我们所知，Chromium是一个非常复杂的开源项目，其复杂程度类似于一个操作系统。Google的Chrome浏览器就是基于Chromium开源项目开发而来。现在假设有个公司或组织计划基于Chromium开发一款自己的浏览器或类似浏览器的应用程序，该怎么进行呢？考虑直接基于Chrome模块来开发会带来什么问题呢？

2013-11-16 22:06:47 5908

原创 HTML5 Video/Audio播放本地文件

这段时间经常看到开发者在反复询问同一个问题，为什么通过设置src属性，不能播放本地的媒体文件？例如video.src=”D:\test.mp4”。这是因为浏览器中的JavaScript不能直接直接访问本地资源（例如文件系统，摄像头，麦克风等），除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的，试想一下，如果JavaScript能够肆无忌惮的访问本地的文件系统，那么窃取用户隐私数据

2013-11-10 17:42:10 37408 16

原创 Google Blink开发者大会浅议

上个月有幸参加Google在旧金山举行的Blink开发者大会，终于见到了业界的顶尖工程师（Adam Barth, Eric Seidel, Kenneth Russell, Kentaro Hara等），第一次把名字和人对上号了。前段时间一直很忙，现在才有时间静下心来把会议的主题和自己的见解写出来。

2013-11-07 21:11:33 2538

原创 Chrome浏览器中的JavaScript多线程---WebWorker

我们知道浏览器中的JavaScript是单线程执行的，如果遇到重量级的计算任务时，一般需要运行很长时间，这样就会造成UI任务来不及响应，带来不好的用户体验。那么如何在JavaScript中使用多线程来解决这类问题呢？HTML5引入了新的Web Worker API，它让一段JavaScript程序运行在主线程之外的另外一个线程或进程中。Chrome对Web Worker API也有了基本的支持，在Android平台上虽然还存在缺陷，但是不影响基本使用。

2013-11-07 10:25:58 11837

原创 WebRTC --- Chrome Android平台上的硬件加速编解码分析

WebRTC是一个实时的视频通信功能，Android平台上的Chrome也提供了支持，在Chrome 29之后WebRTC功能趋于稳定，所以在之后的版本中默认被打开。也就是说不需要在”chrome://flags”中手动去打开该功能。本节主要介绍一下Android平台上Chrome支持WebRTC硬件加速编解码的现状：首先介绍一下WebRTC的视频传输的大致流程，摄像头在一端拍下图片，然后

2013-11-05 11:11:32 7335

原创浅议Google从WebKit的分离

最近Google forked了WebKit，开始自主研发基于webkit的Blink浏览器引擎，向Apple发起了挑战。一切似乎那么突然，但回头想想，一切貌似都是必然。究其原因，个人觉得有以下原因： 1. Google和Apple的发展方向不一致。Google正在力推HTML5，让开发者能利用HTML5的强大功能来开发Web APP，在webkit上HTML5的绝大部分功能

2013-05-17 10:27:11 6662

原创 WebSocket（5）-- WebSocket Server

如果要搭建一个Web服务器，我们会有很多选择，市场上也有很多成熟的产品供我们应用，比如开源的Apache，安装后只需简单的配置（或者默认配置）就可以工作了。但是如果想搭建一个WebSocket服务器就没有那么轻松了，因为WebSocket是一种新的通信协议，目前还是草案，没有成为标准，市场上也没有成熟的WebSocket服务器或者Library实现WebSocket协议，我们就必须自己动手写代码去

2012-03-18 11:29:41 30892 7

原创 WebSocket（4）-- WebSocket与TCP、Http的关系

WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。WebSocket和Http协议一样都属于应用层的协议，那么他们之间有没有什么关系呢？答案是肯定的，WebSocket在建立握手连接时，数据是通过http协议传输的，正如我们上一节所看到的“GET/chat

2012-02-27 16:09:49 31987 8

原创 WebSocket（3）-- WebSocket协议简介

WebSocket协议是一种双向通信协议，它建立在TCP之上，同http一样通过TCP来传输数据，但是它和http最大的不同有两点：1.WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；2.WebSocket需要通

2012-02-27 15:30:41 33967 6

原创 WebSocket（2）--为什么引入WebSocket协议

Browser已经支持http协议，为什么还要开发一种新的WebSocket协议呢？我们知道http协议是一种单向的网络协议，在建立连接后，它只允许Browser/UA（UserAgent）向WebServer发出请求资源后，WebServer才能返回相应的数据。而WebServer不能主动的推送数据给Browser/UA，当初这么设计http协议也是有原因的，假设WebServer能主动的推送数

2012-02-27 14:56:05 42450 11

原创 WebSocket（1）-- WebSocket API简介

WebSocket是html5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如Chrome，Safrie，Firefox，Opera，IE等等，对该协议支持最早的应该是chrome，从chrome12就已经开始支持，随着协议草案的不断变化，各个浏览器对协议的实现也在不停的更新。该协议还是草案，没有成为标准，不过成为标准应该只是时间问题了，从WebSocket草案的提出到现在已经有十几个版

2012-02-26 20:39:17 105103 8

HTML5, Chromium和WebKit技术