前端面試題（五）（安全、效能優化）

keywords發表於2019-02-16
前端面試題優化

一、說說你所知道的web安全及防護措施

  1. 常用攻擊手段：SQL隱碼攻擊、XSS(Cross Site Script)，跨站指令碼攻擊、CSRF(Cross Site Request Forgery)，跨站點偽造請求

（1）XSS

  • xss: 跨站指令碼攻擊（Cross Site Scripting）是最常見和基本的攻擊 WEB 網站方法，攻擊者通過注入非法的 html 標籤或者 javascript 程式碼，從而當使用者瀏覽該網頁時，控制使用者瀏覽器。
  • (一) 類別（三種）

  1. DOM xss :

    • DOM即文字物件模型，使用DOM可以允許程式和指令碼動態的訪問和更新文件的內容、結構和樣式。這種方式不需要伺服器解析響應的直接參與，觸發XSS靠的是瀏覽器端的DOM解析，可以認為完全是客戶端的事情。

  2. 反射型 xss :

    • 反射型XSS也被稱為非永續性XSS，是現在最容易出現的一種XSS漏洞。發出請求時，XSS程式碼出現在URL中，最後輸入提交到伺服器，伺服器解析後在響應內容中出現這段XSS程式碼，最後瀏覽器解析執行。

  3. 儲存型 Xss

    • 儲存型XSS又被稱為永續性XSS，它是最危險的一種跨站指令碼，相比反射型XSS和DOM型XSS具有更高的隱蔽性，所以危害更大，它不需要使用者手動觸發。 當攻擊者提交一段XSS程式碼後，被伺服器端接收並儲存，當所有瀏覽者訪問某個頁面時都會被XSS，其中最典型的例子就是留言板。
  • （二） Xss危害
  1. 利用虛假輸入表單騙取使用者個人資訊。
  2. 利用指令碼竊取使用者的 Cookie 值，被害者在不知情的情況下，幫助攻擊者傳送惡意請求。
  • （三） 抵禦Xss危害
  1. httpOnly: 在 cookie 中設定 HttpOnly 屬性，使js指令碼無法讀取到 cookie 資訊。
  2. 前端負責輸入檢查，後端也要做相同的過濾檢查。
  3. 某些情況下，不能對使用者資料進行嚴格過濾時，需要對標籤進行轉換

（二） CSRF

  • 跨站點請求偽造（Cross-Site Request Forgeries），冒充使用者發起請求（在使用者不知情的情況下）， 完成一些違背使用者意願的事情（如修改使用者資訊，刪初評論等）。

  • 1、可能造成危害：

    1. 利用已通過認證的使用者許可權更新設定資訊等；
    2. 利用已通過認證的使用者許可權購買商品；
    3. 利用已通過的使用者許可權在留言板上發表言論。

  • 2、防禦：

    1. 驗證碼；強制使用者必須與應用進行互動，才能完成最終請求。
    2. 儘量使用 post ，限制 get 使用；get 太容易被拿來做 csrf 攻擊；
    3. 請求來源限制，此種方法成本最低，但是並不能保證 100% 有效，因為伺服器並不是什麼時候都能取到 Referer，而且低版本的瀏覽器存在偽造 Referer 的風險。
    4. token 驗證 CSRF 防禦機制是公認最合適的方案。

  • 使用token的原理：

    1. 第一步：後端隨機產生一個 token，把這個token 儲存到 session 狀態中；同時後端把這個token 交給前端頁面；
    2. 第二步：前端頁面提交請求時，把 token 加入到請求資料或者頭資訊中，一起傳給後端；
    3. 後端驗證前端傳來的 token 與 session 是否一致，一致則合法，否則是非法請求。

二、說說你說了解的前端效能優化？

  • content方面

    • 減少HTTP請求：合併檔案、CSS精靈、inline Image
    • 減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何檔案。方法：DNS快取、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
    • 避免重定向：多餘的中間訪問
    • 使Ajax可快取
    • 非必須元件延遲載入
    • 未來所需元件預載入
    • 減少DOM元素數量
    • 將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高並行下載量
    • 減少iframe數量
    • 不要404

  • Server方面

    • 使用CDN
    • 新增Expires或者Cache-Control響應頭
    • 對元件使用Gzip壓縮
    • 配置ETag
    • Flush Buffer Early
    • Ajax使用GET進行請求
    • 避免空src的img標籤

  • Cookie方面

    • 減小cookie大小
    • 引入資源的域名不要包含cookie

  • css方面

    • 將樣式表放到頁面頂部
    • 不使用CSS表示式
    • 不使用IE的Filter

  • Javascript方面

    • 將指令碼放到頁面底部
    • 將javascript和css從外部引入
    • 壓縮javascript和css
    • 刪除不需要的指令碼
    • 減少DOM訪問
    • 合理設計事件監聽器

  • 圖片方面

    • 優化圖片：根據實際顏色需要選擇色深、壓縮
    • 優化css精靈
    • 不要在HTML中拉伸圖片
    • 保證favicon.ico小並且可快取

（三）你有用過哪些前端效能優化的方法？

  • 減少http請求次數：

    • CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；
    • 網頁Gzip，CDN託管，data快取 ，圖片伺服器。
  • 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，
  • 前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
  • 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
  • 當需要設定的樣式很多時設定className而不是直接操作style
  • 少用全域性變數、快取DOM節點查詢的結果。
  • 減少IO讀取操作
  • 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)
  • 圖片預載入，將樣式表放在頂部
  • 將指令碼放在底部 加上時間戳
  • 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢

（四）前端需要注意哪些SEO

  • 合理的title、description、keywords：搜尋對這三項的權重逐個減小；

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

（五）如何做SEO優化?

  • 標題與關鍵詞

    • 設定有吸引力切合實際的標題，標題中要包含所做的關鍵詞

  • 網站結構目錄

    • 最好不要超過三級，每級有“麵包屑導航”，使網站成樹狀結構分佈

  • 頁面元素

    • 給圖片標註”Alt”可以讓搜尋引擎更友好的收錄

  • 網站內容

    • 每個月每天有規律的更新網站的內容，會使搜尋引擎更加喜歡

  • 友情連結

    • 對方一定要是正規網站，每天有專業的團隊或者個人維護更新

  • 內鏈的佈置

    • 使網站形成類似蜘蛛網的結構，不會出現單獨連線的頁面或連結

  • 流量分析

    • 通過統計工具(百度統計，CNZZ)分析流量來源，指導下一步的SEO
  • 上期前端面試JavaScript
  • 往期經典深入探究-頁面從輸入URL到載入顯示完成的過程

每天，一點點的積累 + 一點點的成長 === 喜歡留下個贊哦~

持續更新中~歡迎關注，一起探索前端之旅

相關文章