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


1、什么是web語義化,以及他的優勢

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

HTML標簽的語義化是指:通過使用包含語義的標簽(如h1-h6)恰當地表示文
檔結構

css命名的語義化是指:為html標簽添加有意義的class,id補充未表達的語義,
如Microformat通過添加符合規則的class描述信息

優勢:

  1)去掉樣式后頁面呈現清晰的結構

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

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

  4)便於團隊項目的可持續運作及維護

 

2、前端需要注意哪些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. 提高網站速度:網站速度是搜索引擎排序的一個重要指標

 

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

  1)cookie

  2)session

  3)URL重寫

  4)隱藏input

  5)ip地址

 

 4、前端開發中,如何優化圖像

  1、不用圖片,盡量用css3代替。 比如說要實現修飾效果,如半透明、邊框、圓角、陰影、漸變等等

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

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

  4、用CSS或JavaScript實現預加載

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

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

 

5、你所了解到的Web攻擊技術

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

6、什么是漸進增強

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

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

  核心原則如下:

  所有瀏覽器都必須能訪問基本內容
  所有瀏覽器都必須能使用基本功能
  所有內容都包含在語義化標簽中
  通過外部CSS提供增強的布局
  通過非侵入式、外部javascript提供增強功能

 

7、哪些操作會造成內存泄漏

  內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
  垃圾回收器定期掃描對象,並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循         環的,那么該對象的內存即可回收。
  setTimeout 的第一個參數使用字符串而非函數的話,會引發內存泄漏。
  閉包、控制台日志、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)

 

 8、從輸入URL到頁面加載發生了什么

  總體來說分為以下幾個過程 

  1. DNS解析

  2. TCP連接

  3. 發送HTTP請求

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

  5. 瀏覽器解析渲染頁面

  6. 連接結束

 

9、介紹下重繪和回流(Repaint & Reflow),以及如何進行優化 

  改變了背景顏色、邊框、字體的顏色,瀏覽器重新繪制顏色的過程稱為重繪

  當頁面的元素發生變化的時候(寬、高、位置、創建元素),都會導致整個頁面重排,瀏覽器會重新計算結構位置,重新渲染頁面,稱為DOM回流

  回流必定會發生重繪,重繪不一定會引發回流。

  解決方案:

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

 

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

  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小並且可緩存

 

11、XSS和CSRF如何避免

  防御XSS攻擊:

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

  防御CSRF攻擊:

  a. 驗證碼、 Referer Check 檢查請求是否來自合法的源(可被偽造)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM