前端性能優化原理及方法小記

一、瀏覽器打開方式和過程

瀏覽器核心是 瀏覽器引擎

1. 連接到 URL 所在服務器

查詢 DNS 服務器,獲取 URL 所在網站 IP ,向該地址發起請求。

2. 獲取頁面 HTML 文檔

無論請求是一個靜態的 HTML 文件或者是動態腳本(ASPX、PHP、JS),服務器返回給瀏覽器。

3. 解析文檔并獲取資源

獲取 HTML 文件之后進行解析,目的是知道所需資源以及生成 DOM 樹,兩者是并行工作的。

4. JS 及 CSS 文件

頁面處理 JS 文件:

  • 按照在 HTML 文中出現的順序執行
  • JS 執行時,依賴的 DOM 樹已經生成好

CSS 文件一般用于控制頁面元素的顯示效果,因為加載 CSS 之后,瀏覽器會對元素重新進行渲染,因此建議將 CSS 文件放在 HTML 文件最前面加載。

5. onload 事件

當 HTML 文件解析完成之后,所需資源都已經成功下載和執行之后,瀏覽器發出 onload 事件并回調 HTML 文件中的 onload 函數。對瀏覽器來說,onload 事件是最接近頁面就緒的事件,但 onload 事件執行完成,并不完全代表頁面已經就緒,用戶可以進行操作,還有一些 javascript 腳本需要在其后執行(在 ajax 的網頁上很常見)。

二、提高前端性能的方法

主要有兩個方面:

  1. 減少頁面加載的時間
  2. 提升用戶角度的感官體驗

減少頁面加載所需要的時間,可以從請求數量、請求并發及網絡傳輸的角度出發;提升用戶感官體驗,則主要是讓頁面盡快展示。

1. 減少網絡時間

所有的服務端資源都經過 DNS 解析 至 建立連接 至斷開連接的過程,因此可以從以下幾個方面入手

  • 使用 DNS 緩存技術
    • 一般瀏覽器本身具有一定的 DNS 緩存機制,所以服務端的 DNS 緩存不能引起太大的提升
  • 減少傳輸文件的尺寸
    • 將文件進行壓縮
    • 利用混淆的方式減少 JS 文件和樣式表的大小
    • 從 JS 文件中去掉不需要的部分
  • 加快文件傳輸速度
    • 使用 CDN 技術

2. 減少請求的數量

  • 利用瀏覽器緩存
    • 為充分利用瀏覽器緩存,需要在服務器端保證每個可以被緩存的資源在服務端返回時附帶合適的 expires 頭信息
    • 盡量把頁面中很少改變的部分提取出來
    • 使用引用的方式加載 JS 和樣式表
    • 使用 URI
  • 使用合并的圖片文件
    • 當頁面包含很多小圖片文件時,可以考慮將小圖片合并成一個大圖片,在頁面中使用 CSS Sprites 技術將大圖片顯示分割成小圖片,這種方式可以大量減少 http 請求數量

3. 提高瀏覽器下載的并發度

  • JS 文件放在 HTML 文件最后加載
  • 使用多個域名

4. 讓頁面盡早顯示

  • 將樣式表放在 HTML 文件頭部加載
  • JS 引用放在最后加載

三、常見的前端性能工具

1. Firebug

2. HttpWatch

3. Chrome 自帶開發者工具

4. Page Speed

5. DynaTrace AJAX Edition

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,572評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,071評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,409評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,569評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,360評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,895評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,979評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,123評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,643評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,559評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,742評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,250評論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,981評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,363評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,622評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,354評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,707評論 2 370

推薦閱讀更多精彩內容