《WebKit 技术内幕》之四(1): 资源加载和网络栈

news2024/11/14 11:36:59

第四章 资源加载和网络栈

        使用网络栈来下载网页和网页资源是渲染引擎工作的第一步

1.WebKit 资源加载机制

1.1 资源

网页本身就是一种资源、网页还需要依赖很多其他的资源(图片、视频)

(1)HTML 支持的资源主要包括以下几种类型:

HTML 页面,包括各式各样的HTML元素

  • JavaScript
  • CSS
  • 图片
  • SVG
  • CSS Shader
  • 音频、视频、文字
  • 字体文件
  • XSL样式表:使用XSLT语言编写的XSLT代码文件

(2)在webkit种通过不同的类来表示这些资源,webkit为这些资源提供了一个公共基类 CachedResource

(3)Webkit 资源类

  • 公共基类是CachedResource,各种资源以其子类的方式存在
  • HTML文本在WebKit中,类型叫MainResource类,与其对应的资源类型叫CachedRawResource类。
  • 这些类都有Cached前缀,是因为效率问题而引入的缓存机制,所有对资源的请求都会先获取缓存中的信息,以决定服务器提出资源请求。

1.2 资源缓存:

        使用资源缓存是为了提高资源的利用率。 基本思想是建立一个资源的缓存池,当 WebKit 需要请求资源时,先从资源池中查找是否存在相应的资源(根据资源的 URL 标识不同资源),如果有则取出以便使用,没有就创建一个新的 CachedResource 子类对象,发送真正的请求给服务器,WebKit 收到资源后将其设置到该资源类的对象中去,以便于缓存(这里的缓存指内存缓存)后下次使用。这里的缓存指的是内存缓存,而不同于后面在网络栈部分的磁盘缓存。

WebKit从资源池中查找资源的关键字是URL,因为标记资源唯一性的特征就是资源的URL。这也意味着,假如两个资源有不同的URL,但是它们的内容完全一样,也被认为是两个不同的资源。

1.3  资源加载器

WebKit有三种类型的加载器:

  • 针对每种资源类型的特定加载器:仅加载某一种资源。对于image对应是特定资源加载器是ImageLoader类,对于CSS自定义字体,它的特定资源加载器是Font Loader类。这些资源加载器没有公共基类,其作用就是当需要请求资源时,由资源加载器负责加载并隐藏背后复杂的逻辑。加载器属于它的调用者。

  • 资源缓存机制的资源加载器:所有特定加载器都共享它来查找并插入缓存资源,CachedResourceLoader 类,特定加载器首先是通过缓存机制的资源加载器来查找是否有缓存资源,它属于 HTML 文档对象。

  • 通用资源加载器:ResourceLoader 类,在 WebKit 需要从网络或者文件系统获取资源的时候使用 ResourceLoader 类只负责获得资源的数据,因此被所有特定资源加载器所共享,它属于 CachedResource 类。但它同CachedResourceLoader类没有继承关系(这点容易混淆)。

这样设计WebKIt加载器,主要是为了将其中的复杂机制逐渐简化为若干简单的步骤。

1.4   加载过程:

        通常一些资源的加载时异步的(如图片、css文件),其获取和加载不会阻碍当前 WebKit 的渲染过程。

        但特殊资源如 JavaScript 代码文件的加载会阻碍主线程的渲染过程,这会严重影响 WebKit 下载资源的效率,后面可能还有许多需要下载的资源。 WebKit 的做法是:当前主线程被阻碍,启动另外一个线程去遍历后面的 HTML 网页,收集需要的资源的 URL,然后发送请求,同时能够并发下载这些资源(甚至 JavaScript 代码资源)。

1.5   资源的生命周期:

