Web大前端面試題-Day4

1. 如何實現瀑布流?

瀑布流佈局的原理:
1) 瀑布流佈局要求要進行佈置的元素等寬，   而後計算元素的寬度,   與瀏覽器寬度之比，獲得須要佈置的列數;
2) 建立一個數組，長度爲列數，   裏面的值爲已佈置元素的總高度（最開始爲0）;
3) 而後將未佈置的元素依次佈置到高度最小的那一列，   就獲得了瀑布流佈局;
4) 滾動加載, scroll事件獲得scrollTop,     與最後盒子的offsetTop對比,   符合條件就不斷滾動加載。 瀑布流佈局核心代碼:

/** * 實現瀑布流的佈局 * @param {string}parentBox * @param {string}childBox */
function waterFull(parentBox, childBox) {    
    //  1. 求出父盒子的寬度    //  1.1 獲取全部的子盒子    var allBox = $(parentBox).    getElementsByClassName(childBox);      // 1.2 求出子盒子的寬度    var boxWidth = allBox[0].offsetWidth;      // 1.3 獲取窗口的寬度    var clientW = document.    documentElement.clientWidth;      // 1.4 求出總列數    var cols = Math.floor(clientW / boxWidth);      // 1.5 父盒子居中    $(parentBox).style.width = cols * boxWidth + 'px';
    // 2. 子盒子定位    $(parentBox).style.margin = '0 auto';      //  2.1 定義變量    var heightArr = [], boxHeight = 0,        minBoxHeight = 0, minBoxIndex = 0;  
    // 2.2 遍歷全部的子盒子      for (var i = 0; i < allBox.length; i++) {  
    // 2.2.1 求出每個子盒子的高度              boxHeight = allBox[i].offsetHeight;    // 2.2.2 取出第一行盒子的高度放入高度數組中    if (i < cols) {  // 第一行        heightArr.push(boxHeight);    } else {  // 剩餘行的盒子    // 2.2.3 取出數組中最矮的高度      minBoxHeight = _.min(heightArr);  
    // 2.2.4 求出最矮高度對應的索引          minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);        // 2.2.5 盒子定位            allBox[i].style.position = 'absolute';
    // 2.2.6 更新最矮的高度      allBox[i].style.left = minBoxIndex * boxWidth + 'px';      allBox[i].style.top = minBoxHeight + 'px';                  heightArr[minBoxIndex] += boxHeight;        }    } }

/** * 根據內容取出在數組中對應的索引 * @param {object}arr * @param {number}val * @returns {boolean} */

function getMinBoxIndex(arr, val) {    
    for (var i = 0; i < arr.length; i++) {        
        if (arr[i] === val) return i;   } }
/** * 判斷是否具有加載子盒子的條件 * @returns {boolean} */

function checkWillLoadImage() {   
// 1. 獲取最後一個盒子
var allBox = $('main').getElementsByClassName('box');    
var lastBox = allBox[allBox.length - 1];   
// 2. 求出高度
var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;  
// 3. 求出窗口的高度
var clientH = document.documentElement.clientHeight;    
// 4. 求出頁面滾動產生的高度
var scrollTopH = scroll().top;    
// 5. 對比
return lastBoxDis <= clientH + scrollTopH; }

2. 原生JS都有哪些方式能夠實現兩個頁面間的通訊?

1)  經過url地址欄傳遞參數;
    例如：點擊列表頁中的每一條數據，
    咱們跳轉到同一個詳細頁面，
    可是根據點擊的不同能夠看到
    不一樣的內容，這樣的話咱們就能夠
    在URL中傳遞不一樣的值來區分了;

2)  經過本地存儲 cookie、localeStorage、
    sessionStroage...，例如：京東的登陸，
    咱們在登陸頁登陸完成後，
    把用戶信息存儲到本地，
    而後在其它頁面中若是須要使用的話，
    咱們直接從本地的存儲數據中拿
    出來用便可;

3)  使用iframe在A頁面中嵌入B頁面,
    這樣的話，在A中能夠經過一些屬性
    和方法實現和B頁面的通訊;

4)  利用postMessage實現頁面間通訊, 
    父窗口往子窗口傳遞信息, 
    子窗口往父窗口傳遞信息。

3. 原生JS動態向一個div中插入1000個div標籤，如何實現？

此題主要考性能!

1)  能夠用JS中的createElement建立div，
    每當建立一個就把它添加到div中, 
    但會形成引起迴流的次數太多;

2)  使用字符串拼接的方式，
    把1000個div都拼接完成後，
    統一的添加到頁面中, 
    但會對div原有的元素標籤產生影響：
    原來標籤綁定的事件都消失了

3)  綜合1和2可使用文檔碎片方式來處理。

追問:若是是建立1000萬個呢?

可採用的方案: 數據分批異步加載
1)  首先把前兩屏幕的數據量
    (例如：300條)先獲取到，
    而後使用字符串拼接或者文檔碎片
    的方式綁定到頁面中; 

2)  當瀏覽器滾動到指定的區域的
    時候在加載300條...以此類推。

4. 程序出現bug了，你是如何調試的?

1)  在控制檯加斷點，    F10->逐過程  F11->逐語句;
2) 在代碼重點的位置加入    
   console.log輸出對應的值來進行調試;
3) debugger調試;
4) 代碼分割還原調試;
5) 異常捕獲機制, 記錄運行日誌;
6) 單元測試。

5. 開發中是如何進行性能優化的?

