面試題總結

時間 2019-11-12

原文原文鏈接

HTML

一、html5有哪些新特性？移除了哪些元素？如何處理h5新標籤的瀏覽器兼容性問題？如何區分html和html5？

新特性：javascript

    內容元素：article、footer、header、nav、section。css

    表單控件：calendar、date、time、email、url、search。html

    控件元素：webworker, websockt, Geolocation。前端

其餘元素：canvas、audio、video、html5

    storage存儲：localstorage、sessionstoragejava

HTML5爲history對象添加了兩個新方法，history.pushState() 和 history.replaceState()，用來在瀏覽歷史中添加和修改記錄。node

移除的元素：react

顯現層元素：basefont，big，center，font, s，strike，tt，u。webpack

性能較差元素：frame，frameset，noframes。 css3

處理兼容性問題：

1） IE8/IE7/IE6支持經過document.方法產生的標籤，利用這一特性讓這些瀏覽器支持HTML5新標籤。

2）使用html5shim框架

區分html和html5：

1）文檔類型聲明上：

html代碼有不少繁瑣的代碼，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
html5省去了這些代碼，更加方便文檔的統一標準，且節約html5網頁開發者的時間，提升網站的加載速度。
<!doctype html>
     2）結構語義上：

        html沒有體現結構語義化的標籤，html網頁開發經常是命名方式是這樣的：<div id="header"></div>.這樣表示網站的頭部。

            html5增長了一些新的標籤，好比:<header><article><footer>

二、html文件開頭都會聲明一個doctype標識，做用是什麼？

DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。

CSS

一、css3新特性？

1）CSS3的選擇器

      a）E:last-child 匹配父元素的最後一個子元素E。
      b）E:nth-child(n)匹配父元素的第n個子元素E。
      c）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。

2）@Font-face 特性

Font-face 能夠用來加載字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

3）圓角：border-radius

4）多列布局（multi-column layout）：兼容性很差

5）陰影

6）漸變效果

7）css彈性盒子模型

8）css3製做特效：過渡效果、2/3D轉換

二、介紹一下標準的css盒子模型？與低版本的IE盒子模型有什麼不一樣？

CSS盒子模型：由四個屬性組成的外邊距(margin)、內邊距(padding)、邊界(border)、內容區(width和height);

三、css選擇符有哪些？哪些屬性能夠繼承？css優先級算法如何計算？

CSS選擇符：類型選擇符（body）、羣組選擇符（h1，h2，h3，span）、包含選擇符（h2 span）、ID選擇符（#id）、Class選擇符（.content）

能夠繼承的屬性：class屬性，僞類A標籤，列表ul、li、dl、dd、dt能夠繼承

優先級算法如何計算：優先級就近原則

內聯樣式>ID選擇器>僞類>屬性選擇器>類選擇器>元素（類型）選擇器>通用選擇器

權值相等時，後出現的樣式優於先出現的樣式

同一組屬性設置中標有「！important」規則的優先級最大

四、position定位？

static	默認值。位置設置爲static的元素，它始終會處於頁面流給予的位置，會忽略任何top、bottom、left、right聲明
relative	位置設置爲relative的元素，可將其移至相對於其正常位置的地方
absolute	位置設置爲absolute的元素，可定位於相對於包含它的元素的指定座標。
fixed	位置設置爲fixed的元素，可定位於相對瀏覽器窗口的指定座標

五、rem em px 區別？

px實際上就是像素，用PX設置字體大小時，比較穩定和精確。可是px不支持用戶進行瀏覽器縮放或者不一樣移動端的兼容，由於像素是固定的，屏幕大小是變化的。由此引入了em和rem。

em是根據父元素來對應大小，是一種相對值，並非絕對值，em值 = 1/父元素的font-size*須要轉換的像素值。進行任何元素設置，都有可能須要知道他父元素的大小，這很不方便因此又有了rem。

