面試分享：2018阿里巴巴前端面試總結 | 掘金技術徵文

時間 2019-11-05

原文原文鏈接

前段時間去阿里面試的一次經歷，分享給你們吧！javascript

腦子混了記得很少了，記得多少就記錄多少吧。。。。css

使用css實現一個持續的動畫效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}
複製代碼

主要考：animation 用法html

值	描述
`animation-name`	規定須要綁定到選擇器的 keyframe 名稱。
`animation-duration`	規定完成動畫所花費的時間，以秒或毫秒計。
`animation-timing-function`	規定動畫的速度曲線。
`animation-delay`	規定在動畫開始以前的延遲。
`animation-iteration-count`	規定動畫應該播放的次數。
`animation-direction`	規定是否應該輪流反向播放動畫。

使用js實現一個持續的動畫效果

最開始的思路是用定時器實現，最後沒有想的太完整，面試官給出的答案是用requestAnimationFrame。java

定時器思路

var e = document.getElementById('e')
var flag = true;
var left = 0;
setInterval(() => {
    left == 0 ? flag = true : left == 100 ? flag = false : ''
    flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`
}, 1000 / 60)
複製代碼

requestAnimationFrame 因爲以前沒有用過這個 API 因此是現學的。

//兼容性處理
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var e = document.getElementById("e");
var flag = true;
var left = 0;

function render() {
    left == 0 ? flag = true : left == 100 ? flag = false : '';
    flag ? e.style.left = ` ${left++}px` :
        e.style.left = ` ${left--}px`;
}

(function animloop() {
    render();
    requestAnimFrame(animloop);
})();
複製代碼

不足之處請指正（畢竟是現學的）順便查了一下優點：node

瀏覽器能夠優化並行的動畫動做，更合理的從新排列動做序列，並把可以合併的動做放在一個渲染週期內完成，從而呈現出更流暢的動畫效果
解決毫秒的不精確性
避免過分渲染（渲染頻率過高、tab 不可見暫停等等）注：requestAnimFrame 和定時器同樣也頭一個相似的清除方法 cancelAnimationFrame。

右邊寬度固定，左邊自適應

第一種：webpack

<style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
複製代碼

第二種web

<style> div { height: 200px; } .left { float: right; width: 200px; background-color: rebeccapurple; } .right { margin-right: 200px; background-color: red; } </style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
複製代碼

暫時想到了兩種。面試

水平垂直居中

第一種gulp

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
複製代碼

第二種數組

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}
複製代碼

第三種

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
複製代碼

第四種 flex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}
複製代碼

四種定位的區別

static 是默認值
relative 相對定位相對於自身原有位置進行偏移，仍處於標準文檔流中
absolute 絕對定位相對於最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素爲參考標準。若是無已定位祖先元素, 以body元素爲偏移參照基準, 徹底脫離了標準文檔流。
fixed 固定定位的元素會相對於視窗來定位,這意味着即使頁面滾動，它仍是會停留在相同的位置。一個固定定位元素不會保留它本來在頁面應有的空隙。

Flex佈局用的多嗎？

由於項目考慮兼容 IE9 因此直接說用的很少

移動端適配怎麼作的？

使用媒體查詢作的響應式佈局，根據不一樣屏幕寬度加載不一樣css.

let與var的區別？

let 爲 ES6 新添加申明變量的命令，它相似於 var，可是有如下不一樣：

var 聲明的變量，其做用域爲該語句所在的函數內，且存在變量提高現象
let 聲明的變量，其做用域爲該語句所在的代碼塊內，不存在變量提高
let 不容許重複聲明.

爲何 var 能夠重複聲明？（這個就不知道了）

當咱們執行代碼時，咱們能夠簡單的理解爲新變量分配一起內存，命名爲a，並賦值爲2，但在運行的時候編譯器與引擎還會進行兩項額外的操做：判斷變量是否已經聲明：

首先編譯器對代碼進行分析拆解，從左至右碰見var a，則編譯器會詢問做用域是否已經存在叫 a 的變量了，若是不存在，則招呼做用域聲明一個新的變量a，若已經存在，則忽略var 繼續向下編譯，這時a = 2被編譯成可執行的代碼供引擎使用。
引擎碰見a=2時一樣會詢問在當前的做用域下是否有變量a，若存在，則將a賦值爲2（因爲第一步編譯器忽略了重複聲明的var，且做用域中已經有a，因此重複聲明會發生值得覆蓋而並不會報錯）。若不存在，則順着做用域鏈向上查找，若最終找到了變量a則將其賦值2，若沒有找到，則招呼做用域聲明一個變量a並賦值爲2。參考連接

封裝一個函數，參數是定時器的時間，.then執行回調函數。

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
複製代碼

一個關於 this 指向的問題

差很少應該是這樣，記不太清了

obj = {
    name: 'a',
    getName : function () {
        console.log(this.name);
    }
}

var fn = obj.getName
obj.getName()
var fn2 = obj.getName()
fn()
fn2()
複製代碼

CommonJS 中的 require/exports 和 ES6 中的 import/export 區別？

CommonJS 模塊的重要特性是加載時執行，即腳本代碼在 require 的時候，就會所有執行。一旦出現某個模塊被」循環加載」，就只輸出已經執行的部分，還未執行的部分不會輸出。
ES6 模塊是動態引用，若是使用 import 從一個模塊加載變量，那些變量不會被緩存，而是成爲一個指向被加載模塊的引用，須要開發者本身保證，真正取值的時候可以取到值。
import/export 最終都是編譯爲 require/exports 來執行的。
CommonJS 規範規定，每一個模塊內部，module 變量表明當前模塊。這個變量是一個對象，它的 exports 屬性（即 module.exports ）是對外的接口。加載某個模塊，實際上是加載該模塊的 module.exports 屬性。
export 命令規定的是對外的接口，必須與模塊內部的變量創建一一對應關係。

一行代碼實現數組去重？

[...new Set([1,2,3,1,'a',1,'a'])]
複製代碼

使用addEventListener點擊li彈出內容，而且動態添加li以後有效

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
複製代碼

這個題沒答出來😨😨

var ulNode = document.getElementById("ul");
    ulNode.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);
複製代碼

怎麼判斷兩個對象相等？

obj={
    a:1,
    b:2
}
obj2={
    a:1,
    b:2
}
obj3={
    a:1,
    b:'2'
}
複製代碼

最開始的思路是遍從來判斷，可是最後好像沒有說清楚，查了下，好像能夠轉換爲字符串來判斷。

JSON.stringify(obj)==JSON.stringify(obj2);//true
JSON.stringify(obj)==JSON.stringify(obj3);//false
複製代碼

項目作過哪些性能優化？

減小 HTTP 請求數
減小 DNS 查詢
使用 CDN
避免重定向
圖片懶加載
減小 DOM 元素數量
減小 DOM 操做
使用外部 JavaScript 和 CSS
壓縮 JavaScript 、 CSS 、字體、圖片等
優化 CSS Sprite
使用 iconfont
字體裁剪
多域名分發劃份內容到不一樣域名
儘可能減小 iframe 使用
避免圖片 src 爲空
把樣式表放在中
把腳本放在頁面底部歡迎補充。。。

模塊化開發是怎麼作的？

使用命名空間。

有沒有使用過webpack？

我說Vue項目中使用了，而後就沒問了。

gulp本身寫過任務嗎？仍是都用的模塊？

不知道怎麼怎麼回答，不都是使用模塊來寫的麼，而後就說是使用模塊。

Vue router 除了 router-link 怎麼實現跳轉?

router.go(1)
router.push('/')
複製代碼

Vue router 跳轉和 location.href 有什麼區別？

router 是 hash 改變 location.href 是頁面跳轉，刷新頁面

Vue 雙向綁定實現原理？

經過 Object.defineProperty 實現的

你能實現一下雙向綁定嗎？😰😰

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
    <script> var obj = {} Object.defineProperty(obj, 'txt', { get: function () { return obj }, set: function (newValue) { document.getElementById('txt').value = newValue document.getElementById('show-txt').innerHTML = newValue } }) document.addEventListener('keyup', function (e) { obj.txt = e.target.value }) </script>
</body>
複製代碼

React 和 Vue 有什麼區別？

Set 和 Map 數據結構（😨😨）

ES6 提供了新的數據結構 Set 它相似於數組，可是成員的值都是惟一的，沒有重複的值。
ES6 提供了 Map 數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。也就是說，Object 結構提供了「字符串—值」的對應，Map 結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。

WeakMap 和 Map 的區別?

WeakMap 結構與 Map 結構基本相似，惟一的區別是它只接受對象做爲鍵名（ null 除外），不接受其餘類型的值做爲鍵名，並且鍵名所指向的對象，不計入垃圾回收機制。
WeakMap 最大的好處是能夠避免內存泄漏。一個僅被 WeakMap 做爲 key 而引用的對象，會被垃圾回收器回收掉。
WeakMap 擁有和 Map 相似的 set(key, value) 、get(key)、has(key)、delete(key) ~~和 clear()~~ 方法, 沒有任何與迭代有關的屬性和方法。

重排和重繪

部分渲染樹（或者整個渲染樹）須要從新分析而且節點尺寸須要從新計算。這被稱爲重排。注意這裏至少會有一次重排-初始化頁面佈局。
因爲節點的幾何屬性發生改變或者因爲樣式發生改變，例如改變元素背景色時，屏幕上的部份內容須要更新。這樣的更新被稱爲重繪。

什麼狀況會觸發重排和重繪？

添加、刪除、更新 DOM 節點
經過 display: none 隱藏一個 DOM 節點-觸發重排和重繪
經過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，由於沒有幾何變化
移動或者給頁面中的 DOM 節點添加動畫
添加一個樣式表，調整樣式屬性
用戶行爲，例如調整窗口大小，改變字號，或者滾動。

瀏覽器緩存

瀏覽器緩存分爲強緩存和協商緩存。當客戶端請求某個資源時，獲取緩存的流程以下：

先根據這個資源的一些 http header 判斷它是否命中強緩存，若是命中，則直接從本地獲取緩存資源，不會發請求到服務器；
當強緩存沒有命中時，客戶端會發送請求到服務器，服務器經過另外一些request header驗證這個資源是否命中協商緩存，稱爲http再驗證，若是命中，服務器將請求返回，但不返回資源，而是告訴客戶端直接從緩存中獲取，客戶端收到返回後就會從緩存中獲取資源；
強緩存和協商緩存共同之處在於，若是命中緩存，服務器都不會返回資源；
區別是，強緩存不對發送請求到服務器，但協商緩存會。
當協商緩存也沒命中時，服務器就會將資源發送回客戶端。
當 ctrl+f5 強制刷新網頁時，直接從服務器加載，跳過強緩存和協商緩存；
當 f5 刷新網頁時，跳過強緩存，可是會檢查協商緩存；

強緩存

Expires（該字段是 http1.0 時的規範，值爲一個絕對時間的 GMT 格式的時間字符串，表明緩存資源的過時時間）
Cache-Control:max-age（該字段是 http1.1 的規範，強緩存利用其 max-age 值來判斷緩存資源的最大生命週期，它的值單位爲秒）

協商緩存

Last-Modified（值爲資源最後更新時間，隨服務器response返回）
If-Modified-Since（經過比較兩個時間來判斷資源在兩次請求期間是否有過修改，若是沒有修改，則命中協商緩存）
ETag（表示資源內容的惟一標識，隨服務器response返回）
If-None-Match（服務器經過比較請求頭部的If-None-Match與當前資源的ETag是否一致來判斷資源是否在兩次請求之間有過修改，若是沒有修改，則命中協商緩存）

WeakMap 的 clear()方法已經廢棄了，感謝 @Feibuli 指正

判斷對象相等 obj3 寫錯了，已改正謝謝 @silent同志

有的答案可能不太準確，但願你們輕噴

掘金技術證文活動連接: https://juejin.im/post/5aaf2a95f265da239b413aa1