前端性能優化研究

前端性能優化研究

一：前言

一、雖然前端開發做爲 GUI 開發的一種,可是存在其特殊性,前端的特殊性就在於「動態」二字，傳統 GUI 開發，無論是桌面應用仍是移動端應用都是須要預先下載的,只有先下載應用程序纔會在本地操做系統運行。

二、而前端不一樣,它是「動態增量」式的,咱們的前端應用每每是實時加載執行的,並不須要預先下載,這就形成了一個問題,前端開發中每每最影響性能的不是什麼計算或者渲染,而是加載速度,加載速度會直接影響用戶體驗和網站留存。

    《Designing for Performance》的做者 Lara Swanson在2014年寫過一篇文章《Web性能即用戶體驗》，她在文中提到「網站頁面的快速加載，可以創建用戶對網站的信任，增長回訪率，大部分的用戶其實都期待頁面可以在2秒內加載完成，而當超過3秒之後，就會有接近        40%的用戶離開你的網站」。

三、值得一提的是,GUI 開發依然有一個共同的特殊之處,那就是 體驗性能 ,體驗性能並不指在絕對性能上的性能優化,而是迴歸用戶體驗這個根本目的,由於在 GUI 開發的領域,絕大多數狀況下追求絕對意義上的性能是沒有意義的.

四、好比一個動畫原本就已經有 60 幀了,你經過一個吊炸天的算法優化到了 120 幀,這對於你的 KPI 毫無用處,由於這個優化自己沒有意義,由於除了少數特異功能的異人,沒有人能分得清 60 幀和 120 幀的區別,這對於用戶的體驗沒有任何提高。

　  相反,一個首屏加載須要 4s 的網站,你沒有任何實質意義上的性能優化,只是加了一個設計姐姐設計的 loading 圖,那這也是十分有意義的優化,由於好的 loading 能夠減小用戶焦慮,讓用戶感受沒有等過久,這就是用戶體驗級的性能優化.

五、所以,咱們要強調即便沒有對性能有實質的優化,經過設計提升用戶體驗的這個過程,也算是性能優化,由於 GUI 開發直面用戶,你讓用戶有了性能快的 錯覺,這也叫性能優化了,畢竟用戶以爲快,纔是真的快...

六、綜上所述，實現前端性能優化有兩個大方面：一是從代碼層面讓應用加載速度增快；二是從用戶直面效果時，增長loading效果優化用戶體驗