rem是根據根元素html的font-size來對應大小，1rem = 100px,能夠在根元素html中寫固定像素也能夠寫百分比，而後在具體的標籤上設置rem 。

六、加載一個外部css文件有哪些方式？

@import url（/css/mycss.css）

七、浮動優缺點？如何清除浮動？

優勢：在圖片周圍包含文字；建立網頁佈局

缺點：沒法撐起父元素；同級別的兄弟元素會圍繞在周圍

清除方式：

1）添加額外的標籤，並設置其屬性：clear:both

2）添加<br>標籤，使用<br>標籤自己的clear屬性

3）父元素設置overflow:hidden

4）父元素設置overflow:auto

5）父元素也設置成浮動元素

6）父元素設置display:table

7）使用僞元素:after

八、行內元素與塊級元素的區別？

塊級元素特定	行內元素特色
老是在新行上開始，佔據一整行	和其餘元素在一行上
高度，行高以及外邊距和內邊距均可控制	高度，行高以及外邊距和內邊距部分可改變
寬帶始終是與瀏覽器寬度同樣，與內容無關	寬度只與內容有關
它能夠容納內聯元素和其餘塊元素	行內元素只能容納內容和其餘行內元素

九、垂直居中的方法？

http://www.javashuo.com/article/p-tngicsfd-u.html

十、div+css的佈局與table佈局的優缺點？

	優勢	缺點
table佈局	1.理解比較簡單 2.不一樣的瀏覽器看到的效果通常相同 3.顯示數據仍是很好的	1.顯示樣式和數據綁定在一塊兒 2.佈局的時候靈活度不高 3.一個頁面可能會有大量的table元素代碼冗餘度高 4.增長帶寬 5.搜索引擎不喜歡這樣的佈局
div+css佈局	1.符合w3c標準，微軟等公司均爲w3c支持者 2.搜索引擎更加友好 3.樣式的調整更加方便，內容和樣式的分離，使頁面和樣式的調整變得更加方便。 4.CSS的極大的優點表如今簡潔的代碼，對於一個大型網站來講，能夠節省大量帶寬。而且搜索引擎也更喜歡簡潔的代碼 5.表現和結構分離，在團隊開發中更容易分工合做而減小相互關聯性

DIV+CSS並非要咱們拋棄table 由於table在顯示數據時，特別方便，所以在使用DIV+CSS時，該使用table時，就得使用。

JS

一、bootstrap三大布局？

響應式佈局、柵格佈局、表單佈局

二、jQuery中的bind（）函數和on（）函數有什麼區別？

bind()	爲每一個匹配元素的特定事件綁定事件處理函數 bind(type，【data】，fn)
on()	在選擇元素上綁定一個或多個事件的事件處理函數on(events，【selector】，【data】，fn)

三、JavaScript建立對象的幾種方式？JavaScript如何實現繼承？JS定義類的方法？

建立對象的方式：經過Object構造函數或對象字面量建立單個對象、工廠模式、構造函數模式、原型模式、組合使用構造函數模式和原型模式、動態原型模式、Object.create()、另有寄生構造函數模式和穩妥構造函數模式。

http://www.javashuo.com/article/p-nybgevtd-p.html

實現繼承的方式：原型鏈繼承、構造繼承、實例繼承、拷貝繼承、組合繼承、寄生組合繼承

http://www.javashuo.com/article/p-rwkatbxg-gb.html

JS定義類的方法：工廠方式、構造函數方式、原型方式、動態原型方式、混合工廠方式

http://www.jb51.net/article/84089.htm

四、什麼是閉包？爲何要用它？

書面介紹：閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。

我的理解：閉包是就是函數中的函數，裏面的函數能夠訪問外面函數的變量，外面的變量的是這個內部函數的一部分。

做用：

1）使用閉包能夠訪問函數中的變量。

2）可使變量長期保存在內存中，生命週期比較長。

注意：閉包不能濫用，不然會致使內存泄露，影響網頁的性能。閉包使用完了後，要當即釋放資源，將引用變量指向null。

