常見的前端面試題

1.如何實現瀏覽器內多個標籤頁之間的通訊?

　　調用localstorge、cookies等本地存儲方式

2.CSS居中（包括水平居中和垂直居中）　　

內聯元素居中方案

水平居中設置：
1.行內元素

• 設置 text-align:center；

2.Flex佈局

• 設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)

垂直居中設置：
1.父元素高度肯定的單行文本（內聯元素）

• 設置 height = line-height；

2.父元素高度肯定的多行文本（內聯元素）

• a:插入 table （插入方法和水平居中同樣），而後設置 vertical-align:middle；
• b:先設置 display:table-cell 再設置 vertical-align:middle；
  

  塊級元素居中方案

  水平居中設置：
  1.定寬塊狀元素

• 設置 左右 margin 值爲 auto；

2.不定寬塊狀元素

• a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，而後設置 margin 的值爲 auto；
• b:給該元素設置 displa:inine 方法；
• c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；

垂直居中設置：

• 使用position:absolute（fixed）,設置left、top、margin-left、margin-top的屬性;
• 利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
• 利用display:table-cell屬性使內容垂直居中;
• 使用css3的新屬性transform:translate(x,y)屬性;
• 使用:before元素;

3.javascript的typeof返回哪些數據類型

• Ｏbject number function boolean underfind;

4.ajax請求的時候get 和post方式的區別?

• 一個在url後面 一個放在虛擬載體裏面
  有大小限制
• 安全問題
  應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的;

5.怎樣添加、移除、移動、複製、建立和查找節點？

 1）建立新節點

　　createDocumentFragment() //建立一個DOM片斷
　　createElement() //建立一個具體的元素
　　createTextNode() //建立一個文本節點

2）添加、移除、替換、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替換
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //經過標籤名稱
　　getElementsByName() //經過元素的Name屬性的值
　　getElementById() //經過元素Id，惟一性

6. jQuery 庫中的 $() 是什麼？

　　$() 函數是 jQuery() 函數的別稱。$() 函數用於將任何對象包裹成 jQuery 對象，接着你就被容許調用定義在 jQuery 對象上的多個不一樣方法。你能夠將一個選擇器字符串傳入 $() 函數，它會返回一個包含全部匹配的 DOM 元素數組的 jQuery 對象

7.介紹下你的項目（若是有的話）？並說一下在作這個項目中運用的技術以及遇到的難題是如何解決的

8.說說最近最流行的一些東西吧？常去哪些網站？

• Node.js、MVVM、React-native,Angular,Weex等
• CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

9.談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。
可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

10.談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。
可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

11.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包

• 閉包就是可以讀取其餘函數內部變量的函數。

12.ajax請求時，如何解釋json數據

• 使用eval parse,鑑於安全性考慮 使用parse更靠譜;

13.sessionStorage 、localStorage 和 cookie 之間的區別

 共同點：用於瀏覽器端存儲的緩存數據

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

        web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

        sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；

14.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

15.JavaScript裏函數參數arguments是數組嗎？ 

在函數代碼中，使用特殊對象 arguments，開發者無需明確指出參數名，經過使用下標就能夠訪問相應的參數。

arguments雖然有一些數組的性質，但其並不是真正的數組，只是一個類數組對象。其並無數組的不少方法，不能像真正的數組那樣調用.jion(),.concat(),.pop()等方5.5

法。

16.棧和堆的區別？

棧區（stack）—   由編譯器自動分配釋放   ，存放函數的參數值，局部變量的值等。

堆區（heap）   —   通常由程序員分配釋放，   若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

 

17.棧和隊列的區別?

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

隊列先進先出，棧先進後出。

棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

 

18.TCP和UDP的區別

TCP（Transmission Control Protocol，傳輸控制協議）是基於鏈接的協議，也就是說，在正式收發數據前，必須和對方創建可靠的鏈接。一個TCP鏈接必需要通過三次「對話」才能創建起來

UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非鏈接的協議，它不與對方創建鏈接，而是直接就把數據包發送過去！ 
UDP適用於一次只傳送少許數據、對可靠性要求不高的應用環境。

19.斷開一個TCP鏈接則須要「四次握手」：

• 第一次揮手：主動關閉方發送一個FIN，用來關閉主動方到被動關閉方的數據傳送，也就是主動關閉方告訴被動關閉方：我已經不 會再給你發數據了(固然，在fin包以前發送出去的數據，若是沒有收到對應的ack確認報文，主動關閉方依然會重發這些數據)，可是，此時主動關閉方還可 以接受數據。

• 第二次揮手：被動關閉方收到FIN包後，發送一個ACK給對方，確認序號爲收到序號+1（與SYN相同，一個FIN佔用一個序號）。

• 第三次揮手：被動關閉方發送一個FIN，用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，個人數據也發送完了，不會再給你發數據了。

• 第四次揮手：主動關閉方收到FIN後，發送一個ACK給被動關閉方，確認序號爲收到序號+1，至此，完成四次揮手。

