摘要：使用實現一個持續的動畫效果最開始的思路是用定時器實現，最后沒有想的太完整，面試官給出的答案是用。參考鏈接封裝一個函數，參數是定時器的時間，執行回調函數。規范規定，每個模塊內部，變量代表當前模塊。

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

animation:mymove 5s infinite;

@keyframes mymove {

    from {top:0px;}
    
    to {top:200px;}

}

主要考： animation 用法

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

————————————————————————————————————————————————————————
2、使用js實現一個持續的動畫效果
最開始的思路是用定時器實現，最后沒有想的太完整，面試官給出的答案是用 requestAnimationFrame。

    var e = document.getElementById("e")
    
    var falg = true;
    
    var left = 0;
    
    setInterval(() => {
    
        left == 0 ? falg = true : left == 100 ? falg = false : ""
    
        falg ? 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);

})();

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

瀏覽器可以優化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內完成，從而呈現出更流暢的動畫效果

解決毫秒的不精確性

避免過度渲染（渲染頻率太高、 tab 不可見暫停等等） 注： requestAnimFrame 和 定時器一樣也頭一個類似的清除方法cancelAnimationFrame。
————————————————————————————————————————————————————————
3、右邊寬度固定，左邊自適應

第一種：

第二種

————————————————————————————————————————————————————————
4、水平垂直居中

#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;

}

————————————————————————————————————————————————————————
5、四種定位的區別

static 是默認值

relative 相對定位 相對于自身原有位置進行偏移，仍處于標準文檔流中

absolute 絕對定位 相對于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以 body元素為偏移參照基準, 完全脫離了標準文檔流。

fixed 固定定位的元素會相對于視窗來定位,這意味著即便頁面滾動，它還是會停留在相同的位置。一個固定定位元素不會保留它原本在頁面應有的空隙。

————————————————————————————————————————————————————————
6、Flex布局用的多嗎？
因為項目考慮兼容 IE9 所以直接說用的不多

————————————————————————————————————————————————————————
7、移動端適配怎么做的？
使用媒體查詢做的響應式布局，根據不同屏幕寬度加載不同 css.
————————————————————————————————————————————————————————
8、let與var的區別？

let 為 ES6 新添加申明變量的命令，它類似于 var，但是有以下不同：

var 聲明的變量，其作用域為該語句所在的函數內，且存在變量提升現象

let 聲明的變量，其作用域為該語句所在的代碼塊內，不存在變量提升

let 不允許重復聲明.

————————————————————————————————————————————————————————
9、為什么 var 可以重復聲明？（這個就不知道了）

當我們執行代碼時，我們可以簡單的理解為新變量分配一塊兒內存，命名為 a，并賦值為 2，但在運行的時候編譯器與引擎還會進行兩項額外的操作：判斷變量是否已經聲明：

首先編譯器對代碼進行分析拆解，從左至右遇見 var a，則編譯器會詢問作用域是否已經存在叫 a 的變量了，如果不存在，則招呼作用域聲明一個新的變量 a，若已經存在，則忽略 var 繼續向下編譯，這時 a = 2被編譯成可執行的代碼供引擎使用。

引擎遇見 a=2時同樣會詢問在當前的作用域下是否有變量 a，若存在，則將 a賦值為 2（由于第一步編譯器忽略了重復聲明的var，且作用域中已經有 a，所以重復聲明會發生值得覆蓋而并不會報錯）。若不存在，則順著作用域鏈向上查找，若最終找到了變量 a則將其賦值 2，若沒有找到，則招呼作用域聲明一個變量 a并賦值為 2。 參考鏈接

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

function sleep (time) {

  return new Promise((resolve) => setTimeout(resolve, time));

}

————————————————————————————————————————————————————————
11、一個關于 this 指向的問題

obj = {

    name: "a",

    getName : function () {

        console.log(this.name);

    }

}


var fn = obj.getName

obj.getName()

var fn2 = obj.getName()

fn()

fn2()

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

CommonJS 模塊的重要特性是加載時執行，即腳本代碼在 require 的時候，就會全部執行。一旦出現某個模塊被”循環加載”，就只輸出已經執行的部分，還未執行的部分不會輸出。

ES6 模塊是動態引用，如果使用 import 從一個模塊加載變量，那些變量不會被緩存，而是成為一個指向被加載模塊的引用，需要開發者自己保證，真正取值的時候能夠取到值。

import/export 最終都是編譯為 require/exports 來執行的。

