（1）.java部分

1.執行緒與程序的區別 

   一個程式至少有一個程序,一個程序至少有一個執行緒. 執行緒的劃分尺度小於程序，使得多執行緒程式的併發性高。 另外，程序在執行過程中擁有獨立的記憶體單元，而多個執行緒共享記憶體，從而極大地提高了程式的執行效率。 執行緒在執行過程中與程序還是有區別的。每個獨立的執行緒有一個程式執行的入口、順序執行序列和程式的出口。但是執行緒不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個執行緒執行控制。 從邏輯角度來看，多執行緒的意義在於一個應用程式中，有多個執行部分可以同時執行。但作業系統並沒有將多個執行緒看做多個獨立的應用，來實現程序的排程和管理以及資源分配。這就是程序和執行緒的重要區別。

注：當時因為是面試，所以說了大概，這裡面涉及的東西很多，希望小夥伴們自己可以全面的瞭解一下執行緒和程序的相關知識。

2.你如何對網站的檔案和資源進行優化？

只是簡單的指出了幾個方向：比如說檔案合併檔案最小化，檔案壓縮，以及使用CDN託管快取（多個域名來提供快取）等等

3.你都是用那些工具來測試程式碼的效能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo等等

4.null和undefined的區別

1）null是一個表示”無”的物件轉為數值時為0；undefined是一個表示”無”的原始值，轉為數值時為NaN。 當宣告的變數還未被初始化時，變數的預設值為undefined。

null用來表示尚未存在的物件，常用來表示函式企圖返回一個不存在的物件。 

undefined表示”缺少值”，就是此處應該有一個值，但是還沒有定義。典型用法是：  1.變數被聲明瞭，但沒有賦值時，就等於undefined。

2）呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。

 3）物件沒有賦值的屬性，該屬性的值為undefined。 

4）函式沒有返回值時，預設返回undefined。 

null表示”沒有物件”，即該處不應該有值。典型用法是：  1.作為函式的引數，表示該函式的引數不是物件。 2.作為物件原型鏈的終點。

5.關於http2.0你知道多少呢？

HTTP/2引入了“服務端推（serverpush）”的概念，它允許服務端在客戶端需要資料之前就主動地將資料傳送到客戶端快取中，從而提高效能。

 HTTP/2提供更多的加密支援 HTTP/2使用多路技術，允許多個訊息在一個連線上同時交差。 

它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應的header都只會佔用很小比例的頻寬

6.談談效能優化的問題？

1）程式碼層面：避免使用css表示式，避免使用高階選擇器，通配選擇器等。

2)快取利用：快取Ajax，使用CDN，使用外部js和css檔案以便快取，新增Expires頭，服務端配置Etag，減少DNS查詢等。  

3)請求數量：合併樣式和指令碼，使用css圖片精靈，初始首屏之外的圖片資源按需載入，靜態資源延遲載入等。   

4)請求頻寬：壓縮檔案，開啟GZIP， 

5)移動端效能優化:儘量使用css3動畫，開啟硬體加速。適當使用touch事件代替click事件.避免使用css3漸變陰影效果.儘可能少的使用box-shadow與gradients box-shadow與gradients往往都是頁面的效能殺手

7.HTTp狀態碼

100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊  

200 OK 正常返回資訊  

201 Created 請求成功並且伺服器建立了新的資源  202 Accepted 伺服器已接受請求，但尚未處理 

301 Moved Permanently 請求的網頁已永久移動到新位置。  

302 Found 臨時性重定向。  

303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。  304 Not Modified 自從上次請求後，請求的網頁未修改過。  

400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。  

401 Unauthorized 請求未授權。  

403 Forbidden 禁止訪問。  

404 Not Found 找不到如何與 URI 相匹配的資源。  

500 Internal Server Error 最常見的伺服器端錯誤。  

503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）

8.GET和POST的區別，何時使用POST？ 

GET：一般用於資訊獲取，使用URL傳遞引數，對所傳送資訊的數量也有限制，一般在2000個字元  

POST：一般用於修改伺服器上的資源，對所傳送的資訊沒有限制。 

GET方式需要使用Request.QueryString來取得變數的值，而POST方式通過Request.Form來獲取變數的值，也就是說Get是通過位址列來傳值，而Post是通過提交表單來傳值。

然而，在以下情況中，請使用 POST 請求： 無法使用快取檔案（更新伺服器上的檔案或資料庫） 向伺服器傳送大量資料（POST 沒有資料量限制）傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠。

9.一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？  

1.當傳送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個執行緒來處理這個請求，同時在遠端DNS伺服器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。  

2.瀏覽器與遠端Web伺服器通過TCP三次握手協商來建立一個TCP/IP連線。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和伺服器之間傳遞。該握手首先由客戶端嘗試建立起通訊，而後伺服器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。  

3.一旦TCP/IP連線建立，瀏覽器會通過該連線向遠端伺服器傳送HTTP的GET請求。遠端伺服器找到資源並使用HTTP響應返回該資源，值為200的HTTP響應狀態表示一個正確的響應。 

