記錄--前端校招位元組面試分享-有解無憂

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

第一題：說一下這三個div的布局

<div >
    <div >child1 content</div>
    <div >child2 content</div>
    <div >child3 content</div>
</div>
.child2{
  transform:translateY(200)
}

A：

剛開始是正常位置的，因為沒有添加單位，我的天啊！

添加了單位之后，下移兩百px，

為什么第三個div沒有頂上去到第二個div的位置呢？

因為沒有脫離檔案流，它還是占據原來的位置

能否從渲染原理來解釋呢？

由于transform是位于Composite Layers層

GPU 行程會為其開啟一個新的復合圖層，不會影響默認復合圖層（就是普通檔案流），所以并不會影響周邊的 DOM 結構，而屬性的改變也會交給 GPU 處理，不會進行重排，使 GPU 行程開啟一個新的復合圖層的方式還有 3D 影片，過渡影片，以及 opacity 屬性，還有一些標簽，這些都可以創建新的復合圖層，這些方式叫做硬體加速方式，

你可以想象成新的復合圖層和默認復合圖層是兩幅畫，相互獨立，不會彼此影響，降低重排的方式：要么減少次數，要么降低影響范圍，創建新的復合圖層就是第二種優化方式，

絕對布局雖然脫離了檔案流，但不會創建新的復合圖層，因此當絕對布局改變時，不會影響普通檔案流的 render tree，但是依然會繪制整個默認復合圖層，對普通檔案流是有影響的，普通檔案流就是默認復合圖層，不要介意我交換使用它們如果你要使用硬體加速方式降低重排的影響，請不要過度使用，創建新的復合圖層是有額外消耗的，比如更多的記憶體消耗，并且在使用硬體加速方式時，配合 z-index 一起使用，盡可能使新的復合圖層的元素層級等級最高，

使用transform性能好的原因

倆個：

因為不用占用主執行緒，是在GPU上上進行合成的，
由于是位于Composite Layers層，從而避免了layout，避免了重排和重繪

第二題：影片？補間影片實作

發現位元組好喜歡問影片，幾乎每場都會給個影片場景，然后問怎么實作，

補間影片就是指控制最開始的狀態和最末的狀態的影片，中間的狀態由瀏覽器自動幫我們計算生成，

transition影片最主要的屬性是transition屬性，它其實是4個屬性的縮寫，

第三題：用css畫一個扇形？

這個有意思的是，border-color的引數從一個到四個分別是什么情況

border-color屬性設定一個元素的四個邊框顏色，此屬性可以有一到四個值，實體:

border-color:紅，綠，藍,粉紅色;

上邊框是紅色右邊框是綠色底部邊框是藍左邊框是粉紅色

border-color：紅，綠，藍;

上邊框是紅色左，右邊框是綠色底部邊框是藍

border-color：紅，綠;

頂部和底部邊框是紅色左右邊框是綠色

border-color：紅色;

所有四個邊框是紅色

第四題：觸發了幾次回流幾次重繪

let el = document.getElementById('app');
el.style.width = (el.offsetWidth+1) + 'px';
el.style.width = 1 + 'px'

這個我覺得是有意思的問題，獨立分成一篇文章：位元組前端提前批面試題：下觸發了幾次回流幾次重繪

第五題：輸出，為什么，有幾個作用域

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

兩個作用域

第六題：輸出什么，async/await原理是什么，把下面這段代碼翻譯成Promise

function getJson(){
  return new Promise((reslove,reject) => {
    setTimeout(function(){
      console.log(2)
      reslove(2)
    },2000)
  })
 }
async function testAsync() {
   await getJson()
   console.log(3)
}

testAsync()

有點意思，因為這道題，我更加深入了解了async/await原理，非常簡單，建議閱讀位元組提前批前端面試題：將這段async/await代碼翻譯成Promise