web前端面試題含答案解析

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

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