WEB前端面試題整理（二）

WEB前端面試題的記錄（二）

一、一次完整的HTTP事務是怎樣的一個過程：
基本流程：

1. 域名解析

2. 發起TCP的3次握手

3. 創建TCP鏈接後發起http請求

4. 服務器端響應http請求，瀏覽器獲得html代碼

5. 瀏覽器解析html代碼，並請求html代碼中的資源

6. 瀏覽器對頁面進行渲染呈現給用戶

二、JSONP是什麼？它是如何實現跨域的？爲何它能夠實現跨域？
JSONP(JSON with Padding)是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問。
因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求（由於同源策略不阻止動態腳本插入，而且將腳本看做是從提供 Web 頁面的域上加載的），而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

三、閉包：函數能被外部調用到，則該做用連上的全部變量都會被保存下來。
做用：①能夠讀取函數內部的變量；②至關於劃出了一塊私有做用域，避免數據污染；③讓變量始終保存在內存中
使用全局變量被認爲是很差的習慣，並且容易形成錯誤而且維護成本較高，因此js能夠採用閉包的方式讀取函數的內部變量。可是若是大量使用閉包就會形成過多的變量始終保存在內存中，會形成內存泄漏。

四、模塊化編程
①AMD（異步模塊定義） requirejs
defined(id,deps,factory)
require([dependency],function(){})
異步加載，瀏覽器不會失去響應
它指定的回調函數，只有前面的模塊都加載完成後，纔會運行，解決了依賴性問題
②CMD（通用模塊定義） seajs
模塊定義方式和模塊加載時機處理不一樣
defined(id,deps,factory)
function(require,exports,module)
module.exports = ______;
③區別：AMD依賴前置，在定義模塊的時候就要聲明其依賴的模塊；CMD就近依賴，只有在用到哪一個模塊的時候再去require；

五、JS繼承與原型問題
Js全部的函數都有一個prototype屬性，這個屬性引用了一個對象，即原型對象，也簡稱原型。每個對象都有原型，在瀏覽器中它體如今一個隱藏的 proto 屬性上。
當一個對象須要調用某個方法時，它回去最近的原型上查找該方法，若是沒有找到，它會再次往下繼續查找。這樣逐級查找，一直找到了要找的方法。 這些查找的原型構成了該對象的原型鏈條。原型最後指向的是null。咱們說的原型繼承，就是將父對像的方法給子類的原型。子類的構造函數中不擁有這些方法和屬性。

六、一個頁面從URL到加載顯示完成，都發生了什麼？
①經過DNS將該地址解析成IP地址；
②發起網絡鏈接，進行http協議會話：客戶端發送報頭（請求報頭），服務端回饋報頭（響應報頭）
③返回一個頁面（根據頁面上的外鏈的URL從新發送請求獲取）
④接收文件完畢，對加載到的資源進行語法解析，以及相應的內部數據結構（網頁渲染）

七、隊列、堆、棧的區別？
隊列是先進先出：就像一條路，有一個入口和一個出口，先進去的就能夠先出去。而棧就像一個箱子，後放的在上邊，因此後進先出。堆是在程序運行時，而不是在程序編譯時，申請某個大小的內存空間。即動態分配內存，對其訪問和對通常內存的訪問沒有區別。
棧(Stack)是操做系統在創建某個進程時或者線程爲這個線程創建的存儲區域。在編程中，例如C/C++中，全部的局部變量都是從棧中分配內存空間，實際上也不是什麼分配，只是從棧頂向上用就行，在退出函數的時候，只是修改棧指針就能夠把棧中的內容銷燬，因此速度最快。
堆（Heap)是應用程序在運行的時候請求操做系統分配給本身內存，通常是申請/給予的過程。因爲從操做系統管理的內存分配因此在分配和銷燬時都要佔用時間，因此用堆的效率低的多！可是堆的好處是能夠作的很大，C/C++對分配的Heap是不初始化的。
在Java中除了簡單類型（int,char等）都是在堆中分配內存，這也是程序慢的一個主要緣由。可是跟C/C++不一樣，Java中分配Heap內存是自動初始化的。在Java中全部的對象（包括int的wrapper Integer）都是在堆中分配的，可是這個對象的引用倒是在Stack中分配。也就是說在創建一個對象時從兩個地方都分配內存，在Heap中分配的內存實際創建這個對象，而在Stack中分配的內存只是一個指向這個堆對象的指針（引用）而已。

八、什麼是線程？進程和線程的關係是什麼？
線程可定義爲進程內的一個執行單位，或者定義爲進程內的一個可調度實體。 在具備多線程機制的操做系統中，處理機調度的基本單位不是進程而是線程。一個進程能夠有多個線程，並且至少有一個可執行線程。
線程和進程的關係:
（1）線程是進程的一個組成部分.
（2）進程的多個線程都在進程地址空間活動.
（3）系統資源是分配給進程的，線程須要資源時，系統從進程的資源裏分配給線程.
（4）處理機調度的基本單位是線程.

九、CSS3中的transform屬性和transition屬性？
transform：
功能：使元素變形的屬性，其配合rotate（旋轉角度）、scale（縮放倍數）、skew（扭曲元素）等參數一塊兒使用
語法：
transform:rotate(旋轉角度)；//正數爲順時針、負數爲逆時針；
transform:rotate(30deg);//順時針旋轉30度
transform:rotate(-20deg);//逆時針旋轉20度
transform:scale(縮放倍數)；
transform:scale(1.20);//放大1.2倍
transition：
功能：設置元素由樣式一變爲樣式二所須要的一些變化效果
語法：transition: property duration timing-function delay ;
值 描述
transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果須要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果什麼時候開始。

十、什麼是MVVM框架？MVVM是Model-View-ViewModel的簡寫。MVVM 是 Web 前端一種很是流行的開發模式，利用 MVVM 可使咱們的代碼更專一於處理業務邏輯而不是去關心 DOM 操做。目前著名的 MVVM 框架有 vue, avalon, angular 等，這些框架各有千秋，可是實現的思想大體上是相同的：數據綁定 + 視圖刷新。跟MVC同樣，主要目的是分離視圖（View）和模型（Model）。View能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。在MVVM中，數據是核心，因爲VIewModel與View之間的雙向綁定，操做了ViewModel中的數據（固然只能是監控屬性），就會同步到DOM，咱們透過DOM事件監控用戶對DOM的改動，也會同步到ViewModel。MVVM框架的優勢：（1）方便測試在MVC下，Controller基本是沒法測試的，裏面混雜了個各類邏輯，並且分散在不一樣的地方。有了MVVM咱們就能夠測試裏面的viewModel，來驗證咱們的處理結果對不對。（2）便於代碼的移植能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。好比iOS裏面有iPhone版本和iPad版本，除了交互展現不同外，業務邏輯的model是一致的。這樣，咱們就能夠以很小的代價去開發另外一個app。（3）獨立開發開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xml代碼。