前端面试题(十一)

• 常见的浏览器内核有哪些?

  首先解释一下什么是浏览器的内核:

  1.内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎.
  2.它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机.
  3.浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同
  4.JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

  目前主流的内核有以下

  • Trident: 由微软开发，即我们熟知的 IE 内核
  • Gecko: 使用 C++ 开发的渲染引擎，包括了 SpiderMonkey 即我们熟悉的 FireFox
  • Presto: Opera 使用的内核
  • Webkit: 前端使用最多的 Chrome 和 Safari 使用的内核

---

• 说说你对 css 盒子模型的理解

  • css盒模型由两个盒子组成，外在的控制是否换行的盒子，以及内在的控制元素内容的盒子。比如：display: inline-block, 则它的外在的盒子就是inline也就是不占据一行，而block则表示内部的元素具有块状特性。所以，display: inline其实就是display: inline-inline的缩写，display: block就是display: block-block的缩写。
  • 每一个内在的盒子有: width/height, padding, border, margin这几个控制盒子大小的属性。其中 width/height控制元素内容大小，padding则控制元素内容到border线内侧距离，border则是元素外围边框大小，而margin则是控制与其他元素的间距，它的背景透明。

  • 对于早期，计算一个元素的占据大小，需要通过width +2* padding + 2*border来计算，css3中提出了box-sizing：border-box，通过这样设置，就可以使元素最终的宽高就是设定的width/height, 浏览器会根据width/height, padding, border的大小来自动调整内部元素的大小。

    盒子模型分为怪异盒模型和标准盒模型
    标准盒子模型：包括margin,border,padding,content,并且content部分不包括其他部分
    IE盒子模型：包括margin,border,padding,content，content包含了border和padding

---

• 写一个获取当前url查询字符串中的参数的方法

  function params() {
    const search = window.location.search;
    search = search.substr(1, search.length);
    const res = {};
    if (!search) return res;
    search.split('&').map(item => {
      const [key, value] = item.split('=');
      res[key] = decodeURIComponent(value);
    });
    return res;
  }

面试题摘自Github