javascript - 前端被問到效能和安全，有總結的比較全面的嗎？

Question

前端效能和安全性比較重要，也常會被提及。

個人理解的一些：

效能

• 檔案合併

• 檔案壓縮

• #雪碧圖

• #gzip [一般後台 nginx或Apache上配置，感覺前端也談不上]

• 動態載入

• cdn (一般 維那邊有專人處理，前端談不上)

#安全性

• sql注入 [跨站攻擊]

#問題：
有經驗的分享總結一下嗆。謝謝！

Answer 1

1. 效能：
   原則1：減少http請求，合併圖片，css檔案
   原則2：快取利用：使用CDN，使用外部js和css，新增Exp。 ires頭，減少DNS查詢，配置Etag,使用Ajax快取。
   原則3：請求頻寬：開啟GZIP,精簡js,移除重複腳本，影像最佳化。
   原則4：頁面結構：樣式放在頭部，及js放在底部，儘早刷新文檔輸出
   原則5.避免css表達式，避免重定向
   其實從特定的業務場景出發，會理解的更深一點，比如說，搜尋結果頁

2. 安全：
   XSS

Answer 2

剛好最近也在準備面試，整理了一點我自己的看法

性能

http請求

減少http請求的主要主要想法就是減少HTML文件內連結的資源數量：

• 專案上線時將CSS`JavaScript`等檔案壓縮合併打包，減少來源檔案的數量和體積

• 將多張小圖片製作成精靈圖

• 將資源轉換為base64編碼

• 使用快取可以加快網頁開啟速度，有效減少http請求

• 使用懶加載，隨選加載對應資源

頁面開啟速度

• 使用CDN載入資源

• 將CSS放在頁頭，防止頁面閃爍

• 將JavaScript非同步或延遲加載，防止JavaScript運行阻塞頁面加載

• 延遲請求首屏外的文件，即優先載入首屏內容。

執行效率

• 選擇器由右向左解析，嵌套順序不宜過深

• JavaScript中減少作用域鏈的查找，避免使用eval和Function等效能緩慢的介面

• DOM操作的代價是十分昂貴的，可以使用DocumentFragment暫時存放那些一次插入文件的節點

前端安全

前端安全主要表現為透過瀏覽器間接影響使用者資料的安全問題。

XSS

跨站腳本攻擊(Cross Site Scripting)指的是惡意攻擊者往Web頁面裡插入惡意Script程式碼，當使用者瀏覽該頁時，嵌入其中Web裡面的Script程式碼會被執行，從而達到惡意攻擊用戶的目的，例如盜取用戶的cookie。
XSS的問題是找到目標網站可插入執行腳本的漏洞，例如某段編輯內容，如果不處理使用者的輸入就直接儲存到資料庫中，則使用者存取對頁面時，惡意腳本被渲染到頁面上，就可能執行對應的攻擊。

CSRF

跨站請求偽造，例如目標網站的刪除文章功能接受到來自惡意網站用戶端發出的刪除文章請求，這個請求是跨站點的，並且是偽造的（不是目標網站用戶的本意）。
實作方式是在惡意網站上先建立一個GET請求（由於Ajax的同源限制，可以使用img的src請求等），然後欺騙目標網站使用者造訪該惡意網站，則在造訪時會發起對應請求（並附帶對應的Cookie等使用者辨識資訊），此時攻擊也會發生

介面操作劫持

介面偽造，盜取使用者資訊啥的...

Answer 3

效能 程式碼壓縮 圖片壓縮 減少 http請求 ajax非同步等等 都有利於效能

安全 XXS 加密代碼