程序員必知的緩存套圖

文章目錄

  • 1. 線程與進程
    • 1.1 進程:
    • 1.2. 線程:
    • 1.3. 關系
  • 2. 瀏覽器內核模塊組成
  • 4. 事件循環機制
  • 5. 緩存
    • 5.1. 緩存理解
    • 5.2. 緩存分類
    • 5.3. 緩存使用示意圖
    • 5.4. 緩存中的header參數

1. 線程與進程

1.1 進程:

進程是計算機中的程序關于某數據集合上的一次運行活動,是系統進行資源分配和調度的基本單位,是操作系統結構的基礎。
在這里插入圖片描述

1.2. 線程:

線程是操作系統能夠進行運算調度的最小單位,被包含在進程之中,是進程中的實際運作單位。一條線程指的是進程中一個單一順序的控制流,一個進程中可以并發多個線程,每條線程并行執行不同的任務。

1.3. 關系

在這里插入圖片描述
每個進程都有相應的線程,在執行程序時,實際上是執行相應的一系列線程。進程是資源分配的最小單位,線程是程序執行的最小單位。

在這里插入圖片描述

2. 瀏覽器內核模塊組成

在這里插入圖片描述
在這里插入圖片描述

4. 事件循環機制

在這里插入圖片描述

在這里插入圖片描述
模型的運轉流程:

執行初始化代碼, 將事件回調函數交給對應模塊管理
當事件發生時, 管理模塊會將回調函數及其數據添加到回調列隊中
只有當初始化代碼執行完后(可能要一定時間), 才會遍歷讀取回調隊列中的回調函數執行

5. 緩存

在這里插入圖片描述

5.1. 緩存理解

  1. 緩存定義:
  2. 瀏覽器在本地磁盤上將用戶之前請求的數據存儲起來,當訪問者再次需要改數據的時候無需再次發送請求,直接從瀏覽器本地獲取數據
  3. 緩存的好處:
  4. 減少請求的個數
  5. 節省帶寬,避免浪費不必要的網絡資源
  6. 減輕服務器壓力
  7. 提高瀏覽器網頁的加載速度,提高用戶體驗
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
//是否啟用cookie
if(!cookiesEnabled){alert("沒有啟用cookie ");
}else{alert("已經啟用cookie ");
}

5.2. 緩存分類

  1. 強緩存
  2. 不會向服務器發送請求,直接從本地緩存中獲取數據
  3. 請求資源的的狀態碼為: 200 ok(from memory cache)
  4. 協商緩存
  5. 向服務器發送請求,服務器會根據請求頭的資源判斷是否命中協商緩存
  6. 如果命中,則返回304狀態碼通知瀏覽器從緩存中讀取資源
  7. 強緩存 & 協商緩存的共同點
  8. 都是從瀏覽器端讀取資源
  9. 強緩存 VS 協商緩存的不同點
    1. 強緩存不發請求給服務器
    2. 協商緩存發請求給服務器,根據服務器返回的信息決定是否使用緩存

5.3. 緩存使用示意圖

在這里插入圖片描述

5.4. 緩存中的header參數

在這里插入圖片描述

強緩存的header參數

  1. expires:
  2. 這是http1.0時的規范;它的值為一個絕對時間的GMT格式的時間字符串,如Mon, 10 Jun 2015 21:31:12 GMT,如果發送請求的時間在expires之前,那么本地緩存始終有效,否則就會發送請求到服務器來獲取資源
  3. cache-control:max-age=number
  4. 這是http1.1時出現的header信息,主要是利用該字段的max-age值來進行判斷,它是一個相對值;資源第一次的請求時間和Cache-Control設定的有效期,計算出一個資源過期時間,再拿這個過期時間跟當前的請求時間比較,如果請求時間在過期時間之前,就能命中緩存,否則就不行;
  5. cache-control常用的值(做一個簡單了解即可):
  6. no-cache: 不使用本地緩存,需要使用協商緩存。先與服務器確認返回的響應是否被更改,如果之前的響應中存在Etag,那么請求的額時候會與服務器端進行驗證,如果資源為被更改則使用緩存。
  7. no-store: 直接禁止游覽器緩存數據,每次用戶請求該資源,都會向服務器發送一個請求,每次都會下載完整的資源。
  8. public:可以被所有的用戶緩存,包括終端用戶和CDN等中間代理服務器。
  9. private:只能被終端用戶的瀏覽器緩存,不允許CDN等中繼緩存服務器對其緩存。
  10. 注意:當cache-control與Expires共存的時候cache-control的優先級高

協商緩存的header參數

