[Advanced Skills] Nine front-end interview questions to help you consolidate your knowledge!

This article shares advanced front-end skills, organizes and summarizes nine front-end interview questions, and helps you consolidate knowledge points. I hope it will be helpful to everyone!

First question: Safe type detection - the difference between typeof and instanceof, defects, and solutions

These two methods Both can be used to determine the variable type

The difference: The former is to determine what type the variable is, the latter is to determine whether the variable is of a certain type, and the return value is a Boolean value

(1) typeof

Defects:

1. The specific data type of the variable cannot be determined, such as array, regular, date, and object, because object will be returned. However, function can be judged. If the detection object is a regular expression, "function" will be returned incorrectly when using typeof in Safari and Chrome, and other browsers will return object.

2. Judgment When null is returned, an object is returned. This is a defect of js. When NaN is judged, the return is number

(2) instanceof can be used to detect whether the variable is of a certain type and returns a Boolean value. , and can determine whether this variable is an instance of a certain function. What it detects is the prototype of the object.

let num = 1
num instanceof Number // false


num = new Number(1)
num instanceof Number // true

are obviously num, and both are 1, just because the first one is not an object, but a basic type. So it returns false directly, and the second one is encapsulated into an object, so it is true.

Strict attention should be paid to this issue here. Some say that if the __proto__ of the detection target is the same as the prototype of the constructor, it will return true. This is not rigorous. The detection must be an object, such as:

let num = 1
num.__proto__ === Number.prototype // true
num instanceof Number // false

num = new Number(1)
num.proto === Number.prototype // true
num instanceof Number // true

num.proto === (new Number(1)).proto // true

In addition, instanceof has another disadvantage: if there are multiple frames on a page, that is, multiple global environments, then I define an Array in frame a, and then use instanceof to judge in frame b. , then it is impossible to find the array in the b frame on the prototype chain of the array, and it will be judged that the array is not an array.

Solution: Use the Object.prototype.toString.call(value) method to call the object and get the object's constructor name. It can solve the cross-framework problem of instanceof. The disadvantage is that for user-defined types, it will only return [object Object]

Second question: Since instanceof is mentioned, how about implementing instanceof by hand

// [1,2,3] instanceof Array ---- true

// L instanceof R
// 变量R的原型 存在于 变量L的原型链上
function instance_of(L,R){    
    // 验证如果为基本数据类型，就直接返回false
    const baseType = ['string', 'number','boolean','undefined','symbol']
    if(baseType.includes(typeof(L))) { return false }
    
    let RP  = R.prototype;  //取 R 的显示原型
    L = L.__proto__;       //取 L 的隐式原型
    while(true){           // 无线循环的写法（也可以使 for(;;) ）
        if(L === null){    //找到最顶层
            return false;
        }
        if(L === RP){       //严格相等
            return true;
        }
        L = L.__proto__;  //没找到继续向上一层原型链查找
    }
}

The third question: Scope-safe constructor - when we create a new constructor, we can get an instance. What if we forget to write new?

For example

function Person(){
    this.name = "小红"
}


p = Person();

What will happen? , how to solve

If used directly, this will be mapped to the global object window. The solution can be: first confirm that this object is an instance of the correct type. If not, a new instance is created and returned. Please look at the example below

function Person(){
    if(this instanceof Person){
        this.name = "小红"
    }else{
        return  new Person()
    }
}


p = Person();

Fourth question: Let’s talk about the lazy loading function

In JavaScript code, due to the differences in behavior between browsers, most JavaScript The code contains a large number of if statements to check browser characteristics and solve compatibility issues with different browsers. For example, the function to add an event:

function addEvent (element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}

Every time you call addEvent(), you must carefully check the capabilities supported by the browser. First check whether the addEventListener method is supported. If not, then check whether the attachEvent method is supported. If it is not supported yet, use the DOM level 0 method to add the event. During the call to addEvent(), this process must be completed each time. In fact, if the browser supports one of the methods, it will always support it, and there is no need to detect other branches. In other words, the if statement does not have to be executed every time, and the code can run faster. The solution is called lazy loading. The so-called lazy loading means that the if branch of the function will only be executed once, and when the function is called later, it will directly enter the supported branch code. There are two ways to implement lazy loading. The first is that when the function is called for the first time, the function itself is processed twice. The function will be overwritten as a function that meets the branch conditions, so that the call to the original function does not need to be After passing the execution branch, we can rewrite addEvent() using lazy loading in the following way.

