前端性能優化常用總結

2018-08-28 797 2 編輯:深正互聯 來源:互聯網

前端優化層出不窮,移動端大行其道的現在,我們可以說優化好移動端,PC端也將會更好;接下來我會從三個方面就前端性能進行總結:網絡方面、數據方面。


網絡方面

web應用,總是會有一部分的時間浪費在網絡連接和資源下載方面。往往建立一次網絡連接是需要時間成本的。而且瀏覽器同一時間所發送的網絡請求數是有限的。所以,這個層面的優化可以從「減少請求數目」開始:

減少http請求:在YUI35規則中也有提到,主要是優化js、css和圖片資源三個方面,因為html是沒有辦法避免的。因此,我們可以做一下的幾項操作:

·合并js文件

·合并css文件

·雪碧圖的使用(css sprite)

·使用base64表示簡單的圖片

上述四個方法,前面兩者我們可以使用webpack之類的打包工具進行打包;雪碧圖的話,也有專門的制作工具;圖片的編碼是使用base64的,所以,對于一些簡單的圖片,例如空白圖等,可以使用base64直接寫入html中。


回到之前網絡層面的問題,除了減少請求數量來加快網絡加載速度,往往整個資源的體積也是,平時我們會關注的方面。

減小資源體積:可以通過以下幾個方面進行實施:

·gzip壓縮

·js混淆

·css壓縮

·圖片壓縮

gzip壓縮主要是針對html文件來說的,它可以將html中重復的部分進行一個打包,多次復用的過程。js的混淆可以有簡單的壓縮(將空白字符刪除)、丑化(丑化的方法,就是將一些變量縮小)、或者可以使用php對js進行混淆加密。css壓縮,就是進行簡單的壓縮。圖片的壓縮,主要也是減小體積,在不影響觀感的前提下,盡量壓縮圖片,使用png等圖片格式,減少矢量圖、高清圖等的使用。這樣子的做法不僅可以加快網頁顯示,也能減少流量的損耗。


除了以上兩部分的操作之外,在網絡層面我們還需要做好緩存工作。真正的性能優化來說,緩存是效率最高的一種,往往縮短的加載時間也是最大的。

緩存:可以通過以下幾個方面來描述:

·DNS緩存

·CDN部署與緩存

·http緩存

由于瀏覽器會在DNS解析步驟中消耗一定的時間,所以,對于一些高訪問量網站來說,做好DNS的緩存工作,就會一定程度上提升網站效率。CDN緩存,CDN作為靜態資源文件的分發網絡,本身就已經提升了,網站靜態資源的獲取速度,加快網站的加載速度,同時也給靜態資源做好緩存工作,有效的利用已緩存的靜態資源,加快獲取速度。http緩存,也是給資源設定緩存時間,防止在有效的緩存時間內對資源進行重復的下載,從而提升整體網頁的加載速度。


其實,網絡層面的優化還有很多,特別是針對于移動端頁面來說。眾所周知,移動端對于網絡的敏感度更加的高,除了目前的4G和WIFI之外,其他的移動端網絡相當于弱網環境,在這種環境下,資源的緩存利用是相當重要的。而且,減少http的請求次數,也是至關重要的,移動端弱網環境下,對于http請求的時間也會增加。所以,我們可以看一下我們在移動端網絡方面可以做的優化:

移動端優化:使用以下幾種方式來加快移動端網絡方面的優化:

·使用長cache,減少重定向

·首屏優化,保證首屏加載數據小于14kb

·不濫用web字體

「使用長cache」,可以使得移動端的部分資源設定長期緩存,這樣可以保證資源不用向服務器發送請求,來比較資源是否更新,從而避免304的情況。304重定向,在PC端或許并不會影響網頁的加載速度,但是,在移動端網絡不穩定的前提下,多一次請求,就多了一部分加載時間。「首屏優化」,對于移動端來說是至關重要的。2s時間是用戶的最佳體驗,一旦超出這個時間,將會導致用戶的流失。所以,針對移動端的網絡情況,不可能在這么短時間內加載完成所有的網頁資源,所以我們必須保證首屏中的內容被優先顯示出來,而且基于TCP的慢啟動和擁塞控制,第一個14kb的數據是非常重要的,所以需要保證首部加載數據能夠小于14kb。「不濫用web字體」,web字體的好處就是,可以代替某些圖片資源,但是,在移動端過多的web字體的使用,會導致頁面資源加載的繁重,所以,慎用web字體


數據方面

數據,也可以說是前端優化方面比較重要的一塊內容。頁面與用戶的交互響應,往往伴隨著數據交互,處理,以及ajax的異步請求等內容。所以,我們也可以來聊聊這一塊的知識。首先是對于圖片數據的處理:

1.圖片加載處理:

·圖片預加載

·圖片懶加載

·首屏加載時進度條的顯示

「圖片預加載」,預加載的寓意就是提前加載內容。而圖片的預加載往往會被用在圖片資源比較大,即時加載時會導致很長的等待過程時,才會被使用的。常見場景:圖片漫畫展示時。往往會預加載一張到兩張的圖片。「圖片懶加載」,懶加載或許你是第一次聽說,但是,這種方式在開發中會被經常使用。首先,我們需要明白一個道理:往往只有看到的資源是必須的,其他資源是可以隨著用戶的滾動,隨即顯示的。所以,特別是對于圖片資源特別多的網站來說,做好圖片的懶加載是可以大大提升網頁的載入速度的。

常見的圖片懶加載的方式就是:在最初給圖片的src設置一個比較簡單的圖片,然后將圖片的真實地址設置給自定義的屬性,做一個占位,然后給圖片設置監聽事件,一旦圖片到達視口范圍,從圖片的自定義屬性中獲取出真是地址,然后賦值給src,讓其進行加載。

「首屏進度條的顯示」:往往對于首屏優化后的數據量并不滿意的話,同時也不能進一步縮短首屏包的長度了,就可以使用進度條的方式,來提醒用戶進行等待。


講完了圖片這一塊數據資源的處理,往往我們需要去優化一下異步請求這一部分的內容。因為,異步的數據獲取也是前端不可分割的。這一部分我們也可以做一定的處理:

2.異步請求的優化:

·使用正常的json數據格式進行交互

·部分常用數據的緩存

·數據埋點和統計

「JSON交互」,JSON的數據格式輕巧,結構簡單,往往可以大大優化前后端的數據通信。「常用數據的緩存」,可以將一些用戶的基本信息等常用的信息做一個緩存,這樣可以保證ajax請求的減少。同時,HTML5新增的storage的內容,也不用怕cookie暴露,引起的信息泄漏問題。「數據埋點和統計」,對于資深的程序員來說,比較了解。而且目前的大部分公司也會做這方面的處理。有心的小伙伴可以自行查閱。

最后,還有就是大量數據的運算。對于javascript語言來說,本身的單線程就限制了它并不能計算大量的數據,往往會造成頁面的卡頓。而可能業務中有些復雜的UI需要去運行大量的運算,所以,webWorker的使用是至關重要的。或許,前端標準普及的落后,會導致大家對于這些新生事物的短暫缺失吧。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 虎牙靠什么赚钱吗 安徽25选5 做吊顶生意赚不赚钱 广东36选7 网文网站怎么赚钱 大赢家网球比分 关于建筑工地什么职业最赚钱 体球即时比分网 真钱网络捕鱼游戏 体球彩 鸿利彩票群 怎样用手机小投资赚钱 北京赛车 版纳开民宿赚钱吗 好友长沙麻将 德州麻将免费下载