五、請簡述事件綁定，事件綁定的方法？

要想讓 JavaScript 對用戶的操做做出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操做的函數，不一樣的操做對應不一樣的名稱。

事件綁定的方法：

1）在DOM元素中直接綁定
<input type="button" value="click me" onclick="hello()">

<script>
    function hello(){
        alert("hello world!");
    }
</script>
2）在JavaScript代碼中綁定
<input type="button" value="click me" id="btn">
 
<script>
    document.getElementById("btn").onclick = function(){
        alert("hello world!");
    }
</script>
3）綁定事件監聽函數
<input type="button" value="click me" id="btn1">
 
<script>
    document.getElementById("btn1").addEventListener("click",hello);
    function hello(){
        alert("hello world!");
    }
</script>

六、什麼是事件冒泡，如何阻止事件冒泡？

當事件發生後，這個事件就要開始傳播(從裏到外或者從外向裏)。事件冒泡通俗點講就是，當你的子元素和父元素註冊了同一個事件的時候，當你激活子元素的時候，父元素也會跟着被激活，

阻止事件冒泡：event.stopPropagation()

https://www.cnblogs.com/liujiayun/p/5511637.html

七、簡述做用域和做用域鏈？

做用域就是變量和函數的可訪問範圍，控制着變量和函數的可見性與生命週期，在JavaScript中變量的做用域有全局做用域和局部做用域；在java中做用域就是一個{}花括符是塊級做用域，而javaScript沒有塊級做用域，只有函數級做用域。

做用域鏈：當代碼在一個環境中執行時，會建立變量對象的一個做用域鏈（scope chain,不簡稱sc）來保證對執行環境有權訪問的變量和函數的有序訪問。

其餘

一、es6新特性？

1）let&&const

let、const、var區別？

let是塊級做用域，函數內部使用let定義後，對函數外部無影響

const定義的變量不能夠修改，並且必須初始化

var定義的變量能夠修改，若是不初始化會輸出undefined，不會報錯

2）iterable類型

3）解構賦值

4）箭頭函數

es6的箭頭函數與通常函數的區別？

    箭頭函數永遠是匿名函數，this指向object內部

    不綁定this，arguments（參數）

    更簡化的代碼語法

5）延展操做符

6）類

二、介紹一下你對瀏覽器內核的理解，常見的瀏覽器內核有哪些？

1）瀏覽器內核主要分紅兩個部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：負責取得網頁的內容(html,xml和圖像等)，整理訊息(例如假如css)，以及計算網頁的顯示方式，而後輸出到顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不一樣。全部網頁瀏覽器、電子郵件客戶端以及它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎：解析和執行JavaScript來實現網頁的動態效果。

2）常見的瀏覽器內核：

Trident內核：IE，360，搜過瀏覽器；

Gecko內核：Netscape6及以上版本，

Presto內核：Opera

Blink內核：Opera；

Webkit內核：Safari，Chrome

三、get、post區別？

get參數經過url傳遞，post參數放在request body中

get在瀏覽器回退時是無害的，post會再次提交請求

get產生的url地址能夠被bookmark，post不能夠

get請求會被瀏覽器主動存儲，而post不會，除非手動設置

get請求只能進行URL編碼，post支持多種編碼方式

get請求參數會被完整保留在瀏覽器的歷史記錄裏，post不會

get請求在URL中傳送的參數是有長度限制的，post沒有

參數的數據類型，get只接受ASCII字符，post沒有限制

get不如post安全，由於參數直接暴露在url上，不能用來傳遞敏感信息

四、react生命週期？

三種狀態	狀態包括的函數
初始化	getDefaultProps()、getInitialState()、componentWillMount()、render()、componentDidMount()
更新	componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps,nextState)、componentWillUpdate(nextProps,nextState)、render()、componentDidUpdate()
銷燬	componentWillUnmount()

數據請求通常寫在componentDidMount()

五、移動端適配？

