前端性能優化 注意事項

  1. 使用CDN

CDN(內容分發網絡)部署在各大運營商機房,當用戶通過瀏覽器請求資源時可以直接反饋給用戶,極大的減輕了服務器數據中心的壓力。本質上CDN也是一種緩存,如果你的所在地距離某個CDN節點很近,那麼網站響應的速度提升也是非常明顯的。另外CDN所緩存的資源主要爲靜態資源,如靜態頁面、圖片、css和js文件等。CDN加速對於一些遍佈範圍較大的網站來說效果最爲明顯,使用的話像阿里雲CDN產品,其節點多達280多個,覆蓋運營商也比較全面。

  1. 減少外部http協議

網頁加載的時間與http請求密不可分,而外部資源的加載的速度則與主機服務提供商服務器架構和分佈地點有關。我們可以通過檢查自己的網站上多餘的圖片、css、JavaScript和一些組件,然後對應的去逐個完善,就可以減少一些http請求。

  1. 使用預獲取

顧名思義預獲取就是在真正有需要去請求之前就獲取一些必要的數據和資源,以提升用戶的瀏覽體驗。預獲取主要有三大方式:

1.鏈接預先獲取

2.DNS預先獲取

3.預先渲染

根據你想要使用的預先獲取形式,你只需在網站 HTML 中的鏈接屬性上增加 rel=“prefetch”,rel=“dns-prefetch”,或者 rel=“prerender” 標記。

  1. 壓縮HTML、CSS和JavaScript

在編寫代碼時候會有一些多餘的空格,這會佔用字節,使用一些壓縮工具可以有效解決這個問題。值得注意的是,壓縮後的文件,其可讀性就會變差,後期想維護就會變得困難了。

  1. 優化圖片

一張高清的圖片大概幾兆左右,而很多時候我們並不需要這樣的畫質,一般我們都會選擇將其保存爲高畫質的就可以了,這樣會有效減小加載圖片帶來的壓力。像JPEG圖片那樣包含了時間、地點、相機型號的格式,更不是我們所需要的。

  1. Ajax請求方式

POST的請求,是不可以在客戶端緩存的,每次請求都需要發送給服務器進行處理,每次都會返回狀態碼200。(可以在服務器端對數據進行緩存,以便提高處理速度)

GET的請求,是可以(而且默認)在客戶端進行緩存的,除非指定了不同的地址,否則同一個地址的AJAX請求,不會重複在服務器執行,而是返回304。所以在進行Ajax請求的時候,可以選擇儘量使用get方法,這樣可以使用客戶端的緩存,提高請求速度。

7.高效使用HTML標籤和CSS樣式
基本原理:

HTML是一門用來描述網頁的一種語言,它使用標記標籤來描述網頁,作爲一名合格的前端開發,你有必要去知道其常用標籤代表的含義(SEO)和屬性(表現形式)。

CSS指層疊樣式表 (Cascading Style Sheets),如果說把頁面想象成一個人,HTML就是人的骨架,CSS就是人的衣裝,一個人的品味從他的衣裝就能一目瞭然。

一名專業的前端開發也是一名優秀的重構,因爲在頁面中經常會有各種不合理的嵌套和重複定義的CSS樣式,我不是要你重構頁面,只是希望你在碰到這種情況的時候解決這些問題。如這樣的

<font size="3">HTML: 1
2
3 ... 4
5</font>

或者這樣的CSS:

body .box .border ul li p strong span{color:#000}
複製代碼

以上都是對HTML和CSS非常糟糕的使用方法。
正確理解:

HTML是一門標記語言,使用合理的HTML標籤前你必須瞭解其屬性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。

CSS是用來渲染頁面的,也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的,這裏對css選擇符按照開銷從小到大的順序梳理一下:

ID選擇符 #box

類選擇符 .box

標籤 div

僞類和僞元素 a:hover

當頁面被觸發引起迴流(reflow)的時候,低效的選擇符依然會引發更高的開銷,所以請避免低效。

發佈了37 篇原創文章 · 獲贊 20 · 訪問量 8001
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章