頁面效能優化

2022-05-04 16:03:07 字數 1462 閱讀 8884

從使用者角度:優化能夠讓頁面載入得更快,對使用者操作響應更及時,提高使用者使用的體驗

從服務商角度:優化能夠減少頁面請求數,減小請求所占用頻寬,節省可觀的資源

,js,css等資源的打包壓縮

利用css sprites合併css小,減少請求

**結構優化,高復用,低耦合,減少重複**

樣式表置於頂部,指令碼置於頁面底部,通過非同步載入的方式,避免頁面資源引入時,造成的阻塞

利用瀏覽器快取,強快取或者協商快取,給網路資源設定有效期,使用者可以重複使用本地的快取,減少對源伺服器的請求,減少網路頻寬的消耗,間接降低伺服器的壓力

並且減少網路延遲,加快頁面開啟速度

cdn指的是內容分發網路。其基本思路是盡可能的避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定

cdn比起大多數託管服務來說更適合作為網路來處理**的流量,cdn的主要目標和實際的基礎架構設定旨在幫助提供閃電般的**

cdn(content distribute network,記憶體分發網路)的本質上仍然是乙個快取,而且將資料快取在離使用者最近的地方,是使用者以最快速度獲取資料。

cdn一般快取的是靜態資源,如,檔案,css,指令碼,靜態頁面等。這些檔案訪問頻率很高,將其快取在cdn可極大改善網頁的開啟速度

dns請求雖然占用很少的頻寬,但會有很高的延遲,在流動網路會更加明顯,通過dns預解析可以很好的降低延遲。

瀏覽器在https協議下預設dns預解析不可以,可以通過設定開啟

"

x-dns-prefetch-control

" content="

on">

"dns-prefetch

" href="

//host_name_to_prefetch.com

">

頁面在進行reflow和repiant時,需要重新驗證並計算渲染樹,會比較消耗頁面效能。所以我們應儘量減少reflow和repaint

例如,可以將修改元素樣式的操作積攢一批,然後統一做乙個reflow。

dom操作是指令碼中最消耗效能的一類操作,好在vue框架的虛擬dom較好的解決了這個問題,在使用過程中,減少reflow和repaint操作,可以較好的提公升頁面效能

去掉不必要的cookie,將cookie大小減小到最小。

由於cookie在訪問對應的網域名稱的資源時,會通過http請求傳送到伺服器,因此,減小http請求,能減小http報文的大小,提高響應速度。

並且設定合理的過期時間,也就是利用強快取或者協商快取。

使用ssr(服務端渲染)後端渲染,資料直接輸出到html中。這一點在vue框架中有很好的實現

獲取靜態資源之前,要建立通道。如果每次獲取靜態資源都要建立通道,會加大傳輸的時間。

在vue框架中,我們可以通過keep-alive將狀態儲存在記憶體中,防止重複渲染dom

瀏覽器訪問頁面時,通過重定向發起兩次請求,會極大的影響效能,除非不可避免的登陸校驗等等的,盡量避免重定向

頁面效能優化

以前的老大說過一句話,乙個頁面誰都能做。關鍵是誰能做好,乙個好是很關鍵的,首先是細節處理的好,效能優化的好。效能優化越來越重要,尤其是終端裝置越來越普及的今天,我也看了好多這方面的資料,總結一下有以下幾條 2 減少瀏覽器重繪和重排的次數 重繪會由改變元素的樣式如顏色visibility,重排是改變元...

頁面效能優化

提公升頁面效能的方法有哪些?1.資源壓縮合併,減少http請求 2.非核心 非同步載入 非同步載入的方式?1.動態指令碼載入 2.defer 直接在script標籤的上加 3.async 非同步載入的區別 1.defer是在html解析完之後才會去執行,如果是多個,按照載入的順序依次執行 2.asy...

Web 頁面效能優化

web 頁面效能優化 二 減少 http 的請求數 當使用者瀏覽頁面時,如果我們在使用者第一次訪問時將一些資訊一次性載入到客戶端快取,使用者訪問其他頁面時是可以大大提高頁面訪問速度的,因為每一次發生http請求是要產生伺服器開銷的,常用的方法有 合併css,js,並作為外部引用,這樣就可以減少訪問其...