Interview Question（性能優化）

開發及性能優化

一、規避javascript多人開發函數重名

• 命名空間
• 封閉空間
• js模塊化mvc
• seajs
• 變量轉換成對象的屬性
• 對象化

二、減小頁面加載時間的方法

• 壓縮css、js文件
• 合併js、css文件，減小http請求
• 外部js、css文件放在底部
• 減小dom操做，儘量用變量替代沒必要要的dom操做
• 優化圖片
• 標明高度和寬度

三、如何提升頁面性能優化？

　　內容方面：

1. 減小HTTP請求
2. 減小DOM元素數量
3. 使得Ajax可緩存

　　針對CSS:

1. 把css放到代碼頁上端
2. 從頁面中剝離javascript與css
3. 精簡javascript與css
4. 避免css表達式

　　針對javascript：

1. 腳本放到HTML代碼頁底部
2. 從頁面中剝離javascript
3. 精簡javascript與css
4. 移除重複腳本

　　面向圖片：

1. 優化圖片
2. 不要在HTML中使用縮放圖片
3. 使用恰當的圖片格式
4. 使用Css Sprites技巧對圖片優化

四、如何優化圖像？圖像格式區別？

優化圖像：

1. 不用圖片，儘可能用css3代替。好比要實現修飾效果，半透明、邊框、圓角、陰影、漸變等
2. 使用矢量圖svg替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖
3. 使用恰當的圖片格式。（內容圖片多爲照片之類的，適用於jpeg。修飾圖片一般更適合用無損壓縮的png。gif基本上除了gif動畫外不要使用。）
4. 按照HTTP協議設置合理的緩存。
5. 使用字體圖標webfont、CSS Sprites等
6. 用css或javascript實現預加載
7. WebP圖片格式能給前端帶來優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，很是適合用於網格等圖片傳輸。

圖像格式區別：

　　 矢量圖：圖標字體，如font-awesome;svg

　　　 位圖：gif,jpg,png

　　　 區別：

1. 1. gif:一種無損，8位圖片格式。具備支持動畫，索引透明，壓縮等特性。適用於色彩簡單的圖片，如logo,各類小圖標icons等
   2. jpeg格式是一種大小與質量相平衡的壓縮圖片格式。適用於容許輕微失真的色彩豐富照片，不適合作色彩簡單的圖片，如logo等。
   3. png:png能夠細分紅三種格式：png8,png24,png32.後面數字表明這種png格式最多能夠索引和存儲的顏色值。

　　　　關於透明：png8支持索引透明和alpha透明；png24不支持透明；而png32在24位的png基礎上增長了8位的alpha的通道透明；

1. 1. 能在保證最不失真的狀況下儘量壓縮圖像文件的大小。
   2. 對於須要高保真的較複雜的圖像，png雖然能無損壓縮，但圖片文件較大，不適合應用在web頁面上。

五、瀏覽器是如何渲染頁面的？

1. 解析HTML文件，建立DOM樹（自上而下，遇到任何樣式與腳本都會阻塞）
2. 解析css。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式
3. 將CSS與DOM合併，構建渲染樹
4. 佈局和繪製，重繪和重排