4.此時，Web伺服器提供資源服務，客戶端開始下載資源。 請求返回後，便進入了我們關注的前端模組 簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又可以根據DOM API操作DOM

10.平時如何管理你的專案？ 

先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8）等； 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）； 標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）； 

頁面進行標註（例如 頁面 模組 開始和結束）； CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）；JS分資料夾存放命名以該JS功能為準的英文翻譯。圖片採用整合的 images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理 

注：簡單說一下平時的管理專案經驗就好了。

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

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。 網站：w3cfuns,sf,hacknews,CSDN,慕課，部落格園，InfoQ,w3cplus等 

12.ajax過程 

1.建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.  

2.建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊.  

3.設定響應HTTP請求狀態變化的函式. 

4.傳送HTTP請求.  

5.獲取非同步呼叫返回的資料.  

6.使用JavaScript和DOM實現區域性重新整理. 

13.XML和JSON的區別？ 

1.資料體積方面。JSON相對於XML來講，資料的體積小，傳遞的速度更快些。 

2.資料互動方面。JSON與JavaScript的互動更加方便，更容易解析處理，更好的資料互動。  

3.資料描述方面。JSON對資料的描述性比XML較差。  

4.傳輸速度方面。JSON的速度要遠遠快於XML。 

（2）.html5+css3和javascript部分：

1.閉包的理解

使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。 

閉包三個特性: 1.函式巢狀函式。2.函式內部可以引用外部的引數和變數。3.引數和變數不會被垃圾回收機制回收。

2.display:none和visibility:hiden的區別

display:none:隱藏對應的元素，在文件佈局中不再給它分配空間，它各邊的元素會合攏。  

visibility:hidden:隱藏對應的元素，但是在文件佈局中仍保留原來的空間。

3.html4中的cookie。

cookie雖然在持久儲存客戶端資料提供了方便，分擔了伺服器儲存的負擔，但還是有很多侷限性的; 每個特定的域名下最多生成20個cookie;IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie;cookie的最大大約為4096位元組，為了相容性，一般不能超過4095位元組; 

優點：極高的擴充套件性和可用性 

1.通過良好的程式設計，控制儲存在cookie中的session物件的大小。 

 2.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。  

3.只在cookie中存放不敏感資料，即使被盜也不會有重大損失。  

4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

 缺點: 

1.Cookie數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。  

2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。  

3.有些狀態不可能儲存在客戶端。例如，為了防止重複提交表單，我們需要在伺服器端儲存一個計數器。如果我們把這個計數器儲存在客戶端，那麼它起不到任何作用。

4.h5本地儲存

 在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代sessionStorage。 

 sessionStorage:用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。

因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。

localStorage:用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。

5.webstorage 和cookie區別

Web Storage的概念和cookie相似，區別是: 

Web storage:

1.是為了更大容量儲存設計的。

2.Web Storage擁有setItem,getItem,removeItem,clear等方法.

3.Web Storage僅僅是為了在本地“儲存”資料而生 

Cookie:

1.大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬;

2.cookie還需要指定作用域，不可以跨域呼叫。

3.需要前端開發者自己封裝setCookie，getCookie.4.cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在; 

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

6.css中link和@import區別

1.link屬於HTML標籤，而@import是CSS提供的;  

2.頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;  3.import只在IE5以上才能識別，而link是HTML標籤，無相容問題;  4.link方式的樣式的權重 高於@import的權重.

7.position:absolute和float屬性的異同 

共同點：對內聯元素設定`float`和`absolute`屬性，可以讓元素脫離文件流，並且可以設定其寬高。  

不同點：float仍會佔據位置，position會覆蓋文件流中的其他元素。

8.介紹一下box-sizing屬性

box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box。  

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高 

border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content 

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的佈局。

9.CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？CSS3新增偽類有那些？ 

1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標籤選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.後代選擇器（li a） 7.萬用字元選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a: hover, li:nth-child） 

可繼承的樣式： font-size font-family color, text-indent; 

不可繼承的樣式：border padding margin width height ; 

優先順序就近原則，同權重情況下樣式定義最近者為準; 載入樣式以最後載入的定位為準; 

CSS3新增偽類舉例： 

p:first-of-type  選擇屬於其父元素的首個<p>;

 p:last-of-type  選擇屬於其父元素的最後<p>; 

p:only-of-type 選擇屬於其父元素唯一的<p>; 

p:only-child   選擇屬於其父元素的唯一子元素的每個<p>;元素。

 p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個<p>;元素。

 enabled 和disabled 控制表單控制元件的禁用狀態。 :checked  :單選框或複選框被選中。

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

absolute :生成絕對定位的元素，相對於最近一級的定位。

fixed （老IE不支援）生成絕對定位的元素，相對於瀏覽器視窗進行定位。  

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

static 預設值。沒有定位，元素出現在正常的流中 

11.CSS3有哪些新特性？ 

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

旋轉,縮放,定位,傾斜 增加了更多的CSS選擇器 多背景 rgba 在CSS3中唯一引入的偽元素是::selection. 媒體查詢，多欄佈局 border-image 