资源池中的资源生命周期:LRU 算法(Least Recent Used 最近最少使用)

        对于判断下次使用的时候是否需要更新该资源(服务器可能在某段时间之后更新了该资源):WebKit 的做法是首先判断资源是否在资源池中,如果是则发送一个 HTTP 请求给服务器说明该资源在本地的一些信息,服务器更具该信息作判断,如果没有更新则发送回状态码 304(缓存命中)表明无需更新,直接利用资源池中原来的资源,否则 WebKit 申请下载最新的资源内容(这里可以参考 http权威指南 中的缓存模块)。可以通过开发者工具中的 network 打开或关闭此机制,实现的原理就是直接清除 MemoryCache 对象中的所有资源(全局唯一),清除该资源后就会重新打开缓存机制,这样就会在资源池中找不到所要请求的资源,请求报文中就不会有条件首部字段。

1.6 资源缓存实践

        设置取消缓存的调用栈,可以看到缓存的资源的关系。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1398059.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【动态规划】【C++算法】741摘樱桃

作者推荐 【动态规划】【数学】【C算法】18赛车 涉及知识点 动态规划 LeetCode741 摘樱桃 给你一个 n x n 的网格 grid ,代表一块樱桃地,每个格子由以下三种数字的一种来表示: 0 表示这个格子是空的,所以你可以穿过它。 1 表…

Golang 搭建 WebSocket 应用(六) - 监控

我在上一篇文章中,提到了目前的认证方式存在一些问题,需要替换为一种更简单的认证方式。 但是最后发现,认证这个实在是没有办法简单化,认证本身又是另外一个不小的话题了,因此关于这一点先留个坑。 本文先讨论一下另外…

前端开发必备 HTML的常用标签(二)

目录 一、HTML语言 二、水平线标签 三、字体样式标签 四、注释和特殊符号 一、HTML语言 HTML(Hypertext Markup Language)是一种标记语言,用于创建网页的结构和内容。它由一系列的标签组成,这些标签定义了网页中各个元素的结…

商铺工厂119消防火灾SOS声光一键报警器平台联网

商铺工厂119消防火灾SOS声光一键报警器平台联网 1.设有火灾自动报警系统的建筑,宜选择符合相关现行国家技术标准的消防应急广播、火灾声光警报类产品,由火灾报警或消防联动控制器进行控制,在消防控制室应能一键启动全楼火灾声光警报或向全楼进…

阿里云腾讯七牛内容安全配置

一,阿里云 1,配置RAM角色权限 向RAM用户授权系统策略权限:AliyunYundunGreenWebFullAccess 2,内容安全控制台——授权访问OSS 不授权——会报错——no permission(not authorized about role AliyunCIPScanOSSRole)

Pytest插件“pytest-selenium” - 让自动化测试更简洁

在现代Web应用的开发中,自动化测试成为确保网站质量的重要手段之一。而Pytest插件 pytest-selenium 则为开发者提供了简单而强大的工具,以便于使用Python进行Web应用的自动化测试。本文将深入介绍 pytest-selenium 插件的基本用法和实际案例,助你轻松进入无忧的Web应用测试之…

LeetCode 9.回文数(python版)

需求 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。 例如,121 是回文&#xff0…

【惠友小课堂】正确认识「股骨头坏死」,必读!

在上一篇门诊故事中讲到的孙女士,一开始觉得自己腿疼的原因可能是股骨头坏死,结果在王教授的诊断下发现其实是髋关节发育不良,给出的专业建议是需要进行髋关节置换手术治疗。这恰恰反映了一个情况,很多病人会把“腿疼”的原因归咎…

【GitHub项目推荐--微软开源的可视化工具】【转载】

说到数据可视化,大家都很熟悉了,设计师、数据分析师、数据科学家等,都需要用各种方式各种途径做着数据可视化的工作.....当然许多程序员在工作中有时也需要用到一些数据可视化工具,如果工具用得好,就可以把原本枯燥凌乱…

中国电子学会2021年12月份青少年软件编程Scratch图形化等级考试试卷一级真题(含答案)

