JavaScript核心基礎

語言: CN / TW / HK
時間 2023-01-10 18:15:07
主題:
DOM操作與效能問題
  • DOM 操作是否會帶來效能問題
  • 頁面需要渲染1萬個DOM元素， 如何提升頁面效能
事件冒泡和事件委託

  • 事件委託到父節點或者document中，哪個更好

    • 瀏覽器會將頁面上具有事件處理程式的區域進行標記，被標記的區域會與主執行緒進行通訊
    • 如果在document.body上繫結事件，整個頁面都會被標記。即使我們不關心某些部分的使用者互動

  • 事件委託的順序：事件捕獲階段、目標階段、事件冒泡階段

  • document.body新增事件委託，每次觸發事件時，會產生生等待，為什麼會產生等待？passive: true的作用是什麼？

    • 產生等待是因為合成器執行緒與主執行緒進行通訊。passive 設定為 true 時，表示 listener 永遠不會呼叫 preventDefault。根據規範，passive 選項的預設值始終為 false，這引入了處理某些觸控事件（以及其他）的事件監聽器在嘗試處理滾動時阻止瀏覽器的主執行緒的可能性，從而導致滾動處理期間效能可能大大降低。
虛擬DOM的設計

  • 為什麼要使用虛擬DOM

  • 為什麼要使用js物件來描述DOM

  • 簡單描述下DOM的實現原理

  • 虛擬DOM設計的過程

    • 用JS物件模擬DOM樹，得到一棵虛擬DOM樹
    • 當頁面資料變更時，生成新的虛擬DOM樹，比較新舊兩棵虛擬DOM樹的差異
    • 把差異應用到真正的DOM樹上
頁面佈局原理

  • 常說的盒子模型是指什麼

    • 盒模型主要用來描述元素所佔空間的內容，由四部分組成

  • 什麼是文件流

    • 正常的文件流在 HTML 裡面為從上到下，從左到右的排版佈局

  • 浮動元素為什麼無法撐開父元素？如何解決

頁面佈局技巧

  • 為什麼將某個元素z-index設定為9999999，但是它依然被其他元素遮擋住了呢

    • 因為除了同級元素以外，z-index值的設定效果還會受到父元素的z-index值的影響，z-index值的設定只決定同一父元素中的同級子元素的堆疊順序

  • 居中佈局的幾種實現方式

    • 傳統佈局方式
    • Flex佈局方式
    • Grid佈局方式

  • 對Flex佈局， Grid佈局方式的理解和使用

    • 通過flex-direction調整 Flex 元素的排列方向（主軸的方向）；

      用flex-wrap實現多行 Flex 容器如何換行；

      使用justify-content調整 Flex 元素在主軸上的對齊方式；

      使用align-items調整 Flex 元素在交叉軸上如何對齊；

      使用align-content調整多根軸線的對齊方式。

瀏覽器的佈局過程
  • 瀏覽器在進行頁面佈局過程會做些什麼
  • 重繪和重排會導致什麼問題
  • css動畫和JS動畫相比， 有什麼優缺點
JavaScript的原型和繼承

  • 如何理解JavaScript中的“一切皆物件"

  • 如何建立一個物件

  • 函式也是一個物件，有屬性和值。 所有函式會有一個特別的屬性prototype，該屬性的值也是一個物件，這個物件便是我們常說的原型物件。

  • --proto-- 與 prototype的區別

    • --proto--屬性指向物件的原型物件。
    • 對函式來說，原型物件是prototype

  • --proto--和prototype的關係

    • 每個物件都有-proto-屬性來標識自己所繼承的原型物件，但只有函式才有prototype屬性
    • 對於函式來說，每個函式都有一個prototype屬性，該屬性為該函式的原型物件
    • 通過將例項物件的proto屬性賦值為其建構函式的原型物件prototype，JavaScript 可以使用建構函式建立物件的方式，來實現繼承

  • 函式原型物件prototype的特點

    • 函式原型物件都有constructor屬性，該屬性指向與之關聯的建構函式

    • 建構函式的原型物件同樣擁有自己的原型物件，用--proto--屬性表示。前邊說過，函式是Object例項，因此Person.prototyped 原型物件為Object.prototype。

  • JavaScript 中物件是怎麼實現繼承的（使用 prototype 和 proto 實現繼承）

    • 物件之所以使用廣泛，是因為物件的屬性值可以為任意型別。因此，屬性的值同樣可以為另外一個物件，這意味著 JavaScript 可以這麼做：通過將物件 A 的proto屬性賦值為物件 B，即A.proto = B，此時使用A.proto便可以訪問 B 的屬性和方法
    • 這樣，JavaScript 可以在兩個物件之間建立一個關聯，使得一個物件可以訪問另一個物件的屬性和方法，從而實現了繼承

  • 通過原型鏈訪問物件的方法和屬性

    • 首先會優先在該物件上搜尋。如果找不到，還會依次層層向上搜尋該物件的原型物件、該物件的原型物件的原型物件等（套娃告警）
    • JavaScript 中的所有物件都來自Object，Object.prototype.proto === null。null沒有原型，並作為這個原型鏈中的最後一個環節；
    • JavaScript 會遍歷訪問物件的整個原型鏈，如果最終依然找不到，此時會認為該物件的屬性值為undefined
對單執行緒JavaScript的理解
  • 單執行緒來源
  • WebWorkers 和 ServiceWorkers的理解
