阿里面試總結(春招實習)
* 層級關係(關於內聯樣式,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資料。
jsonp跨域,為什麼會有同源策略,跨域的方式。
1.為什麼會有同源策略
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.最後面試官講的那個二維碼掃描問題,我能記一輩子的,哈哈哈。