WebKit加载流程 - 概述

简介: 之前写了几篇加载流程的说明,是从下向上看,有点只见树木不见森林的感觉。经过最近一段时间的学习,有了能加以概括抽象的方法。WebKit加载流程和页面组成是直接相关的,页面就是WebKit要加载的对象。

之前写了几篇加载流程的说明,是从下向上看,有点只见树木不见森林的感觉。经过最近一段时间的学习,有了能加以概括抽象的方法。

WebKit加载流程和页面组成是直接相关的,页面就是WebKit要加载的对象。所以WebKit负责加载的类也与负责页面管理的类相对应。Apple关于WebView的说明里清楚表现了页面视图上的MVC结构:

Structure

一个页面从元素上也有其层次结构,并且和加载类对应,如下:

Loading

从页面元素上讲WebView代表了一个页面的呈现,对应一个Page. 一个Page包含一个或多个Frame,其中一个称为Main Frame,其它的Frame(iframe或object元素引入HTML)称为Sub Frame。每一个Frame,从JavaScript里都有一个window和document对象。


页面中的Frame,Document和子资源,对应到加载的FrameLoader, DocumentLoader和SubresourceLoader。其中Frame可以进行导航(Navigation)操作,即加载、重新加载、前进、后退操作,而Document则表示一个具体的HTML文档,没有导航操作。


从这里看到的几个Loaders都是加载的逻辑表示,实际的加载行为交给ResourceLoader(s),即MainResourceLoader和SubresourceLoader来完成,其中包括了资源加载的队列管理操作(ResourceLoadScheduler)。

Loaders


ResourceHandle在WebKit中是一个重要的port接口,与各个平台的网络层适配,代表了一个具体的网络加载任务。


主要类的关系

Classes


FrameLoader加载时序

从上面可以知道FrameLoader代表了Frame的加载行为,DocumentLoader代表了Document的加载行为。为了区分加载的进程,FrameLoader对加载状态进行了区分,并且让DocumentLoader在不同的状态间转换。除此之外FrameLoader还另外使用一个状态机,管理Frame加载显示的状态(FrameLoaderStateMachine)。

States

除此之此,FrameLoader还要维护历史项(HistoryController),以对应处理Navigation操作, 详细项目定义在FrameLoaderTypes.h中。


Document Loader

相对FrameLoader而言,DocumentLoader相对简单一些,它的任务就是调用一个MainResourceLoader加载主文档。因为状态的转换在FrameLoader里完成了。子资源的加载依托于DocumentLoader来管理。


子资源的加载

正如页面元素从属于Document存在一样,负责子资源的加载的类从属于Document,后来又移到了DocumentLoader类中。就形成了下面的关系:

SubResources

CachedResourceLoader

至于CachedResourceLoader,其实就是一个封装类,封装了创建各类CachedResource的功能。各个需要进行加载的页面元素会继承自CachedResourceClient,创建CachedResourceRequest, 通过DocumentLoader/Document里的CachedResourceLoader发起请求。

States

下面是Script元素发起请求的调用:

ScriptElement



Memory Cache/Application Cache

为了让用户有更快的应用体验,缓存机制不能少。在WebKit里CachedResource/CachedResourceLoader的命名里之所以有了Cached,就是因为它们中缓存的交互。

SubResources


WebKit也有一些算法上的说明,可以参考这里


Resource Load Scheduler

Scheduler

在HostInformation里存储着两个两个列表,一个是使用不同优先级数组存储的等待加载的列表,一个是正在加载的列表。

使用scheduleServePendingRequests处理排队的请求时,会按优先级依序执行。下面是基本流程:

Scheduler


以上就是加载流程的概要性说明,中间缺少一些流程内容,可以参考以下两个链接:
  [WebKit]WebCore之页面加载的设计与实现(二)
  [WebKit]WebCore之页面加载的设计与实现(三)

转载请注明出处: http://blog.csdn.net/horkychen


目录
相关文章
|
17天前
|
前端开发 JavaScript UED
如何优化前端网页加载速度:最佳实践与技巧
本文探讨了如何通过优化前端网页加载速度来提升用户体验和网站性能。从资源压缩和合并、减少HTTP请求、优化图片、使用CDN加速、采用异步加载和延迟加载等方面介绍了一系列最佳实践和技巧,帮助开发者更好地优化前端性能,提升网页加载速度。
|
1月前
|
Web App开发 JSON 移动开发
mPaaS常见问题之加载不到uc 内核如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
22 0
|
4月前
|
前端开发 程序员
CSS基础详细解析(附带综合小练习)(2)
文本缩进 属性名:text-indent 属性值:
39 0
|
4月前
|
前端开发 JavaScript
CSS基础详细解析(附带综合小练习)(1)
目标:掌握 CSS 属性基本写法,能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)。
36 0
|
编解码 小程序 前端开发
【微信小程序】小程序支持的css选择器、小程序自适应单位rpx简介
在小程序里,长度单位既可以使用rpx,也可以使用px,使用rpx可以使组件自适应屏幕的高度和宽度,但是使用px不会。
228 0
|
前端开发
​canvas 高级功能(上)
​canvas 高级功能(上)
​canvas 高级功能(上)
|
前端开发 数据可视化
​canvas 高级功能(中)
​canvas 高级功能(中)
​canvas 高级功能(中)
|
存储 JavaScript 前端开发
【精简版】浏览器渲染机制(完整流程概述)(上)
【精简版】浏览器渲染机制(完整流程概述)(上)
224 0
|
存储 缓存 Android开发
【精简版】浏览器渲染机制(完整流程概述)(下)
【精简版】浏览器渲染机制(完整流程概述)(下)
268 0
|
存储 缓存 NoSQL
180729-Quick-Task 动态脚本支持框架之任务动态加载
前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么这么设计到最终的实现给予说明
113 0