function addEvent (type, element, handler) {
    if (element.addEventListener) {
        addEvent = function (type, element, handler) {
            element.addEventListener(type, handler, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, handler) {
            element.attachEvent('on' + type, handler);
        }
    }
    else{
        addEvent = function (type, element, handler) {
            element['on' + type] = handler;
        }
    }
    return addEvent(type, element, handler);
}

In this lazy-loaded addEvent(), each branch of the if statement assigns a value to the addEvent variable, effectively covering the original function. The last step is to call the new assignment function. The next time addEvent() is called, the newly assigned function will be called directly, so there is no need to execute the if statement.

The second way to implement lazy loading is to specify the appropriate function when declaring the function. In this way, there will be no performance loss when the function is called for the first time, but only a small performance loss when the code is loaded. The following is addEvent() rewritten according to this idea.

var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

The technique used in this example is to create an anonymous self-executing function, through different branches to determine which function should be used. The actual logic is the same, the difference is the use of function expressions (Var is used to define functions) and a new anonymous function is added. In addition, each branch returns a correct function and immediately assigns it to the variable addEvent.

惰性载入函数的优点只执行一次if分支，避免了函数每次执行时候都要执行if分支和不必要的代码，因此提升了代码性能，至于那种方式更合适，就要看您的需求而定了。

第五问：谈一下函数节流

概念：限制一个函数在一定时间内只能执行一次。

主要实现思路 就是通过 setTimeout 定时器，通过设置延时时间，在第一次调用时，创建定时器，先设定一个变量true，写入需要执行的函数。第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false，函数会依次运行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。

函数节流的代码实现

function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}


function handle(){
console.log(Math.random());
}

window.addEventListener("mousemove",throttle(handle,1000));

函数节流的应用场景(throttle)

• DOM 元素的拖拽功能实现（mousemove）
• 高频点击提交，表单重复提交
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，- - 才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次.

第六问：谈一下函数防抖

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

函数防抖的代码实现

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

函数防抖的使用场景 函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
• 用户名、手机号、邮箱输入验证；
• 浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。

目前遇到过的用处就是这些，理解了原理与实现思路，小伙伴可以把它运用在任何需要的场合，提高代码质量。

第七问：谈一下requestAnimationFrame

动画原理 ： 眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能做到这种效果呢？

刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。

与setTimeout相比较：

理解了上面的概念以后，我们不难发现，setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们会发现，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：

• setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

• 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象

requestAnimationFrame：与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

除此之外，requestAnimationFrame还有以下两个优势：

• CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

• 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

第八问：web计时，你知道该怎么计算首屏，白屏时间吗？

白屏时间： 白屏时间指的是浏览器开始显示内容的时间。因此我们只需要知道是浏览器开始显示内容的时间点，即页面白屏结束时间点即可获取到页面的白屏时间。

 计算白屏时间 因此，我们通常认为浏览器开始渲染 标签或者解析完 标签的时刻就是页面白屏结束的时间点。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript">
    // 不兼容performance.timing 的浏览器，如IE8
    window.pageStartTime = Date.now();
  </script>
  <!-- 页面 CSS 资源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    // 白屏时间结束点
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

因此白屏时间则可以这样计算出：

可使用 Performance API 时:

白屏时间 = firstPaint - performance.timing.navigationStart;

不可使用 Performance API 时:

白屏时间 = firstPaint - pageStartTime; //虽然我们知道这并不准确，毕竟DNS解析，tcp三次握手等都没计算入内。

首屏时间： 首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

通常计算首屏的方法有

• 首屏模块标签标记法

• 统计首屏内加载最慢的图片的时间

• 自定义首屏内容计算法

1、首屏模块标签标记法

首屏模块标签标记法，通常适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。我们会在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳。如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>首屏</title>
  <script type="text/javascript">
    window.pageStartTime = Date.now();
  </script>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
