1. 程式人生 > >阿里面試總結(春招實習)

阿里面試總結(春招實習)


* 層級關係(關於內聯樣式,style樣式,link形式,import形式),為什麼會有這三種,都應用在什麼地方。

面完現在才後知後覺,這個作用,應該從優先順序,快取,效能各方面來回答。


1.優先順序:(1)寫在標籤裡的style屬性,內嵌樣式(優先順序更高),寫在HTML中的style標籤裡面的內部樣式表(次之),還有通過link標籤引入的CSS樣式外聯樣式(最低)。


2.快取:外聯樣式靜態資源直接載入進來渲染就ok。style和inline樣式肯定會阻塞頁面的載入和呈現。

  • 怎樣可以覆蓋父級DIV的樣式。用什麼辦法?

我說到了選擇器,但是好像也說的不是很清楚。(父級選擇器和內容選擇器。)
當時腦子短路沒有想到important,他在選擇器中優先順序是最高。


!important > 內嵌樣式 > ID > 類選擇器 > 標籤選擇器|偽類|屬性選擇器 > 偽對像 > 繼承 > 萬用字元。


1. 在同一組屬性設定中標有“!important“規則的優先順序最大
div{
margin-left:20px!important;
margin-left:40px;
}


2.繼承css樣式不如後來指定的CSS樣式。


3.開發者的規則高於瀏覽者,這個是肯定的。

  • 垂直居中方式(大概說了好幾種吧,不按套路出牌,咋不問垂直水平居中啊。)
  • 下面幾種方式。

    注:前面幾種都是在知道自己高度和父容器高度的情況下:
    1.利用絕對定位和transform。

.parent{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2.用絕對定位和margin

.parent{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    margin-top: //高度的一般
}

3.用彈性盒佈局Flex;這個不用管元素的高低。(垂直水平居中)

.parent{
    display: flex;
    justify-content:center;//設定盒子元素在主軸方向上的對齊方式;
    align-items:center;//側軸方向上的對齊方式
}

4.使用插入table標籤。(垂直水平居中)

.parent{
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}
.son{
    margin:0 auto;//如果是塊級元素
    display:inline-block;//如果行級元素
}

5.垂直水平居中

.parent{
    position: relative;
}
.son{
    position: absolute;
    margin:auto;
}

6.基線對其方式:這個不是很懂

.parent{
    text-align: center; 
}
.sonTemp .son{
    vertical-align: middle;
    display: inline-block;
}

原理:設定一個參照物,和容器一樣高,然後在父級設定水平對齊方式text-align:center在參照物和子級設定基線對其方式vartical-align:middle.需將參照物和子級都設成行內塊display:inline-block.

  • jsonp有了解嗎?

jsonp是json的一種使用模式,可以讓網頁從別的域名那獲取資料,即跨域讀取資料。jsonp是被包含在函式呼叫中的json。


它包含資料和函式兩個部分。回撥函式是當響應到來時應在頁面中呼叫的函式。回撥函式的名字一般是在請求中指定的,資料就是傳入回撥函式中的json資料。

web方面規則的出現一般都是為了解決安全問題吧。之所以有同源策略,一個很重要的原因就是對cookie的保護吧。
cookie中存著sessionID.黑客一旦獲取sessionID並且在有效期內,就可以登入了;
如果我們訪問一個惡意網站,沒有同源策略,那麼網站就能通過js訪問document.cookie得到關於使用者的登陸資訊一類的東西。這不就完蛋了。

2.跨域。面試官只讓我說了jsonp。

說了它借用<script>標籤不受同源策略限制原理。為src屬性指定一個跨域的url。因為jsonp是有效的js程式碼,所以在請求完成之後,即在jsonp響應載入到頁面中之後,會立即執行。


優點:簡單易用;能夠直接訪問響應文字,支援在瀏覽器和伺服器之間雙向通訊。


缺點:(1)jsonp是從其它域中載入程式碼執行。如果其它域中不安全,很可能在響應中新增一些惡意程式碼。 (2)判斷它是否請求失敗很不容易。h5中提出z在<script>一個onerror事件處理程式,但還沒有得到大多數瀏覽器支援。

3.CORS實現跨域

說一下cors吧:它通過自定義HTTP頭部讓瀏覽器與伺服器進行溝通,從而決定請求響應是否應該成功。在傳送該請求的時候,我們在頭部設定一個Origin,如果伺服器同意i訪問,就在Access-Control-Allow-Origin頭部中回發相同的源資訊。


兩者區別:(1)cors比jsonp除get要求方法以外也支援其他的http請求技術。(2)cors可用一般的XMLhttpRequest,這種方式錯誤處理方式更好(3)更加安全,請求和響應都不包括cooies資訊。

補充一下:


303:see other該狀態碼錶示由於請求對應的資源存在著另一個url,應使用get方法定向獲取請求的資源。303明確表示客戶端應當採用get方法獲取資源,這點與302狀態碼有區別。


302:臨時性的重定向。該狀態嗎表示請求的資源已被分配了新的url,希望使用者能使用新的url進行訪問。302表示的資源不是永久移動,只是臨時性。也就是說已經移動的資源對應的url將來還是有可能發生變化。


301:永久性定向。該狀態碼錶示請求的資源已被分配了新的url,以後使用該資源現在所指的URL.


307:Temporary Redirect :臨時重定向。該狀態碼與302有相同的含義。儘管302標準禁止post變化get,但實際使用時大家不遵守。 307會遵照瀏覽器標準,不會從post變為get。但是對於處理響應時的行為,各種瀏覽器有可能出現不同的情況。


503:伺服器超時,伺服器目前無法使用(由於超載或停機維護)。通常,這只是暫時狀態。

  • cookie和session(這個之後單獨總結一下吧)。

  • promise,看之前的部落格吧,主要解決了什麼。

主要解決了非同步程式設計的問題啊。

  • 有什麼想問他的。(我逮住一個機會問了二維碼掃描,超級感謝,他講的也很清楚。)

差不多就是:


首先獲取一個唯一的密碼(也就是二維碼)這個二維碼是將後臺所有session中登陸資訊壓縮而成的一個字串轉換過來的。我們用手機掃描的時候,手機上是登陸狀態,會將uid與調取到手機微信產生的token進行繫結,並且上傳到伺服器,此時,瀏覽器通過長輪詢查詢session,如果匹配,返回201,然後通知伺服器,客戶端由此進入一個新的接面。

總結:

1.總體來說,好多問題也記不太清楚了,這次面試可能很基礎的。(面試官覺得我學的基礎吧)
2.回答還算好吧,但還是不深入,不繫統。
3.最後面試官講的那個二維碼掃描問題,我能記一輩子的,哈哈哈。