2017阿里巴巴 前端 校招免費分享 筆試篇

阿里的招聘相比較於其他公司來說真的算早的，據說社招基本不招前端，招也是P6水平級別的，有幸趕上研究生的校招，算是體會了阿里的高水準

想要免費學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

1筆試

簡歷投了之後，就是筆試了，收到筆試的郵件通知的時候在敲代碼，平時一直在做項目，基本沒有複習什麼題目，心裡還是很緊張的。

今年的前端筆試是8月23號的晚上7點開始，一個小時，題量不多，11道題，8道選擇題，2編程題，1道問答題。基本沒有基礎題，範圍都是現在比較流行的技術。具體的問題也記不清了，只記得知識點，廢話不多說，直接上題

（1）關於svg標籤，選擇下面哪個不是svg標籤？

首先什麼是SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用於網路的基於矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失 SVG 是萬維網聯盟的標準 SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

常見的標籤

line ： 直線

polyline ： 折線

rect ： 矩形

circle ： 圓形

ellipse ： 橢圓形

polygon ： 多邊形

具體的內容就不這裡贅訴，網上有很多關於這方面的資料,想查看實例，請戳這裡實例

（2）關於BFC,下面哪個不能觸發BFC？（position為relative）

首先什麼是BFC？

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相干。

BFC布局規則：

1.內部的Box會在垂直方向，一個接一個地放置。2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。4.BFC的區域不會與float box重疊。5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。6.計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC？

1.根元素 2.float屬性不為none3.position為absolute或fixed 4.display為inline-block, table-cell, table-caption, flex, inline-flex5.overflow不為visible

那麼BFC有何用？

1.清除浮動2.防止 margin 重疊3.多欄布局的一種方式

首先我們來看清除浮動

.f{

border: 10px solid red;

width: 300px;

}

.c{

border: 10px solid black;

width:100px;

height: 100px;

float: left;

}

根據BFC布局規則第六條：計算BFC的高度時，浮動元素也參與計算,為達到清除內部浮動，我們可以觸發f生成BFC，那麼f在計算高度時，f內部的浮動元素c也會參與計算。

.f{

overflow: hidden;

}

對於防止 margin 重疊也有很好的效果

p {

color: rad;

background: pink;

width: 400px;

line-height: 200px;

text-align:center;

margin: 200px;

}

兩個p之間的距離為200px，發送了margin重疊。

根據BFC布局規則第二條：Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

我們可以在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。

.container {

overflow: hidden;

border:1px solid red;

}

p {

color: rad;

background: pink;

width: 100px;

line-height: 50px;

text-align:center;

margin: 50px;

}

最後，對於多欄布局，

body {

width: 600px;

position: relative;

}

.left {

width: 200px;

height: 350px;

float: left;

background: red;

}

.right {

height: 400px;

background: blue;

}

根據BFC布局規則第3條：每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

根據BFC布局規則第四條：BFC的區域不會與float box重疊。

我們可以通過通過觸發right生成BFC， 來實現自適應兩欄布局。

加上

.right {

height: 400px;

background: blue;

overflow:hidden;

}

效果如下;

這樣實現了左欄的寬度固定，右欄可以根據瀏覽器寬度自適應，依次類比，三欄布局也是很好實現的

（3）關於websocket

這裡我就不展開了，主要敘述一下websocket的特性

WebSocket API最偉大之處在於伺服器和客戶端可以在給定的時間範圍內的任意時刻，相互推送信息。WebSocket並不限於以Ajax(或XHR)方式通信，因為Ajax技術需要客戶端發起請求，而WebSocket伺服器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。

Websocket是一個持久化的協議。

WebSocket是一種雙向通信協議。在建立連接後，WebSocket伺服器端和客戶端都能主動向對方發送或接收數據，就像Socket一樣；

WebSocket需要像TCP一樣，先建立連接，連接成功後才能相互通信

相比HTTP長連接，WebSocket有以下特點：

1.是真正的全雙工方式，建立連接後客戶端與伺服器端是完全平等的，可以互相主動請求。而HTTP長連接基於HTTP，是傳統的客戶端對伺服器發起請求的模式。

2.HTTP長連接中，每次數據交換除了真正的數據部分外，伺服器和客戶端還要大量交換HTTP header，信息交換效率很低。Websocket協議通過第一個request建立了TCP連接之後，之後交換的數據都不需要發送 HTTP header就能交換數據，這顯然和原有的HTTP協議有區別，所以它需要對伺服器和客戶端都進行升級才能實現（主流瀏覽器都已支持HTML5）。此外還有 multiplexing、不同的URL可以復用同一個WebSocket連接等功能。這些都是HTTP長連接不能做到的。

而且有一個優秀的第三方API，名為Socket.IO

（4）關於ES6 class,與js prototype原型繼承有何關係？

ES6為了進一步的縮減代碼的編寫，和簡化代碼的邏輯，引入了關鍵詞 class。但class的實現也是在prototype的基礎上，做了一層語法糖,它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

class Person {

constructor(name) {

this.name=name||"Default";

}

toString(){

return 'Name:'+this.name;

}

}

var p1=new Person();

console.log(p1.name);

class Boy extends Person{

constructor(name){

super(name);

this.gende='Boy';

}

toString(){

return super.toString()+" - Gende:"+this.gende;

}

}

var b1=new Boy('hello');

console.log(b1);

console.log(b1.toString());

ES5的繼承，也就是prototype

實質是先創造子類的實例對象this

然後再將父類的方法添加到this上面（Parent.apply(this)）

ES6的繼承，也就是class

實質是先創造父類的實例對象this（必須先調用super）

然後再用子類的構造函數修改this

它們的實現機制是不同的

ES6與 ES5 一樣，類的所有實例共享一個原型對象

對於es6這一塊，還是很有必要去讀一讀 文檔的

其它的筆試題比較常見，也記得不是很清楚，就不在這裡描述了。

那麼如何去提升我們的原生JS 能力呢？

想要免費學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！