重點:協商緩存都是由服務器來確定緩存資源是否可用的,所以客戶端與服務器端要通過某種標識來進行通信,從而讓服務器判斷請求資源是否可以緩存訪問

  • Last-Modified/If-Modified-Since:二者的值都是GMT格式的時間字符串
  1. 瀏覽器第一次跟服務器請求一個資源,服務器在返回這個資源的同時,在respone的header加上Last-Modified的header,這個header表示這個資源在服務器上的最后修改時間
  2. 瀏覽器再次跟服務器請求這個資源時,在request的header上加上If-Modified-Since的header,這個header的值就是上一次請求時返回的Last-Modified的值
  3. 服務器再次收到資源請求時,根據瀏覽器傳過來If-Modified-Since和資源在服務器上的最后修改時間判斷資源是否有變化,如果沒有變化則返回304 Not Modified,但是不會返回資源內容;如果有變化,就正常返回資源內容。當服務器返回304 Not Modified的響應時,response header中不會再添加Last-Modified的header,因為既然資源沒有變化,那么Last-Modified也就不會改變,這是服務器返回304時的response header
  4. 瀏覽器收到304的響應后,就會從緩存中加載資源
  5. 如果協商緩存沒有命中,瀏覽器直接從服務器加載資源時,Last-Modified的Header在重新加載的時候會被更新,下次請求時,If-Modified-Since會啟用上次返回的Last-Modified值
  6. 圖例:
    在這里插入圖片描述
  • Etag/If-None-Match

    1. 這兩個值是由服務器生成的每個資源的唯一標識字符串,只要資源有變化就這個值就會改變
    2. 其判斷過程與Last-Modified/If-Modified-Since類似
  • 既生Last-Modified何生Etag

    1. HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題
    2. 一些文件也許會周期性的更改,但是他的內容并不改變(僅僅改變的修改時間),這個時候我們并不希望客戶端認為這個文件被修改了,而重新GET
    3. 某些文件修改非常頻繁,比如在秒以下的時間內進行修改,(比方說1s內修改了N次),If-Modified-Since能檢查到的粒度是s級的,這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒);
    4. 某些服務器不能精確的得到文件的最后修改時間。

小結:
利用Etag能夠更加準確的控制緩存,因為Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符。

Last-Modified與ETag是可以一起使用的,服務器會優先驗證ETag,一致的情況下,才會繼續比對Last-Modified,最后才決定是否返回304。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248499.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248499.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248499.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

安裝webpack及使用

前言 你是否也是只會運用框架中集成好的Webpack配置呢?你明白每一項的意義么?你懂多少Webpack的個性化配置項呢?本篇文章為你講解Webpack中的各種配置項參數及作用! 文章目錄了解Webpack相關開啟項目編譯打包應用使用webpack配置…

Python基礎-os模塊 sys模塊

