前端 實用性能優化技巧

2022-04-06 12:33:20 字數 1510 閱讀 2905

就是在通過改進程式的結構和執行過程,使得我們能在更短的時間內,利用更少的資源來完成同樣的工作。

對於編譯型語言來說,可以通過改進資料結構、演算法,將中間**轉化為本地**,縮短彙編指令(避免型別轉換),讀寫快取記憶體,控制垃圾**等方法來提公升程式效能。

效能優化,往往提公升空間是很有限的,而且需要投入相當的精力,所以除了平時養成習慣,建議將效能優化放在最後,很多情況下它都不是必須的。 

對於,我們前端來說,效能優化,主要指的是,提公升頁面的載入速度,避免記憶體洩露,避免頻繁的重繪,改進演算法(盡量使用js的原生函式)。下面我們主要討論載入速度

頁面的載入,包括從請求、響應、傳輸、接收、解析、渲染的整個過程。我們要縮短整個過程的時間,將頁面更快速的展示在使用者面前。

我們分為三個部分系統的來講,

伺服器上我們需要做以下幾件事情,合併資源檔案(js、css、圖示),然後壓縮資源檔案。若果非靜態頁面,還將涉及資料獲取,頁面快取。我們通常的js檔案目錄如下

/js/src

/build

src目錄中存放,原始檔,build目錄存放壓縮後的檔案,最後可以通過自動構建工具來合併請求的檔案,傳送給請求者。

資料查詢這方面,不是前端的範疇,不多做討論。

傳輸路徑和頻寬是傳輸中最影響時間的,我們前面已經確保了傳輸的資料量盡可能的小,故不再考慮。

我們應當盡可能的避免多次請求,這個過程由於上述原因可能非常的慢。

使用cdn來優化傳輸路徑是乙個不錯的選擇,但是這個需要money,後期維護也是很麻煩的,稍不注意就會出現同步問題,cdn的節點通常可能很多,遍布全國,發布乙個東西是這樣的,香港已生效,天津已生效,上海已生效...杭州總部已生效,發布成功,像發射航天飛船一樣。

延遲載入,將不必要的請求延遲到必要的時候。很常用的是懶載入,瀑布流,tab切換等。

縮短渲染時間,乙個頁面對應著兩顆樹,dom樹,和渲染樹。每乙個html元素節點都會被放到dom樹上,但並非都會被放到渲染樹上,不可見(display:none)的元素,沒有在上面,它不需要被渲染。所以,隱藏視口外面的元素將能帶來效率提公升。同時,對於dom樹,我們並不需要所有頁面上的dom節點一次性載入過來,瀑布流就是很好的實踐,這將大大減少dom樹的構建及渲染時間。避免瀏覽器做一些不必要的工作,如幫你閉合標籤、計算高度(應當指定的寬高)。

css3,使用它可以增強**的靈活性,減少一些請求。但是,注意它是需要犧牲一些渲染效能的,同時,由於相容性的問題我們可能需要寫很多的css**來實現效果,甚至引入外部檔案來相容低端瀏覽器,所以,使用它的時候,要考量一下,是否利大於弊。

時間關係,點到為止,如有不妥之處,還請各位讀者不吝賜教,謝謝。

execl實用性小技巧(1)

如何將兩個具有相同欄位的 資訊進行匹配合併,且這兩個相同欄位在兩個 中的順序不一樣?使用函式 vlookup 引數1,引數2,引數3,引數4 eg vlookup b3,吳渡健康檔案.xls 個人健康檔案 a 3 d 828,4,0 引數1 是需要填寫資料的 的查詢目標,也就是相同欄位的位置 引數2...

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...