撩課-Web大前端每天5道面試題-Day1

1. var的變數提升的底層原理是什麼?

JS引擎的工作方式是:
1) 先解析代碼，獲取所有被聲明的變數；
2)然後在運行。也就是說分為預處理和執行兩個階段。
變數提升：所有變數的聲明語句都會被提升到代碼頭部。
但是變數提升只對var命令聲明的變數有效，如果一個變數不是用var命令聲明的，就不會發生變數提升。

2. JS如何計算瀏覽器的渲染時間?

撩課小編:  瀏覽器的渲染過程主要包括以下幾步：
1) 解析HTML生成DOM樹。
2) 解析CSS生成CSSOM規則樹。
3) 將DOM樹與CSSOM規則樹合併在一起生成渲染樹。
4) 遍歷渲染樹開始佈局，計算每個節點的位置大小信息。
5) 將渲染樹每個節點繪製到屏幕。
優化考慮:
CSS 優先：引入順序上，CSS 資源先於 JavaScript 資源。
JS置後：通常把JS代碼放到頁面底部，且JavaScript 應儘量少影響 DOM 的構建。

3. JS的回收機制?

撩課小編: 垃圾回收機制是為了以防記憶體泄漏，(記憶體泄漏: 當已經不需要某塊記憶體時這塊記憶體還存在著),  垃圾回收機制就是間歇的不定期的尋找到不再使用的變數，並釋放掉它們所指向的記憶體。

JS有兩種變數: 全局變數和在函數中產生的局部變數。局部變數的生命周期在函數執行過後就結束了，此時便可將它引用的記憶體釋放（即垃圾回收），但全局變數生命周期會持續到瀏覽器關閉頁面。

JS執行環境中的垃圾回收器有兩種方式：標記清除（mark and sweep）、引用計數(reference counting)。

標記清除:  垃圾收集器給記憶體中的所有變數都加上標記，然後去掉環境中的變數以及被環境中的變數引用的變數的標記。
在此之後再被加上的標記的變數即為需要回收的變數，因為環境中的變數已經無法訪問到這些變數。

引用計數(reference counting):  這種方式常常會引起記憶體泄漏，低版本的IE使用這種方式。
機制就是跟蹤一個值的引用次數，當聲明一個變數並將一個引用類型賦值給該變數時該值引用次數加1，
當這個變數指向其他一個時該值的引用次數便減一。
當該值引用次數為0時就會被回收。

4. 垂直水平居中的方式?

撩課小編: 
方式一:  定位
父元素設置為：position: relative; 
子元素設置為：position: absolute; 
距上50%，據左50%，然後減去元素自身寬度的距離就可以實現 

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

方式二:  flex佈局

display: flex; //flex佈局
justify-content: center; //使子項目水平居中
align-items: center; //使子項目垂直居中

方式三:  table-cell  (不推薦)

display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中

5. 實現一個三欄佈局，中間版塊自適應方法有哪些?

撩課小編:  浮動和定位
浮動方式:

<div class="content">
   <div class="left">left</div>
   <div class="right">right</div>
   <div class="center">center</div>
</div>

.left{
    float: left;
    width: 100px;
    height: 200px; 
}

.right{
    float: right;
    padding: 0;
    width: 100px;
    height: 200px;
}

.center{
    margin: 0 100px 0 200px;
}


方式二:  將父容器的position設置為relative，兩個邊欄的position設置成absolute。