多益网络前端笔试题整理

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值的大小等于父元素的字体大小(如果父元素被定义了字体大小,递归找父元素),否则等于浏览器一般默认的16px

rem

核心观点:避免em的复合计算,相对root html元素的大小。

百分比:与em相似

5 隐藏元素的N种方式

opacity

.hide {
opacity: 0;
}
占据空间,可以响应用户交互,可以有动画。

 

visibility

.hide {
visibility: hidden;
}

占据空间,但是不响应用户交互,可以有动画。


display
display: none

不占据空间,不响应交互,没有动画。

 

Position

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
不占据空间,响应交互


6 jQuery中live,bind,on,delegate的区别

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理,性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

 

7 如何去除img元素底部的空白

1.img{vertial-align:middle}

2.div{line-height:0}//div为img的父标签

3.img{float:left}

4.img{font-size:0}//会造成图文混乱

5.img{display:block}

 

1.svg画四边形,四个点的坐标分别是(220,100)(300,210)(170,250)(123,234)

<svg height="300">

<polygon points="220,100 300,210 170,250 123,234" style="fill:blue;stroke:black;stroke-width:1;">
</svg>

 

2.写出promise构造函数

var promise=new Promise(
function (resolve,reject) {
if("异步处理成功"){
resolve ();
}else{
reject();
}

});
promise.then(
function A () {
console.log("事件处理成功时的操作")

},
function B() {
console.log("事件处理失败时的操作")
}
)

 

3.如何让动态插入的div响应绑定事件

 <div id="testdiv">

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

 

4.如何阻止冒泡事件和默认事件
(1)阻止冒泡事件

 function stopBubble(e) { 

if(e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}; 

 

(2)阻止默认事件

 function stopDefault(e){ 

if(e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
}; 

JavaScript停止冒泡和阻止浏览器默认行为

 

5.翻译:Using store state in a component simply includes returning the state within a computed property , because the store state 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)发送请求给服务器,利用的是xmlHttp.send(null) ,加上null代表火狐和ie都支持
(4)利用xmlHttp的onreadystatechange的事件来监视xmlHttp.readyState的状态,每次改变时都调用函数(回调函数)
(5)在回调函数中处理返回值 利用dom模型写到页面的指定位置 实现局部刷新

var XHR=null;
var XHRcreate=function() {
if (window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
XHR = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (XHR.overrideMimeType) {
XHR.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6,IE5.5,IE5
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
XHR = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
}
XHRcreate();
XHR.onreadystatechange = callback;
//XHR.open("GET","login_verify.jsp?name="+ userName,true);
//XHR.send(null);
XHR.open("POST","AJAXXMLServer",true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XHR.send("name=" + userName);
function callback() {
//判断对象的状态是交互完成
if (XHR.readyState == 4) {
//判断http的交互是否成功
if (XHR.status == 200) {
var responseText = XHR.responseText;
//通过dom的方式找到div标签所对应的元素节点(为了简便,这里客户端的程序未写了)
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
} else {
alert("error!");
}
}
}

 

7.new操作符做了什么?


(1)创建了一个空对象

 var obj = new object();

 

(2)设置原型链

 obj._proto_ = fn.prototype;

 

(3)让fn的this指向obj,并执行fn的函数体

 var result = fn.call(obj);

 

(4)判断fn的返回值类型,如果是值类型,返回obj。如果是引用类型,就返回这个引用类型的对象。

 if (typeof(result) == "object"){ 

fnObj = result;
} else {
fnObj = obj;

8.写出3种异步加载方案

异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。异步加载主要有以下三种方式:
(1)async:

定义:async 属性规定一旦脚本可用,则会异步执行。
用法:<script type="text/javascript" src="async.js" async="async"></script>
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async=”async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行);
如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行;
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本 。


(2)defer:

只支持IE
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
如果您的脚本不会改变文档的内容,可将 defer 属性加入到

<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script> 

 

(3)创建script,插入到DOM中,加载完毕后callBack 

function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(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-transform

cursor、visibility、list-style

 

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

transition、transform、animation

 

4、Promise的例子

function aaa(){

var p = new Promise(function(resolve,reject){

setTimeout(function(){

console.log('11111');

resolve('2222'); },1000); });

return p;}

aaa().then(function(data){

console.log(data);

});

 

5、css绘制一个直角梯形

一开始想到了border,但设置了高度,所以没有成功

<head>

<style>

.mask{ height: 0; width: 100px; border-top: 100px solid red; border-left: 37px solid transparent; }

</style>

</head>

<body>

<div class="mask"></div>

</body>

 

6、HTTP协议请求方式

get、post、put、head、connect、trace、options、delete

18年

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规范吗,列举一些你所知道的差别

答案请参考:https://blog.csdn.net/chenjuan1993/article/details/80952918

 

 

转载于:https://www.cnblogs.com/lsz-lsc/p/11394410.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值