一、单选题(共25题,每题2分,共50分) 1.点击下列哪个按钮,可以让正在运行的程序停下来?()(2分) A. B. C. D. 2.小乔完成了一个编程作品后,点击“文件”中的“保…

【Linux】Linux基本操作(二):rm rmdir man cp mv cat echo

承接上文: 【【Linux】Linux基本操作(一):初识操作系统、ls、cd、touch、mkdir、pwd 】 目录 1.rmdir指令 && rm 指令: rmdir -p #当子目录被删除后如果父目录也变成空目录的话,就连带父目录一…

【设计模式】文件目录管理是组合模式吗?

组合模式是什么? 组合模式是一种将对象组合成树形结构以表示"部分-整体"的层次结构的设计模式。它使得用户对单个对象和组合对象的使用具有一致性。 组合模式在什么情况下使用? 当你发现你需要在代码中实现树形数据结构,让整体-部…

户外机器人区域覆盖算法仿真测试平台设计与实现(预告)

要求14周完成。一定要熟练掌握人工智能工具的使用。 起伏地形环境多机器人编队运动控制与路径规划研究_2016年中小结-CSDN博客 简要版本 随着机器人技术的快速发展,户外机器人在农业、环境监测、搜索与救援等领域的应用日益广泛。为了实现高效、准确的区域覆盖&…

基于docker创建nginx容器

docker一键安装可以参考我这个博客:一键安装docker 1.创建基础容器 docker run -p280:280 --name nginx -d nginx创建挂载到容器的宿主机文件夹 mkdir -p /home/000nginx-ebrms-ftp/html mkdir -p /home/000nginx-ebrms-ftp/logs mkdir -p /home/000nginx-ebrms-f…

FPGA高端项目:Xilinx Artix7 系列FPGA纯verilog图像缩放工程解决方案 提供4套工程源码和技术支持

目录 1、前言版本更新说明给读者的一封信FPGA就业高端项目培训计划免责声明 2、相关方案推荐我这里已有的FPGA图像缩放方案本方案在Xilinx Kintex7 系列FPGA上的应用本方案在国产FPGA紫光同创系列上的应用本方案在国产FPGA高云系列上的应用 3、设计思路框架设计框图视频源选择o…

vue中引入sass、scss

常规步骤 1. 创建项目 使用vue cli 脚手架工具创建项目 vue create xxxx2. 创建全局样式文件 全局样式变量 路径:/assets/styles/variables.scss //flex 布局变量 $--flex-direction: ("row", "column"); $--flex-position: ("start"…

如何从命令行运行testng.xml?

目录 创建一个新的java项目并从命令行运行testng.xml 使用命令行运行XML文件 从命令行运行现有maven项目的XML文件 在这篇文章中,我们将使用命令行运行testng.xml。有多种场景需要使用命令行工具运行testng.xml。也许您已经创建了一个maven项目,现在想…

2024执业医师考试报名流程及上传照片要求详解

2024年执业医师和助理医师考试的报名工作将于1月22日正式启动,报名截止日期为2月4日。建议考生尽早报名,以避免在报名截止日期临近时出现拥挤情况。您可根据本文介绍,提前准备好报名所需资料、证件照电子版和相关证明材料,并了解报…

【算法】使用优先级队列(堆)解决算法题(TopK等)(C++)

文章目录 1. 前言2. 算法题1046.最后一块石头的重量703.数据流中的第K大元素 2.5 如何选择大根堆 与 小根堆? 为什么选择大根堆(小根堆)?692.前K个高频单词295.数据流的中位数 1. 前言 我们知道:优先级队列是一种常用…

C# .NET读取Excel文件并将数据导出到DataTable、数据库及文本

Excel文件是存储表格数据的普遍格式,因此能够高效地读取和提取信息对于我们来说至关重要。C#语言借助.NET Framework和各种库的广泛功能,能够进行高效的数据操作。利用C#读取Excel文件并将数据写入数据库和DataTable,或者将数据用于其他目的&…