</head>
<body>
  <!-- 首屏可见模块1 -->
  <div></div>
  <!-- 首屏可见模块2 -->
  <div></div>
  <script type="text/javascript">
    window.firstScreen = Date.now();
  </script>
  <!-- 首屏不可见模块3 -->
  <div></div>
    <!-- 首屏不可见模块4 -->
  <div></div>
</body>
</html>

此时首屏时间等于 firstScreen - performance.timing.navigationStart;

事实上首屏模块标签标记法 在业务中的情况比较少，大多数页面都需要通过接口拉取数据才能完整展示，因此我们会使用 JavaScript 脚本来判断首屏页面内容加载情况。

2、统计首屏内图片完成加载的时间

通常我们首屏内容加载最慢的就是图片资源，因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。

由于浏览器对每个页面的 TCP 连接数有限制，使得并不是所有图片都能立刻开始下载和显示。因此我们在 DOM树 构建完成后将会去遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间的最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。

此时首屏时间等于 加载最慢的图片的时间点 - performance.timing.navigationStart; //首屏时间尝试： //1,获取首屏基线高度 //2,计算出基线dom元素之上的所有图片元素 //3,所有图片onload之后为首屏显示时间 //

function getOffsetTop(ele) {
    var offsetTop = ele.offsetTop;
    if (ele.offsetParent !== null) {
        offsetTop += getOffsetTop(ele.offsetParent);
    }
    return offsetTop;
}


var firstScreenHeight = win.screen.height;
var firstScreenImgs = [];
var isFindLastImg = false;
var allImgLoaded = false;
var t = setInterval(function() {
var i, img;
if (isFindLastImg) {
if (firstScreenImgs.length) {
for (i = 0; i < firstScreenImgs.length; i++) {
img = firstScreenImgs[i];
if (!img.complete) {
allImgLoaded = false;
break;
} else {
allImgLoaded = true;
}
}
} else {
allImgLoaded = true;
}
if (allImgLoaded) {
collect.add({
firstScreenLoaded: startTime - Date.now()
});
clearInterval(t);
}
} else {
var imgs = body.querySelector(&#39;img&#39;);
for (i = 0; i<imgs.length; i++) {
img = imgs[i];
var imgOffsetTop = getOffsetTop(img);
if (imgOffsetTop > firstScreenHeight) {
isFindLastImg = true;
break;
} else if (imgOffsetTop <= firstScreenHeight && !img.hasPushed) {
img.hasPushed = 1;
firstScreenImgs.push(img);
}
}
}
}, 0);
doc.addEventListener(&#39;DOMContentLoaded&#39;, function() {
var imgs = body.querySelector(&#39;img&#39;);
if (!imgs.length) {
isFindLastImg = true;
}
});




win.addEventListener(&#39;load&#39;, function() {
allImgLoaded = true;
isFindLastImg = true;
if (t) {
clearInterval(t);
}
collect.log(collect.global);
});

解释一下思路，大概就是判断首屏有没有图片，如果没图片就用domready时间，如果有图，分2种情况，图在首屏，图不在首屏，如果在则收集，并判断加载状态，加载完毕之后则首屏完成加载，如果首屏没图，找到首屏下面的图，立刻触发首屏完毕。可以想象这么做前端收集是不准的，但是可以确保最晚不会超过win load，所以应该还算有些意义。。没办法，移动端很多浏览器不支持performance api，所以土办法前端收集，想出这么个黑魔法，在基线插入节点收集也是个办法，但是不友好，而且现在手机屏幕这么多。。

3、自定义模块内容计算法

由于统计首屏内图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化计算首屏时间。如下面的做法：

• 忽略图片等资源加载情况，只考虑页面主要 DOM
• 只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容

实际上用performance.timing来计算首屏加载时间与白屏时间非常简单与精确。不过目前只支持IE10和chrome 贴下其API的使用

var navigationStart = performance.timing.navigationStart;
//1488984540668
console.log(navigationStart);

//Wed Mar 08 2017 22:49:44 GMT+0800 (中国标准时间)
console.log(new Date(new Date(navigationStart)));
复制代码
  redirectStart:到当前页面的重定向开始的时间。但只有在重定向的页面来自同一个域时这个属性才会有值；否则，值为0
  redirectEnd:到当前页面的重定向结束的时间。但只有在重定向的页面来自同一个域时这个属性才会有值；否则，值为0

