第36篇

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

主要分紅兩部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出顯示器或打印機。

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

應用程序都須要內核。

JS引擎：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

 

二、知道什麼是微格式嗎？

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

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

 

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

1）圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離，若是前者小於後者，優先加載。

2）若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

3）若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

4）若是圖片展現區域小於圖片的真實大小，則能夠在服務器端根據業務須要先進行圖片壓縮，圖片壓縮後大小與展現一致。

 

四、數據綁定的最基本的實現？

// 實現一個方法，能夠給obj全部的屬性添加動態綁定事件，當屬性值發生變化時會觸發事件

 1 function bindData(obj, func) {
 2   for (let key in obj) {
 3     Object.defineProperty(obj, key, {
 4       set(newVal) {
 5         if (this.value !== newVal) {
 6           this.value = newVal;
 7           func.call(obj, key);
 8         }
 9       },
10       get() {
11         return this.value;
12       }
13     })
14   }
15 }
16 
17 let obj = {
18   key_1: 1,
19   key_2: 2
20 }
21 
22 function func(key) {
23   console.log(key + " 的值發生變化：" + this[key]);
24 }
25 
26 bindData(obj, func);
27 
28 obj.key_1 = 2;
29 obj.key_2 = 1;

 

五、數據結構處理？

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

 1 let data = {
 2   name: 'jack',
 3   child: [{
 4       name: 'jack1'
 5     },
 6     {
 7       name: 'jack2',
 8       child: [{
 9         name: 'jack2-1',
10         child: {
11           name: 'jack2-1-1'
12         }
13       }, {
14         name: 'jack2-2'
15       }]
16     },
17     {
18       name: 'jack3',
19       child: {
20         name: 'jack3-1'
21       }
22     }
23   ]
24 };
25 
26 
27 // 遞歸
28 function findMultiChildPerson(data) {
29   let nameList = [];
30 
31   function tmp(data) {
32     if (data.hasOwnProperty("child")) {
33       if (Array.isArray(data.child)) {
34         nameList.push(data.name);
35         data.child.forEach(child => tmp(child));
36       } else {
37         tmp(data.child);
38       }
39     }
40   }
41   tmp(data);
42   return nameList;
43 }
44 
45 //不用遞歸
46 function findMultiChildPerson(data) {
47   let list = [data];
48   let nameList = [];
49 
50   while (list.length > 0) {
51     const obj = list.shift();
52     if (obj.hasOwnProperty('child')) {
53       if (Array.isArray(obj.child)) {
54         nameList.push(obj.name);
55         list = list.concat(obj.child);
56       } else {
57         list.push(obj.child);
58       }
59     }
60   }
61   return nameList;
62 }