非同步事件機制
  • 為什麼使用非同步事件機制
  • 在實際使用中非同步事件可能會導致什麼問題
  • 關於setTimeout、setInterval的時間準確性
作用域與閉包
  • 請描述一下程式碼的執行輸出內容
  • apply、call、bind的使用
  • 箭頭函式和普通函式的區別
對EventLoop的理解

  • 在瀏覽器裡，每當一個被監聽的事件發生時，事件監聽器繫結的相關任務就會被新增進回撥佇列。通過事件產生的任務是非同步任務，常見的事件任務包括使用者互動事件、計時器、非同步請求

  • 介紹瀏覽器的EventLoop

    • JavaScript 有一個主執行緒和呼叫棧，所有的任務最終都會被放到呼叫棧等待主執行緒執行。
    • 同步任務會被放在呼叫棧中，按照順序等待主執行緒依次執行。
    • 主執行緒之外存在一個回撥佇列，回撥佇列中的非同步任務最終會在主執行緒中以呼叫棧的方式執行。
    • 同步任務都在主執行緒上執行，棧中程式碼在執行的時候會呼叫瀏覽器的 API，此時會產生一些非同步任務。
    • 非同步任務會在有了結果（比如被監聽的事件發生時）後，將非同步任務以及關聯的回撥函式放入回撥佇列中。
    • 呼叫棧中任務執行完畢後，此時主執行緒處於空閒狀態，會從回撥佇列中獲取任務進行處理。

  • 巨集任務和微任務的區別

  • setTimeout、promise、async/await在不同瀏覽器的執行順序

瀏覽器相關（08）

瀏覽器的同源測略
  • 同源指什麼
  • 哪些行為受到同源策略的限制
  • 常見的跨越方案有哪些
瀏覽器的快取相關
  • web快取通常包括哪些
  • 瀏覽器什麼情況下會使用本地快取
  • 強快取和協商快取的區別
  • 強制Ctrl+F5會發生什麼
  • session、cookie、token及storage
瀏覽器的載入順序
  • 為什麼我們通常將JS放在body的最後邊
  • 為什麼我們將CSS放在head中
瀏覽器的渲染原理
  • HTML/CSS/JS的解析過程
  • 渲染樹是怎樣生成的
  • 重排和重繪是怎樣的過程
  • 日常開發中要注意哪些渲染效能問題
瀏覽器事件
  • 瀏覽器中包括哪些事件
  • 在瀏覽器重，是如何處理使用者的互動的
  • 對事件進行監聽的回撥函式，會在什麼被執行

< 網路相關 >(06)

域名解析（涉及DNS的定址過程）
TCP連線建立
  • TCP的3次握手
  • 為什麼TCP連線握手需要3次通訊，揮手卻需要4次

< HTTP協議 >

HTTP訊息的結構
  • Request請求
  • Response響應
  • 常見的HTTP狀態碼
  • HTTP請求方法
  • 使用PUT、DELETE等方法時為什麼有時候在瀏覽器會看到兩次請求
HTTP請求的應用場景
  • 瀏覽器是如何控制快取的：相應的頭資訊、狀態碼
  • websocket 與 http請求的區別
  • 如何對請求進行抓包和改造
  • 網路請求的優化方法
HTTP 的更新迭代
  • HTTPS和HTTP的區別
  • HTTP2、HTTP3分別做了怎樣的設計調整

< Web安全 >

前端安全
  • 前端安全中、需要注意哪些問題
  • XSS/CSRF是怎樣的攻擊過程，要怎樣防範
  • 除了XSS和CSRF，你還了解哪些網路安全相關的問題呢
其他web安全
  • SQL注入、命令列注入是怎樣進行的
  • DDoS攻擊是什麼
  • 流量劫持包括哪些內容
面試題

  • JavaScript 中0.1+0.2為什麼等於0.30000000000000004，如何通過程式碼解決這個問題？

  • 手寫程式碼Promise

  • 手寫程式碼實現 call/apply/bind

  • 為什麼要使用async、await

  • 介紹下Set和Map資料結構

  • Javascript 是怎麼實現let和const作用域的

  • 網頁載入流程

    • 開啟頁面，獲取HTML內容，獲取後，從上到下解析
    • 先解析head，遇到script和css，會暫停解析並下載js指令碼。
    • 當指令碼下載完成後，瀏覽器的控制權轉交給js引擎。當指令碼執行完成後，控制器會交回渲染引擎，繼續解析HTML
    • 此時body開始解析，瀏覽器開始渲染。 所以head中放置script元素會阻塞頁面的渲染過程。放在body後，能防止資源阻塞。 可以用defer/async/preload等屬性來標記script標籤，來控制js的載入順序。async屬性會讓這些指令碼並行進行請求獲取資源，同時當資源獲取完成後儘快解析和執行，這個過程是非同步的，不會阻塞 HTML 的解析和渲染。
    • 瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規則樹，它們結合後才生成最終的渲染樹並渲染。因此，我們還常常將 CSS 放在裡，可用來避免瀏覽器渲染的重複計算。

  • DOM 和 HTML的不同

    • DOM是用來操作和描述HTML 和 XML文件的介面
    • 如果說瀏覽器用HTML來描述網頁的結構並渲染，那DOM就是用來獲取網頁的結構並操作
    • 一般來說我們用JS來操作DOM介面，從而實現動態渲染

https://kaiwu.lagou.com/course/courseInfo.htm?courseId=822#/detail/pc?id=7196

「其他文章」
「」