前端面试题（1）

就字节跳动的面试题总结一下给大家做个参考。

变量类型的判断
JS中常见的数据类型分为基本类型：string、boolean、number、undefined、null、symbol(ES6)和引用类型：Object

判断js数据类型最常用的是typeof，使用它会返回一个字符串，适合函数对象（function）和基本类型（js中的基本类型：number、string、boolean、null、undefined、symbol、object［对象］）的判断，例：

console.log(typeof 1);
console.log(typeof "str");
console.log(typeof false);
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof function(){});
console.log(typeof new Object());
console.log(typeof new Array());
console.log(typeof [1,2,3]);
console.log(typeof Symbol());

结果为

number
string
boolean
object
undefined
function
object
object
object
symbol

那么问题来了，如果想要判断一个对象是不是数组，使用typeof就会返回一个object，这时候就要使用instanceof来判断对象类型了

instanceof操作符
obj instanceof Object，左边操作数obj为对象（如果不小心写成基本类型比如数字啥的，就会返回false），右边操作数Object为函数对象或者是函数构造器，否则抛出TypeError。
实质就是：instanceof操作符判断左操作数对象的原型链上是否有右边这个构造函数的prototype属性，也就是说指定对象是否是某个构造函数的实例，最后返回布尔值，这个对整个原型链上的对象都是有效的，由于instanceof对整个原型链上的对象都有效，因此同一个实例对象，可能会对多个构造函数都返回true！
Object.prototype.toString方法
直接上例子，如下：

console.log(Object.prototype.toString.call([]));
console.log(Object.prototype.toString.call({}));
console.log(Object.prototype.toString.call(1));
console.log(Object.prototype.toString.call(false));
console.log(Object.prototype.toString.call(Symbol()));
console.log(Object.prototype.toString.call('str'));
console.log(Object.prototype.toString.call(null));
console.log(Object.prototype.toString.call(undefined));
console.log(Object.prototype.toString.call(function(){}));

结果

[object Array]
[object Object]
[object Number]
[object Boolean]
[object Symbol]
[object String]
[object Null]
[object Undefined]
[object Function]

综上，判断的方法还有多种，但是有这三种也就够了，第三种胜在通用，但是拼写麻烦，也可以考虑第一种和第二种配合使用，这里提供一个完整的函数

function getType(data) {
    let type = typeof data;
    if (type !== 'object') {
        return type
    }
    return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/, '$1');
}
console.log(getType(() => {})); //function

transform中可以开启GPU加速的选项
为了避免 2D transform 动画在开始和结束时发生的 repaint 操作，可以使用-webkit-transform:translate3d(0,0,0)或者translateZ(0)让浏览器执行 3D transform。浏览器通过该样式创建了一个独立图层，图层中的动画则有GPU进行预处理并且触发了硬件加速。
开启GPU硬件加速可能触发的问题：可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

canvas和svg的区别及各自的应用场景

canvas：是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。一般用于绘制比较复杂的动画，做游戏之类的，由于canvas是HTML5带的，所以不支持低版本浏览器，特别是IE。canvas只是一个画布，绘制上去的东西，例如图片，都是转换成像素点绘制上去的，所以没有event事件，如果需要添加交互事件，需要自己手动计算绘制的对象所在坐标以及层级，还好这部分有第三方库。基本上除了HTML5游戏，一些酷炫的动画，正常的网页交互很少用到。
svg：是一种矢量图形文件格式，图片放大之后不会失真，不仅现在的浏览器都支持，很多主流的系统也都支持。可以代替一些图片,多用于图标,以及图表上,优势在于拥有HTML的event事件,交互起来很方便。
canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏。
svg 适用于矢量图，低数据量低绘制频率的场景，如图形、图表、地图等。

4.px、em和rem的区别
px：像素（Pixel），相对长度单位。它不随其它元素的变化而变化。
em：相对长度单位，相对于当前对象内文本的字体尺寸。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1em=16px。
它的特点是：它的值并不是固定的；它会继承父级元素的字体大小。
例如:

<div style="font-size:20px;">
    <p style="font-size:1em;">这里1em=20px</p>
    <p style="font-size:2em;">这里2em=40px</p>
</div>

上面的例子就说明了em的值并非固定的，他是根据父元素的字体大小来决定的。如果父元素设置了font-size:20px，那么1em=20px，2em=40px；如果父元素设置了font-size:30px，那么1em=30px，2em=60px。依次类推。
rem：是CSS3新增的一个相对单位，它的值并不是固定的，但相对的只是HTML根元素。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1rem=16px。
例如：

<html style="font-size:100px;">
<head>
    <title></title>
</head>
<body>
     <p style="font-size:1rem;">这里1rem=100px</p>
     <div style="font-size:50px;">
          <p style="font-size:2rem;">这里2rem=200px</p>
     </div>
</body>
</html>

上面的例子说明了，rem的值只受到根节点html的字体大小影响，并不受父元素字体大小的影响。如果根节点html设置了font-size:100px，那么1rem=100px，2rem=200px；如果根节点html设置了font-size:200px，那么1rem=200px，2rem=400px。依次类推。

注意：
谷歌浏览器chrome强制最小字体为12px，因此即使设置了小于12px的值，也会显示成12px。因此，当你给html设置font-size:10px时，1rem并不是等于10px，而是等于12px

实现动画效果时 setInterval、setTimeout、requestAnimationFrame的区别
这篇文章讲的很好，大家可以参考一下
https://www.cnblogs.com/spoem/p/13214089.html