當前位置:首頁 » 硬碟大全 » 前端優化瀏覽器緩存管理
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端優化瀏覽器緩存管理

發布時間: 2022-01-30 05:01:28

❶ 如何實現前端優化提高網站訪問速度

一、代碼壓縮
二、使用CDN
三、加大伺服器帶寬

❷ 怎麼在前端頁面設置不讓瀏覽器緩存

你好

HTTP1.0中通過Pragma控制頁面緩存,可以設置:Pragma或no-cache。網上有非常多的文章說明如何控制不讓瀏覽器或中間緩存伺服器緩存頁面,通常設置的值為no- cache,不過這個值不這么保險,通常還加上Expires置為0來達到目的。但是如我們刻意需要瀏覽器或緩存伺服器緩存住我們的頁面這個值則要設置為 Pragma。

HTTP1.1中啟用Cache-Control來控制頁面的緩存與否,這里介紹幾個常用的參數:

  • no-cache,瀏覽器和緩存伺服器都不應該緩存頁面信息;

  • public,瀏覽器和緩存伺服器都可以緩存頁面信息;

  • no-store,請求和響應的信息都不應該被存儲在對方的磁碟系統中;

  • must-revalidate,對於客戶機的每次請求,代理伺服器必須想伺服器驗證緩存是否過時;

  • Last-Modified只頁面的最後生成時間,GMT格式;

    Expires過時期限值,GMT格式,指瀏覽器或緩存伺服器在該時間點後必須從真正的伺服器中獲取新的頁面信息;

    上面兩個值在JSP中設置值為字元型的GMT格式,無法生效,設置long類型才

滿意請採納

❸ 前端緩存都有哪些方法,有什麼區別

瀏覽器緩存機制可以減少網路開銷,以便獲得更好的用戶體驗。在前端中常用的緩存有cookie及html中的localStorage和sessionStorage。
1、cookie、localStorage、sessionStorage區別和聯系
共同點:都是保存在瀏覽器端,且同源的。
區別:
1)cookie數據始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給伺服器,僅在本地保存。
2)cookie數據還有路徑(path)的概念,可以限制cookie只屬於某個路徑下。存儲大小限制也不同,cookie數據不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數據,如會話標識。
sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
3)數據有效期不同:
sessionStorage:僅在當前瀏覽器窗口關閉前有效,自然也就不可能持久保持;
localStorage:始終有效,窗口或瀏覽器關閉也一直保存,因此用作持久數據;
cookie只在設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉。
4)作用域不同:
不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬於相同域名和埠),但是不同頁面或標簽頁間無法共享sessionStorage的信息
cookie是在所有同源窗口中都是共享的
2、禁用cookie後,會出現什麼現象?
一般情況session是需要cookie配合使用的,但是有些瀏覽器禁用cookie後,就需要使用其他方式來實現回話管理。
在客戶端禁用Cookie的時候,我們要怎麼做呢,可以有以下兩種方法
URL重寫或者隱藏域(暴露信息不安全,一般不用)
· 設置php.ini中的session.use_trans_sid = 1或者在PHP編譯時打開–enable-trans-sid選項,讓PHP自動通過重寫URL傳遞session id。
· 如果是虛擬主機或者租用的伺服器,無法去修改PHP.ini,那麼可以手動通過URL傳值,或者通過隱藏表單傳遞session id。說簡單些就是自己去操縱sessionid這個唯一標識符,去鑒別用戶即可。
3、登陸信息一般放在session中,cookie還有用嗎?
有用,session會將sessionId存到cookie,再次請求時將sessionId隨請求頭給伺服器,然後拿到sessionId進行查詢即可。也就是說身份信息不會暴露在瀏覽器緩存中。只有sessionId暴露,提高安全性。
4、前端存cookie與後端存cookie有什麼區別?
前端可以通過document.cookie來設置cookie,但是這種方式會暴露信息,除非hash加密;
伺服器接受到http請求後在響應頭加上Set-Cookie欄位,它的值是要設置的Cookie的

❹ html,css,javascript的優化管理策略是什麼

