10道web前端开发工程师面试题目

书香世家

1.谈谈你对dns-prefetch的理解

DNS即域名系统，是域名和IP地址相互映射的一个分布式数据库。dns-prefetch是浏览器提前去解析页面中用到的一些域名，从而加快网站访问速度：

<link rel="dns-prefetch" href="url链接">
对于http页面来说，其中的超链接a标签会自动启动dns-prefetch，但是在https页面中无效。此时需要在meta中强制启动这一功能：

<meta http-equiv="x-dns-prefetch-control" content="on">
该提前加载域名解析的功能对于那些在网页中引入了大量其它域名资源的网站更有作用。如果网站中所有的资源基本在本域名下，那么这个dns-prefetch基本没有什么作用。

2.说说http与websocket的区别

http是一个无状态的面向连接的协议。http连接在收到response反馈信息后，这次连接就结束了，即http是无状态的，不提供持久性连接，客户端收到服务器端回复后即关闭http连接。

在 HTTP/1.0 协议中，可以通过设置connection：keep-alive来实现http长连接，减少了创建和关闭多个 TCP 连接的开销。可以在一个http连接中发送多个request，接收多个response，此时http中一个request也是只能对应一个response，而且得先进行response请求，然后才会有response回复，服务器端不会主动向客户端推送消息。

从 HTTP/1.1 协议开始，默认开启了 keep-alive，除非显式地关闭它：Connection: close。

使用keep-alive如果一个长连接实际上已经处理完毕，则该线程会一直被占用，也是一种资源浪费。所以如果客户端和服务端需要进行多次频繁的通信，则开启 keep-alive 是种好的选择。

WebSocket协议是HTML5中的一种在单个TCP连接上进行双向通信的协议。它实现了浏览器与服务器全双工实时通信，同时允许跨域通讯，是server push技术的一种很好的实现，支持服务器端向客户端主动推送消息。兼容性不是很好，只适用于主流浏览器和IE10+。

if("WebSocket" in window) {
    //创建WebSocket连接
    var ws = new WebSocket("ws://url地址");
    //当WebSocket创建成功时，触发onopen事件
    ws.onopen = function() {
       //将消息发送到服务端
       ws.send("hello");
    }
    //当客户端收到服务端发来的消息时，触发onmessage事件
    ws.onmessage = function(e) {
       console.log(e.data);
    }
    //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    ws.onclose = function(e) {
       console.log("close");
    }
    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    ws.onerror = function(e) {
      console.log(e);
    }
} else {
    console.log("浏览器不支持WebSocket");
}
WebSocket在请求时多了下面2个属性：

Upgrade:webSocket
Connection:Upgrade
原生WebSocket API使用起来兼容性不太好，可以使用http://Socket.io这个第三方api，封装了WebSocket接口，对不支持WebSocket的浏览器提供了向下兼容。

3.UDP和TCP有什么区别？

TCP是面向连接的，是可靠的，可以用于传输一些安全度比较高的大量数据。TCP协议的发送方要确认接收方是否收到数据段，即要进行3次握手建立连接。
UDP是面向非连接的，是不可靠，但是速度比TCP快，可以用来传输安全度不高的少量数据。

4.JavaScript处理引擎是啥？

能解析并且运行JS代码的解释器。本质上JS引擎是一个将JS代码编译成不同cpu对应的汇编代码的程序，同时还负责执行代码、分配内存、垃圾回收。浏览器中就包含了JS处理引擎，不同的浏览器JS引擎有差异，所以一段相同的代码，可能各个浏览器执行结果不一样。

常见的JS引擎有：

       浏览器       JS引擎
       IE6-8        JScritp
       IE9-11,Edge  Chakra
       Firefox      JagerMonkey
       Chrome       V8
       Safari       SquirrelFish
       Opera        Carakan

注意浏览器渲染引擎和JS引擎不一样，前者注意是用于渲染页面的，常见的渲染引擎有Chrome的Webkit和Blink，有Firefox的Gecko等。

5.ECMAScript和JavaScript？

ECMA International(ECMA国际)是一家国际性标准组织，它所制定的规范标准都是由各类企业来做主要的制定和推广的。该组织制定有ECMA-262标准，又根据该标准制定了ECMAScript这一通用脚本语言规范。即ECMAScript是一种根据ECMA-262制定的通用脚本语言规范。JavaScript是一种通用跨平台脚本语言，遵循的是ECMAScript脚本语言规范，即JavaScript是ECMAScript规范的一种实现。

JavaScript主要包含下面3个方面内容：
a.ECMAScript(JS的核心功能，包括ES5/ES6语法)
b.DOM:文档对象模型，通过DOM对页面中元素进行操作
c.BOM:浏览器对象模型，通过window这个全局对象跟浏览器进行交互

6.caller, callee和arguments分别是什么？

caller返回一个调用当前函数的引用,如果是由顶层调用的话则返回null

function callerTest() {
   console.log(callerTest.caller);
};
function a() {
   callerTest();
}
a();//function a() {callerTest();}
callerTest();//null
allee是arguments对象的一个属性，表示对函数对象本身的引用，它有个length属性表示形参的长度：

function test(x,y) {
   console.log(arguments.length);
   console.log(arguments.callee.length);
   console.log(arguments.callee);
}
test(1,2,3);

