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;
}