如今框架(vue, react,...)、構建工具(webpack, ...)
已經給咱們解決掉大部分的性能優化問題, 
面試時, 能夠就你瞭解的框架來深刻剖析, 
但此題應該是考原生JS的範疇,
參考答案以下:
1) 雅虎35條性能優化黃金定律;
2) JS代碼優化: a. 項目中的JS/CSS文件最好一個頁面只用一個,    須要把JS/CSS進行合併壓縮,    而且減小頁面中的垃圾冗餘代碼。    項目的資源文件在服務器上最好    作一下GZIP壓縮。   b. 解除文件緩存;    咱們修改代碼並上傳,    若是以前頁面訪問過該網站,    頗有可能不能當即見效;    咱們在引入CSS/JS文件的時候,    在文件名的後面加上版本號(加時間戳),    好比:     
    <script src='itlike.com.js?_=202001...'></script>;    當咱們上傳新的文件後    把時間戳改一下就能夠清除緩存了。  c. 移動端儘可能少用圖片:    icon能用svg畫的不用圖片;    靜態資源圖:作佈局的時候就能肯定下來的圖片,    好比:     
    1) css sprite圖片合併       (針對於小圖片)     
    2) 作圖片延遲加載       (針對於大圖片 頭部的長條圖片、背景大圖...),
       開始給一張默認的小的圖片       (最好維持在10kb之內)    
    3) base64 (存在問題: 頁面的代碼太臃腫了,之後維護很差操做);         若是項目中因爲圖片太大實在解決不了,       改爲base64就解決了    d. 動態數據圖:     經過ajax從後臺讀取回來的圖片 , 圖片懶加載;  e. 音視頻文件的優化:     加載頁面的時候,儘可能不要加載音視頻文件，     當頁面中的其餘資源加載完成後,     再開始加載音視頻文件;     目前移動端常常給音視頻作的優化是：     走直播流文件(音頻後綴名是m3u8格式);  f. 減小頁面資源請求的次數:     若是當前只是一個宣傳頁,     或者是一個簡單的頁面,     使用的css和js能夠採用內嵌式開發;  g. ajax數據請求分批請求,     例如：一次要請求10000條數據的話,     咱們每一次只請求100條,第一屏幕確定能看全了,     當頁面滾動到對應的其它屏幕的時候,     在加載下一個100條...  h. 作數據的二次緩存,       能用CSS3作動畫的絕對不用JS,     能使用transform儘可能使用,     能用animation的進行不用transition...     儘可能減小同步操做,多用異步操做;     能使用原生JS本身編寫的,     絕對不用插件或者框架;  

6. 如何實現電商網站中的樓層效果?

1) 封裝緩動動畫函數;
2) 點擊切換, 滾動切換, 聯動處理; 核心代碼以下:
// 3. 監聽GPS上的li的點擊
for (var j = 0; j < olLis.length; j++) {    (function (index) {        
       var olLi = olLis[index];       olLi.onmousedown = function () {            isClick = true;           
            // 3.1 排他            for (var m = 0; m < olLis.length; m++) {                olLis[m].className = '' }            addClass(this, 'current');            
            // 3.2 讓樓層滾動起來            buffer( document.documentElement,            {'scrollTop': index * client().height},                
            function () {                isClick = false;            })        }    })(j) }
// 4. 監聽文檔的滾動
window.onscroll = function (ev1) {    
// 4.1 沒有點擊產生的滾動
if (!isClick) {        
// 4.2 獲取頁面產出的頭部滾動的高度
var roll = Math.ceil(scroll().top);        
console.log(roll);        
// 4.3 遍歷
for (var i = 0; i < olLis.length; i++) {            
// 4.4 判斷
if (roll >= ulLis[i].offsetTop) {                
for (var m = 0; m < olLis.length; m++) {    olLis[m].className = ''     }    addClass(olLis[i], 'current');     }     }   } } 緩動動畫函數:
/** * 緩動動畫(撩課學院) * @param {object}obj * @param {object}json * @param {function}fn */

function buffer(obj, json, fn) {    
// 1.1 清除定時器 clearInterval(obj.timer);    
// 1.2 設置定時器  var begin = 0, target = 0, speed = 0;  obj.timer = setInterval(function () {        
// 1.3.0 旗幟  var flag = true;        
  for (var k in json) {            
// 1.3 獲取初始值  if ("opacity" === k) { 
// 透明度  begin = parseInt(parseFloat(getCSSAttrValue(obj, k)) * 100);   target = parseInt(parseFloat(json[k]) * 100);  } else if ("scrollTop" === k) {   begin = Math.ceil(obj.scrollTop);   target = parseInt(json[k]);  } else { 
// 其餘狀況   begin = parseInt(getCSSAttrValue(obj, k)) || 0;   target = parseInt(json[k]);     }            
// 1.4 求出步長   speed = (target - begin) * 0.2;            
// 1.5 判斷是否向上取整   speed = (target > begin)? Math.ceil(speed): Math.floor(speed);            
// 1.6 動起來   if ("opacity" === k) { 
// 透明度// w3c的瀏覽器   obj.style.opacity = (begin + speed) / 100;                
// ie 瀏覽器   obj.style.filter = 'alpha(opacity:' + (begin + speed) + ')';   } else if ("scrollTop" === k) {       obj.scrollTop = begin + speed;   } else if ("zIndex" === k) {       obj.style[k] = json[k];   } else {       obj.style[k] = begin + speed + "px";   }            
// 1.5 判斷   if (begin !== target) {       flag = false;    } }        
// 1.3 清除定時器   if (flag) {     clearInterval(obj.timer);            
// 判斷有沒有回調函數   if (fn) {     fn();      }    }  }, 20); }