前端面試題整理-性能優(yōu)化及安全篇

1、前端試題整理性能優(yōu)化及安全篇1、什么是web語義化，以及他的優(yōu)勢web語義化是指通過HTML標(biāo)記表頁包含的信息，包含了HTML標(biāo)簽的語義化和css命名的語義化HTML標(biāo)簽的語義化是指：通過使包含語義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇頇n結(jié)構(gòu)css命名的語義化是指：為html標(biāo)簽添加有意義的class，id補(bǔ)充未表達(dá)的語義， 如Microformat通過添加符合規(guī)則的class描述信息優(yōu)勢：去掉樣式后頁呈現(xiàn)清晰的結(jié)構(gòu)盲使讀屏器更好地閱讀搜索引擎更好地理解頁，有利于收錄便于團(tuán)隊(duì)項(xiàng)的可持續(xù)運(yùn)作及維護(hù)2、前端需要注意哪些SEOtitle、description、keywords：title值強(qiáng)調(diào)重點(diǎn)即可，重

2、要關(guān)鍵詞出現(xiàn)不要超過2次，且要靠前，不同頁title要有所不同； description把頁內(nèi)容度概括，長度合適，不可過分堆砌關(guān)鍵詞，不同頁description有所不同； keywords列舉出重要關(guān)鍵詞即可HTMLW3C規(guī)范：語義化代碼讓搜索引擎容易理解頁HTMLHTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內(nèi)容定會(huì)被抓取jsjs獲取內(nèi)容iframe中的內(nèi)容alt提站速度：站速度是搜索引擎排序的個(gè)重要指標(biāo)3、web開發(fā)中會(huì)話跟蹤的法有哪些1）cookiesessionURL重寫4）input 5）ip地址4、前端開發(fā)中，如何優(yōu)化圖像1、不圖，盡量css3代替。 如說要實(shí)現(xiàn)修

3、飾效果，如半透明、邊框、圓、陰影、漸變等等2、使量圖SVG替代位圖3webfont、CSS Sprites等4CSS或JavaScript實(shí)現(xiàn)預(yù)加載5HTTP協(xié)議設(shè)置合理的緩存6、WebP圖格式能給前端帶來的優(yōu)化。WebP持損、有損壓縮，動(dòng)態(tài)、靜態(tài)圖，壓縮率優(yōu)于GIF、JPEG、JPEG2000、PG等格式5、你所了解到的Web攻擊技術(shù)XSS（Cross-Site Scripting，跨站腳本攻擊）：WebHTML標(biāo)簽或者JS進(jìn)的種攻擊。SQL注攻擊 ）：指攻擊者通過設(shè)置好的陷阱，強(qiáng)制對已完成的認(rèn)證戶進(jìn)預(yù)期的個(gè)信息或設(shè)定信息等某些狀態(tài)更新6、什么是漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)是指在web設(shè)計(jì)時(shí)強(qiáng)調(diào)可訪問性

4、、語義化HTML標(biāo)簽、外部樣式表和腳本。保證所有都能訪問頁的基本內(nèi)容和功能同時(shí)為級瀏覽器和帶寬戶提供更好的戶體驗(yàn)核原則如下：CSS提供增強(qiáng)的布局通過侵式、外部javascript提供增強(qiáng)功能7、哪些操作會(huì)造成內(nèi)存泄漏內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。象的其他對象的數(shù)量。如果個(gè)對象的引數(shù)量為沒有其他對象引過該對象）， 或?qū)υ搶ο蟮奈┮茄h(huán)的，那么該對象的內(nèi)存即可回收。setTimeout 的第個(gè)參數(shù)使字符串函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。閉包、控制臺志、循環(huán)（在兩個(gè)對象彼此引且彼此保留時(shí)，就會(huì)產(chǎn)個(gè)循環(huán)）8、從輸U(kuò)RL到頁加載發(fā)了什么總體來說分為以下個(gè)過程DNS解析TCP連接HTTP

5、請求HTTP報(bào)瀏覽器解析渲染頁連接結(jié)束9、介紹下重繪和回流（Repaint & Reflow ），以及如何進(jìn)優(yōu)化改變了背景顏、邊框、字體的顏，瀏覽器重新繪制顏的過程稱為重繪都會(huì)導(dǎo)致整個(gè)頁重排，瀏覽器會(huì)重新計(jì)算結(jié)構(gòu)位置，重新渲染頁，稱 為回流回流必定會(huì)發(fā)重繪，重繪不定會(huì)引發(fā)回流。解決案：利檔碎 createDocumentFragment 或者利模板字符串，將操作的元素進(jìn)字符串拼接，最后打包放頁中10、如何進(jìn)站性能優(yōu)化content向：HTTPCSSinline ImageDNS查詢：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機(jī)名，平衡 DNS查詢避免重定向：多余的中間訪問使Ajax可緩存元素?cái)?shù)量將資

6、源放到不同的域下：瀏覽器同時(shí)從個(gè)域下載資源的數(shù)有限，增加域可以提并下載量數(shù)量404頁ServerCDNExpiresCache-Control響應(yīng)頭Gzip壓縮ETagFlush Buffer EarlyAjaxGET進(jìn)請求src的img標(biāo)簽Cookiecookiecookiecss將樣式表放到頁頂部CSS表達(dá)式importIE的FilterJavascript將腳本放到頁底部將javascript和css從外部引javascript和css刪除不需要的腳本訪問合理設(shè)計(jì)事件監(jiān)聽器圖優(yōu)化圖：根據(jù)實(shí)際顏需要選擇深、壓縮css精靈HTML中拉伸圖favicon.ico并且可緩存11、XSS和CSRF 如何避免防御XSS攻擊：a：HttpOnly 瀏覽器禁頁的JS訪問帶有HttpOnly屬性的Cookie。b：輸檢查 XSS Filter JS和服務(wù)器端