今天主要给大家细说一下,前端开发工程师,在一般的面试中最容易被问到的几个问题,经过多次整理,今天特意分享给大家,希望对大家有所帮助.
一、浏览器输入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。不改变原数组。