sys模塊 與操作系統交互的一個接口 文件夾相關 os.makedirs(dirname1/dirname2) 可生成多層遞歸目錄os.removedirs(dirname1) 若目錄為空,則刪除,并遞歸到上一級目錄,如若也為空,則刪除,依此類推os.mkdir(dirnam…

php單例型(singleton pattern)

搞定&#xff0c;吃飯 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single object. It is implemented by creating a method within the class that creates a new instance of that class if one does not exist. If an obje…

開啟關閉各種服務

開啟&關閉 Mac版 查找被占用的8080端口&#xff0c;根據pid殺掉進程 查找8080端口 losf -i:8080 根據pid殺掉進程 kill -9 pid iMac:~ acui$ lsof -i:8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 62948 ting 93u IPv6 0x6697d6…

助你提高效率的幾個Vue指令

前言 很多使用Vue的同學往往最容易忽略的指令&#xff0c;由于在這里考慮到很多初學甚至還沒有開始接觸Vue的同學呢&#xff0c;在介紹v-clos之前呢就先以大家都熟知的v-model編寫小demo v-model 相信大家對v-model并不陌生&#xff0c;簡單來講他就是用于在表單控件以及組建…

掌握Mock擺脫后端同學的束縛

文章目錄前言Mock概述mock.js安裝Mock規范Mock的使用總結前言 當下采用前后端分離模式開發Web應用已經成為氣候&#xff0c;在開發階段有一個不成文的規定則是 項目開發后端先行 但是作為前端開發工程師的我們&#xff0c;難道在搭建完頁面后只能等待后端的接口么&#xff1f;…

戶外鞋簡介

. 單論品牌&#xff08;主要以登山鞋及徙步鞋為主&#xff09;&#xff1a; 高級品牌&#xff1a;SCARPA、ASOLO、MONTRAIL、ZAMBERLAN、vasque、Lowa、La Sportiva 價格都較高&#xff0c;單價都在千元以上&#xff0c;品質一流&#xff0c;做工精細。 中檔品牌&#xff1a;Tr…

Vue技能樹上線啦

前言 前端現在越來越多樣化&#xff0c;語言眾多&#xff0c;大家使用的框架也比較雜&#xff0c;在廣泛的前端技術棧面前我唯愛Vue&#xff08;僅代表個人觀點勿噴小伙伴們&#xff09;可能很多人覺得我是因為簡單&#xff0c;其實并不然&#xff0c;我嘗試過很多框架&#x…

ES6的新特性(8)——數組的擴展

數組的擴展 擴展運算符 含義 擴展運算符&#xff08;spread&#xff09;是三個點&#xff08;...&#xff09;。它好比 rest 參數的逆運算&#xff0c;將一個數組轉為用逗號分隔的參數序列。 console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5[…

《SpringMVC從入門到放肆》一、概述

一、SpringMVC概述 ViewServiceDaoDBSpring MVCinterfaceinterfaceMysqlimplsimplsSpringMVC也叫Spring web mvc&#xff0c;屬于表現層框架。SpringMVC是Spring框架的一部分&#xff0c;是在Spring3.0后發布的。 二、第一個SpringMVC程序功能描述&#xff1a;  用戶提交一個…

手握流量密碼,萬粉不是夢

前言 可能大家來到CSDN的目的初衷都是不一樣的&#xff0c;像我注冊CSDN的時候完全是為了解決自己項目中的各種問題&#xff0c;能夠有一個為我提供正確答案、正確解決方案的一個平臺&#xff0c;簡單的了解后我選擇CSDN&#xff0c;直到成為現在的創作者也說明我的選擇是對的…

秋季學期學習總結

轉載于:https://www.cnblogs.com/zx666/p/10408950.html

一文帶你了解React框架

前言 由于 React的設計思想極其獨特&#xff0c;屬于革命性創新&#xff0c;性能出眾&#xff0c;代碼邏輯卻非常簡單。所以&#xff0c;越來越多的人開始關注和使用&#xff0c;認為它可能是將來 Web 開發的主流工具。 這個項目本身也越滾越大&#xff0c;從最早的UI引擎變成…

Web前端JQuery面試題(一)

Web前端JQuery面試題&#xff08;一&#xff09; 一&#xff1a;選擇器 基本選擇器 什么是#id&#xff0c;element&#xff0c;.class&#xff0c;*&#xff0c;selector1, selector2, selectorN&#xff1f;答&#xff1a; 根據給定的id匹配一個元素&#xff0c;用于搜索&…

前端云原生——微信小程序云服務配置

前端同樣涉及云原生前言創建使用云開發項目搭建云環境測試云服務1. 獲取openid&#xff08;上傳本地login云函數&#xff09;1.1 創建部署login文件時報錯2. 自定義sum函數并創建部署3. 上傳圖片4. 前端操作數據庫5. 即時通信demo面試法寶歡迎各位小伙伴們&#xff01; 為大家推…

45天帶你玩轉Node(第一天)初探Node.js

45天帶你玩轉Node 粉絲要求博主系統的寫一篇關于Node.js的學習資料&#xff0c;但其實我們的Node.js知識點并不少&#xff0c;所以博主為大家搭建了一個專欄&#xff0c;為了方便大家系統的學習Node.js&#xff0c;大家記得訂閱哦&#xff01;雖然我們的Node.js還很年輕&#…

VLC的一些接口

其他參考鏈接&#xff1a; 1、https://www.cnblogs.com/smartsensor/p/4343769.html /*Set the video scaling factor。 Zero is a special value; it will adjust the video to the outputwindow/drawable (in windowed mode) or the entire screen. */ 設置縮放系數 void li…

【轉載】 安卓版手機微信如何清理微信空間

在手機微信的使用過程中&#xff0c;隨著手機微信使用的時間越長&#xff0c;手機微信占用的空間越大&#xff0c;其實手機微信存儲了很多聊天記錄包括圖片、視頻等大文件信息&#xff0c;此時如果手機存儲空間比較緊張&#xff0c;可以使用微信自帶的清理工具對手機微信空間進…

45天帶你玩轉Node(第二天)走進Node.js

45天帶你玩轉Node 粉絲要求博主系統的寫一篇關于Node.js的學習資料&#xff0c;但其實我們的Node.js知識點并不少&#xff0c;所以博主為大家搭建了一個專欄&#xff0c;為了方便大家系統的學習Node.js&#xff0c;大家記得訂閱哦&#xff01;雖然我們的Node.js還很年輕&#…

Windows2008安裝組件命令行工具ServerManagerCmd用法介紹

轉自&#xff1a;http://blog.sina.com.cn/s/blog_537de4b5010128al.html Windows2008 安裝組件服務等內容比原來復雜的多&#xff0c;用鼠標點來點去&#xff0c;既繁瑣也緩慢&#xff0c;所幸微軟提供了命令行工具ServerManagerCmd.exe 用法: ServerManagerCmd.exe安裝和刪除…