一、瀏覽器打開方式和過程
瀏覽器核心是 瀏覽器引擎
1. 連接到 URL 所在服務(wù)器
查詢 DNS 服務(wù)器，獲取 URL 所在網(wǎng)站 IP ，向該地址發(fā)起請(qǐng)求。
2. 獲取頁面 HTML 文檔
無論請(qǐng)求是一個(gè)靜態(tài)的 HTML 文件或者是動(dòng)態(tài)腳本（ASPX、PHP、JS），服務(wù)器返回給瀏覽器。
3. 解析文檔并獲取資源
獲取 HTML 文件之后進(jìn)行解析，目的是知道所需資源以及生成 DOM 樹，兩者是并行工作的。
4. JS 及 CSS 文件
頁面處理 JS 文件：
- 按照在 HTML 文中出現(xiàn)的順序執(zhí)行
- JS 執(zhí)行時(shí)，依賴的 DOM 樹已經(jīng)生成好
CSS 文件一般用于控制頁面元素的顯示效果，因?yàn)榧虞d CSS 之后，瀏覽器會(huì)對(duì)元素重新進(jìn)行渲染，因此建議將 CSS 文件放在 HTML 文件最前面加載。
5. onload 事件
當(dāng) HTML 文件解析完成之后，所需資源都已經(jīng)成功下載和執(zhí)行之后，瀏覽器發(fā)出 onload 事件并回調(diào) HTML 文件中的 onload 函數(shù)。對(duì)瀏覽器來說，onload 事件是最接近頁面就緒的事件，但 onload 事件執(zhí)行完成，并不完全代表頁面已經(jīng)就緒，用戶可以進(jìn)行操作，還有一些 javascript 腳本需要在其后執(zhí)行（在 ajax 的網(wǎng)頁上很常見）。
二、提高前端性能的方法
主要有兩個(gè)方面：
- 減少頁面加載的時(shí)間
- 提升用戶角度的感官體驗(yàn)
減少頁面加載所需要的時(shí)間，可以從請(qǐng)求數(shù)量、請(qǐng)求并發(fā)及網(wǎng)絡(luò)傳輸?shù)慕嵌瘸霭l(fā)；提升用戶感官體驗(yàn)，則主要是讓頁面盡快展示。
1. 減少網(wǎng)絡(luò)時(shí)間
所有的服務(wù)端資源都經(jīng)過 DNS 解析 至 建立連接 至斷開連接的過程，因此可以從以下幾個(gè)方面入手
- 使用 DNS 緩存技術(shù)
- 一般瀏覽器本身具有一定的 DNS 緩存機(jī)制，所以服務(wù)端的 DNS 緩存不能引起太大的提升
- 減少傳輸文件的尺寸
- 將文件進(jìn)行壓縮
- 利用混淆的方式減少 JS 文件和樣式表的大小
- 從 JS 文件中去掉不需要的部分
- 加快文件傳輸速度
- 使用 CDN 技術(shù)
2. 減少請(qǐng)求的數(shù)量
- 利用瀏覽器緩存
- 為充分利用瀏覽器緩存，需要在服務(wù)器端保證每個(gè)可以被緩存的資源在服務(wù)端返回時(shí)附帶合適的 expires 頭信息
- 盡量把頁面中很少改變的部分提取出來
- 使用引用的方式加載 JS 和樣式表
- 使用 URI
- 使用合并的圖片文件
- 當(dāng)頁面包含很多小圖片文件時(shí)，可以考慮將小圖片合并成一個(gè)大圖片，在頁面中使用 CSS Sprites 技術(shù)將大圖片顯示分割成小圖片，這種方式可以大量減少 http 請(qǐng)求數(shù)量
3. 提高瀏覽器下載的并發(fā)度
- JS 文件放在 HTML 文件最后加載
- 使用多個(gè)域名
4. 讓頁面盡早顯示
- 將樣式表放在 HTML 文件頭部加載
- JS 引用放在最后加載
