問題:http的七層協議 握手幾回前端
問題:es6vue
問題:瀏覽器是怎麼渲染的es6
問題:mvvm 以及vue的瞭解 vue的雙向綁定web
問題:ajax 的請求頭怎麼知道是傳輸的是圖片,ajax的優缺點面試
問題:異步請求和屢次同步請求ajax
問題:彈性盒理解chrome
問題:怎麼阻止用戶打開新的頁面編程
問題:前端存儲有哪些segmentfault
http的七層 應用層、表示層、會話層、傳輸層、網絡層、數據鏈路層、物理層。圖片理解:
後端
三次握手:
(1)第一次握手:Client將標誌位SYN置爲1,隨機產生一個值seq=J,並將該數據包發送給Server,Client進入SYN_SENT狀態,等待Server確認。
(2)第二次握手:Server收到數據包後由標誌位SYN=1知道Client請求創建鏈接,Server將標誌位SYN和ACK都置爲1,ack=J+1,隨機產生一個值seq=K,並將該數據包發送給Client以確認鏈接請求,Server進入SYN_RCVD狀態。
(3)第三次握手:Client收到確認後,檢查ack是否爲J+1,ACK是否爲1,若是正確則將標誌位ACK置爲1,ack=K+1,並將該數據包發送給Server,Server檢查ack是否爲K+1,ACK是否爲1,若是正確則鏈接創建成功,Client和Server進入ESTABLISHED狀態,完成三次握手,隨後Client與Server之間能夠開始傳輸數據了
四次握手,終止TCP鏈接,就是指斷開一個TCP鏈接時,須要客戶端和服務端總共發送4個包以確認鏈接的斷開。在socket編程中,這一過程由客戶端或服務端任一方執行close來觸發
爲何創建鏈接是三次握手,而關閉鏈接倒是四次揮手呢?
這是由於服務端在LISTEN狀態下,收到創建鏈接請求的SYN報文後,把ACK和SYN放在一個報文裏發送給客戶端。而關閉鏈接時,當收到對方的FIN報文時,僅僅表示對方再也不發送數據了可是還能接收數據,己方也未必所有數據都發送給對方了,因此己方能夠當即close,也能夠發送一些數據給對方後,再發送FIN報文給對方來表示贊成如今關閉鏈接,所以,己方ACK和FIN通常都會分開發送。
ES6的新語法:
let、const、展開符、結構賦值、字符串新增的方法(codePiontAt())、模版字符串、數組的from() copyWithin() includes()、箭頭函數、symbol、proxy、generator函數、Promise對象、async、Class、export import
1. 瀏覽器會將HTML解析成一個DOM樹,DOM 樹的構建過程是一個深度遍歷過程:當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點。
2. 將CSS解析成 CSS Rule Tree 。
3. 根據DOM樹和CSSOM來構造 Rendering Tree。注意:Rendering Tree 渲染樹並不等同於 DOM 樹,由於一些像 Header 或 display:none 的東西就不必放在渲染樹中了。
4.有了Render Tree,瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。下一步操做稱之爲Layout,顧名思義就是計算出每一個節點在屏幕中的位置。
5.再下一步就是繪製,即遍歷render樹,並使用UI後端層繪製每一個節點。
MVVM 由 Model,View,ViewModel 三部分構成,Model 層表明數據模型,也能夠在Model中定義數據修改和操做的業務邏輯;View 表明UI 組件,它負責將數據模型轉化成UI 展示出來,ViewModel 是一個同步View 和 Model的對象,保證視圖和數據的一致性,這種輕量級的架構讓前端開發更加高效、便捷。
在MVVM架構下,View 和 Model 之間並無直接的聯繫,而是經過ViewModel進行交互,Model 和 ViewModel 之間的交互是雙向的, 所以View 數據的變化會同步到Model中,而Model 數據的變化也會當即反應到View 上。
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來,而View 和 Model 之間的同步工做徹底是自動的,無需人爲干涉,所以開發者只需關注業務邏輯,不須要手動操做DOM, 不須要關注數據狀態的同步問題,複雜的數據狀態維護徹底由 MVVM 來統一管理
vue的理解:
Vue.js 能夠說是MVVM 架構的最佳實踐,專一於 MVVM 中的 ViewModel,不只作到了數據雙向綁定,並且也是一款相對比較輕量級的JS 庫,API 簡潔,很容易上手。
Vue.js 是採用 Object.defineProperty(屬性攔截器) 的 getter 和 setter,並結合觀察者模式來實現數據綁定的。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時,Vue 將遍歷它的屬性,用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter,可是在內部它們讓 Vue 追蹤依賴,在屬性被訪問和修改時通知變化。
![](http://static.javashuo.com/static/loading.gif)
Observer 數據監聽器,可以對數據對象的全部屬性進行監聽,若有變更可拿到最新值並通知訂閱者,內部採用Object.defineProperty的getter和setter來實現。
Compile 指令解析器,它的做用對每一個元素節點的指令進行掃描和解析,根據指令模板替換數據,以及綁定相應的更新函數。
Watcher 訂閱者, 做爲鏈接 Observer 和 Compile 的橋樑,可以訂閱並收到每一個屬性變更的通知,執行指令綁定的相應回調函數。
Dep 消息訂閱器,內部維護了一個數組,用來收集訂閱者(Watcher),數據變更觸發notify 函數,再調用訂閱者的 update 方法。
當執行 new Vue() 時,Vue 就進入了初始化階段,一方面Vue 會遍歷 data 選項中的屬性,並用 Object.defineProperty 將它們轉爲 getter/setter,實現數據變化監聽功能;另外一方面,Vue 的指令編譯器Compile 對元素節點的指令進行掃描和解析,初始化視圖,並訂閱Watcher 來更新視圖, 此時Wather 會將本身添加到消息訂閱器中(Dep),初始化完畢。
當數據發生變化時,Observer 中的 setter 方法被觸發,setter 會當即調用Dep.notify(),Dep 開始遍歷全部的訂閱者,並調用訂閱者的 update 方法,訂閱者收到通知後對視圖進行相應的更新。
ajax的請求頭新增一個自定義的參數用來判斷傳遞的是什麼類型,
AJAX的優勢:
改善的用戶體驗--AJAX容許網頁持續更新,但只須要和服務 器交互不多的數據。這樣,就能在沒必要整個更新網頁的狀況下更新網頁的一部分,增長瀏覽器性能,用戶體驗更好。
減小帶寬的使用並增長速度- AJAX使用客戶端腳原本和web服務器通信,用Javascript來交互數據。使用AJAX能減小網路負載和帶寬使用而且只得到你所需的數據。
加強兼容性- AJAX和ASP.NET,J2EE,PHP或者其餘任何語言兼容。它幾乎支持全部流行的瀏覽器好比IE5及以上版本,Firefox1.0及以上版本,Safari1.2及以上版本,Opera7.6及以上版本,還有RockMelt。
支持異步處理-請求能被有效的處理,動態內容加載被提高到一個更高的層次,性能也獲得了加強。
更容易導航-AJAX應用能被用來簡化用戶在網頁間的過渡,而不須要使用傳統的前進後退鍵
AJAX的缺點:
瀏覽器不兼容-由於各個瀏覽器對js的支持性不一樣。ie 和 chrome 的兼容就最爲常見,不過微軟已經想谷歌妥協了。
不安全性-網頁可能很難調試,增長網頁的代碼量,你的網頁更可能趕上嚴峻的安全威脅。
增長Web服務器的負載-若是你增長一個自動更新的功能,它每隔幾秒向服務發起請求,那麼就會增長服務器的負載
同步是指:發送方發出數據後,等接收方發回響應之後才發下一個數據包的通信方式。
用戶填寫全部信息後,提交給服務器,等待服務器的迴應(檢驗數據),是一次性的。信息錯誤又要從新填寫!
異步是指:發送方發出數據後,不等接收方發回響應,接着發送下個數據包的通信方式。
當用戶填寫完一條信息後,該信息會自動向服務器提交,而後服務器響應客戶端,在此過程當中,用戶依然在填寫表格的信息,即向服務器請求屢次,節省了用戶的時間,提升了用戶的體驗
具體問題具體分析,沒有必定的偏向那一種。
彈性盒子佈局與多列布局只能用於手機端,由於IE9以上才支持。 彈性盒子本質:盒子裏面的項目(設置了flex比分)會被拉伸來填充空間(自適應),或者壓縮來防止溢出。項目默認行內排列。當容器寬度過小時,即便項目設置了width也會被壓縮。
比較新的佈局方式:旨在提供一個更加有效的方式來佈置,對齊和分佈在容器之間的各項內容,即便它們的大小是未知或者動態變化的。
彈性佈局的主要思想是讓容器有能力來改變項目的寬度和高度,以填滿可用空間(主要是爲了容納全部類型的顯示設備和屏幕尺寸)的能力。
- 應用恰當的彈性佈局對用戶十分友好。頁面中全部元素能夠隨着用戶的偏好縮放。
- 對於同時喜歡流動和定寬佈局的設計師來講,彈性佈局是完美的,由於前兩種佈局的優勢在彈性佈局中都能找到。
怎麼阻止用戶打開新的頁面。目前我沒有想到什麼辦法。面試官問的是,當用戶在進行答題的時候怎麼阻止用戶打開新的頁面。打開新的標籤頁,這個怎麼阻止,若是用戶想去搜索答案新打開一個瀏覽器不就行嗎。難不成這我也要阻止?我只能是控制用戶點擊當前頁面打開新的窗口時我能阻止。
本地存儲localstorage、sessionstorage,cookies、application cache離線緩存,這個須要配置文件。擴展其餘的前端存儲方式(不經常使用)web SQL database(貌似已經取消掉了)
以上內容都來自網絡,整理。