前端有關頁面加載，性能優化的小知識

介紹一下頁面加載，性能優化，及簡單的web前端攻擊的知識，只是簡單的介紹昂，不喜勿噴 知識點包括：從輸入url到渲染的整個過程介紹、頁面優化，緩存、頁面加載方式等

知識點

加載一個資源的過程（從輸入url獲得html的渲染過程）

• 瀏覽器根據DNS服務器獲得域名的IP地址
• 向ip對應的機器發送http請求
• 服務器獲得請求，處理並返回http資源
• 瀏覽器獲得資源後對資源進行處理返回內容

瀏覽器渲染頁面的過程

• 根據HTML生成DOM tree
• 根據CSS生成CSSOM
• 根據DOM和CSSOM生成RenderTree
• 根據renderTree渲染頁面和展現
• 遇到script會執行而且阻塞渲染

頁面優化的原則

• 多使用內存，緩存
• 減小網絡請求

頁面優化

• 頁面資源優化
  • 靜態資源壓縮合並
  • 靜態資源緩存
  • 使用CDN讓資源加載更快
  • 使用SSR後端渲染，數據直接輸出到HTML中
• 渲染優化
  • css放前面，JS放後面
  • 懶加載（圖片懶加載，上拉加載更多）
  • 減小DOM查詢，對DOM查詢進行緩存
  • 減小DOM操做，多個操做盡可能合併在一塊兒
  • 事件節流
  • 儘早進行操做（DomContentLoaded）

前端攻擊類型

• XSS跨域腳本攻擊

  • 插入一段<script>
  • 解決辦法：前端主動將<，>進行轉義替換，可是會影響性能

• CSRF跨站請求僞造

  • 攻擊原理：

    

  • 防護措施

    • 添加token校驗
    • referer驗證（判斷頁面來源）
    • 隱藏令牌

算法

• 排序
  • 快排：https://segmentfault.com/a/1190000009426421
  • 選擇排序：https://segmentfault.com/a/1190000009366805
  • 希爾排序：https://segmentfault.com/a/1190000009461832
• 堆棧、隊列、鏈表
  https://juejin.im/entry/58759e79128fe1006b48cdfd
• 遞歸
  https://segmentfault.com/a/1190000009857470
• 波蘭式和逆波蘭式

問題

window.onload和DomContentLoaded的區別

• window.onload是全部元素都加載完，包括圖片，視頻等大的資源

• DomContentLoad是DOM渲染完以後，不包括圖片和視頻渲染完