CommonJS 規范規定，每個模塊內部， module 變量代表當前模塊。這個變量是一個對象，它的 exports 屬性（即module.exports ）是對外的接口。加載某個模塊，其實是加載該模塊的 module.exports 屬性。

export 命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。

————————————————————————————————————————————————————————
14、 一行代碼實現數組去重？

[...new Set([1,2,3,1,"a",1,"a"])]

————————————————————————————————————————————————————————
15、使用addEventListener點擊li彈出內容，并且動態添加li之后有效（這個題沒答出來??）

    
1

    
2

    
3

    
4




var ulNode = document.getElementById("ul");

    ulNode.addEventListener("click", function (e) {

        if (e.target && e.target.nodeName.toUpperCase() == "LI") {

            alert(e.target.innerHTML);

        }

    }, false);

————————————————————————————————————————————————————————
16、怎么判斷兩個對象相等？

    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

————————————————————————————————————————————————————————
17、項目做過哪些性能優化？

減少 HTTP 請求數

減少 DNS 查詢

使用 CDN

避免重定向

圖片懶加載

減少 DOM 元素數量

減少 DOM 操作

使用外部 JavaScript 和 CSS

壓縮 JavaScript 、 CSS 、字體、圖片等

優化 CSS Sprite

使用 iconfont

字體裁剪

多域名分發劃分內容到不同域名

盡量減少 iframe 使用

避免圖片 src 為空

把樣式表放在 中

把腳本放在頁面底部 歡迎補充。。。

————————————————————————————————————————————————————————
18、模塊化開發是怎么做的？

使用命名空間。

————————————————————————————————————————————————————————
19、有沒有使用過webpack？
我說Vue項目中使用了，然后就沒問了。
————————————————————————————————————————————————————————
20、gulp自己寫過任務嗎？還是都用的模塊？
不知道怎么怎么回答，不都是使用模塊來寫的么，然后就說是使用模塊。

router.go(1)

router.push("/")

————————————————————————————————————————————————————————
21、Vue router 跳轉和 location.href 有什么區別？
router 是 hash 改變 location.href 是頁面跳轉，刷新頁面
————————————————————————————————————————————————————————
22、Vue 雙向綁定實現原理？
通過 Object.defineProperty 實現的
————————————————————————————————————————————————————————
23、你能實現一下雙向綁定嗎？

————————————————————————————————————————————————————————
24、 React 和 Vue 有什么區別？

————————————————————————————————————————————————————————
25、 Set 和 Map 數據結構

ES6 提供了新的數據結構 Set 它類似于數組，但是成員的值都是唯一的，沒有重復的值。

ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說， Object 結構提供了“字符串—值”的對應， Map 結構提供了“值—值”的對應，是一種更完善的 Hash結構實現。

————————————————————————————————————————————————————————
26、WeakMap 和 Map 的區別?

WeakMap 結構與 Map 結構基本類似，唯一的區別是它只接受對象作為鍵名（ null 除外），不接受其他類型的值作為鍵名，而且鍵名所指向的對象，不計入垃圾回收機制。

WeakMap 最大的好處是可以避免內存泄漏。一個僅被 WeakMap 作為 key 而引用的對象，會被垃圾回收器回收掉。

WeakMap 擁有和 Map 類似的 set(key, value) 、 get(key)、has(key)、 delete(key) 和 clear() 方法, 沒有任何與迭代有關的屬性和方法。

————————————————————————————————————————————————————————
27、重排和重繪

部分渲染樹（或者整個渲染樹）需要重新分析并且節點尺寸需要重新計算。這被稱為重排。注意這里至少會有一次重排-初始化頁面布局。

由于節點的幾何屬性發生改變或者由于樣式發生改變，例如改變元素背景色時，屏幕上的部分內容需要更新。這樣的更新被稱為重繪。

————————————————————————————————————————————————————————
28、什么情況會觸發重排和重繪？

添加、刪除、更新 DOM 節點

通過 display: none 隱藏一個 DOM 節點-觸發重排和重繪

通過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，因為沒有幾何變化

移動或者給頁面中的 DOM 節點添加動畫

添加一個樣式表，調整樣式屬性

用戶行為，例如調整窗口大小，改變字號，或者滾動。

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

先根據這個資源的一些 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是否一致來判斷資源是否在兩次請求之間有過修改，如果沒有修改，則命中協商緩存）

————————————————————————————————————————————————————————
如果喜歡請給個贊吧，您的贊會是我們繼續分享的動力！

原文轉自：https://blog.ihoey.com/posts/...