更新時(shí)間:2019-03-26 來(lái)源:web前端培訓(xùn)機(jī)構(gòu) 瀏覽量:
很多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)容圖片多為照片之類的,適用于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í)咨詢窗口老師