前端面試(八)

一、div p 和div>p的區別

div p :後代選擇器 ,選擇div下的所有p元素

div>p: 子代選擇器, 選擇div下一級,即子級的p元素

二、實現左側固定寬高,右側自適應的佈局

float佈局,position佈局,flex佈局,table佈局,grid佈局

三、let const var 的區別

var: ES5語法,聲明變量,存在變量提升,

let:     ES6語法,聲明變量,存在暫時性死區,存在塊級作用域

const: ES6語法,聲明常量,必須在聲明的同時賦值,不允許再次賦值,存在暫時性死區,存在塊級作用域

四、

 

輸出結果是多少?

五、回調地獄

函數作爲參數層層嵌套

https://www.jianshu.com/p/39adf6ab8ad1

六、angular生命週期

https://www.jianshu.com/p/a2f1d54097f8

七、js循環機制

即event looper, js運行機制,單線程,任務隊列,event table,event queue,同步異步,異步分爲宏任務和微任務

https://blog.csdn.net/lxj7607/article/details/105097912

八、數組的方法,包括高級函數

pop(),push(),unshift(),shift(),sort(),reverse(),indexOf(),lastIndexOf(),join(),slice();splice(),concat()

find():  用於找出第一個符合條件的數組成員

findIndex() : 返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1

fill(): 方法使用給定值,填充一個數組。fill方法還可以接受第二個和第三個參數,用於指定填充的起始位置和結束位置。

keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

includes() 方法返回一個布爾值,表示某個數組是否包含給定的值

flat() 用於將嵌套的數組“拉平”,變成一維的數組。該方法返回一個新數組,對原數據沒有影響;

flatMap()方法對原數組的每個成員執行一個函數(相當於執行Array.prototype.map()),然後對返回值組成的數組執行flat()方法。該方法返回一個新數組,不改變原數組。

https://es6.ruanyifeng.com/#docs/array

九、如何將一個扁平的數組轉化成層級的數組

https://blog.csdn.net/weixin_33755649/article/details/88696252

十、瀏覽器從輸入一個url到生成頁面經歷了什麼

1、首先,在瀏覽器地址欄中輸入url

2、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存,如果緩存中有,會直接在屏幕中顯示頁面內容。若沒有,則跳到第三步操作。

3、在發送http請求前,需要域名解析(DNS解析),解析獲取相應的IP地址。

4、瀏覽器向服務器發起tcp連接,與瀏覽器建立tcp三次握手

5、握手成功後,瀏覽器向服務器發送http請求,請求數據包

6、服務器處理收到的請求,將數據返回至瀏覽器

7、瀏覽器收到HTTP響應

8、讀取頁面內容,瀏覽器渲染,解析html源碼

9、生成Dom樹、解析css樣式、js交互

10、客戶端和服務器交互

11、ajax查詢

https://blog.csdn.net/shan1991fei/article/details/81118734

十一、DNS解析

 

十二、post請求

 

十三、瀏覽器的組成部分

  • 用戶界面 -包括地址欄、後退/前進按鈕、書籤目錄等,也就是你-所看到的除了頁面顯示窗口之外的其他部分
  • 瀏覽器引擎 -可以在用戶界面和渲染引擎之間傳送指令或在客戶端本地緩存中讀寫數據等,是瀏覽器中各個部分之間相互通信的核心
  • 渲染引擎 -解析DOM文檔和CSS規則並將內容排版到瀏覽器中顯示有樣式的界面,也有人稱之爲排版引擎,我們常說的瀏覽器內核主要指的就是渲染引擎
  • 網絡 -用來完成網絡調用或資源下載的模塊
  • UI 後端 -用來繪製基本的瀏覽器窗口內控件,如輸入框、按鈕、單選按鈕等,根據瀏覽器不同繪製的視覺效果也不同,但功能都是一樣的。
  • JS引擎 -用來解釋執行JS腳本的模塊,如 V8 引擎、JavaScriptCore
  • 數據存儲 -瀏覽器在硬盤中保存 cookie、localStorage等各種數據,可通過瀏覽器引擎提供的API進行調用

     https://www.cnblogs.com/echo-hui/p/9231031.html

十四、瀏覽器緩存的原理,http緩存

https://blog.csdn.net/xiamiflying/article/details/88667876

十五、WebSocket

(1)什麼是WebSocket?

WebSocket是HTML5中的協議,支持持久連續,http協議不支持持久性連接。Http1.0和HTTP1.1都不支持持久性的鏈接,HTTP1.1中的keep-alive,將多個http請求合併爲1個

(2)WebSocket是什麼樣的協議,具體有什麼優點?

