web前端面試題含答案解析

很多web前端從業(yè)者在經歷面試的時候都會遇到那么一套關于前端常識的測試題，這些測試題雖然比較死板考一些常識問題，但對于能否直接入職還是很重要的。今天黑馬程序員整理了一些關于web前端面試時候企業(yè)的一些面試題，希望給大家?guī)韼椭?br/>

問：請說出三種減低頁面加載時間的方法
答：壓縮css、js文件，合并js、css文件，減少http請求
外部js、css文件放在最底下
減少dom操作，盡可能用變量替代不必要的dom操作
問：你所了解到的Web攻擊技術
答：（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：
指通過存在安全漏洞的Web網站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：
指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態(tài)更新。
問：前端開發(fā)中，如何優(yōu)化圖像？圖像格式的區(qū)別？
答：優(yōu)化圖像：
不用圖片，盡量用css3代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
使用矢量圖SVG替代位圖。對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！
使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。基本上，內容圖片多為照片之類的，適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。
按照HTTP協(xié)議設置合理的緩存。
使用字體圖標webfont、CSS Sprites等。
用CSS或JavaScript實現預加載。
WebP圖片格式能給前端帶來的優(yōu)化。WebP支持無損、有損壓縮，動態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網絡等圖片傳輸。
圖像格式的區(qū)別：
矢量圖：圖標字體，如 font-awesome；svg
位圖：gif,jpg(jpeg),png
區(qū)別：
gif:是是一種無損，8位圖片格式。具有支持動畫，索引透明，壓縮等特性。適用于做色彩簡單(色調少)的圖片，如logo,各種小圖標icons等。
JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，不適合做色彩簡單(色調少)的圖片，如logo,各種小圖標icons等。
png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。后面的數字代表這種PNG格式最多可以索引和存儲的顏色值。
關于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;
優(yōu)缺點：
能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
對于需要高保真的較復雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。
問：規(guī)避javascript多人開發(fā)函數重名問題
答：命名空間
封閉空間
js模塊化mvc（數據層、表現層、控制層）
seajs
變量轉換成對象的屬性
對象化
問：web前端開發(fā)，如何提高頁面性能優(yōu)化？
答：內容方面：
減少 HTTP 請求 (Make Fewer HTTP Requests)
減少 DOM 元素數量 (Reduce the Number of DOM Elements)使得 Ajax 可緩存 (Make Ajax Cacheable)
針對CSS：
把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)精簡 JavaScript 與 CSS (Minify JavaScript and CSS)避免 CSS 表達式 (Avoid CSS Expressions)
針對JavaScript ：
腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)精簡 JavaScript 與 CSS (Minify JavaScript and CSS)移除重復腳本 (Remove Duplicate Scripts)
面向圖片(Image)：
優(yōu)化圖片
不要在 HTML 中使用縮放圖片
使用恰當的圖片格式
使用 CSS Sprites 技巧對圖片優(yōu)化
上面就是黑馬程序員帶給大家的關于web前端面試題的問題以及答案解析。希望能幫助到大家，關于更多web前端培訓問題，歡迎隨時咨詢窗口老師