2018前端面試題(一)

一、https和http的區(qū)別及優(yōu)缺點

????????http是HTTP協(xié)議運(yùn)行在TCP之上。所有傳輸?shù)膬?nèi)容都是明文,客戶端和服務(wù)器端都無法驗證對方的身份。

????????https是HTTP運(yùn)行在SSL/TLS之上,SSL/TLS運(yùn)行在TCP之上。所有傳輸?shù)膬?nèi)容都經(jīng)過加密,加密采用對稱加密,但對稱加密的密鑰用服務(wù)器方的證書進(jìn)行了非對稱加密。此外客戶端可以驗證服務(wù)器端的身份,如果配置了客戶端驗證,服務(wù)器方也可以驗證客戶端的身份。

二、打開網(wǎng)站到頁面呈現(xiàn),經(jīng)過的步驟? ?? ??

????????<1>客戶端輸入網(wǎng)址,請求與服務(wù)器的80端口建立連接。

<2>服務(wù)器收到請求,并響應(yīng)客戶端;

<3>客戶端接收到服務(wù)器的響應(yīng),準(zhǔn)備開始接收數(shù)據(jù)。服務(wù)器開始發(fā)送數(shù)據(jù)。

????????(三次握手)

第1次握手:客戶端通過將一個含有“同步序列號(SYN)”標(biāo)志位的數(shù)據(jù)段發(fā)送給服務(wù)器請求連接。

第2次握手:服務(wù)器用一個帶有“確認(rèn)應(yīng)答(ACK)”和“同步序列號(SYN)”標(biāo)志位的數(shù)據(jù)段響應(yīng)客戶端。

第3次握手:客戶端發(fā)送一個數(shù)據(jù)段確認(rèn)收到服務(wù)器的數(shù)據(jù)段,并開始傳送實際數(shù)據(jù)。

<4>對html頁面進(jìn)行解析,將頁面內(nèi)容呈現(xiàn)給用戶。

三、MVC和MVVM的區(qū)別

MVC是傳統(tǒng)的model-view-controller三部分組成,是單項通信,也就是model和view必須通過controller來承上啟下。

MVVM是數(shù)據(jù)驅(qū)動視圖,核心是VM,在MVVM中view和viewmodel中數(shù)據(jù)可以相互通信,也就是相互調(diào)用。

四、Vue的生命周期

Vue 實例從創(chuàng)建到銷毀的過程,就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程,我們稱這是 Vue 的生命周期。

vue的生命周期可以總共分為8個階段:創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后,第一次頁面加載時會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子,DOM 渲染在 mounted 中就已經(jīng)完成了。

生命周期鉤子的一些使用方法: beforecreate : 可以在這加個loading事件,在加載實例時觸發(fā) created : 初始化完成時的事件寫在這里,如在這結(jié)束loading事件,異步請求也適宜在這里調(diào)用 mounted : 掛載元素,獲取到DOM節(jié)點 updated : 如果對數(shù)據(jù)統(tǒng)一處理,在這里寫上相應(yīng)函數(shù) beforeDestroy : 可以做一個確認(rèn)停止事件的確認(rèn)框 nextTick : 更新數(shù)據(jù)后立即操作dom。

五、解決跨域的方法有哪些

(1)圖片ping或script 標(biāo)簽跨域

圖片ping常用于跟蹤用戶點擊頁面或者動態(tài)廣告曝光的次數(shù);

?script標(biāo)簽可以得到從其他來源的數(shù)據(jù),這也是jsonp依賴的根據(jù);

缺點:只能發(fā)送get請求,無法訪問服務(wù)器的響應(yīng)文本。

(2)jsonp跨域

根據(jù)XmlHttpRequest對象受到同源策略的影響,而利用script元素的這個開放策略,網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的json數(shù)據(jù),而這種使用模式就是所謂的jsonp。用jsonp抓取到的數(shù)據(jù)并不是json,而是任意的JavaScript,用JavaScript解釋器運(yùn)行而不是用json解析器解析。所以,通過Chrome查看所有的jsonp發(fā)送的get請求都是js類型,而非xhr。

缺點:只能使用get請求;

不能注冊success、error等事件監(jiān)聽函數(shù),不能很容易的確定jsonp請求成功或者失?。?/p>

jsonp是從其他域中加載代碼執(zhí)行,容易受到跨域請求偽造的攻擊,安全性無法保證;

(3)cors

????? ? cross-origin resouce sharing 跨域資源共享是允許瀏覽器向跨源服務(wù)器發(fā)出XmlHttpRequest請求,從而克服了ajax只能同源使用的限制。與 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服務(wù)器一般需要增加如下響應(yīng)頭的一種或幾種:

Access-Control-Allow-Origin:*

Access-Control-Allow-Methods:POST, GET, OPTIONS

Access-Control-Allow-Headers:X-PINGOTHER, Content-Type

Access-Control-Max-Age:86400

跨域請求默認(rèn)不會攜帶Cookie信息,如果需要攜帶,請配置下述參數(shù):

"Access-Control-Allow-Credentials":true

//Ajax設(shè)置

"withCredentials":true

(4)WebScoket