1）自動適應屏幕寬度，擴展viewport屬性，添加meta標籤

2）使用框架搭建頁面（bootstrap）

3）寬度的嚴格佈局書寫，寬度不能寫死

4）圖片自適應，圖片寬度屬性設置爲100%

六、W3C標準？

W3C（萬維網聯盟）標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發佈，也有一些是其餘標準組織制訂的標準，好比ECMA（European Computer Manufacturers Association）的ECMAScript標準。

七、MVC模式？MVP模式？MVVM模式？

MVC模式是一種開發模式，他的好處是能夠將界面和業務邏輯分離。

        Model（模型），是程序的主體部分，主要包含業務數據和業務邏輯。在模型層，還會涉及到用戶發佈的服務，在服務中會根據不一樣的業務需求，更新業務模型中的數據。

         View(視圖），是程序呈現給用戶的部分，是用戶和程序交互的接口，用戶會根據具體的業務需求，在View視圖層輸入本身特定的業務數據，並經過界面的事件交互，將對應的輸入參數提交給後臺控制器進行處理。

         Controller（控制器），Controller是用來處理用戶輸入數據，已經更新業務模型的部分。控制器中接收了用戶與界面交互時傳遞過來的數據，並根據數據業務邏輯來執行服務的調用和更新業務模型的數據和狀態。

MVC是比較直觀的架構模式，用戶操做-->View（負責接收用戶的輸入操做）-->Controller（業務邏輯處理）-->Model（數據持久化）-->View（將結果反饋給View）

MVP模式是把MVC中的Controller換成了Presenter（呈現），目的就是爲了徹底切斷View跟Model之間的聯繫，由Presenter充當橋樑，作到View-Model之間同信的徹底隔離。

MVVM模式是對MVC思想的徹底變革，它是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應到View上。

八、AMD規範？UMD規範？ CMD規範？

http://www.javashuo.com/article/p-bhyweobv-bw.html

AMD規範全稱是Asynchronous Module Definition，即異步模塊加載機制。從它的規範描述頁面看，AMD很短也很簡單，但它卻完整描述了模塊的定義，依賴關係，引用關係以及加載機制。從它被requireJS，NodeJs，Dojo，JQuery使用也能夠看出它具備很大的價值，沒錯，JQuery近期也採用了AMD規範。　　做爲一個規範，只需定義其語法API，而不關心其實現。

AMD規範簡單到只有一個API，即define函數：
    define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
    其中：
        module-name: 模塊標識，能夠省略。
　　  array-of-dependencies: 所依賴的模塊，能夠省略。
　　  module-factory-or-object: 模塊的實現，或者一個JavaScript對象。

九、http協議？http狀態碼？

HTTP是hypertext transfer protocol（超文本傳輸協議）的簡寫，它是TCP/IP協議的一個應用層協議，用於定義WEB瀏覽器與WEB服務器之間交換數據的過程。客戶端連上web服務器後，若想得到web服務器中的某個web資源，需遵照必定的通信格式，HTTP協議用於定義客戶端與web服務器通迅的格式。

常見的http狀態碼：

200 - 請求成功
301 - 資源（網頁等）被永久轉移到其它URL
404 - 請求的資源（網頁等）不存在
500 - 內部服務器錯誤

http://www.runoob.com/http/http-status-codes.html

http協議包括http協議的請求和http協議的響應：

http協議的請求：請求方法、請求頭、請求正文

http協議的響應：狀態行、響應頭、響應正文

十、WebSocket協議？

WebSocket協議是基於TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通訊——容許服務器主動發送信息給客戶端。

十一、webpack打包原理？

把全部依賴打包成一個bundle.js文件，經過代碼分割成單元片斷並按需加載。

十二、nodejs和Java的區別？

1）nodejs比Java更快

2）nodejs先後端都採用JavaScript，表明將來發展的趨勢，而Java則是如今的最流行的服務器端編程語言

3）nodejs和JavaEE——一種是解釋語言，一種編譯語言。

1三、瀏覽器打開一個網址的過程？

1）瀏覽器自己是一個客戶端，當你輸入URL的時候，首先瀏覽器會去請求DNS服務器，經過DNS獲取相應的域名對應的IP

2）而後經過IP地址找到IP對應的服務器後，要求創建TCP鏈接

3）瀏覽器發送完HTTP Request（請求）包後，服務器接收到請求包以後纔開始處理請求包

4）在服務器收到請求以後，服務器調用自身服務，返回HTTP Response（響應）包

5）客戶端收到來自服務器的響應後開始渲染這個Response包裏的主體（body），等收到所有的內容隨後斷開與該服務器之間的TCP鏈接。

1四、什麼是虛擬dom？

Virtual Dom能夠看作一棵模擬了DOM樹的JavaScript對象樹，其主要是經過vnode,實現一個無狀態的組件，當組件狀態發生更新時，而後觸發Virtual Dom數據的變化，而後經過Virtual Dom和真實DOM的比對，再對真實DOM更新。虛擬DOM其實就是一種模擬DOM的JavaScript數據結構。

http://www.javashuo.com/article/p-ybghuplm-k.html

1五、git命令？

https://blog.csdn.net/halaoda/article/details/78661334

1六、頁面數據緩存的方法？

cookie storage

1七、請求圖片過多時怎麼優化處理？

react開發處理的方式：前端用react的state實現了圖片的異步加載，後端作了三個級別的緩存。

圖片優化方式：雪碧圖、圖片壓縮、base6四、響應式圖片、延遲加載、圖標字體、SVG

https://www.cnblogs.com/zhuzhenwei918/p/6935426.html?utm_source=itdadao&utm_medium=referral

1八、什麼是Hybird APP，經常使用的混合式開發框架有哪些？

Hybird APP是指介於web-app、native-app這二者之間的app，兼具「Native App良好用戶交互體驗的優點」和「Web App跨平臺開發的優點」。

https://www.jianshu.com/p/6c1986f54054

混合開發框架：IONIC、Mobile Angular UI、Intel XDK、Appcelerator Titanium、Sencha Touch、Kendo UI、PhoneGap、

1九、瀏覽器兼容性問題？經常使用hack的技巧？

http://www.javashuo.com/article/p-nadbttof-hh.html

不一樣的瀏覽器對CSS的解析結果是不一樣的，所以會致使相同的CSS輸出的頁面效果不一樣，這就須要CSS Hack來解決瀏覽器局部的兼容性問題。而這個針對不一樣的瀏覽器寫不一樣的CSS 代碼的過程，就叫CSS Hack。

http://www.ynpxrz.com/n967304c2025.aspx

20、跨域問題？解決跨域問題的方法？

本地的域名與服務器的域名不一致，就會產生跨域。

生產環境不存在跨域，開發的時候加header、cors

讓本地的域名與服務器的域名一致

若是是本機調試，把向服務器請求的域名變成本身的IP地址

若是是測試環境，把向服務器請求的域名變成測試環境的域名

解決：

1）JSONP

JSONP是JSON with Padding的略稱。它是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。關於jsonp的使用方式，能夠參考http://blog.csdn.net/alen1985/article/details/6365394，優缺點能夠參考http://blog.csdn.net/z69183787/article/details/19191385　　

2）添加響應頭，容許跨域

addHeader(‘Access-Control-Allow-Origin:*’);//容許全部來源訪問
　　 addHeader(‘Access-Control-Allow-Method:POST,GET’);//容許訪問的方式

3）代理的方式

服務器A的test01.html頁面想訪問服務器B的後臺action，返回「test」字符串，此時就出現跨域請求，瀏覽器控制檯會出現報錯提示，因爲跨域是瀏覽器的同源策略形成的，對於服務器後臺不存在該問題，能夠在服務器A中添加一個代理action，在該action中完成對服務器B中action數據的請求，而後在返回到test01.html頁面。