Web前端面試題整理3

請多多指教；

一：reflow(回流)和repaint(重繪)（在前端性能優化中會用到）

reflow：例如某個子元素樣式發生改變時，直接影響到了其父元素，祖元素，兄弟元素，這個時候就會瀏覽器會重新渲染與它相關聯的所有元素的過程，稱為回流。比如：元素的顯示輾開，元素的佔位面積，定位方式，邊距等屬性的變化，都會引起瀏覽器的回流。

repaint:如果只是改變某個元素的背景色，文字顏色，邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引起瀏覽器repaint。repaint的速度明顯快於reflow。

導致reflow的情況：

1.    改變窗口大小；2.改變文字大小；3.內容改變；4.激活偽類；5.操作class屬性；6.腳本操作；7.計算offsetWidth和offsetHeight；8.設置style屬性；
   

減少reflow的方式：

1. 不要通過父級來改變子元素樣式，最好直接改變子元素樣式；

2. 盡量通過class來設計元素樣式，切忌用style；

3. 減少不必要的DOM層級

4. 避免不必要的複雜的css選擇器

5. 盡量不要過多的頻繁的去增加，修改，刪除元素。

二：閉包

閉包：若是一個函數訪問了它的外部變量；最常見的建包方式：在一個函數內部創建另一個函數；

function  lazy_sum(arr){

Var sum=function(){

Return arr.reduce(function(x,y){

Return x+y;

})

}

Return sum;

}

//使用

Var f= lazy_sum([1,2,3,4]);

f();

分析：函數  lazy_sum內部建立sum函數，sum函數可以引用 lazy_sum的參數和局部變量；當  lazy_sum函數返回sum，相關的參數和變量都可以保留在返回的函數中。

閉包產生的問題：原始作用域鏈不釋放，造成內存洩漏。

解決方式：立即函數（（function(形參){代碼塊}）(實參)）能解決。

三.回到瀏覽器頂部或底部

顶部：

直接回到：document.body.scrollTop = document.documentElement.scrollTop = 0;

有动画：$("html,body").animate({scrollTop:0},500)

底部：

直接回到：document.body.scrollTop = document.documentElement.scrollTop = document.body.scrollHeight

有动画：$("html, body").animate({ scrollTop: $(document).height() }, 1000);