输出：
3
2
ƒ test(x,y) {
   console.log(arguments.length);
   console.log(arguments.callee.length);
   console.log(arguments.callee);
}

arguments是函数调用传入的所有参数列表

function test() {
  //arguments是类数组,通过Array.from转化成数组
  Array.from(arguments).forEach(item => {
    console.log(item);
  })
}
test('a', 'b', 'c');

输出：
a
b
c

7.如何封装一个javascript的类型判断函数

function getType(value) {
  // 判断数据是null的情况
  if (value === null) {
    return "null";
  }
  // 判断数据是引用类型的情况
  if (typeof value === "object") {
    const valueClass = Object.prototype.toString.call(value);
    const type = valueClass.split(" ")[1].split("");
    type.pop();
    return type.join("").toLowerCase();
  } else {
   // 判断数据是基本数据类型和函数的情况
   return typeof value
  }
}
传入数组getType([1,2]):
返回：'array'
传入字符串getType("test"):
返回：'string'
传入函数getType(function(){}):
返回：'function'

8.为什么有时在发送数据埋点请求时候使用的是1x1像素的透明gif图片？

a.图片没有跨域问题，适合少量数据统计上报，使用起来简单；
b.gif图片体积小，也不会阻塞页面加载，除了使用img标签插入html中外，还可以在js中通过new Image()实现，代码简介不复杂；
c.浏览器会缓存图片url地址，所以不会重复上报；
具体实现是将上报的数据拼接成URL，将new Image()的src值设置为该URL，后台服务器收到请求后处理数据，同时返回一像素gif图片：
const img = new Image();
img.src = "http://xxx?data=test"

9.说说你对HTTP中options请求的理解

我们经常会发现，某个请求代码中只发送了一次，但是浏览器却发送了2次，其中一次就是options请求。options请求一般是在跨域的情况下，在浏览器发起"复杂请求"时主动发起的。"复杂请求"是针对那些可能对服务器数据产生副作用的 HTTP 请求方法，浏览器必须首先使用options方法发起一个预检请求(preflight request)来获知服务端是否允许该跨域请求，允许后才发起实际的 HTTP 请求。跟"复杂请求"相对应的"简单请求"则不会触发预检。
简单请求为：
请求方法为GET、HEAD、POST时发的请求；Content-Type 设置的值包括application/x-www-form-urlencoded、multipart/form-data、text/plain这三者。
复杂请求为：
使用了诸如PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH这些请求方法；Content-Type 设置的值不包括application/x-www-form-urlencoded、multipart/form-data、text/plain这三者。
服务器端可以通过设置Access-Control-Max-Age 指定预检请求的结果能够被缓存多久，在缓存时间内不会再次发送预检请求了。

10.FCP/FMP/FP分别是怎样定义，如何统计？

a.FP(First Paint首次绘制)
代表浏览器第一次向屏幕传输像素的时间，也就是首次发生视觉变化的时间。可以通过performance.getEntriesByType('paint')来获取，返回一个数组，数组第一项即为FP数据：
performance.getEntriesByType('paint')
[PerformancePaintTiming, PerformancePaintTiming]
0: PerformancePaintTiming
duration: 0
entryType: "paint"
name: "first-paint"
startTime: 1459

b.FCP(First Contentful Paint首次内容绘制)
代表浏览器第一次向屏幕绘制 “内容”，只有首次绘制文本、图片(包含背景图)、非白色的canvas或SVG时才被算作FCP。可以通过performance.getEntriesByType('paint’)返回数组的第二项来获取FCP值。也可以通过MutationObserver观察到首次节点变动的时间来获取FCP值。
FP和FCP主要区别是：FP不限制具体是什么内容引起的视觉变化，FCP是浏览器首次绘制来自DOM的内容：文本，图片，SVG，canvas元素等。FP和FCP可能是相同的时间，也可能是先FP后FCP。

c.FMP(FirstMeaningfulPaint第一次有意义的绘画)
页面主要内容出现在屏幕上的时间, 是用户感知加载体验的主要指标。目前尚无标准化的定义，一般情况下将页面评分最高的可见内容出现在屏幕上的时间作为FirstMeaningfulPaint。可以通过MutationObserver和IntersectionObserver来获取重要内容展示在屏幕上的时间。

11.什么是Web Worker？

web worker是运行在浏览器后台的JavaScript，独立于其他脚本，不会影响页面的性能，web worker运行时，用户可以继续做其它事情。
worker.js：
var i = 0;
function timeCount()
{
  i = i+1;
  postMessage(i);
  setTimeout("timeCount()", 500);
}
timeCount();

调用代码：
var w;
function startWorker() {
  //检测浏览器是否支持Web Worker
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) === "undefined") {
      w = new Worker("worker.js");
    }
    w.onmessage = function(event) {
      console.log(event.data);
    };
  } else {
    console.log("浏览器不支持Web Worker");
  }
}

function stopWorker()
{
  w.terminate();
  w = undefined;
}
注意：由于web worker位于外部文件中，所以无法访问到下列JavaScript对象：
window 对象
document 对象
parent 对象

希望本篇文章能够对正准备参加Web前端面试的小伙伴们有所帮助。最后祝愿小伙伴们能够面试成功，顺利找到工作!