web前端面試題含答案解析

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

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