每日思考（2019/12/19）

标签：微软   aging   连接状态   chrome   lin   链接   cti   firefox   src   

题目概览

• 常见的浏览器内核都有哪些？并介绍下你对内核的理解
• 说说你对css盒子模型的理解
• 简要描述下JS有哪些内置的对象
• Web实时消息推送技术有哪些方式

题目解答

常见的浏览器内核都有哪些？并介绍下你对内核的理解

• 概念：内核主要分为渲染引擎和 JS 引擎。前者负责页面的渲染，后者负责执行解析 JavaScript。
  之后，由于 JS 引擎越来越独立，现在所说的浏览器内核大都指渲染引擎
• 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的大小来自动调整内部元素的大小。

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

//方式一：split
function urlParam() {
  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;
}
//方式二：正则
function urlParam(){
    const param = {};
    location.search.replace(/([^&=?]+)=([^&]+)/g,(m,$1,$2)=> param[$1] = $2);
    return param;
}

Web实时消息推送技术有哪些方式

每日思考（2019/12/19）

标签：微软   aging   连接状态   chrome   lin   链接   cti   firefox   src   

原文地址：https://www.cnblogs.com/EricZLin/p/12070894.html