web資源的基礎認識和加載
由于自己大約在一年之前寫了一點自己對web資源的認識，發(fā)現(xiàn)自己比較長時間沒有更新bolg了蟀瞧，于是把之前的這篇文章進行了整理發(fā)布出來翎冲，希望大家能夠多提意見棘钞，也希望能夠對大家有一點幫助。個人認為這些流程對構建整體的資源加載還是有一點用處的柿估，可能實際工作中大部分都是工具完成的，自己本身是不需要考慮的陷猫。
首先自己從認識web資源開始
web資源包括的類型做了一個簡單的整理
- html: html頁面
- javascript:javascript文件
- css樣式表：
- 圖片：各種各樣的圖片資源秫舌，包括png，jpeg等
- svg:用于繪制的svg的2d矢量圖形表示
- css Shader：支持cssShader文件绣檬，目前webkit支持該功能足陨。
- 視頻音頻和字幕：多媒體資源及支持音視頻的字幕文件（textTrack）
- 字體文件： css支持自定義字體，css3引入的自定義字體文件
- xsl樣式表：使用XSLT語言編寫的xslt文件娇未，可用于對xml文件的樣式布局
基礎加載過程
這里的緩存是屬于內存緩存墨缘，不是網絡棧的磁盤緩存從資源池查找資源的關鍵字是標記資源的唯一特性url。也意味著兩個資源有不同的url零抬，但他們的內容完全一樣镊讼，也被認為是不同的資源
資源加載器
資源和加載器之間的關系
元素所需要的資源 ------------ 特定的資源加載器----------緩存資源加載器-------------通用資源加載器
資源加載的基礎過程
從上面圖可以看到資源沒有緩存，加載是一個較為費時的過程平夜。為了更好的處理資源瀏覽器做了一下處理
- 1.在webkit中采用了異步的操作方式狠毯，使資源的加載和對頁面的解析渲染互補影響。
- 2.js錯誤或者其他操作可能會阻礙對頁面的解析和資源加載褥芒，在webkit中如果當前的解析渲染主線程被阻礙嚼松，webkit會啟用一個新的線程收集加載后面相關的url資源。
資源加載的基礎協(xié)議
-
協(xié)議的基本類型
圖片4.png -
協(xié)議的選擇過程
圖片5.png
通過我們都采用http協(xié)議來加載資源的锰扶。
http協(xié)議更詳細的內容可參考以下資源
相關參考文檔(互聯(lián)網公共領域的標準應用的應用層協(xié)議)（rfc）
可在協(xié)議分析網（http://www.cnpaf.net/class/rfcall/）上查找
http1.0對應1945號文檔
http1.1對應2616號文檔
不過http2已經出來了献酗，大家可自行查找。
資源的生命周期
-
1)問題：web相關的資源屬于html文檔的對象坷牛，因此web資源的緩存池的大小是有限的罕偎，不能無限的大，這樣一來京闰，問題就來了颜及，資源必須有相應的替換方式甩苛，以保證有新的資源可以加入
處理辦法：webkit中用了LRU算法（最近最少使用）
-
2)問題：資源加載后，會放入到資源緩存區(qū)俏站，如果一段時間后刷新該頁面讯蒲，會怎樣加載該資源了，是繼續(xù)使用緩存的資源肄扎，還是加載新的資源墨林，有可能該資源在這段時間內被更新了
處理辦法：在webkit中，對于部分資源需要發(fā)送請求重新加載犯祠，對于大部分資源采取的措施是利用http協(xié)議旭等，來確認該資源是否已被更新，需要重新加載衡载。首先判斷該資源是否在緩存區(qū)搔耕，如果在緩存區(qū)，則利用http協(xié)議發(fā)送一個請求給服務端痰娱，該請求包括了該資源的一些本地信息（修改時間等）度迂，以便和服務器端進行確認，如果沒有更新猜揪，則返回狀態(tài)碼304（或提示from memory cache）惭墓，如果被更新請求下載最新資源。
資源優(yōu)化的基本處理
通過對上面資源和資源加載的整體大局的認識而姐，因此可得出資源優(yōu)化的基礎方案腊凶。
- 1）預處理：需要的資源請求鏈接，（例如DNS預處理拴念，減少鏈接重定向钧萍，大量訪問的鏈接）
- 2）避免錯誤的鏈接：盡可能的避免已經失效的鏈接
- 3）資源壓縮：壓縮文本，圖片政鼠，音視頻等資源
- 4）資源合并：（例如許多小的圖片风瘦，合并成一張大圖可以減少網絡請求次數(shù)）
資源初次加載時個人簡單的想法
（以下不合理之處大家指出來，不要噴奧公般，哈哈）
1）初次加載時采用較為簡單的靜態(tài)頁面作為首屏顯示
2）進入首屏后万搔，在再首屏的停留時間可以用來緩存一些數(shù)據的加載，降低用戶在感覺上的等待時間
-
3 ）提前一步加載下一步可能需要的資源官帘，讓下一步的資源盡可能的保持在緩存區(qū)
相對的缺點：如果該用戶不在進入我們已加載的資源瞬雹。就可能造成了該次預加載資源的浪費。
以上過程是從一個大局對web資源和加載的簡單認識刽虹，沒有從細節(jié)上分析每一個步驟和處理方法酗捌。也是一個自己之前對資源加載的整體入門，也希望自己以后對各個環(huán)節(jié)有更為深入的認識，也希望對大家有一點幫助胖缤。
