第36篇

1、介绍一下你对浏览器内核的理解？

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

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的

应用程序都需要内核。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

 

2、知道什么是微格式吗？

微格式（Micorformats）是一种让机器可读的语义XHTML词汇的集合，是结构化数据的开放标准，是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

 

3、一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验？

1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离，如果前者小于后者，优先加载。

2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

4）如果图片展示区域小于图片的真实大小，则可以在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

 

4、数据绑定的最基本的实现？

// 实现一个方法，可以给obj所有的属性添加动态绑定事件，当属性值发生变化时会触发事件

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

let obj = {
  key_1: 1,
  key_2: 2
}

function func(key) {
  console.log(key + " 的值发生变化：" + this[key]);
}

bindData(obj, func);

obj.key_1 = 2;
obj.key_2 = 1;

 

5、数据结构处理？

有一个祖先树状json对象，当一个人有一个儿子的时候，其child为其儿子对象，如果有多个儿子

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