Javascript面试中最容易被问到的几大问题

今天主要给大家细说一下,前端开发工程师,在一般的面试中最容易被问到的几个问题,经过多次整理,今天特意分享给大家,希望对大家有所帮助.

一、浏览器输入url地址发生的事务流程

流程:

1、域名解析:通过浏览器获得的URL地址,进行IP地址查询,找到具体的IP地址

2、确认好了IP和端口,则可以向IP地址对应服务器的端口号发起TCP连接请求

3、服务器确认收到TCP请求后,回复连接请求

4、浏览器收到回传数据后,向服务器发送数据包,表示三次握手结束

5、三次握手结束后,开始通讯,发送数据包,服务器响应请求,将数据返回给浏览器,数据根据HTML协议进行组织页面

6、渲染页面,并开始响应用户操作

7、窗口关闭时,浏览器终止与服务器连接

二、怎么处理多个ajax并发请求

2.1  JS的多并发处理方案:

通常 为了减少页面加载时间，先把核心内容显示处理，页面加载完成后再发送ajax请求获取其他数据

这时就可能产生多个ajax请求，为了用户体验，最好是发送并行请求，这就产生了并发问题，应该如何处理？

（1）并行改串行

如果业务逻辑和用户体验允许的情况下，可以改为串行，处理起来最简单

function async1(){

   //函数体...

   async2();

}

function async2(){

    //函数体...

}

async1();

（2）回调计数

function async1(){

    //函数体...

   callback();

}

function async2(){

    //函数体...

    callback();

}

function callback(){

    cnt++;

    if(2==cnt){

           console.log('都已执行完毕');

         }

}

（3）循环非阻塞

function async1(){

    //函数体...

   cnt++;

}

function async2(){

     //函数体...

     cnt++;

}

var interval = setInterval(function(){

      if(2===cnt){

                           console.log('已执行完成');

                           clearInterval(interval)

              }

};

这个方法采用了定时间隔触发器，占用CPU比较多，建议根据具体情况选择使用

2.2  jquery中的多并发处理方案

使用jquery的延时处理方法，每个ajax请求完成后，把对应的Deferred置为完成状态，然后用jquery判断全部完成后再进行后续处理

var d1 = $.Deferred();

var d2 = $.Deferred();

function async1(){

                d1.resolve( "你好" )

 }

function async2(){

                   d2.resolve( "好嗨哟" );

}

$.when( d1, d2 ).done(function ( v1, v2 ) {

                 console.log( v1 + v2 + '已完成');

});

另外多说一句：ajax时异步请求不会出现堵塞情况。

三、前端代码如何进行优化

一般在面试的过程中基本上会问到代码优化方面的问题,今天主要给大家讲解一些大致的方向,如果需要了解更多细节,可以关注我后期的文章哦!现在我们就来看下,具体的操作方法吧!

一）内容层面

1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

2、避免重定向（/还是需要的）

3、切分到多个域名

4、杜绝404

二）网络传输阶段

1、减少传输过程中实体的大小

    1）缓存

    2）cookie优化

    3）文件压缩（Accept-Encoding：g-zip）

2、减少请求的次数

    1）文件适当的合并

    2）雪碧图

3、异步加载（并发,requirejs）

4、预加载、延后加载、按需加载

三）渲染阶段

1、js放底部，css放顶部

2、减少重绘和回流

3、合理使用Viewport 等meta头部

4、减少dom节点

5、BigPipe

四）脚本执行阶段

1、缓存节点，尽量减少节点的查找

2、减少节点的操作（innerHTML）

3、避免无谓的循环，break、continue、return的适当使用

4、事件委托

四、var let const的区别

前期知识了解知识点:

JS中作用域分为：全局作用域、函数作用域。但是没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。、

3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

五、ES6数组新增了哪些方法

在js中的E6语法中,数组主要新增了6个方法:分别为foreach() 、map()、filter()、reduce() 、 some()、every(). IE9及以上才支持,如果需要IE低版本支持,可以使用babel进行转意,所以操作都不会改变原数组哦.让我们具体的都来看一下吧!

//1.foreach()方法:

var arr = [1,2,3,4];

arr.foreach((item,index,arr)=>{

                console.log(item); //结果为1,2,3,4

});

//小结:foreach遍历数组，无返回值，不改变原数组，仅仅只是遍历，常用于注册组件、指令等等。

//2.map()方法:

var arr = [1,2,3,4];

arr.map((item,index,arr)=>{

                    return item*10; //结果为10,20,30,40

});

//小结:map遍历数组，返回一个新数组，不改变原数组

//3.filter()方法:

var arr = [1,2,3,4];

arr.filter((item,index,arr)=>{

               return item >2; //结果为[3,4]

});

//小结:filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组

//4.reduce()方法:

var arr = [1,2,3,4];

arr.reduce((result,item,index,arr)=>{

          console.log(result);

          console.log(item);

          console.log(inddx);

          return result+item;

});

//小结:reduce让数组的前后两项进行某种计算,然后返回其值，并继续计算,不改变原数组,返回计算的最终结果，从数组的第二项开始遍历。

//5.some()方法:

var arr = [1,2,3,4];

arr.some((item,index,arr)=>{

                   return item > 2; //返回true

});

//小结:遍历数组每一项,有一项返回true,则停止遍历，结果返回true。不改变原数组。

//6.every()方法:

var arr = [1,2,3,4];

arr.every((item,index,arr)=>{

                    return item >1; //返回false

});

//小结:遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false。不改变原数组。

未完待续...

本期我先给大家分享这一些面试常被问及到的重点问题,后期我会为大家分享更多精彩内容,请关注源码时代更多的文章哦!