常见的web前端面试题

文章目录

根据我近期以来的前端面试题以来,大部分的前端面试都是关于js和vue方面,下面我就根据我自己面试的题目:

js同步和异步

同步:同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;

异步:异步任务指的是,不进入主线程、而进入”任务队列”(task queue)的任务,只有等主线程任务执行完毕,”任务队列”开始通知主线程,请求执行任务,该任务才会进入主线程执行。

在JS中,异步有两种,一种是setTimeout()和setInterval()函数,它们会在指定的一段事件后触发指定函数的调用。

例如:

1.计时器异步


var text = function(){
    console.log("第一次输出.");
    setTimeout(function(){
        console.log("第二次输出.");
    },1000);
    console.log("第三次输出.");
}

正向输出结果所示,setTimeout函数改变了JS的执行顺序.

2.ajax异步

Ajax在

不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

<script type="text/javascript">
 
function ajaxFunction()
 {
   var xmlHttp=GetXmlHttpObject();//定义XMLHttpRequest对象
  
  xmlHttp.open("GET","****.ashx",true)//设置请求方法,请求的目标页面,以及是否异步
  xmlHttp.setRequestHeader("If-Modified-Since","0");
 
  xmlHttp.onreadystatechange=function(){  //定义XMLHttpRequest对象的onreadystatechange属性    
 
    if(xmlHttp.readyState==4) {   //判断XMLHttpRequest对象的状态 
      if(xmlHttp.status==200){
 
        document.myForm.time.value=xmlHttp.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据 
      } 
    }
  } 
  xmlHttp.send(null);//发送异步请求 
} 
 
</script> 
<form name="myForm"> 
  用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 
  时间: <input type="text" name="time" /> 
</form> 
</body>
 </html>

ajax的执行步骤是:

当请求被发送到服务器时,需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件

以上就是关于javascript中的同步与异步。

什么是闭包

一、变量的作用域

一个封闭是一个返回函数的函数。返回的功能(被调用函数(内部创建功能),由于- ),所以范围的规则,我们已经看到-在内部可以访问的变量和参数

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

var n=999;

  function f1(){
    alert(n);
  }

  f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

function f1(){
    var n=999;
  }

  alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

function f1(){
    n=999;
  }

  f1();

  alert(n); // 999

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

function f1(){

    var n=999;

    function f2(){
      alert(n); // 999
    }

  }

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的”链式作用域“结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

function f1(){

    var n=999;

    function f2(){
      alert(n); 
    }

    return f2;

  }

  var result=f1();

  result(); // 999

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的”闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢?请看下面的代码。

function f1(){

    var n=999;

    nAdd=function(){n+=1}

    function f2(){
      alert(n);
    }

    return f2;

  }

  var result=f1();

  result(); // 999

  nAdd();

  result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是”nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。

代码片段一。

var name = "The Window";

  var object = {
    name : "My Object",

    getNameFunc : function(){
      return function(){
        return this.name;
      };

    }

  };

  alert(object.getNameFunc()());

代码片段二。

var name = "The Window";

  var object = {
    name : "My Object",

    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };

    }

  };

  alert(object.getNameFunc()());

HTTP常见状态码

2开头 (请求成功)表示成功处理了请求的状态代码

  • 200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
  • 201 (已创建) 请求成功并且服务器创建了新的资源。
  • 202 (已接受) 服务器已接受请求,但尚未处理。
  • 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
  • 204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
  • 205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
  • 206 (部分内容) 服务器成功处理了部分 GET 请求。

3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

  • 300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent)选择一项操作,或提供操作列表供请求者选择。
  • 301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD请求的响应)时,会自动将请求者转到新位置。
  • 302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
  • 303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
  • 304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
  • 305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
  • 307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。

  • 400 (错误请求) 服务器不理解请求的语法。
  • 401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
  • 403 (禁止) 服务器拒绝请求。
  • 404 (未找到) 服务器找不到请求的网页。
  • 405 (方法禁用) 禁用请求中指定的方法。
  • 406 (不接受) 无法使用请求的内容特性响应请求的网页。
  • 407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
  • 408 (请求超时) 服务器等候请求时发生超时。
  • 409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
  • 410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。
  • 411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
  • 412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
  • 413 (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
  • 414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
  • 415 (不支持的媒体类型) 请求的格式不受请求页面的支持。
  • 416 (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。
  • 417 (未满足期望值) 服务器未满足”期望”请求标头字段的要求。

5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。

  • 500 (服务器内部错误) 服务器遇到错误,无法完成请求。
  • 501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
  • 502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
  • 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
  • 504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
  • 505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本

简述从浏览器地址栏输入url到显示页面的步骤

涉及的主要流程或步骤有:

①浏览器根据请求的URL,交给DNS域名解析,找到真实的ip,交给域名解析。

②服务器交给后端处理完成后返回的数据,浏览器接收文件HTML,CSS,JS图片等。

③浏览器对加载的资源进行语法解析,建立相应的数据内部结构。

④解析html,创建dom树,自上而下的顺序

⑤解析css,优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;

⑥将css与dom合并,构建渲染树

⑦布局重绘重排,页面完成渲染

清除浮动的几种方式

1.clear:both,添加一个空标签div

2.父级div定义伪类:after和zoom

3.父级div定义overflow:hidden

4.父级div也浮动,需要定义宽度

5.结尾处加br标签clear:both


.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block;*zoom:1}

介绍一下css盒子模型

有两种, IE盒子模型、W3C盒子模型; 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border); 区 别: IE(低版本)的content部分把 border 和 padding计算了进去;

简述一下ES6

es6是一个新的标准,它包含了许多新的语言特性和库,是JS最实质性的一次升级。 比如’箭头函数’、’字符串模板’、’generators(生成器)’、’async/await’、’解构赋值’、’class’等等,还有就是引入module模块的概念。

可以让this指向固定化,这种特性很有利于封装回调函数

  • (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
  • (4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

async/await 是写异步代码的新方式,以前的方法有回调函数和Promise。 async/await是基于Promise实现的,它不能用于普通的回调函数。async/await与Promise一样,是非阻塞的。 async/await使得异步代码看起来像同步代码,这正是它的魔力所在。

©️李联华的博客网 当前IP地址:44.200.27.215,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/common-web-front-end-interview-questions.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...