web资源基础认识和加载

web资源的基础认识和加载

由于自己大约在一年之前写了一点自己对web资源的认识，发现自己比较长时间没有更新bolg了，于是把之前的这篇文章进行了整理发布出来，希望大家能够多提意见，也希望能够对大家有一点帮助。个人认为这些流程对构建整体的资源加载还是有一点用处的，可能实际工作中大部分都是工具完成的，自己本身是不需要考虑的。

首先自己从认识web资源开始

web资源包括的类型做了一个简单的整理

• html: html页面
• javascript:javascript文件
• css样式表：
• 图片：各种各样的图片资源，包括png，jpeg等
• svg:用于绘制的svg的2d矢量图形表示
• css Shader：支持cssShader文件，目前webkit支持该功能。
• 视频音频和字幕：多媒体资源及支持音视频的字幕文件（textTrack）
• 字体文件： css支持自定义字体，css3引入的自定义字体文件
• xsl样式表：使用XSLT语言编写的xslt文件，可用于对xml文件的样式布局

基础加载过程

图片1.png

这里的缓存是属于内存缓存，不是网络栈的磁盘缓存从资源池查找资源的关键字是标记资源的唯一特性url。也意味着两个资源有不同的url，但他们的内容完全一样，也被认为是不同的资源

资源加载器

图片2.png

资源和加载器之间的关系
元素所需要的资源 ------------ 特定的资源加载器----------缓存资源加载器-------------通用资源加载器

资源加载的基础过程

图片3.png

从上面图可以看到资源没有缓存，加载是一个较为费时的过程。为了更好的处理资源浏览器做了一下处理

• 1.在webkit中采用了异步的操作方式，使资源的加载和对页面的解析渲染互补影响。
• 2.js错误或者其他操作可能会阻碍对页面的解析和资源加载，在webkit中如果当前的解析渲染主线程被阻碍，webkit会启用一个新的线程收集加载后面相关的url资源。

资源加载的基础协议

• 协议的基本类型

  
  
  

  图片4.png

• 协议的选择过程

  
  
  

  图片5.png

通过我们都采用http协议来加载资源的。
http协议更详细的内容可参考以下资源
相关参考文档(互联网公共领域的标准应用的应用层协议)（rfc）
可在协议分析网（http://www.cnpaf.net/class/rfcall/）上查找
http1.0对应1945号文档
http1.1对应2616号文档
不过http2已经出来了，大家可自行查找。

资源的生命周期

• 1)问题：web相关的资源属于html文档的对象，因此web资源的缓存池的大小是有限的，不能无限的大，这样一来，问题就来了，资源必须有相应的替换方式，以保证有新的资源可以加入

  处理办法：webkit中用了LRU算法（最近最少使用）

• 2)问题：资源加载后，会放入到资源缓存区，如果一段时间后刷新该页面，会怎样加载该资源了，是继续使用缓存的资源，还是加载新的资源，有可能该资源在这段时间内被更新了

  处理办法：在webkit中，对于部分资源需要发送请求重新加载，对于大部分资源采取的措施是利用http协议，来确认该资源是否已被更新，需要重新加载。首先判断该资源是否在缓存区，如果在缓存区，则利用http协议发送一个请求给服务端，该请求包括了该资源的一些本地信息（修改时间等），以便和服务器端进行确认，如果没有更新，则返回状态码304（或提示from memory cache），如果被更新请求下载最新资源。

资源优化的基本处理

通过对上面资源和资源加载的整体大局的认识，因此可得出资源优化的基础方案。

• 1）预处理：需要的资源请求链接，（例如DNS预处理，减少链接重定向，大量访问的链接）
• 2）避免错误的链接：尽可能的避免已经失效的链接
• 3）资源压缩：压缩文本，图片，音视频等资源
• 4）资源合并：（例如许多小的图片，合并成一张大图可以减少网络请求次数）

资源初次加载时个人简单的想法

（以下不合理之处大家指出来，不要喷奥，哈哈）

• 1）初次加载时采用较为简单的静态页面作为首屏显示

• 2）进入首屏后，在再首屏的停留时间可以用来缓存一些数据的加载，降低用户在感觉上的等待时间

• 3 ）提前一步加载下一步可能需要的资源，让下一步的资源尽可能的保持在缓存区

    相对的缺点：如果该用户不在进入我们已加载的资源。就可能造成了该次预加载资源的浪费。
  

以上过程是从一个大局对web资源和加载的简单认识，没有从细节上分析每一个步骤和处理方法。也是一个自己之前对资源加载的整体入门，也希望自己以后对各个环节有更为深入的认识，也希望对大家有一点帮助。