一、瀏覽器打開方式和過程
瀏覽器核心是 瀏覽器引擎
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. 減少網絡時間
所有的服務端資源都經過 DNS 解析 至 建立連接 至斷開連接的過程,因此可以從以下幾個方面入手
- 使用 DNS 緩存技術
- 一般瀏覽器本身具有一定的 DNS 緩存機制,所以服務端的 DNS 緩存不能引起太大的提升
- 減少傳輸文件的尺寸
- 將文件進行壓縮
- 利用混淆的方式減少 JS 文件和樣式表的大小
- 從 JS 文件中去掉不需要的部分
- 加快文件傳輸速度
- 使用 CDN 技術
2. 減少請求的數量
- 利用瀏覽器緩存
- 為充分利用瀏覽器緩存,需要在服務器端保證每個可以被緩存的資源在服務端返回時附帶合適的 expires 頭信息
- 盡量把頁面中很少改變的部分提取出來
- 使用引用的方式加載 JS 和樣式表
- 使用 URI
- 使用合并的圖片文件
- 當頁面包含很多小圖片文件時,可以考慮將小圖片合并成一個大圖片,在頁面中使用 CSS Sprites 技術將大圖片顯示分割成小圖片,這種方式可以大量減少 http 請求數量
3. 提高瀏覽器下載的并發度
- JS 文件放在 HTML 文件最后加載
- 使用多個域名
4. 讓頁面盡早顯示
- 將樣式表放在 HTML 文件頭部加載
- JS 引用放在最后加載