HTTP的生命週期通過Request來界定,也就是Request一個Response,那麼在Http1.0協議中,這次Http請求就結束了。在Http1.1中進行了改進,是的有一個connection:Keep-alive,也就是說,在一個Http連接中,可以發送多個Request,接收多個Response。但是必須記住,在Http中一個Request只能對應有一個Response,而且這個Response是被動的,不能主動發起。

WebSocket是基於Http協議的,或者說借用了Http協議來完成一部分握手,在握手階段與Http是相同的。我們來看一個websocket握手協議的實現,基本是2個屬性,upgrade,connection。

十六、http狀態碼

1xx:指示信息-表示請求已接收,繼續處理
2xx:成功-表示請求已被成功接收
3xx:重定向-要完成請求必須進行更進一步的操作
4xx:客戶端錯誤-請求有語法錯誤或請求無法實現
5xx:服務器錯誤-服務器未能實現合法的請求

100(繼續)請求者應當繼續提出請求。服務器返回此代碼表示已收到請求的第一部分,正在等待其餘部分。

101 :狀態碼英文名稱是Switching Protocols,表示切換協議。服務器根據客戶端的請求切換協議。只能切換到更高級的協議,例如,切換到HTTP的新版本協議。 

200 OK:客戶端請求成功
206 Partial Content:客戶發送了-一個帶有Range頭的GET請求,服務器完成了它
301 Moved Permanently:所請求的頁面已經轉移至新的url
302 Found:所請求的頁面已經臨時轉移至新的url
304 Not Modified:客戶端有緩衝的文檔併發出了一個條件性的請求,服務器告訴客戶,原來緩衝的文檔還可以繼續使用
400 Bad Request:客戶端請求有語法錯誤,不能被服務器所理解
401 Unauthorized:請求未經授權,這個狀態代碼必須和WWW- Authenticate報頭域-起使用
403 Forbidden:對被請求頁面的訪問被禁止
404 Not Found;請求資源不存在
500 Internal Server Error:服務器發生不可預期的錯誤原來緩衝的文檔還可以繼續使用
503 Server Unavailable:請求未完成,服務器臨時過載或當機,一段時間後可能恢復正常

https://www.php.cn/web/web-http101.html

十七、vue-router

https://router.vuejs.org/zh/

動態路由如何設置

const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

使用:

this.$router.push('/user/admin')

如何接收動態路由的參數

使用this.$route.params

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

十八、v-if和v-show的區別

v-if 是“真正”的條件渲染,因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的:如果在初始渲染時條件爲假,則什麼也不做——直到條件第一次變爲真時,纔會開始渲染條件塊。

相比之下,v-show 就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。

一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好。

v-show 不支持 <template> 元素,也不支持 v-else,v-if支持<template>和v-else

十九、防抖和節流

防抖

當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函數纔會執行一次,如果設定時間到來之前,又觸發了事件,就重新開始延時。也就是說當一個用戶一直觸發這個函數,且每次觸發函數的間隔小於既定時間,那麼防抖的情況下只會執行一次。

節流

當持續觸發事件時,保證在一定時間內只調用一次事件處理函數,意思就是說,假設一個用戶一直觸發這個函數,且每次觸發小於既定值,函數節流會每隔這個時間調用一次。

防抖是將多次執行變爲最後一次執行,節流是將多次執行變爲每隔一段時間執行

https://segmentfault.com/a/1190000018428170

https://www.cnblogs.com/youma/p/10559331.html

二十、display和visitable

  visibility在原空間會保留, display中的none會把元素從頁面上刪除,並且在頁面上看不到元素是否存在。

display: none

/* 元素不可見,並且不爲其保留相應的位置*/

display: block

/* 表現爲一個塊級元素(一般情況下獨佔一行)*/

display: inline

/* 表現爲一個行級元素(一般情況下不獨佔一行)*/
visibility: visible

/* 元素可見,默認值*/

visibility: hidden

/* 元素不可見,但仍然爲其保留相應的空間*/

visibility: collapse

/* 只對 table 對象起作用,能移除行或列但不會影響表格的佈局。如果這個值用在 table 以外的對象上則表現爲 hidden 。*/

visibility: inherit

/* 繼承上級元素的 visibility 值。*/

https://www.php.cn/div-tutorial-412494.html

二十一、如何判斷多次點擊之下對應的是哪個回調

二十二、Jquery有哪些選擇器

https://zhidao.baidu.com/question/1644264068187535380.html

二十三、flex佈局的應用場景

https://www.jianshu.com/p/9a504d3c18fc

https://blog.csdn.net/weixin_42554311/article/details/88180738

二十四、談談你對前後端的理解

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章