前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Webkit底层原理(2)--资源加载和网络栈

Webkit底层原理(2)--资源加载和网络栈

作者头像
从入门到进错门
发布2019-10-22 14:44:55
7130
发布2019-10-22 14:44:55
举报
文章被收录于专栏:前端菜鸟变老鸟

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

代码语言:txt
复制
                 本文链接:[https://blog.csdn.net/caomage/article/details/101990551](https://blog.csdn.net/caomage/article/details/101990551) 

资源加载和网络栈

使用网络栈下载网页和网页中的资源是渲染引擎工作的第一步,也是非常耗时间的一步。

一、Webkit资源加载机制

1. 资源

网页本身就是一种资源,例如图片、视频等。HTML支持的资源主要有以下类型:

  1. HTML:HTML元素;
  2. JavaScript:JavaScript代码,可以内嵌在HTML文件中,也可以单独以文件形式存在;
  3. CSS:层叠样式表,可以内嵌在HTML文件中,也可以单独以文件形式存在;
  4. 图片:各种编码格式的图片;
  5. SVG:用于绘制SVG的2D矢量图形表示;
  6. 字体文件:CSS3支持自定义字体; ……

2. 资源缓存

资源的缓存机制是提高资源使用效率的有效方法。它的基本思想是建立一个资源的缓存池,当Webkit需要请求资源的时候,先从资源池中查找相应的资源,如果存在,测从资源池中取,如果不存在,则发送请求到服务器获取。如下图:

3. 资源加载器

按照加载器的类型,Webkit一共有三种类型的加载器:

  1. 针对每种资源类型的特定加载器,其特点是仅加载某一种特定的资源。例如:图片加载器、字体加载器;
  2. 资源缓存机制的资源加载器,其特点是所有特定加载器都共享它来查找并插入缓存资源。特定加载器先通过缓存机制的资源加载器来查找是否有缓存资源;
  3. 通用资源加载器,Webkit需要从网络或者文件系统获取资源的时候使用它,因此它被所有的特定资源加载器共享。

4. 整个加载资源的过程

具体的加载过程可以看之前我写的一篇关于浏览器缓存原理的文章,很详细!

浏览器缓存详细介绍

二、Chromium多进程资源加载

资源的实际加载在各个Webkit移植中有不同的实现。Chromium采用的是多进程的资源加载机制。Renderer进程在网页的加载过程中需要获取资源,但是由于安全性和效率上的考虑,Renderer进程的资源获取实际上是通过进程间通信将任务交给Browser进程来完成,Browser进程有权限从网络或者本地获取资源。

三、网络栈

1. 网络栈的基本组成

网络栈的基本组成如下图:

2. 网络栈的调用过程

首先是URLRequest被上层调用并启动的时候,它会根据URL的scheme来决定需要创建什么类型的请求。scheme就是URL的协议类型,例如:“http://” 、“file://”,也可以是自定义的协议。其次,会创建一个对象URLRequestHttpJob,该对象从Cookie管理器获取与该URL相关联的信息。之后,开启一个HTTP连接的事务。再然后是建立套接字。如果用户设置了代理,则还需要其他代理相关的对象提供支持。

3. 域名解析(DNS)

通常情况下,用户都是使用域名来访问网络资源的,所以在建立TCP连接前需要解析域名。当然,Chromium使用一个单独的线程来处理它。同样,为了考虑效率,也会使用相应缓存对象对域名和地址映射关系进行保存。我们可以在地址栏输入:chrome://net-internals/#dns来清除Chrome浏览器的DNS缓存信息。

4. Cookie机制

Cookie是一项很古老的技术,因为简单易用,所以从诞生就收到广泛的应用。Cookie格式就是一系列的键值对,如下:

test=webkit;test2=chromium;Expires=2019-10-19T10:33:18.797Z;Domain=.test.con

其中test和test2是自定义关键字,Expires和Domain是预定义关键字,表示失效时间和该Cookie对应的域。基于安全性考虑,一个网页的Cookie只能被该网站自身访问。根据失效时间Cookie分为会话型(Session Cookie)和持久型(Persistent Cookie)。会话型当浏览器退出的时候即清除,没有失效时间的Cookie就是会话型。而持久型Cookie当浏览器退出的时候仍然保留,直到失效时间。在有效期内,每次访问服务器,浏览器都自动将Cookie带上。

5. 高性能网络栈-DNS预取和TCP预连接(preconnect)

DNS预取技术,主要思想是利用现有的DNS机制,提前解析网页中可能的网络连接。具体来讲,当用户正在浏览当前网页的时候,Chromium提取网页中的超链接,将域名抽取出来,利用比较少的CPU和网络带宽来解析这些域名或IP地址,用户根本感觉不到这一过程。当用户点击这些超链接的时候会省不少时间。

写网页的时候可以指定预取哪些域名,具体做法是:

<link rel="dns-prefetch" href="http://test.com">

当然,DNS预取技术不仅应用于网页中的超链接,当用户在地址栏中输入地址后,候选项同输入的地址很匹配的时候,在用户敲下回车键之前,Chromium已经开始使用DNS预取技术解析该域名了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/10/03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 资源加载和网络栈
  • 一、Webkit资源加载机制
    • 1. 资源
      • 2. 资源缓存
        • 3. 资源加载器
          • 4. 整个加载资源的过程
          • 二、Chromium多进程资源加载
          • 三、网络栈
            • 1. 网络栈的基本组成
              • 2. 网络栈的调用过程
                • 3. 域名解析(DNS)
                  • 4. Cookie机制
                    • 5. 高性能网络栈-DNS预取和TCP预连接(preconnect)
                    相关产品与服务
                    云服务器
                    云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档