多益网络前端笔试题整理

2023年6月21日发(作者：)

多益⽹络前端笔试题整理2017校招1 写出inline和inline-block的差别：布局⽅式相同，唯⼀的区别在inline-block可以设置宽⾼，inline不可以。另外：inline设置上下内边距和上下外边距会造成⼀些mess。2 写出五⼤主流浏览器的内核名称ie(trident),firefox(gecho),google chrome(blink),safari(webkit),oprea(blinnk)3 根据具体的情景写出⼀个JSON数据知道JSON数据怎么写，了解JSON数据和JS对象的区别就可以，很简单。4 考察字体⼤⼩的单位：rem,em,百分⽐em:核⼼观点:可以复合计算，当前元素的⼀个em值的⼤⼩等于⽗元素的字体⼤⼩（如果⽗元素被定义了字体⼤⼩，递归找⽗元素），否则等于浏览器⼀般默认的16pxrem核⼼观点：避免em的复合计算，相对root html元素的⼤⼩。百分⽐：与em相似5 隐藏元素的N种⽅式 {opacity: 0;}占据空间，可以响应⽤户交互，可以有动画。

{visibility: hidden;}占据空间，但是不响应⽤户交互，可以有动画。displaydisplay: none不占据空间，不响应交互，没有动画。

{position: absolute;top: -9999px;left: -9999px;}不占据空间，响应交互6 jQuery中live,bind,on,delegate的区别.bind()是直接绑定在元素上.live()则是通过冒泡的⽅式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是⽀持动态数据。.delegate()则是更精确的⼩范围使⽤事件代理，性能优于.live().on()则是最新的1.9版本整合了之前的三种⽅式的新事件绑定机制

7 如何去除img元素底部的空⽩{vertial-align:middle}{line-height:0}//div为img的⽗标签{float:left}{font-size:0}//会造成图⽂混乱{display:block}

画四边形，四个点的坐标分别是（220，100）（300，210）（170，250）（123，234）

2.写出promise构造函数var promise=new Promise( function (resolve,reject) { if("异步处理成功"){ resolve (); }else{ reject(); }});( function A () { ("事件处理成功时的操作") }, function B() { ("事件处理失败时的操作") }) 3.如何让动态插⼊的div响应绑定事件

//jquery 1.7版以后使⽤on动态绑定事件$("#testdiv ul").on("click","div", function() {//do something here});

4.如何阻⽌冒泡事件和默认事件

（1）阻⽌冒泡事件 function stopBubble(e) {

if(e && opagation){

opagation();

} else {

Bubble = true;

}

};

（2）阻⽌默认事件 function stopDefault(e){

if(e && tDefault) {

tDefault();

} else {

Value = false;

}

return false;

};

JavaScript停⽌冒泡和阻⽌浏览器默认⾏为

5.翻译：Using store state in a component simply includes returning the state within a computed property , because the storestate is reactive . Triggering changes simply means committing mutations in component methods . 在组件中使⽤存储状态简单地包括在计算属性中返回状态，因为存储状态是被动的。触发的变化意味着在组件的⽅法进⾏突变。

6.实现ajax的过程和代码

（1）创建XMLHttpRequest对象；

（2）注册回调函数，在XMLHttpRequest中设置要发送的请求，利⽤的是open（first,second,third）⽅法@param first：提交的⽅式 get或者是post@param second：该次请求的路径url，如果是get，则需要在路径后加上传递的相应参数parama，该url为servlet对应的url@param third：提交的模式是同步模式还是异步模式 true代表异步模式（3）发送请求给服务器，利⽤的是(null) ，加上null代表⽕狐和ie都⽀持

（4）利⽤xmlHttp的onreadystatechange的事件来监视tate的状态，每次改变时都调⽤函数(回调函数)

