js面試問題總結

1.虛拟DOM

虛拟dom為什麼能夠提高性能

JS對象的結構樹表示dom樹的結構，用這個樹建構一個真正的dom樹，插到文檔中記錄狀态變更，重新構造一個新的對象樹，然後用新的樹和舊的樹去做比較，記錄兩者之間的差異，将差異的部分更新到真正的dom樹上面，隻會渲染差異部分并不會渲染全部

2.cookie localStorage sessionStorage

相同點：都是存儲在用戶端

不同點：大小不一。cookie 不能超過4k ， sessionStorage和 localStorage 5M 左右

有效時間：localStorage存儲時間持久，浏覽器關閉後資料不會消失，sessionStorage資料在浏覽器視窗關閉後自動删除，設定的cookie過期時間之前一直有效，即使視窗或者浏覽器關閉

伺服器之間的互動方式： cookie會把資料自動傳遞給服務端，服務端也可以寫cookie到用戶端，sessionStorage和localStorage 不會自動将資料傳給服務端，會儲存在本地

3.什麼是閉包

閉包就是能使得外部變量擷取内部變量的函數，在本質上閉包就是将内部函數和外部函數連接配接起來的一個橋梁，最大的用處有兩個： 可以讀取函數内部的變量；讓這些變量的值始終保持在記憶體中

閉包的好處

延長變量的生命周期

避免全局污染

私有成員存在

安全性提高

4.從輸入url到顯示頁面都經曆了什麼

浏覽器輸入url這一過程詳解

1.在浏覽器中輸入url

2.浏覽器先在緩存中查找緩存中有的話從緩存中拿取，沒有的話發送http請求

3.在發送http請求之前 解析域名

4.浏覽器想服務端發送tcp請求與浏覽器建立三次握手

5.握手成功發送http請求，請求資料包

6.服務端接收到請求并且将資料傳回給浏覽器

7.浏覽器接收到資料

8.讀取頁面内容，浏覽器渲染，解析 html源碼

9.生成dom樹 解析css樣式 js互動

10.用戶端與服務端互動

11.ajax查詢

5.改變this指向的bind apply call 的差別

bind需要手動調用，apply call 是立即調用

call 需要一個參數一個參數的傳遞 apply 需要傳入一個數組

在箭頭函數中 call和 apply失效

如果你需要傳遞的參數不多可以使用call

如果參數很多可以整理成數組 進行傳遞

如果想生成一個新的函數長期綁定給某個函數給某個對象使用都可以用bind

6.為什麼jsonp不是真正的ajax

jsonp是根據動态插入這一特點來進行的

真正的ajax是通過XMLHttpRequest來讀取本頁内容的

不同點：實質不同，ajax是通過跨域，jsonp是通過script标簽并不遵循同源政策。jsonp隻支援get請求，ajax既支援get也支援post put Delete

7.如何進行網站的性能優化

1.減少http請求

2.css選擇器優化

3.當資料量很大時使用懶加載

4.對浏覽器使用優雅降級和漸進增強的方案( 優雅降級是指：一開始針對浏覽器的版本進行頁面建構，然後再根據進階浏覽器進行互動，追加更好的使用體驗。漸進增強是指：一開始就建構站點的完整功能。然後針對浏覽器進行測試和修複)

5.使用壓縮的js css包

6.減少請求的數量

7.優化網絡連接配接

8.優化資源加載

9.減少重繪回流

10.性能更好的API

11.webpack優化

8.new操作符幹了什麼

1.

new

建立了一個空對象并且用this引用這個空對象，同時還繼承了函數的原型

2. 屬性和方法都被加入到this引用的對象中

3.對象由this引用，并且在最後隐式傳回了this

9.dom選擇器優先級以及權重值計算

行内樣式：1000

ID選擇器：0100

類選擇器 僞類選擇器 屬性選擇器：0010

标簽選擇器 僞元素選擇器 ：0001

通配符 子選擇器 相鄰選擇器 ：0000

10.foreach 和 map之間的差別

map會産生一個數組 foreach不會 map可以進行鍊式操作 foreach不能

前端面試必備