20.說說TCP傳輸的三次握手四次揮手策略

爲了準確無誤地把數據送達目標處，TCP協議採用了三次握手策略。用TCP協議把數據包送出去後，TCP不會對傳送 後的狀況置之不理，它必定會向對方確認是否成功送達。握手過程當中使用了TCP的標誌：SYN和ACK。

發送端首先發送一個帶SYN標誌的數據包給對方。接收端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息。 
最後，發送端再回傳一個帶ACK標誌的數據包，表明「握手」結束。 
若在握手過程當中某個階段莫名中斷，TCP協議會再次以相同的順序發送相同的數據包

21.position的值， relative和absolute分別是相對於誰進行定位的？

• absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

• fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。

• relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。

• static 默認值。沒有定位，元素出如今正常的流中

• sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

22.計算機網絡的分層概述

tcp/ip模型：從下往上分別是鏈路層，網絡層，傳輸層，應用層

osi模型：從下往上分別是物理層，鏈路層，網絡層，傳輸層，會話層，表示層，應用層。

23.判斷數組有哪些方法

a instanceof Array
a.constructor == Array
Object.prototype.toString.call(a) == [Object Array]

24.怎麼實現從一個DIV左上角到右下角的移動，有哪些方法，都怎麼實現

改變left值爲window寬度-div寬度 top值爲window高度-div高度

jquery的animate方法

css3的transition

25.輸出二叉樹的最小深度  判斷左子樹或右子樹是否爲空，若左子樹爲空，則返回右子樹的深度，反之返回左子樹的深度，若是都不爲空，則返回左子樹和右子樹深度的最小值

26.堆棧

stack爲自動分配的內存空間，它由系統自動釋放；而heap則是動態分配的內存，大小不定也不會自動釋放。

基本數據類型存放在棧中

引用類型 存放在堆內存中，首先從棧中得到該對象的地址指針，而後再從堆內存中取得所需的數據

27.對本身將來的規劃是怎樣的

對於剛畢業的人來講，前兩年是很重要的，先打好基礎，多提高js能力。三至四年在提高JS能力的同時，開始要往多方面發展，前端工程師遠遠不只是JS而已。製做一個性能高、交互好、視覺美的頁面，須要從前端框架選型、架構設計、構建工具，到後端通訊機制、設計與交互、網絡和瀏覽器優化等各方面的知識。一專多長才是前端工程師的終極目標。

28.爲什麼選擇前端這個方向和對前端的理解

爲何：

第一的話就是對前端很感興趣，以前也接觸過其餘的語言，可是直到接觸到前端才發現真的有興趣作下去，興趣是一我的最好的老師，

第二的話前端頗有前途，像如今nodejs，rn，微信小程序這類工具和框架可讓前端進行後端和移動開發，因此我以爲前端的前途會更多一點。

理解：

首先前端工程師最核心的技能仍是：Html、CSS、JS。前端負責的是用戶能夠看到的部分，因此也是最接近用戶的工程師。同時在產品研發流程中前端要同時與產品、設計、後端等不少人合做。

29.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

    一、實現界面交互

    二、提高用戶體驗

    三、有了Node.js，前端能夠實現服務端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

 參與項目，快速高質量完成實現效果圖，精確到1px；

 與團隊成員，UI設計，產品經理的溝通；

 作好的頁面結構，頁面重構和用戶體驗；

 處理hack，兼容、寫出優美的代碼格式；

 針對服務器的優化、擁抱最新前端技術。

30.==和===有什麼不一樣？

首先，== equality 等同，=== identity 恆等。 ==， 兩邊值類型不一樣的時候，要先進行類型轉換，再比較。 ===，不作類型轉換，類型不一樣的必定不等。

31.data-屬性的做用是什麼？

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。data-* 屬性賦予咱們在全部 HTML 元素上嵌入自定義 data 屬性的能力。存儲的（自定義）數據可以被頁面的 JavaScript 中利用，以建立更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。

data-* 屬性包括兩部分：

• 屬性名不該該包含任何大寫字母，而且在前綴 "data-" 以後必須有至少一個字符
• 屬性值能夠是任意字符串

32.XHTML 與HTML的區別爲：

• XHTML 元素必須被正確地嵌套。
• XHTML 元素必須被關閉。
• 標籤名必須用小寫字母。
• XHTML 文檔必須擁有根元素。

33.請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

• 1.優化圖片
• 2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
• 3.優化CSS（壓縮合並css，如margin-top,margin-left...)
• 4.網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）
• 5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）
• 6.減小http請求（合併文件，合併圖片）。

34.你能描述一下漸進加強和優雅降級之間的不一樣嗎?

優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.

漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

35.線程與進程的區別

一個程序至少有一個進程，一個進程至少有一個線程。線程的劃分尺度小於進程，使得多線程程序的併發性高。

另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。

線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

36.介紹一下CSS的盒子模型？

• 有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).