實習面試題

1、算法部分

一、基本排序的方式

冒泡、快排、桶排、堆排序、歸併排序、插入排序。

二、二分搜索等

三、二叉樹遍歷相關，例如前序遍歷中序遍歷後序遍歷等，深度優先搜索和廣度優先最好掌握。還有二叉樹的反轉

 

2、計算機網絡部分

1.最重要的就是http協議

http報文解構都包含什麼(大體就是那個三部分，請求實體、請求頭、請求行這些)

http協議經常使用的狀態碼(https://blog.csdn.net/xiaozhuxmen/article/details/51934706)

http頭部關於緩存的字段

http和https的區別

https是http+SSL/TSL,是http的安全版，包含對稱加密，非對稱加密，CA認證，http是超文本傳輸協議，信息明文傳輸，有竊聽、篡改、冒充風險，https密文傳輸

http端口號80,https端口號443

http創建鏈接快，https創建鏈接慢一點，由於它還要和ssl握手

http1.0 1.1 2 大體的區別

http1.0每一個鏈接只容許一次請求，耗時

http1.1每次鏈接能夠多個請求，可是這些請求有順序，要是前面的有一個傳輸特別慢就會致使隊頭阻塞

http2複用tcp鏈接,請求無順序，不用按順序一一回應，避免了隊頭阻塞，頭信息壓縮

緩存字段和200、40四、304之類很是經常使用的狀態碼必定要記住。

2.tcp的三次握手和四次揮手。

3.udp和tcp的比較等等

進程和線程

進程是程序的一次執行，佔有一片獨有的內存空間，資源分配

線程，CPU的基本調度單位，是程序執行的一個完整流程，資源調度

瀏覽器內核

chrome,safari:webkit

firefox:Gecko

IE:Trident

360,搜狗等國內瀏覽器：Trident+webkit

內核模塊組成：

html/css文檔解析模塊

dom/css模塊

佈局和渲染模塊

定時器模塊

網絡請求模塊

事件響應模塊

3、 html和css基礎部分。

1.盒模型概念

網頁佈局就像擺放一個個盒子，盒子由margin, padding, border, content組成

 

2.position定位屬性和相關的關係，例如relative佔用文檔流，而absolute和fixed卻不佔用，還有relative和absolute結合使用會有變化，必定要搞懂。

static，默認

relative，

　　一、開啓相對定位後，不設置偏移量元素不會發生任何變化

　　二、相對定位元素相對於自身在文檔流中的位置進行定位

　　三、不會脫離文檔流

　　四、不會改變元素性質

　　五、會提高一個層級

absolute

　　一、...

　　二、相對於距離最近的開啓了定位的祖先元素進行定位，若都沒開啓，則直接相對於瀏覽器窗口定位

　　三、會徹底脫離文檔流

　　四、會改變元素性質，內聯變塊

　　五、會使元素提高一個層級

fixed

　　一、是一種特殊的絕對定位，特色大部分和絕對定位同樣

　　二、不一樣的是永遠相對於瀏覽器窗口進行定位，不會隨滾動條滾動

層級關係

　　一、定位元素>浮動元素>文檔流中的元素

　　二、元素開啓了定位後，可經過z-index設置元素層級

　　三、z-index值越高元素越優先顯示

　　四、若是z-index值同樣，則優先顯示下面的元素

　　五、父元素永遠不會蓋住子元素　　

3.display相關屬性，經常使用的block、inline、等等。

flex響應式佈局,css3，justify-content設置水平方向排列，align-items設置垂直方向排列

inline-block轉爲行內塊級元素，使之能夠設置寬高

block轉爲塊級元素

inline轉爲行內元素

none不顯示，不保留位置

4.IFC和BFC問題。

BFC塊級格式化上下文, 開啓了BFC的元素不受外界元素干擾，可用來解決垂直塌陷問題，開啓方法：

一、float的值不是none。
二、position的值不是static或者relative。
三、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
四、overflow的值不是visible

BFC特色：

• BFC能夠包含浮動元素（閉合浮動）
• BFC所肯定的區域不會與外部浮動元素髮生重疊
• 位於同一BFC下的相鄰塊級子元素在垂直方向上會發生margin重疊
• 位於不一樣BFC下的相鄰元素之間不會發生margin重疊

 

5.雙飛翼佈局。

6.垂直居中、水平居中的多種方式和方法，這倆個都有不少的方法，儘可能每一個都記下來4個方法以上，使用line-height的時候須要知道高度等等。並且還有要注意字體的居中和塊級元素等居中是不同的。

水平居中，行內元素text-aljgn:center, 塊級元素margin:0 auto;

垂直居中，設置line-height和height同樣，絕對定位，設置left, top 爲50%，margin-left:-元素自己寬度一半，margin-top:-元素自己高度一半

css3，display:flex; justify-content:

7.聖盃佈局

8.rem、em的使用。

rem相對網頁根元素字體大小，通常爲html, em相對父元素字體大小；

9.less等預處理語言。

像寫編程語言同樣寫css, 好比你css裏重複用到某個相同屬性，那你能夠用less寫成一個變量，到時候若是要改只需改那個變量值便可，便於維護

10.媒體查詢。

11.vh和vw，固然這個考的實在太少。

12.h5的語義化部分。當時就有一個問題問我實現刪除線怎麼辦。固然有html基礎標籤和css樣式了。他就問哪一種更好。當時樓主一臉矇蔽的說html的方式更好。最後被問緣由的時候說了一大堆不重要的，最後面試官告訴我是在語義化的方面考慮的。。。

13.h5 的web worker 還有websocket。這些不須要你真正使用過，可是要明白他們在什麼場景下使用。就能夠了。本身拿菜鳥教程上代碼的實驗一下就能夠了。websocket內部還有一些關於協議的部分。要本身弄懂。

14.h5的語義化標籤都有什麼，大體看一下，記住一部分。還有新加的例如video這些東西。

header, nav, session, article, footer, audio音頻, video視頻

 

15.css3的都很重要，包括transform、transition、animate這些都好好看一下。

16.css選擇器的優先級，也就是class id 元素選擇器這些的優先級計算。

!important>內聯1000>id100>class10（僞類）>標籤1（僞元素）

17.css樣式表引用的優先級部分。例如link引用或者行內都設置了字體顏色，問字體此時顯示什麼字體。

內聯樣式表>內部樣式表>外部樣式表

18.清除浮動。

19.canves 某些特別的公司部門可能須要，可是我至今沒有被問過。

20.css實現響應式的方式。

設置字體用相對大小

高度塌陷

產生緣由：父元素在文檔流中高度默認被子元素撐開，當子元素脫離了文檔流，將沒法撐起父元素高度，也就致使了父元素高度塌陷

後果：父元素一旦塌陷，全部標準流中元素上移，佈局混亂

方案一：

　　開啓父元素的BFC

　　開啓BFC後：

　　一、父元素的垂直外邊距不會與子元素重疊

　　二、開啓BFC的元素不會被浮動元素所覆蓋

　　三、開啓BFC的元素能夠包含浮動子元素

　　四、計算BFC高度時，浮動元素也參與計算

 方案二：

　　在塌陷父元素最後添加一個空白的div，而後對該div清除浮動

　　clear:none left right both

方案三：使用after僞類，原理同方案2

　　.clearfiix:after{

　　　　content:' ';

　　　　display:block;

　　　　clear:both;

　　}

高度塌陷完善

　　一、子元素浮動，父標籤高度塌陷

　　二、子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素，使用空的table標籤能夠隔離父子元素的外邊距，阻止外邊距重疊

　　三、通過修改後的clearfix是一個多功能的，既能夠解決高度塌陷，又能夠確保父元素和子元素的垂直外邊距不會重疊

.clearfix::before,

.clearfix::after{

　　content:'';

　　display:table;

　　clear:both;

}

4、js部分

這個是重中之重了，若是你js掌握的很是很是好，面試官的問題你都回答上來了，那麼html、css部分問題沒答上也沒有什麼。畢竟js纔是前端的重點。

1.js的做用域做用域鏈。

js沒有塊級做用域，有函數做用域，函數執行時js引擎會預解析函數內部的變量，將它們提高到所在做用域的頂部，可是賦值操做還在原來位置，當用到某個變量時，js會首先在函數內部查找這個變量，若是沒有找到，就去外層找，逐級向上找，直到window, 這就是做用域鏈，是單向的，也就是外層做用域是沒辦法訪問內層做用域的變量的。

 

2.js的原型原型鏈，來一張巨經典的圖片。能看懂或者你給面試官講明白就ok了。還有instanceOf那些判斷。

對象包含實例和原型，實例包含實例屬性和實例方法，原型包含原型屬性和原型方法，當進行訪問對象操做時，首先會訪問對象實例，若是對象實例裏沒找到，就會到對象原型裏找，若是對象原型也沒找到，就會到建立這個對象的對象的原型庫裏找，逐級向上，這就是原型鏈。

 

3.js的dom元素操做插入刪除等等。

添加：

someNode.appendChild(newNode);

移動：

someNode.insertBefore(newNode,null);

移除：

someNode.removeChild(someNode.firstChild);

someNode.remove()(刪除自身)

複製：

someNode.cloneNode(true深複製/ false淺複製)

建立：

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素 

createTextNode() //建立一個文本節點

替換：

replaceChild()

查找：

getElementsByTagName() //經過標籤名稱 

getElementsByName() //經過元素的Name屬性的值 

getElementById() //經過元素Id，惟一性

4.js的垃圾回收機制。(問的比較少)。

標記清除，引用計數

5.js中String或者Array或者Math內部經常使用的方法。這些在菜鳥教程上均可以看的。

 

6.ajax請求詳細怎麼實現，和其中的響應狀態。

狀態碼：0 未初始化，1 初始化， 3 數據傳輸中， 4 完成

Ajax status :

XHR.status>=200&&XHR.status<300||XHR.status==304

7.js的基礎類型和引用類型

基礎類型undefined, null, number, boolean, string, symbol(es6), 引用類型object

內置對象類型判斷

typeof obj;

obj.constructor.name;

object.prototype.toString.call(obj);

obj.toString();

8.事件委託、事件冒泡、事件捕獲。

事件委託就是在要監聽的元素的父級以上元素設置事件監聽，好比要監聽li的點擊事件，那麼能夠在ul上監聽，這樣能夠提高性能

事件冒泡就是事件由比較具體的元素向非具體元素逐級向上傳播，直到document

事件捕獲和事件冒泡相反，由非具體元素向具體元素傳播

9.addEventlistener和正常的onclick=()=> 的區別

 

10.js中new和object.creat區別

11.除了js中DOM的基礎方法還有BOM中的方法。好比經過js直接取出相應的url的端口號，或者是協議名，或者url總體。

12.瀏覽器輸入url以後最後網頁渲染出來通過了什麼（https://blog.csdn.net/xiaozhuxmen/article/details/52014901）

DNS解析，將域名解析成IP地址

TCP三次握手創建鏈接（爲什麼要三次）

瀏覽器向服務器發送請求

服務器迴應請求

TCP四次揮手斷開鏈接（爲什麼要四次）

瀏覽器構建生成渲染樹，渲染頁面

13.js跨域實現。我大概回答的有webpack和nginx等代理跨域。CORS和jsonp等。通常這些就能夠了

14.瀏覽器的同源策略

瀏覽器基於安全考慮，僅限同源頁面之間能夠進行數據交互。所謂同源，即域名，端口，協議相同

同源對哪些行爲有限制：

　　一、cookie, localstorage, IndexDB

　　二、DOM沒法得到

　　三、AJAX請求沒法發送

15.瀏覽器的迴流和重繪，就是reflow那些東西。

迴流指元素大小，位置發生了改變，須要從新解析html構建dom樹，解析css生成css規則樹，兩者合併成render樹，瀏覽器從新渲染頁面

重繪指元素顏色等不影響結構的外觀樣式發生了改變，無需從新構建dom樹，迴流必定致使重繪，重繪不必定致使迴流

16.call、bind、apply區別。

改變this指向，call傳遞參數，apply傳遞數組

17.js實現繼承怎麼實現。原理是？ 這個其實和上面的原型鏈原型是一塊兒的。

類的建立、繼承和閉包

new 一個Function ，繼承經過prototype，超類和子類能夠經過子類的prototype=new 超類（），而後把prototype 的constructor指回子類

繼承，子類擁有父類的資源

原型鏈繼承

　　一、每一個函數都能構造出一個對象，這個對象內部有個屬性指向這個函數的原型對象

　　二、原型對象本質也是對象，也是由另外一個構造函數構造出來的，也指向那個構造函數的原型對象

藉助構造函數繼承

組合繼承（原型鏈繼承加構造函數繼承）

寄生式繼承

18.請求get和post的區別

get數據量小32k，post數據量大1G，get直接經過url傳遞參數，不安全

19.js方法參數argument

僞數組，具備length屬性，也可像真數組同樣遍歷，可是沒法使用數組的一些方法，實質是對象，

可經過Array.prototype.slice.call(arguments)轉爲真數組

Array.from()

20.深拷貝和淺拷貝，還能夠引入序列化。還要明白序列化的缺點。

對引用類型而言，直接拷貝的話拷貝的是引用地址，兩者指向同一個堆內存，對其中一個的操做會影響另外一個，即淺拷貝

object.assign()合併對象

深拷貝即對原來對象內存裏的東西也拷貝出來，這樣兩者互不影響

如下都是es6

21.promise，最好本身聲明一個構造函數嘗試去實現，這樣面試官會以爲你學的很認真。若是實在本身寫不出來上網查一下promise的實現原理或者源碼應該就有。

解決異步的方案

22.閉包

當一個嵌套的內部函數引用了嵌套函數外部的變量，就造成了閉包。

　　一、使用函數內部的變量，在函數執行完後，仍然存活在內存中，延長了局部變量的生命週期。

　　二、在函數外部能夠操做函數內部的變量

清除閉包：

var f=full();//全局變量，調用閉包

f=null;

小閉包（封閉做用域/自執行函數）

(function(){

 

})();

閉包場景應用：一、高級排他；二、節流

缺點：函數執行完後，函數內局部變量沒有被釋放，佔用內存時間會變長，容易形成內存泄漏

解決辦法：及時釋放

內存溢出和內存泄漏

內存溢出：一種程序運行出現的錯誤，當程序運行須要的內存超過了剩餘的內存時，就會拋出內存溢出的錯誤

內存泄漏：佔用的內存沒有被及時釋放，內存泄漏累積多了就容易致使內存溢出

常見的內存泄漏：

　　一、佔用內存很大的全局變量；

　　二、沒有及時清理的計時器/定時器；

　　三、閉包

解決方法：設爲null

 

23.let和const，最好全面一點解釋，包括能夠說一下變量提高引入一下var，和這些在什麼場景下去使用。

定義變量的新方式，主要能夠解決es5中var的一些缺陷，var沒有塊級做用域，有變量提高，變量能夠重複定義賦值，會形成開發中一些問題，let具備塊級做用域，不存在變量提高，const只能被定義一次，用來定義常量，聲明的常量必須賦值，只在當前代碼塊有效，做用域不會被提高，不能被重複聲明，

24.generator

set和map

set 相似於數組，沒有重複元素，開發中用於去除重複元素

建立一個集合

let set=new Set();

console.log(set);//一個空集合

let set=new Set('張三','張三');//張三

四個方法

add(),delete(),has(),clear()

map數值集合，也可去重

相似於對象，本質是鍵值對的集合

鍵不侷限於字符串，各類類型的值均可以看成鍵

四個方法

set(), get(), delete(), clear()

25.es6加上symbol的基礎數據類型

26.set類型能夠實現數組去重等。

27.箭頭函數 重點，不少時候都會問 包括裏面的簡便寫法和內部的this指針指向等等

對this的關聯。內置this的值，取決於箭頭函數在哪裏定義，而非箭頭函數執行的上下文環境。

new 不可用。箭頭函數不能用new關鍵字來實例化對象，不然報錯。

this指向不會改變。函數內置this指向不可改變，this在函數體內整個執行環境中爲常量。有利於JavaScript引擎優化處理。

沒有arguments對象。不能經過arguments對象訪問傳入的實參。只能使用顯示命名或者其它新特性完成。

28.解構賦值

數組解構賦值，一一對應，匹配對應

let [arr,[arr2,arr3,[arr4,arr5]]];

console.log(arr1,arr2,arr3,arr4,arr5);

let name='張三', age=18;

let[name,age]=['李四',20];

對象解構賦值

let {name,age,sex}={name:'張三'，age:55};

console.log(name);//張三

基本類型的解構賦值

let [a,b,c,d,e]='我是中國人'；

console.log(a);//我

29.es6新增長的正則符號。

class的基本運用 語法糖

<script>
    //構造函數
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    Person.prototype={
        constructor:Person,
        print(){
            console.log('我叫'+this.name+'今年'+this.age);
        }
    };
    //實例化
    let person=new Person('張三',19);
    console.log(person);
</script>
<script>
    //經過class面向對象,語法糖
    class Person{
        constructor(name,age){
            thsi.name=name;
            this.age=age;
        }
        print(){
            console.log('我叫'+this.name+'今年'+this.age);
        }
    }
</script>

 

30.或者直接問你es6有什麼新加的東西，說得越多越好

es6咱們能夠去http://wiki.jikexueyuan.com/project/es6/這裏面去學習。固然想要更深瞭解的話就須要看一下阮一峯大大的那本書了。可是這個我以爲面向面試足夠了。

如下就是亮點部分了，面試總要有一些亮點告訴面試官你基礎很好。由於其實和麪試官拽技術不必的，人家真正搞開發的，真的拽技術能甩你8條大馬路(固然真正的大大大佬請無視我這句話)，並且我是面向我們不少仍是在蒙圈的同窗們寫的。都是很基礎的東西，畢竟不能說全部人都瞄準bat進發對吧？

1.js單線程和js具體怎麼實現異步的。大概的技術名詞有事件隊列、執行棧、宏任務、微任務。具體的各位老鐵們百度吧。。

2.webworke作分線程

3.vue-router原理實現。多看源碼之類的

4.nginx負載均衡。redis共享數據等等等。

5.asm.js（這個我想不少人沒聽過都。。這個是我本身看的一個技術。比較有意思的。由於面試官總會問你最近在看什麼比較新的技術這樣的問題，專門準備的）。

 

還有一些其餘的問題。

1.跨域。

2.網絡安全，大多就是csrf和xss看明白原理和解決方式就能夠了。

3.數據結構的棧、隊列、鏈表、等等這些基礎的數據結構要明白是什麼。

4.設計模式（http://www.javashuo.com/article/p-okwuujts-k.html）

5.數據庫相關操做語句(這個問得比較少，可是基礎的數據庫語句仍是要學的，仍是菜鳥教程。看一下就好了)

6.linex基礎指令，通常不多問。就算問也是問你知道什麼指令

7.bootstrap實現柵格的原理

8.webpack相關配置。例如跨域之類的