WebScoket protocol是HTML5的一種新的協(xié)議,它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信,同時允許跨域通信,是server push技術(shù)的一種很棒的實現(xiàn)。需要注意的是:WebScoket對象不支持DOM2級事件監(jiān)聽,必須使用DOM 0級語法分別定義各個事件。

(5)修改document.domain跨子域

(6)window.postMessage()

HTML5新特性,可以用來向其他所有的window對象發(fā)送消息。需注意,必須保證素有的腳本執(zhí)行完成后才能發(fā)送MessageEvent,否則容易使其后買你的函數(shù)超時無法執(zhí)行。

? ?(7)window.name+iframe

六、es6中數(shù)組的使用

?(1)includes: includes函數(shù)與string的includes一樣,接受2個參數(shù),查詢的項以及查詢起始位置;

(2)find : find的參數(shù)為回調(diào)函數(shù),回調(diào)函數(shù)可以接受3個參數(shù),值X、索引i、數(shù)組arr,回調(diào)函數(shù)默認(rèn)返回值X;

(3)findIndex : 和find差不多,不過默認(rèn)返回的是索引;

(4)keys 、values、entries :分別是對數(shù)組索引、數(shù)組項、數(shù)組鍵值對的遍歷;

(5)fill :fill方法改變原數(shù)組,當(dāng)?shù)谌齻€參數(shù)大于數(shù)組長度時候,以最后一位為結(jié)束位置;

(6)Array.of() :方法返回一個數(shù)組,參數(shù)不分類型,只分?jǐn)?shù)量,數(shù)量為0時返回空數(shù)組;

? ? (7)Array.from() :可以把帶有l(wèi)ength屬性類似數(shù)組的對象轉(zhuǎn)換為數(shù)組,也可以把字符串等便利的對象轉(zhuǎn)化為數(shù)組,接受2個參數(shù),轉(zhuǎn)換對象和回調(diào)函數(shù)。

(8)copywithin() : 接收三個參數(shù),被汰換數(shù)據(jù)的開始處,替換塊的開始處,替換塊的結(jié)束處;

(9) reduce : 對數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù),該回調(diào)函數(shù)的返回值為累積結(jié)果,并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時作為參數(shù)提供;

(10) forEach 和map : 遍歷數(shù)組;

(11)every (且)和some (或):數(shù)組中的項返回true 或者false;

(12)filter :數(shù)組的過濾篩選。

七、IE和火狐的事件機(jī)制有什么區(qū)別,如何阻止冒泡事件?

事件流描述的是從頁面中接受事件的順序,分為冒泡流和捕獲流;

事件冒泡是指事件從最具體的元素接收,然后逐級向上傳播,直到不具體的節(jié)點;而事件捕獲則正好相反,它是從不具體的節(jié)點開始,逐步到最具體的節(jié)點;

IE的事件流是冒泡流,而火狐同時支持冒泡流和捕獲流;

阻止事件冒泡:e.stopPropagation(),ie則是使用e.cancelBubble = true ;

八、清除浮動的幾種方法及各自的優(yōu)缺點

(1)? 父級div定義height ;

優(yōu)點:簡單,代碼少,容易掌握

缺點:只適合高度固定的布局,若高度和父級高度不同時,會產(chǎn)生問題;

(2)結(jié)尾處添加空div標(biāo)簽clear:both

優(yōu)點:簡單,代碼少,兼容性好,不容易出現(xiàn)問題

缺點:頁面布局浮動多,需要添加很多空div

(3)父級div偽類:after和zoom

優(yōu)點:瀏覽器支持好,不容易出現(xiàn)怪問題

缺點:代碼多,需要兩者結(jié)合起來才能讓主流瀏覽器兼容

(4)父級div 定義overflow:hidden

優(yōu)點:簡單,代碼少,瀏覽器支持好

缺點:不能和position結(jié)合使用,超出的部分會被隱藏掉

(5)父級div定義overflow:auto

優(yōu)點:代碼少,簡單,瀏覽器支持好

缺點:內(nèi)部寬度超過父級時候,出現(xiàn)滾動條

(6)父級div也跟著一起浮動

缺點:會產(chǎn)生新的浮動問題

(7)父級div定義display:table

缺點:會產(chǎn)生新的位置問題

(8)結(jié)尾處加br標(biāo)簽clear:both

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    極樂君閱讀 5,878評論 0 106
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    伯納烏的追風(fēng)少年閱讀 26,137評論 2 46
  • https://www.mesta-automation.com/modbus-with-c-sharp-libr...
    dyg540閱讀 739評論 0 0
  • 前言:iOS的沙盒機(jī)制,應(yīng)用只能訪問自己應(yīng)用目錄下的文件。iOS不像android,沒有SD卡概念,不能直接訪問圖...
    ChinaSwift閱讀 2,293評論 1 12
  • 塵世蒼涼,我經(jīng)歷了太多。看遍了蔑視,聽夠了嘲諷。我想忘記,卻記得更加清晰。 不過,誰讓我臉皮厚呢!練就了一身銅皮鐵...
    魅雨之辰閱讀 583評論 1 1

友情鏈接更多精彩內(nèi)容