美团四轮面试

说明:  

一面: 

function clone(target, map = new WeakMap()) {

    // 克隆原始类型
    if (!isObject(target)) {
        return target;
    }

    // 初始化
    const type = getType(target);
    let cloneTarget;
    if (deepTag.includes(type)) {
        cloneTarget = getInit(target, type);
    }
    // 防止循环引用
    if (map.get(target)) {
        return map.get(target);
    }
    map.set(target, cloneTarget);

    // 克隆set
    if (type === setTag) {
        target.forEach(value => {
            cloneTarget.add(clone(value,map));
        });
        return cloneTarget;
    }

    // 克隆map
    if (type === mapTag) {
        target.forEach((value, key) => {
            cloneTarget.set(key, clone(value,map));
        });
        return cloneTarget;
    }

    // 克隆对象和数组
    const keys = type === arrayTag ? undefined : Object.keys(target);
    forEach(keys || target, (value, key) => {
        if (keys) {
            key = value;
        }
        cloneTarget[key] = clone(target[key], map);
    });

    return cloneTarget;
}
function getInit(target) {
    const Ctor = target.constructor;
    return new Ctor();
}

讲之前问一下面试官要详细还是概述

js在加载之前，浏览器不能识别js具体的操作，js是可以操作DOM的，如果在修改元素属性的同时渲染界面，会出现不可预期的结果，导致渲染混乱，因此浏览器设置了GUI渲染现成和js线程互斥，在js执行的时候，GUI线程会被挂起，等空闲的时候再执行。

dom解析和css解析是两个并行的线程，所以css加载不会阻塞dom的解析

但是render tree是依赖dom tree和cssom tree的，因此，css的加载会阻塞dom的渲染

大数据（缓冲队列）？

jsBridge，追问jsBridge是实现方式，如何保持时序？

中间人攻击 ～

meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户进行手动缩放

viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport; 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；

解析：

Viewport ：字面意思为视图窗口，在移动 web 开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动 web 站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。
举个例子：如果我们的屏幕是 320 像素 * 480 像素的大小（iPhone4），假设在浏览器中，320 像素的屏幕宽度能够展示 980 像素宽度的内容。那么 320 像素的宽度就是可见视口的宽度，而能够显示的 980 像素的宽度就是视窗视口的宽度。

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本 320 像素的屏幕宽度能够容下 980 像素甚至更宽的内容（将网页等比例缩小）。

可视化搭建

目标用户

nocode

难点1，最初的设计方案 ，技术选型，维护性

难点2，跨小程序端处理

难点3，持续的性能优化，从3.5s优化到秒开

1，工程规范 + 开发规范（将一些优化策略通过规范约束）

2，工具分析

3，图片优化，长列表优化，预渲染，骨架屏，小程序特性，

网络层优化（数据并行请求，dns预解析，缓存策略，http2.0）

遵循谷歌的 RAIL 模型

FP，FCP，白屏时间，首屏加载时间

统计字符串中次数最多的字母

function findMaxDuplicateChar(str) {
  if(str.length == 1) {
    return str;
  }
  var charObj = {};
  for(var i = 0; i < str.length; i++) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    } else {
      charObj[str.charAt(i)] += 1;
    }
  }
  var maxChar = '',
      maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar + '：' + maxValue;
}

可视化搭建

输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字，例如，如果输入如下4 X 4矩阵： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3,4,8,12,16,15,14,13,9,5,6,7,11,10.

思路

1.选坐标为(0,0),(1,1)…的点记为(start,start)，作为开始坐标,下一圈开始坐标为(start+1,start+1)；

2.判断是否进入下一圈(即是否打印完成)的条件是rows>start2 && cols>start2；

3.打印一圈的左上角坐标为(start,start)，右下角的坐标为(cols-start-1,rows-start-1)

4.根据一圈左上角和右下角坐标判断“从左到右”，“从上到下”，“从右到左”，“从下到上”需要打印的点。

function printMatrix(matrix) {
    if (matrix == null || matrix.length == 0) {
        return;
    }
    var rows = matrix.length;
    var cols = matrix[0].length;
    var start = 0;
    var result = [];

    while (cols > start * 2 && rows > start * 2) {
        var endX = cols - 1 - start;
        var endY = rows - 1 - start;
        //从左到右打印一行
        for (var i = start; i <= endX; i++) {
            result.push(matrix[start][i]);
        }
        //从上到下打印一行
        if (start < endY) {
            for (var i = start + 1; i <= endY; i++) {
                result.push(matrix[i][endX]);
            }
        }
        //从右到左打印一行
        if (start < endX && start < endY) {
            for (var i = endX - 1; i >= start; i--) {
                result.push(matrix[endY][i]);
            }
        }
        //从下到上打印一行
        if (start < endX && start < endY - 1) {
            for (var i = endY - 1; i >= start + 1; i--) {
                result.push(matrix[i][start]);
            }
        }
        start++;
    }
    return result
}

四面:

如何做的性能分析，分析指标是什么 ，业内的性能指标了解过么 

为什么要打两个包，ssr存在的问题是什么，怎么去规避的？

最后: