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

第四章 资源加载和网络栈

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

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.mfbz.cn/a/334556.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【并发编程系列】putIfAbsent和getOrDefault用法

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

高效火情监测,科技助力森林防火【数字地球开放平台】

数字地球开放平台-以卫星遥感为核心的空天信息服务开放平台 (geovisearth.com) 2019年3月30日,四川省凉山州木里县爆发了一场森林火灾,火点位于海拔3800米左右,地形险峻、坡度陡峭、谷深难以抵挡火势。在扑救的过程中,27名森林消防…

服务器自动拉取git代码运行脚本

# 1.场景分析 工作中常常会遇到本地编辑shell脚本或者python脚本完成后需要在服务器上运行的情况,每次进行拷贝费时费力。下面介绍下通过git管理器,实现本地与服务器代码同步的方式。选择公司搭建的gitlab为例: 2.gitlab配置服务器ssh密钥 …

【陈老板赠书活动 - 22期】- 人工智能(第三版)

陈老老老板🧙‍♂️ 👮‍♂️本文专栏:赠书活动专栏(为大家争取的福利,免费送书) 🤴本文简述:活就像海洋,只有意志坚强的人,才能到达彼岸。 👳‍♂️上一篇文章&#xff…

shopee西班牙站选品:如何在Shopee西班牙站点上进行选品策略

在Shopee西班牙站点进行选品时,卖家需要考虑一系列策略,以确保产品符合当地市场需求并取得良好的销售业绩。以下是一些关键策略,卖家可以参考并应用到自己的选品过程中。 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址&#xff0…

数据中心设备与线缆数据采集神器

​前言 在数据中心机房运维管理过程中,开展以下工作时通常我们采用手工表格的方式,效率低还容易出错,如: 数据中心机柜设备与线缆规划; 数据中心机柜设备与线缆变更记录; 数据中心机柜内设备与线缆数据采…

ACL【新华三与华为的区别】

【解释】acl简单点解释就是,一套根据需求而设置的规则 【背景】 192.168.1.0/24 网段不允许访问 192.168.2.0/24 网段,要求使用基本 ACL 实现20_1 可以访问 20_6 的 TELNET 服务,但不能访问 FTP 服务 【操作步骤】 {易混点 }:1. …

小扎宣布进军AGI!Meta正在训练Llama 3,目标是60万块H100!模型仍会开源

今日,扎克伯格在Instagram上通过一则视频官宣,Meta要进军AGI了! 扎克伯格认定Meta的长期愿景是构建通用智能,将其负责任地开源,使其广泛可用并造福全人类,扎克伯格还透露了以下几点信息: 1、将…

探索设计模式的魅力:“感受单例模式的力量与神秘” - 掌握编程的王牌技巧

在软件开发的赛场上,单例模式以其独特的魅力长期占据着重要的地位。作为设计模式中的一员,它在整个软件工程的棋盘上扮演着关键性角色。本文将带你深入探索单例模式的神秘面纱,从历史渊源到现代应用,从基础实现到高级技巧&#xf…

2024Java零基础自学路线(Java基础、Java高并发、MySQL、Spring、Redis、设计模式、Spring Cloud)

目录 一、Java基础1、Java 基础3、Java8新特性4、Java集合5、Java高并发6、Java代码实例 二、MySQL数据库三、Spring Boot框架(35天)四、微服务Spring Cloud四、Redis中间件五、MongoDB数据库六、Netty网络编程七、23种设计模式八、Dubbo九、JavaScript零…

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器(超详细!)

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器 注:本学习笔记基于stm32f4系列 使用的开发板为正点原子stmf407ZGT6探索者开发板 GPIO引脚使用时,可输入或输出数字信号 例如: 检测按键输入信号(Read_Pin)输出信号(W…

Git学习笔记(第2章):Git安装

官网地址:Githttps://git-scm.com/ Step1:查看Git的GNU协议 → 点击“Next” Step2:设置Git的安装位置(非中文、无空格的目录) → 点击“Next” Step3:选择Git的选项配置(推荐默认设置) → 点击“Next” Step4:设置Git…

MySQL复合查询解析

🎈行百里者半九十🎈 🎈目录🎈 概念多表查询自连接子查询单行子查询多行子查询in关键字all关键字any关键字 多列子查询在from中使用子查询合并查询unionunion all 总结 概念 之前我们很多的查询都只是对于单表进行查询&#xff0c…

vue3-表单输入绑定

表单输入绑定 获取表单输入的值方式&#xff1a; 手动连接值绑定和更改事件监听器 v-model 指令 &#xff08;常用&#xff09; <script lang"ts" setup> import { ref } from "vue" // 定义个变量接收输入的内容&#xff1a; const text ref(&…

源码:Spring常规Bean创建过程

Bean创建过程&#xff1a; 一、版本 5.3.10二、学习内容 Bean创建过程源码三、Bean生命周期 时间轴地址&#xff1a;点击 四、bean创建过程脑图总结 脑图地址&#xff1a;点击 五、源码过程 说明&#xff1a; bean创建入口一般都是通过getBean(xxx);方法进入的&#xf…

关于php8的数据类型转换

目录 1、数据类型介绍 1.1 简单数据类型&#xff1a; 1.2 复合数据类型&#xff1a; 1.3 特殊数据类型&#xff1a; 2、数据类型转换 2.1 自动转换&#xff1a; 2.2 强制&#xff08;手动&#xff09;转换&#xff1a; 3、验证数据类型途径 &#xff08;1&#xff09;var…

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

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

[flutter]GIF速度极快问题的两种解决方法

原因&#xff1a; 当GIF图没有设置播放间隔时间时&#xff0c;电脑上会默认间隔0.1s&#xff0c;而flutter默认0s。 解决方法一&#xff1a; 将图片改为webp格式。 解决方法二&#xff1a; 为图片设置帧频率&#xff0c;添加播放间隔。例如可以使用GIF依赖组件设置每秒运行…

esp ble app_register注册报错“Register with GATT stack failed”的问题解决

有规定注册app的最大值&#xff0c;默认是8个&#xff0c;减去固定的gatts和gattc就只剩6个&#xff0c;修改成你需要的值就行。 文件路径在esp-idf\components\bt\host\bluedroid\common\include\common\bt_target.h

飞书修改不了名称?飞书如何修改名称,修改昵称

飞书如何修改名称 点击编辑信息 在这里修改姓名就可以啦
最新文章