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