前端面試題整理—性能優化及安全篇

一、什麼是web語義化，以及他的優點

web語義化是指經過HTML標記表示頁面包含的信息，包含了HTML標籤的語義
化和css命名的語義化

HTML標籤的語義化是指：經過使用包含語義的標籤（如h1-h6）恰當地表示文
檔結構

css命名的語義化是指：爲html標籤添加有意義的class，id補充未表達的語義，
如Microformat經過添加符合規則的class描述信息

優點：

　　1）去掉樣式後頁面呈現清晰的結構

　　2）盲人使用讀屏器更好地閱讀

　　3）搜索引擎更好地理解頁面，有利於收錄

　　4）便於團隊項目的可持續運做及維護

 

二、前端須要注意哪些SEO

　　1. 合理的title、description、keywords：

　　title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；
　　description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；
　　keywords列舉出重要關鍵詞便可
　　2. 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
　　3. 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的
　　搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
　　4. 重要內容不要用js輸出：爬蟲不會執行js獲取內容
　　5. 少用iframe：搜索引擎不會抓取iframe中的內容
　　6. 非裝飾性圖片必須加alt
　　7. 提升網站速度：網站速度是搜索引擎排序的一個重要指標

 

三、web開發中會話跟蹤的方法有哪些

　　1）cookie

　　2）session

　　3）URL重寫

　　4）隱藏input

　　5）ip地址

 

 四、前端開發中，如何優化圖像

　　一、不用圖片，儘可能用css3代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等等

　　二、使用矢量圖SVG替代位圖

　　三、使用字體圖標webfont、CSS Sprites等

　　四、用CSS或JavaScript實現預加載

　　五、按照HTTP協議設置合理的緩存

　　六、WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式

 

五、你所瞭解到的Web攻擊技術

　　（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JS進行的一種攻擊。
　　（2）SQL注入攻擊
　　（3）CSRF（跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新

六、什麼是漸進加強

　　漸進加強是指在web設計時強調可訪問性、語義化HTML標籤、外部樣式表和腳本。

　　保證全部人都能訪問頁面的基本內容和功能同時爲高級瀏覽器和高帶寬用戶提供更好的用戶體驗

　　核心原則以下：

　　全部瀏覽器都必須能訪問基本內容
　　全部瀏覽器都必須能使用基本功能
　　全部內容都包含在語義化標籤中
　　經過外部CSS提供加強的佈局
　　經過非侵入式、外部javascript提供加強功能

 

七、哪些操做會形成內存泄漏

　　內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
　　垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循         環的，那麼該對象的內存便可回收。
　　setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
　　閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

 

 八、從輸入URL到頁面加載發生了什麼

　　整體來講分爲如下幾個過程　

1. DNS解析

2. TCP鏈接

3. 發送HTTP請求

4. 服務器處理請求並返回HTTP報文

5. 瀏覽器解析渲染頁面

6. 鏈接結束

 

九、介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化 

　　改變了背景顏色、邊框、字體的顏色，瀏覽器從新繪製顏色的過程稱爲重繪

　　當頁面的元素髮生變化的時候（寬、高、位置、建立元素），都會致使整個頁面重排，瀏覽器會從新計算結構位置，從新渲染頁面，稱爲DOM迴流

　　迴流一定會發生重繪，重繪不必定會引起迴流。

　　解決方案：

　　利用文檔碎片 createDocumentFragment 或者利用模板字符串，將操做的元素進行字符串拼接，最後打包放入頁面中

 

十、如何進行網站性能優化

　　content方向：

　　1. 減小HTTP請求：合併文件、CSS精靈、inline Image
　　2. 減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
　　3. 避免重定向：多餘的中間訪問
　　4. 使Ajax可緩存
　　5. 非必須組件延遲加載
　　6. 將來所需組件預加載
　　7. 減小DOM元素數量
　　8. 將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量
　　9. 減小iframe數量
　　10. 減小404頁面

　　Server方面

　　1. 使用CDN
　　2. 添加Expires或者Cache-Control響應頭
　　3. 對組件使用Gzip壓縮
　　4. 配置ETag
　　5. Flush Buffer Early
　　6. Ajax使用GET進行請求
　　7. 避免空src的img標籤

　　Cookie方面

　　1. 減少cookie大小
　　2. 引入資源的域名不要包含cookie

　　css方面

　　1. 將樣式表放到頁面頂部
　　2. 不使用CSS表達式
　　3. 使用不使用@import
　　4. 不使用IE的Filter

　　Javascript方面

　　1. 將腳本放到頁面底部
　　2. 將javascript和css從外部引入
　　3. 壓縮javascript和css
　　4. 刪除不須要的腳本
　　5. 減小DOM訪問
　　6. 合理設計事件監聽器

　　圖片方面

　　1. 優化圖片：根據實際顏色須要選擇色深、壓縮
　　2. 優化css精靈
　　3. 不要在HTML中拉伸圖片
　　4. 保證favicon.ico小而且可緩存

 

十一、XSS和CSRF如何避免

　　防護XSS攻擊：

　　a：HttpOnly 瀏覽器禁止頁面的JS訪問帶有HttpOnly屬性的Cookie。 
　　b：輸入檢查 XSS Filter 對輸入內容作格式檢查，相似「白名單」，可讓一些基於特殊字符的攻擊失效。在客戶端JS和服務器端代碼中實現相同的輸入檢查
　　c：輸出檢查 在變量輸出到html頁面時，可使用編碼或轉義的方式來防護XSS攻擊

　　防護CSRF攻擊：

　　a. 驗證碼、 Referer Check 檢查請求是否來自合法的源（可被僞造）