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

1.介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、
整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。

瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

複製代碼

2.知道什麼是微格式嗎？

微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。
是爲特殊應用而制定的特殊格式

優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。

複製代碼

3.一個頁面上有大量的圖片，加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗?

（1）圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，
    判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
（2）若是爲幻燈片、相冊等，能夠使用圖片預加載技術，
    將當前展現圖片的前一張和後一張優先下載。
（3）若是圖片過大，能夠使用特殊編碼的圖片，
    加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
（4）若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

複製代碼

4.數據綁定最基本的實現?

列子:

// 實現一個方法，能夠給 obj 全部的屬性添加動態綁定事件，當屬性值發生變化時會觸發事件
let obj = {
  key_1: 1,
  key_2: 2
}
function func(key) {
  console.log(key + ' 的值發生改變：' + this[key]);
}
bindData(obj, func);
obj.key_1 = 2; // 此時自動輸出 "key_1 的值發生改變：2"
obj.key_2 = 1; // 此時自動輸出 "key_2 的值發生改變：1"


複製代碼

答案:

function bindData(obj, fn) {
  for (let key in obj) {
    Object.defineProperty(obj, key, {
      set(newVal) {
        if (this.value !== newVal) {
          this.value = newVal;
          fn.call(obj, key);
        }
      },
      get() {
        return this.value;
      }
    })
  }
}
複製代碼

5.數據結構處理?

有一個祖先樹狀 json 對象，當一我的有一個兒子的時候，其 child 爲其兒子對象，若是有多個兒子，child 爲兒子對象的數組。

請實現一個函數，找出這個家族中全部有多個兒子的人的名字（name），輸出一個數組。

列子:
// 樣例數據
let data = {
  name: 'jack',
  child: [
    { name: 'jack1' },
    {
      name: 'jack2',
      child: [{
        name: 'jack2-1',
        child: { name: 'jack2-1-1' }
      }, {
        name: 'jack2-2'
      }]
    },
    {
      name: 'jack3',
      child: { name: 'jack3-1' }
    }
  ]
}


答案:

用遞歸
function findMultiChildPerson(data) {
  let nameList = [];

  function tmp(data) {
    if (data.hasOwnProperty('child')) {
      if (Array.isArray(data.child)) {
        nameList.push(data.name);
        data.child.forEach(child => tmp(child));
      } else {
        tmp(data.child);
      }
    }
  }
  tmp(data);
  return nameList;
}

不用遞歸
function findMultiChildPerson(data) {
  let list = [data];
  let nameList = [];

  while (list.length > 0) {
    const obj = list.shift();
    if (obj.hasOwnProperty('child')) {
      if (Array.isArray(obj.child)) {
        nameList.push(obj.name);
        list = list.concat(obj.child);
      } else {
        list.push(obj.child);
      }
    }
  }
  return nameList;
}

複製代碼