【JS基礎】頁面加載，性能優化，前端安全

頁面加載

加載資源的形式

1.輸入url或跳轉頁面加載html
2.加載html中的靜態資源

加載一個資源的過程

1.瀏覽器根據DNS服務器獲得域名的IP地址
2.向這個IP的機器發送http請求
3.服務器收到、處理並返回http請求
4.瀏覽器獲得返回內容

瀏覽器渲染頁面的過程

1.根據HTML結構生成DOM TreeWalker
2.根據CSS生成CSSOM
3.將DOM和CSSOM整合成RenderTree
4.根據RenderTree開始渲染和展現
5.遇到<script>時，會執行並阻塞渲染

window.onload 和 DOMContentLoaded的區別？

window.addEventListener('load', function () {
    // 頁面的所有資源加載完纔會執行，包括圖片、視頻等
});

document.addEventListener('DOMContentLoaded', function () {
    // DOM 渲染完便可執行，此時圖片、視頻還可能沒有加載完
});

性能優化

性能優化的原則

1.多使用內存、緩存或者其餘方法
2.減小CPU計算，減小網絡

從哪裏入手

1.加載頁面和靜態資源
2.頁面渲染

加載資源優化

1.靜態資源的壓縮合並，雪碧圖
2.靜態資源緩存
3.使用CDN讓資源加載更快
4.使用SSR後端渲染，數據直接輸出到HTML中

渲染優化

CSS放前面，JS放後面
懶加載（圖片懶加載、下拉加載更多）
減小DOM查詢，對DOM查詢作緩存
減小DOM操做，多個操做盡可能合併在一塊兒執行
事件防抖和節流
儘早執行操做（如DOMContentLoaded）

前端安全

常見的兩種網站攻擊方式

1.XSS 跨站請求攻擊
2.XSRF 跨站請求僞造

XSS 跨站請求攻擊示例：

在新浪博客寫一篇文章，同時偷偷插入一段<script>
攻擊代碼中，獲取cookie，發送到本身的服務器
發佈博客，有人查看博客內容
會把查看者的cookie發送到攻擊者的服務器

解決辦法：前端替換關鍵字，例如替換 < 和 > ，替換成字符實體。建議後端替換（前端js執行效率低，影響性能）

XSRF 跨站請求僞造示例：

你已登陸一個購物網站，正在瀏覽商品
假如該網站付費接口是 xxx.com/pay?id=100 可是沒有任何驗證
而後你收到一封郵件，隱藏着<img src="xxx.com/pay?id=100">
你查看郵件的時候，就已經悄悄的付費購買了

解決辦法：增長驗證流程，如驗證指紋、輸入密碼、短信驗證碼