14.說說你對語義化的理解？ 

1.去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構 

2.有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；  

3.方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁； 

4.便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

15.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義? 

1.<!DOCTYPE>宣告位於文件中的最前面，處於<html>標籤之前。告知瀏覽器以何種模式來渲染文件。

2.嚴格模式的排版和JS運作模式是以該瀏覽器支援的最高標準執行。

3.在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。4.DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。

16.常見相容性問題？

1.png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段指令碼處理.

2.瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。

3.IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。

浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin會加倍。）

 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)  

4.漸進識別的方式，從總體中逐漸排除區域性。 首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 

5.IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性.  

6.Chrome 中文介面下預設會將小於12px的文字強制按照12px顯示,可通過加入CSS屬性-webkit-text-size-adjust: none;解決.  

7.超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}  

8.怪異模式問題：漏寫DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD宣告的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：<doctype html> 

9.上下margin重合問題 ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。 解決方法，養成良好的程式碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。 

10.ie6對png圖片格式支援不好(引用一段指令碼處理) 

17.解釋下浮動和它的工作原理？清除浮動的技巧 

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

 1.使用空標籤清除浮動。 這種方法是在所有浮動標籤後面新增一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。  

2.使用overflow。 給包含浮動元素的父標籤新增css屬性 overflow:auto; zoom:1; zoom:1用於相容IE6。 

3.使用after偽物件清除浮動。 該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。 

使用中需注意:該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干畫素

18css盒子模型的理解。IE8以下版本的瀏覽器中的盒模型有什麼不同？

CSS和模型是圍繞在HTML元素周圍的定義Border(邊界)，padding(內邊距)和margin(外邊距)的矩形空間

Border(邊界)：定義了元素包含的最大區域，我們能夠使邊界可見，不可見，定義高度和寬度等；Padding(內邊距)：定義了邊界和內部元素的間距Margin：定義了邊界和任何相鄰元素的間距

包含w3c盒子模型和IE盒子模型，IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

19.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分HTML和HTML5？ 

1.HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。  

2.拖拽釋放(Drag and drop) API 語義化更好的內容標籤（header,nav,footer,aside,article,section） 音訊、視訊API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失； sessionStorage 的資料在瀏覽器關閉後自動刪除 表單控制元件，calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation  

3.移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u； 對可用性產生負面影響的元素：frame，frameset，noframes；支援HTML5新標籤：  

4.IE8/IE7/IE6支援通過document.createElement方法產生的標籤， 可以利用這一特性讓這些瀏覽器支援HTML5新標籤， 瀏覽器支援新標籤後，還需要新增標籤預設的樣式：  

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

呼叫localstorge、cookies等本地儲存方式

21.Javascript垃圾回收方法 

標記清除（mark and sweep）:這是JavaScript最常見的垃圾回收方式，當變數進入執行環境的時候，比如函式中宣告一個變數，垃圾回收器將其標記為“進入環境”，當變數離開環境的時候（函式執行結束）將其標記為“離開環境”。垃圾回收器會在執行的時候給儲存在記憶體中的所有變數加上標記，然後去掉環境中的變數以及被環境中變數所引用的變數（閉包），在這些完成之後仍存在標記的就是要刪除的變量了 

引用計數(reference counting):在低版本IE中經常會出現記憶體洩露，很多時候就是因為其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數，當聲明瞭一個 變數並將一個引用型別賦值給該變數的時候這個值的引用次數就加1，如果該變數的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變數在使用，這個值沒法被訪問了，因此可以將其佔用的空間回收，這樣垃圾回收器會在執行的時候清理掉引用次數為0的值佔用的空間。 

在IE中雖然JavaScript物件通過標記清除的方式進行垃圾回收，但BOM與DOM物件卻是通過引用計數回收垃圾的，也就是說只要涉及BOM及DOM就會出現迴圈引用問題。 

22.ie各版本和chrome可以並行下載多少個資源 

IE6 兩個併發，iE7升級之後的6個併發，之後版本也是6個 Firefox，chrome也是6個 

23.請解釋一下 JavaScript 的同源策略。 

概念:同源策略是客戶端指令碼（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文件或指令碼從多個不同源裝載。 

這裡的同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議。  指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。 

24.為什麼要有同源限制？ 

簡單舉例說明：比如一個黑客程式，他利用Iframe把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣使用者名稱，密碼就輕鬆到手了。 

25.什麼是 “use strict”; ? 使用它的好處和壞處分別是什麼？ 

ECMAscript 5添加了第二種執行模式：”嚴格模式”（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。

設立”嚴格模式”的目的，主要有以下幾個： 

1.消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為; 

2.消除程式碼執行的一些不安全之處，保證程式碼執行的安全；

 3.提高編譯器效率，增加執行速度; 

4.為未來新版本的Javascript做好鋪墊。 注：經過測試IE6,7,8,9均不支援嚴格模式。 

缺點: 現在網站的JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被 merge 後，這個串就到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。