一、網路載入類
1、減少 HTTP 資源請求次數
合並靜態資源圖片、JavaScript 或 CSS 代碼,減少頁面請求數和資源請求消耗
避免重復的資源,防止增加多餘請求
2、減小 HTTP 請求大小
減少沒必要的圖片、JavaScript、CSS 及 HTML 代碼
對文件進行壓縮優化
使用 gzip 等方式壓縮傳輸文件
3將 CSS 或 JavaScript 放到外部文件中,避免使用 <style> 或 <script> 標簽直接引入
在 HTML 文件中引用外部資源可以有效利用瀏覽器的靜態資源緩存
4、避免頁面中空的 href 和 src
當 <link> 標簽的 href 屬性為空,或 <script>、<img>、<iframe> 標簽的 src 屬性為空時,瀏覽器在渲染的過程中仍會將 href 屬性或 src 屬性中的空內容進行載入,直至載入失敗,這樣就阻塞了頁面中其他資源的下載進程,而且最終載入到的內容是無效的,因此要盡量避免
5、為 HTML 指定 Cache-Control 或 Expires
為 HTMl 內容設置 CaChe-Control 或 Expires 可以將 HTML 內容緩存起來,避免頻繁向伺服器端發送請求。
6、合理設置 Etag 和 Last-Modified
合理設置 Etag 和 Last-Modified 使用瀏覽器緩存,對於未修改的文件,靜態資源伺服器會向瀏覽器端返回304,讓瀏覽器從緩存中讀取文件,減少 Web 資源下載的帶寬消耗並降低伺服器負載
7、減少頁面重定向
頁面每次重定向都會延長頁面內容返回的等待延時,一次重定向大約需要600毫秒的時間開銷,為了保證用戶盡快看到頁面內容,要盡量避免頁面重定向
8、使用靜態資源分域存放來增加下載並行數
瀏覽器在同一時刻向同一個域名請求文件的並行下載數是有限的,因此可以利用多個域名的主機來存放不同的靜態資源,增大頁面載入時資源的並行下載數,縮短頁面資源載入的時間
9、使用靜態資源 CDN 來存儲文件
如果條件允許,可以使用 CDN 網路加快同一個地理區域內重復靜態資源文件的響應下載速度,縮短資源請求時間
10、使用 CDN Combo 下載傳輸內容
CDN Combo 是在 CDN 伺服器端將多個文件請求打包成一個文件的形式來返回的技術,這樣可以實現 HTTP 連接傳輸的一次性復用,減少瀏覽器的 HTTP 請求數,加快資源下載速度。
11、使用可緩存的 AJAX
可以返回內容相同的請求,沒必要每次都直接從伺服器端拉取,合理使用 AJAX 緩存能加快 AJAX 響應速度來減輕伺服器壓力
12、使用 GET 來完成 AJAX 請求
使用 XMLHttpRequest 時,瀏覽器中的 POST 方法發送請求首先發送文件頭,然後發送 HTTP 正文數據,而使用 GET 時只發送頭部,所以在拉取服務端數據時使用 GET 請求效率更高
13、減少 Cookie 的大小並進行 Cookie 隔離
HTTP 請求通常默認帶上瀏覽器的 Cookie 一起發送給伺服器,所以在非必要的情況下,要盡量減少 Cookie 來減小 HTTP 請求的大小
對應靜態資源,盡量使用不同的域名來存放,因為 Cookie 默認不能跨域的,這樣就做到了不同域名下靜態資源請求的 Cookie 隔離
14、縮小 favicon.ico 並緩存
有利於 favicon.ico 的重復載入,因為一般一個 Web 應用的 favicon.ico 是很少改變的
15、推薦使用非同步 JavaScript 資源
使用 async 時,載入和渲染後續文檔元素的過程和 main.js 的載入與執行是並行的。
使用 defer 時,載入後續文檔元素的過程和 main.js 的載入是並行的,但是 main.js 的執行要在頁面所有元素解析完成之後才開始執行。
16、消除阻塞渲染的 CSS 及 JavaScript
對於頁面中載入時間過長的 CSS 或 JavaScript 文件,需要進行合理拆分或延後載入,保證關鍵路徑的資源能快速載入完成
17、避免使用 CSS import 引用載入 CSS
CSS 中的 @import 可以從另一個樣式文件引入樣式,但應該避免這種用法,因為這樣會增加 CSS 資源載入的關鍵路徑長度,帶有 @import 的 CSS 樣式需要在 CSS 文件串列解析到 @import 時才會載入另外的 CSS 文件,大大延後 CSS 渲染完成的時間
二、頁面渲染類
1、把 CSS 資源引用放到 HTML 文件頂部
一般推薦將所有 CSS 資源盡早指定在 HTML 文檔 中,這樣瀏覽器可以優先下載 CSS 並盡早完成頁面渲染
2、JavaScript 資源引用放到 HTML 文件底部
JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的載入和解析執行對頁面渲染造成阻塞,這是因為 JavaScript 資源默認是解析阻塞的,除非被標記為非同步或者通過其他的非同步方式載入
3、不要在 HTML 中直接縮放圖片
在 HTML 中直接縮放圖片會導致頁面的重排重繪,此時可能會使頁面中的其他操作產生卡頓,因此要盡量減少在頁面中直接進行圖片縮放
4、減少 DOM 元素數量和深度
HTML 中標簽元素越多,標簽的層級越深,瀏覽器解析 DOM 並繪制到瀏覽器中所花的時間就越長,所以盡可能保持 DOM 元素簡潔和層級較少
5、盡量避免使用 <table>、<iframe> 等慢元素
<table>內容的渲染是將 table 的 DOM 渲染樹全部生成完成並一次性繪制到頁面上的,所以在長表格渲染時很耗性能,應該盡量避免使用它,可以考慮使用列表元素 <ul> 代替
盡量使用非同步的方式動態添加 iframe,因為 iframe 內資源的下載進程會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM 的解析
6、避免運行耗時的 JavaScript
長時間運行的 JavaScript 會阻塞瀏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。所以,任何與頁面初次渲染無關的邏輯功能都應該延遲載入執行,這和 JavaScript 資源的非同步載入思路是一致的
7、避免使用 CSS 表達式或 CSS 濾鏡
CSS 表達式或 CSS 濾鏡的解析渲染速度是比較慢的,在有其他解決方案的情況下應該盡量避免使用

