【問題描述】前端效能的優化做過哪些？

一、頁面級優化

1. 減少 HTTP請求數

2. 將外部指令碼置底（將指令碼內容在頁面資訊內容載入後再載入）

3. 非同步執行 inline指令碼(其實原理和上面是一樣，保證指令碼在頁面內容後面載入。)

4. Lazy Load Javascript（只有在需要載入的時候載入，在一般情況下並不載入資訊內容。）

5. 將 CSS放在 HEAD中

6. 非同步請求 Callback（就是將一些​​前端培訓​​行為樣式提取出來，慢慢的載入資訊的內容）

7. 減少不必要的 HTTP跳轉

8. 避免重複的資源請求

二、程式碼級優化

【問題描述】 Javascript

(1). DOM：DOM操作應該是指令碼中最耗效能的一類操作，例如增加、修改、刪除 DOM元素或者對 DOM集合進行操作。

(2). 慎用 with

(3). 避免使用 eval和 Function

(4). 減少作用域鏈查詢（這方面設計到一些內容的相關問題）

(5). 資料訪問

(6). 字串拼接

【問題描述】瀏覽器相容性的問題有哪些？

IE6不支援png-24透明圖片

解決方法：圖片使用gif格式，或者png-8格式圖片。

【問題描述】畫素問題：

解決方法：對另一個div也使用float;

【問題描述】瀏覽器預設的margin和padding不同

解決方案是加一個全域性的*{margin:0;padding:0;}來統一。

【問題描述】 IE5-IE8不支援opacity

解決方法：這時可以另外新增ie濾鏡alpha

【問題描述】IE6不能定義1px左右寬度的容器

解決方法：因為行高line-height在IE6下有預設值，設定 line- height:1px|overflow:hidden|zoom:0.08

【問題描述】IE6不支援min-*:問題出現的瀏覽器：IE6及其更低的版本

解決方法：利用IE6不識別！Important，給元素設定固定高度，並且設定元素高度自動。

【問題描述】雙外邊距浮動問題：IE6及其更低的版本

解決辦法：將元素的display屬性設定為inline，因為元素是浮動的，所以這麼設定

【問題描述】Firefox點選連結出現的虛線框：Firfox瀏覽器

解決方法：我們為了和其他瀏覽器保持一致，需要去掉虛線框，我們可以給a標籤設定outline屬性

【問題描述】Cookie、session和localStorage的區別

答：cookie的內容主要包括：名字、值、過期時間、路徑和域。路徑與域一起構成cookie的作用範圍。若不設定時間，則表示這個cookie的生命期為瀏覽器會話期間，關閉瀏覽器視窗，cookie就會消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。

會話cookie一般不儲存在硬碟而是儲存在記憶體裡，當然這個行為並不是規範規定的。若設定了過期時間，瀏覽器就會把cookie儲存到硬碟上，關閉後再開啟瀏覽器這些cookie仍然有效直到超過設定的過期時間。對於儲存在記憶體裡的cookie，不同的瀏覽器有不同的處理方式session機制。

當程式需要為某個客戶端的請求建立一個session時，伺服器首先檢查這個客戶端的請求裡是否已包含了一個session標識（稱為session id），如果已包含則說明以前已經為此客戶端建立過session，伺服器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則為客戶端建立一個session並且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字串，這個session id將被在本次響應中返回給客戶端儲存。儲存這個session id的方式可以採用cookie，這樣在互動過程中瀏覽器可以自動的按照規則把這個標識傳送給伺服器。