console.log(performance.timing.redirectStart);//0
console.log(performance.timing.redirectEnd);//0
  fetchStart:开始通过HTTP GET取得页面的时间

console.log(performance.timing.fetchStart);//1488984540668
  domainLookupStart:开始査询当前页面DNS的时间，如果使用了本地缓存或持久连接，则与fetchStart值相等
  domainLookupEnd:査询当前页面DNS结束的时间，如果使用了本地缓存或持久连接，则与fetchStart值相等

console.log(performance.timing.domainLookupStart);//1488984540670
console.log(performance.timing.domainLookupEnd);//1488984540671
  connectStart:浏览器尝试连接服务器的时间
  secureConnectionStart:浏览器尝试以SSL方式连接服务器的时间。不使用SSL方式连接时，这个属性的值为0 
  connectEnd:浏览器成功连接到服务器的时间

console.log(performance.timing.connectStart);//1488984540671
console.log(performance.timing.secureConnectionStart);//0
console.log(performance.timing.connectEnd);//1488984540719
  requestStart:浏览器开始请求页面的时间
  responseStart:浏览器接收到页面第一字节的时间
  responseEnd:浏览器接收到页面所有内容的时间

console.log(performance.timing.requestStart);//1488984540720
console.log(performance.timing.responseStart);//1488984540901
console.log(performance.timing.responseEnd);//1488984540902
  unloadEventStart:前一个页面的unload事件开始的时间。但只有在前一个页面与当前页面来自同一个域时这个属性才会有值；否则，值为0
  unloadEventEnd:前一个页面的unload事件结束的时间。但只有在前一个页面与当前页面来自同一个域时这个属性才会有值；否则，值为0

console.log(performance.timing.unloadEventStart);//1488984540902
console.log(performance.timing.unloadEventEnd);//1488984540903
  domLoading:document.readyState变为"loading"的时间，即开始解析DOM树的时间
  domInteractive:document.readyState变为"interactive"的时间，即完成完成解析DOM树的时间
  domContentLoadedEventStart:发生DOMContentloaded事件的时间，即开始加载网页内资源的时间
  domContentLoadedEventEnd:DOMContentLoaded事件已经发生且执行完所有事件处理程序的时间，网页内资源加载完成的时间
  domComplete:document.readyState变为"complete"的时间，即DOM树解析完成、网页内资源准备就绪的时间

console.log(performance.timing.domLoading);//1488984540905
console.log(performance.timing.domInteractive);//1488984540932
console.log(performance.timing.domContentLoadedEventStart);//1488984540932
console.log(performance.timing.domContentLoadedEventEnd);//1488984540932
console.log(performance.timing.domComplete);//1488984540932
  loadEventStart:发生load事件的时间，也就是load回调函数开始执行的时间 
  loadEventEnd:load事件已经发生且执行完所有事件处理程序的时间

console.log(performance.timing.loadEventStart);//1488984540933
console.log(performance.timing.loadEventEnd);//1488984540933

第九问：你知道web Worker吗？

多线程技术在服务端技术中已经发展的很成熟了，而在Web端的应用中却一直是鸡肋 在新的标准中，提供的新的WebWork API，让前端的异步工作变得异常简单。 使用：创建一个Worker对象，指向一个js文件，然后通过Worker对象往js文件发送消息，js文件内部的处理逻辑，处理完毕后，再发送消息回到当前页面，纯异步方式，不影响当前主页面渲染。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        //创建线程 work对象
        var work = new Worker("work.js");      //work文件中不要存在跟ui代码
        //发送消息
        work.postMessage("100");
        // 监听消息
        work.onmessage = function(event) {
            alert(event.data);
        };
    </script>
</head>
<body>
 
</body>
</html>

work.js

  onmessage = function (event) {
    //从1加到num
    var num = event.data;
    var result = 0;
    for (var i = 1; i <= num; i++) {
        result += i;
    }
    postMessage(result);
}

（学习视频分享：web前端入门、jQuery视频教程）

The above is the detailed content of [Advanced Skills] Nine front-end interview questions to help you consolidate your knowledge!. For more information, please follow other related articles on the PHP Chinese website!