❺ web前端怎麼用代碼實現緩存優化

有以下集中方法
方法一:針對瀏覽器設置過期時間,在這個時間內的請求都會先請求本地緩存的文件和數據。另外jquery的ajax請求方式可以設置是否緩存,可以充分利用該選項。
方法二:js請求限制,可以設計成多少秒以內都不響應響應的操作,過期後的操作才會有效。點擊後僅返回一個模擬的結果。
方法三:ajax做dom緩存策略,比如在頁面放一個不可見的textarea,請求過來的數據同時寫入textarea的value,並且在一定時間內(可設置)的請求只去讀取textarea的內容,並將結果展示到頁面上。

❻ web前端網站性能優化怎麼瀏覽器緩存

頁面用html5語言編寫或者頁面上所有的的比例都用百分比來表示,不管是手機端還是pc端瀏覽效果一樣。app和瀏覽器訪問的不同是頁面表現形式,對於後台java
web沒有什麼要求,只要頁面要什麼數據,java
web能查出來傳到頁面和app就可以了。

❼ 如何進行前端優化

1.減少 HTTP 請求....

2.使用 HTTP2

3.使用服務端渲染

4.靜態資源使用 CDN

5.將 CSS 放在文件頭部,JavaScript 文件放 ...

6.使用字體圖標 iconfont 代替圖片圖標

7.善用緩存,不重復載入相同的資源

8.壓縮文件

9.圖片優化

(1).圖片延遲載入

(2). 響應式圖片

(3). 調整圖片大小

(4). 降低圖片質量

(5). 盡可能利用 CSS3 效果代替圖片

(6). 使用 webp 格式的圖片

10. 通過 webpack 按需載入代碼,提取第三庫代碼,減少 ES6 轉為 ES5 的冗餘代碼

11. 減少重繪重排

12. 使用事件委託

13. 注意程序的局部性

14. if-else 對比 switch

15. 查找表

16. 避免頁面卡頓

17. 使用 requestAnimationFrame 來實現視覺變化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆蓋原生方法

21. 降低 CSS 選擇器的復雜性

(1). 瀏覽器讀取選擇器,遵循的原則是從選擇器的右邊到左邊讀取。

(2). CSS 選擇器優先順序

22. 使用 flexbox 而不是較早的布局模型

23. 使用 transform 和 opacity 屬性更改來實現動畫

24. 合理使用規則,避免過度優化

性能優化主要分為兩類:

    • 載入時優化

    • 運行時優化

❽ 能用JS或者前端的什麼方法實現清除瀏覽器緩存嗎

可以用JS實現清除瀏覽器緩存,解決方法如下:

1、在靜態頁面也就是以.html,.jsp,.aspx,.php結尾的文件中在<dead></head>中加入以下代碼。


注意事項:

JavaScriptJavaScript基於對象和事件驅動並具有相對安全性的客戶端腳本語言。也是一種廣泛用於客戶端Web開發的腳本語言,常用來給HTML網頁添加動態功能,比如響應用戶的各種操作。

❾ 關於前端緩存優化,為什麼沒人用manifest

簡單來說,不好用
來分析下manifest的優缺點
優點
可以離線運行
可以減少資源請求
可以更新資源
缺點
更新的資源,需要二次刷新才會被頁面採用
不支持增量更新,只有manifest發生變化,所有資源全部重新下載一次
缺乏足夠容錯機制,當清單中任意資源文件出現載入異常,都會導致整個manifest策略運行異常
全量載入和二次刷新這兩個缺點就已經夠嚴重了。
我們再來看看其優點是不是真的那麼好用。
1.離線運行
對於普通頁面來說,離線運行沒什麼用;
對於webapp來說,這個特性還不錯;
對於hybird app來說,也沒什麼用。
2.減少資源請求
HTTP協議的Cache-Control和Expires就也能在緩存有效期內,不再發送資源請求
3.可以更新資源
manifest是文件被更新後,全量更新緩存。
而改用HTTP協議的緩存方案,只需要對資源文件引用的URL做少許變動即可刷新緩存,例如補個時間戳參數