（5）在回调函数中处理返回值 利⽤dom模型写到页⾯的指定位置 实现局部刷新var XHR=null;var XHRcreate=function() {if (pRequest) {//针对FireFox，Mozillar，Opera，Safari，IE7，IE8XHR = new XMLHttpRequest();//针对某些特定版本的mozillar浏览器的BUG进⾏修正if (deMimeType) {deMimeType("text/xml");}} else if (XObject) {//针对IE6，IE5.5，IE5var activexName = ["P","P"];for (var i = 0; i < ; i++) {try{//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建XHR = new ActiveXObject(activexName[i]);break;} catch(e){}}}}XHRcreate();ystatechange = callback;//("GET","login_?name="+ userName,true);//(null);("POST","AJAXXMLServer",true);uestHeader("Content-Type","application/x-www-form-urlencoded");

("name=" + userName);function callback() {//判断对象的状态是交互完成if (tate == 4) {//判断http的交互是否成功if ( == 200) {var responseText = seText;//通过dom的⽅式找到div标签所对应的元素节点(为了简便,这⾥客户端的程序未写了)var divNode = mentById("result");TML = responseText;} else {alert("error！");}}}

操作符做了什么？（1）创建了⼀个空对象 var obj = new object(); （2）设置原型链 obj._proto_ = ype;

（3）让fn的this指向obj，并执⾏fn的函数体 var result = (obj);

（4）判断fn的返回值类型，如果是值类型，返回obj。如果是引⽤类型，就返回这个引⽤类型的对象。 if (typeof(result) == "object"){

fnObj = result;

} else {

fnObj = obj;}

8.写出3种异步加载⽅案异步加载⼜叫⾮阻塞加载，浏览器在下载执⾏js的同时，还会继续进⾏后续页⾯的处理。默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后⾯的元素要等待javascript加载完毕后才能进⾏再加载，对于⼀些意义不是很⼤的javascript，如果放在页头会导致加载很慢的话，是会严重影响⽤户体验的。异步加载主要有以下三种⽅式：

（1）async：定义：async 属性规定⼀旦脚本可⽤，则会异步执⾏。⽤法：注释：async 属性仅适⽤于外部脚本（只有在使⽤ src 属性时）。

注释：有多种执⾏外部脚本的⽅法：

如果 async=”async”：脚本相对于页⾯的其余部分异步地执⾏（当页⾯继续进⾏解析时，脚本将被执⾏）；如果不使⽤ async 且 defer=”defer”：脚本将在页⾯完成解析时执⾏；如果既不使⽤ async 也不使⽤ defer：在浏览器继续解析页⾯之前，⽴即读取并执⾏脚本 。（2）defer：只⽀持IEdefer 属性规定是否对脚本执⾏进⾏延迟，直到页⾯加载为⽌。有的 javascript 脚本 ⽅法来创建当前的⽂档内容，其他脚本就不⼀定是了。

如果您的脚本不会改变⽂档的内容，可将 defer 属性加⼊到

（3）创建script，插⼊到DOM中，加载完毕后callBack function loadScript(url, callback){

var script = Element_x("script")

= "text/javascript";

if (tate){ //IE

ystatechange = function(){

if (tate == "loaded" || tate == "complete"){

ystatechange = null;

callback();

}

};

} else { //Others: Firefox, Safari, Chrome, and Opera

= function(){

callback();

};

}

= url;

Child(script);

}

19春招1、写出⼿机号的正则表达式^1[3|4|5|7|8]d{9}$ ^开始符号 ⾸位为1 第2位为3或4或5或7或8 后⾯9位为任意数字 $结束符号

2、css的继承属性字体系列：font、font-size、font-weight⽂本系列：text-align、line-height、color、text-transformcursor、visibility、list-style

3、css制作动画效果的3个属性transition、transform、animation

4、Promise的例⼦function aaa(){var p = new Promise(function(resolve,reject){setTimeout(function(){('11111');resolve('2222'); },1000); });return p;}aaa().then(function(data){(data);});

5、css绘制⼀个直⾓梯形⼀开始想到了border，但设置了⾼度，所以没有成功

6、HTTP协议请求⽅式get、post、put、head、connect、trace、options、delete18年JS基础是要有的，字符串函数 split() 还有数组⼀些api ， reverse() join('') 这些要熟悉

正则表达式！是必考，反正我做的校招笔试题都会有问到，不直接问都会应⽤到。多益问的是写出⼿机号正则，还算简单

图像格式： .jpg .png .svg .gif 图像有啥区别

写出⼏个你⽹站优化的⽅法 ： 应该往减少http请求，压缩源代码，控制图⽚⼤⼩，缓存，减少DOM操作⽅⾯等答。

原⽣AJAX 其实ajax蛮简单的，⽤的也很多。这个记住四步就可以了

form 表单 提交的属性 和请求的⽅法属性 分别是？ action 和 method 这个method属性临时忘了，⾃⼰都想打⼀巴⾃⼰了翻译英⽂⽚段， 多益还有这个题，有点够呛，看了应该是框架⽂档原⽂。

⼤题： 给你⼀段JSON数据，每条JSON代表⼀个对象，有个属性指向它的⽗对象，请把这段JSON转为⼀个树形结构的对象。

2、计算机⽹络中五层协议分别是什么，HTTP属于哪⼀层？计算机⽹络中五层协议分别是（从下向上）：1) 物理层 2）数据链路层 3）⽹络层 4）传输层 5）应⽤层七层：物理层->数据链路层->⽹络层->传输层->会话层->表⽰层->应⽤层其功能分别是：1）物理层主要负责在物理线路上传输原始的⼆进制数据；2）数据链路层主要负责在通信的实体间建⽴数据链路连接；3）⽹络层主要负责创建逻辑链路，以及实现数据包的分⽚和重组，实现拥塞控制、⽹络互连等功能；4）传输曾负责向⽤户提供端到端的通信服务，实现流量控制以及差错控制。（TCP、UDP）5）会话层：定义了何时开始、控制和结束⼀个回话，包括对多个双向消息的控制和管理，以便在只完成连续消息的⼀部分时可以通知应⽤，从⽽使得表⽰层看到的数据是连续的，某些情况下，如果表⽰层收到了所有的数据，则⽤数据代表表⽰层。6）表⽰层：主要功能是定义数据格式以及加密，7）应⽤层为应⽤程序提供了⽹络服务。⼀般来说，物理层和数据链路层是由计算机硬件（如⽹卡）实现的，⽹络层和传输层由操作系统软件实现，⽽应⽤层由应⽤程序或⽤户创建实现。3、传输层有哪些协议?TCP协议与UDP协议的区别。传输层（Transport Layer）是OSI中最重要, 最关键的⼀层,是唯⼀负责总体的数据传输和数据控制的⼀层.传输层提供端到端的交换数据的机制，检查分组编号与次序。传输层对其上三层如会话层等，提供可靠的传输服务,对⽹络层提供可靠的⽬的地站点信息.主要功能： 为端到端连接提供传输服务.这种传输服务分为可靠和不可靠的,其中Tcp是典型的可靠传输,⽽Udp则是不可靠传输. 为端到端连接提供流量控制,差错控制,服务质量(Quality of Service,QoS)等管理服务. 具有传输层功能的协议： TCP UDP SPX NetBIOS NetBEUI

4、你听过 DNS吗？可以讲讲吗？（我只听过没印象） DNS（Domain Name System，域名系统），万维⽹上作为域名和IP地址相互映射的⼀个分布式数据库，能够使⽤户更⽅便的访问互联⽹，⽽不⽤去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。DNS协议运⾏在UDP协议之上，使⽤端⼝号53。

5、排序算法有哪些？并给出时间复杂度插⼊排序选择排序冒泡排序快速排序哈希排序堆排序

6、事件响应问题事件：JavaScript 创建动态页⾯。事件是可以被 JavaScript 侦测到的⾏为。 ⽹页中的每个元素都可以产⽣某些可以触发JavaScript 函数或程序的事件。⽐如说，当⽤户单击按钮或者提交表单数据时，就发⽣⼀个⿏标单击（onclick）事件，需要浏览器做出处理，返回给⽤户⼀个结果。7、你听过 ES6规范吗，列举⼀些你所知道的差别

2023年6月21日发(作者：)

多益⽹络前端笔试题整理2017校招1 写出inline和inline-block的差别：布局⽅式相同，唯⼀的区别在inline-block可以设置宽⾼，inline不可以。另外：inline设置上下内边距和上下外边距会造成⼀些mess。2 写出五⼤主流浏览器的内核名称ie(trident),firefox(gecho),google chrome(blink),safari(webkit),oprea(blinnk)3 根据具体的情景写出⼀个JSON数据知道JSON数据怎么写，了解JSON数据和JS对象的区别就可以，很简单。4 考察字体⼤⼩的单位：rem,em,百分⽐em:核⼼观点:可以复合计算，当前元素的⼀个em值的⼤⼩等于⽗元素的字体⼤⼩（如果⽗元素被定义了字体⼤⼩，递归找⽗元素），否则等于浏览器⼀般默认的16pxrem核⼼观点：避免em的复合计算，相对root html元素的⼤⼩。百分⽐：与em相似5 隐藏元素的N种⽅式 {opacity: 0;}占据空间，可以响应⽤户交互，可以有动画。

{visibility: hidden;}占据空间，但是不响应⽤户交互，可以有动画。displaydisplay: none不占据空间，不响应交互，没有动画。

{position: absolute;top: -9999px;left: -9999px;}不占据空间，响应交互6 jQuery中live,bind,on,delegate的区别.bind()是直接绑定在元素上.live()则是通过冒泡的⽅式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是⽀持动态数据。.delegate()则是更精确的⼩范围使⽤事件代理，性能优于.live().on()则是最新的1.9版本整合了之前的三种⽅式的新事件绑定机制

7 如何去除img元素底部的空⽩{vertial-align:middle}{line-height:0}//div为img的⽗标签{float:left}{font-size:0}//会造成图⽂混乱{display:block}

画四边形，四个点的坐标分别是（220，100）（300，210）（170，250）（123，234）

2.写出promise构造函数var promise=new Promise( function (resolve,reject) { if("异步处理成功"){ resolve (); }else{ reject(); }});( function A () { ("事件处理成功时的操作") }, function B() { ("事件处理失败时的操作") }) 3.如何让动态插⼊的div响应绑定事件

//jquery 1.7版以后使⽤on动态绑定事件$("#testdiv ul").on("click","div", function() {//do something here});

4.如何阻⽌冒泡事件和默认事件

（1）阻⽌冒泡事件 function stopBubble(e) {

if(e && opagation){

opagation();

} else {

Bubble = true;

}

};

（2）阻⽌默认事件 function stopDefault(e){

if(e && tDefault) {

tDefault();

} else {

Value = false;

}

return false;

};

JavaScript停⽌冒泡和阻⽌浏览器默认⾏为

5.翻译：Using store state in a component simply includes returning the state within a computed property , because the storestate is reactive . Triggering changes simply means committing mutations in component methods . 在组件中使⽤存储状态简单地包括在计算属性中返回状态，因为存储状态是被动的。触发的变化意味着在组件的⽅法进⾏突变。

6.实现ajax的过程和代码

（1）创建XMLHttpRequest对象；

（2）注册回调函数，在XMLHttpRequest中设置要发送的请求，利⽤的是open（first,second,third）⽅法@param first：提交的⽅式 get或者是post@param second：该次请求的路径url，如果是get，则需要在路径后加上传递的相应参数parama，该url为servlet对应的url@param third：提交的模式是同步模式还是异步模式 true代表异步模式（3）发送请求给服务器，利⽤的是(null) ，加上null代表⽕狐和ie都⽀持

（4）利⽤xmlHttp的onreadystatechange的事件来监视tate的状态，每次改变时都调⽤函数(回调函数)

（5）在回调函数中处理返回值 利⽤dom模型写到页⾯的指定位置 实现局部刷新var XHR=null;var XHRcreate=function() {if (pRequest) {//针对FireFox，Mozillar，Opera，Safari，IE7，IE8XHR = new XMLHttpRequest();//针对某些特定版本的mozillar浏览器的BUG进⾏修正if (deMimeType) {deMimeType("text/xml");}} else if (XObject) {//针对IE6，IE5.5，IE5var activexName = ["P","P"];for (var i = 0; i < ; i++) {try{//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建XHR = new ActiveXObject(activexName[i]);break;} catch(e){}}}}XHRcreate();ystatechange = callback;//("GET","login_?name="+ userName,true);//(null);("POST","AJAXXMLServer",true);uestHeader("Content-Type","application/x-www-form-urlencoded");

("name=" + userName);function callback() {//判断对象的状态是交互完成if (tate == 4) {//判断http的交互是否成功if ( == 200) {var responseText = seText;//通过dom的⽅式找到div标签所对应的元素节点(为了简便,这⾥客户端的程序未写了)var divNode = mentById("result");TML = responseText;} else {alert("error！");}}}

操作符做了什么？（1）创建了⼀个空对象 var obj = new object(); （2）设置原型链 obj._proto_ = ype;

（3）让fn的this指向obj，并执⾏fn的函数体 var result = (obj);

（4）判断fn的返回值类型，如果是值类型，返回obj。如果是引⽤类型，就返回这个引⽤类型的对象。 if (typeof(result) == "object"){

fnObj = result;

} else {

fnObj = obj;}

8.写出3种异步加载⽅案异步加载⼜叫⾮阻塞加载，浏览器在下载执⾏js的同时，还会继续进⾏后续页⾯的处理。默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后⾯的元素要等待javascript加载完毕后才能进⾏再加载，对于⼀些意义不是很⼤的javascript，如果放在页头会导致加载很慢的话，是会严重影响⽤户体验的。异步加载主要有以下三种⽅式：

（1）async：定义：async 属性规定⼀旦脚本可⽤，则会异步执⾏。⽤法：注释：async 属性仅适⽤于外部脚本（只有在使⽤ src 属性时）。

注释：有多种执⾏外部脚本的⽅法：

如果 async=”async”：脚本相对于页⾯的其余部分异步地执⾏（当页⾯继续进⾏解析时，脚本将被执⾏）；如果不使⽤ async 且 defer=”defer”：脚本将在页⾯完成解析时执⾏；如果既不使⽤ async 也不使⽤ defer：在浏览器继续解析页⾯之前，⽴即读取并执⾏脚本 。（2）defer：只⽀持IEdefer 属性规定是否对脚本执⾏进⾏延迟，直到页⾯加载为⽌。有的 javascript 脚本 ⽅法来创建当前的⽂档内容，其他脚本就不⼀定是了。

如果您的脚本不会改变⽂档的内容，可将 defer 属性加⼊到

（3）创建script，插⼊到DOM中，加载完毕后callBack function loadScript(url, callback){

var script = Element_x("script")

= "text/javascript";

if (tate){ //IE

ystatechange = function(){

if (tate == "loaded" || tate == "complete"){

ystatechange = null;

callback();

}

};

} else { //Others: Firefox, Safari, Chrome, and Opera

= function(){

callback();

};

}

= url;

Child(script);

}

19春招1、写出⼿机号的正则表达式^1[3|4|5|7|8]d{9}$ ^开始符号 ⾸位为1 第2位为3或4或5或7或8 后⾯9位为任意数字 $结束符号

2、css的继承属性字体系列：font、font-size、font-weight⽂本系列：text-align、line-height、color、text-transformcursor、visibility、list-style

3、css制作动画效果的3个属性transition、transform、animation

4、Promise的例⼦function aaa(){var p = new Promise(function(resolve,reject){setTimeout(function(){('11111');resolve('2222'); },1000); });return p;}aaa().then(function(data){(data);});

5、css绘制⼀个直⾓梯形⼀开始想到了border，但设置了⾼度，所以没有成功

6、HTTP协议请求⽅式get、post、put、head、connect、trace、options、delete18年JS基础是要有的，字符串函数 split() 还有数组⼀些api ， reverse() join('') 这些要熟悉

正则表达式！是必考，反正我做的校招笔试题都会有问到，不直接问都会应⽤到。多益问的是写出⼿机号正则，还算简单

图像格式： .jpg .png .svg .gif 图像有啥区别

写出⼏个你⽹站优化的⽅法 ： 应该往减少http请求，压缩源代码，控制图⽚⼤⼩，缓存，减少DOM操作⽅⾯等答。

原⽣AJAX 其实ajax蛮简单的，⽤的也很多。这个记住四步就可以了

form 表单 提交的属性 和请求的⽅法属性 分别是？ action 和 method 这个method属性临时忘了，⾃⼰都想打⼀巴⾃⼰了翻译英⽂⽚段， 多益还有这个题，有点够呛，看了应该是框架⽂档原⽂。

⼤题： 给你⼀段JSON数据，每条JSON代表⼀个对象，有个属性指向它的⽗对象，请把这段JSON转为⼀个树形结构的对象。

2、计算机⽹络中五层协议分别是什么，HTTP属于哪⼀层？计算机⽹络中五层协议分别是（从下向上）：1) 物理层 2）数据链路层 3）⽹络层 4）传输层 5）应⽤层七层：物理层->数据链路层->⽹络层->传输层->会话层->表⽰层->应⽤层其功能分别是：1）物理层主要负责在物理线路上传输原始的⼆进制数据；2）数据链路层主要负责在通信的实体间建⽴数据链路连接；3）⽹络层主要负责创建逻辑链路，以及实现数据包的分⽚和重组，实现拥塞控制、⽹络互连等功能；4）传输曾负责向⽤户提供端到端的通信服务，实现流量控制以及差错控制。（TCP、UDP）5）会话层：定义了何时开始、控制和结束⼀个回话，包括对多个双向消息的控制和管理，以便在只完成连续消息的⼀部分时可以通知应⽤，从⽽使得表⽰层看到的数据是连续的，某些情况下，如果表⽰层收到了所有的数据，则⽤数据代表表⽰层。6）表⽰层：主要功能是定义数据格式以及加密，7）应⽤层为应⽤程序提供了⽹络服务。⼀般来说，物理层和数据链路层是由计算机硬件（如⽹卡）实现的，⽹络层和传输层由操作系统软件实现，⽽应⽤层由应⽤程序或⽤户创建实现。3、传输层有哪些协议?TCP协议与UDP协议的区别。传输层（Transport Layer）是OSI中最重要, 最关键的⼀层,是唯⼀负责总体的数据传输和数据控制的⼀层.传输层提供端到端的交换数据的机制，检查分组编号与次序。传输层对其上三层如会话层等，提供可靠的传输服务,对⽹络层提供可靠的⽬的地站点信息.主要功能： 为端到端连接提供传输服务.这种传输服务分为可靠和不可靠的,其中Tcp是典型的可靠传输,⽽Udp则是不可靠传输. 为端到端连接提供流量控制,差错控制,服务质量(Quality of Service,QoS)等管理服务. 具有传输层功能的协议： TCP UDP SPX NetBIOS NetBEUI

4、你听过 DNS吗？可以讲讲吗？（我只听过没印象） DNS（Domain Name System，域名系统），万维⽹上作为域名和IP地址相互映射的⼀个分布式数据库，能够使⽤户更⽅便的访问互联⽹，⽽不⽤去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。DNS协议运⾏在UDP协议之上，使⽤端⼝号53。

5、排序算法有哪些？并给出时间复杂度插⼊排序选择排序冒泡排序快速排序哈希排序堆排序

6、事件响应问题事件：JavaScript 创建动态页⾯。事件是可以被 JavaScript 侦测到的⾏为。 ⽹页中的每个元素都可以产⽣某些可以触发JavaScript 函数或程序的事件。⽐如说，当⽤户单击按钮或者提交表单数据时，就发⽣⼀个⿏标单击（onclick）事件，需要浏览器做出处理，返回给⽤户⼀个结果。7、你听过 ES6规范吗，列举⼀些你所知道的差别