基於TOP-K的面試題解總結（8）
阿新 • • 發佈：2022-04-11
36.簡述 Javascript 事件冒泡和事件捕獲原理
- 描述事件觸發時序問題
- 事件捕獲：
- 由外到內：從document根節點到觸發事件的那個節點
- 先觸發當前節點的根元素然後再觸發下一級事件，直到事件源
- 事件冒泡：
- 由內到外：自下而上的去觸發事件
- 事件流：
- 事件捕獲-->事件源-->事件冒泡
- Nginx的gzip壓縮：
- 配置gzip on；開啟gzip壓縮
- gzip_types 表示需要壓縮的常見靜態資源
- gzip_min_length 1k；表示大於1k就壓縮
- gzip_comp_level 2；表示壓縮等級1-9，數字越小壓縮速度越快但cpu消耗大
- Vue-Router路由懶載入
- 將不同路由對應的不同元件分割成不同的js程式碼塊，然後當路由被訪問的時候才載入對應的元件，更高效
- UI庫可以按需載入：
- 對於UI庫可按照頁面所需的UI進行按需載入
- 通過設定link標籤的ref屬性
- prefetch降低權重，不用立馬載入
- preload提高下載順序權重，使得關鍵資料提前下載好，優化頁面載入速）
- sessionStorage：cookie的擴大版，面向會話的儲存。會話結束會被清除。大小和localStorage相近5MB左右
- localStorage：生命週期是永久，儲存的資訊永遠不會消失，除非使用者主動清除
- BFC：塊級格式化上下文，盒子內部有一套自己的渲染規則，形成獨立的容器。不影響其他環境中的佈局
- 形成BFC條件：
- float不為none
- position為absolute（絕對定位）或fixed
- display屬性值為inline-block/felx/table-cell等
- overflow不為visible
- 使用場景：
- 解決高度塌陷：由於子元素設定浮動，父元素高度塌陷，只要設定父元素overflow為hidden即可解決容器塌陷
- 阻止外邊距margin疊加
- 防止浮動元素遮住文件流中元素（因為設定盒子後，盒子不會影響其他環境中的佈局）
- 建立DOM節點
- 建立元素節點：document.createElement("div")
- 建立文字節點：document.createNode("hello world")
- 插入DOM節點
- 在父元素節點中末尾插入子節點：fatherNode.appendChild(sonNode)
- 在父元素節點中某個子元素之前插入節點：fatherNode.insertBefore(sonNewNode,sonOldNode)
- 刪除DOM節點
- 在父元素節點中刪除某個子元素：fatherNode.removeChile(sonNode)
- 修改DOM節點屬性
- Node.setAttribute(name,value)；給Node設定{name : value}的屬性
- Node.getAttribute(name)；獲取Node{name}的屬性值
- Node.removeAttribute(name)；移除Node{name}的屬性值
- 獲取節點
- 通過ID獲取對應元素：getElementById()
- 通標籤名獲取對應元素：getElementsByTagName()
- 通過類名獲取對應元素：getElementsByClassName()
- 通過CSS選擇器獲取對應元素：querySelector()和querySelectorAll()
- 通過name屬性獲取對應元素：getElementsByName()
- 複製節點
- Anode.cloneNode(boolean); Anode是被複制的元素，返回的是新元素，boolean表示是否複製
- 替換節點
- 在父元素節點中用新的子元素替換老的： fatherNode.replaceChild(newSonNode,oldSonNode)