前端工程师能力评估测试题（2020最新版附答案及解析）

1.下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度    (C)

A.display:inline

B.display:none

C.display:block

D.display:inherit

解析

2.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。(A)

A.True

B.False

解析

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

 

3.新窗口打开网页，用到以下哪个值（B）。

A._self

B._blank

C._top

D._parent

解析

扫描二维码关注公众号，回复： 11630791 查看本文章

4.下面有关jquery事件的响应，描述错误的是？(B)

A.onclick 鼠标点击某个对象

B.onfocus 元素失去焦点

C.onload 是某个页面的css js html 文档结构和图像被完全加载

D.onmousedown 某个鼠标按键被按下

解析

onfocus 获得焦点

onblur 失去焦点

5.flash和js通过什么类如何交互?(B)

A.ExtensionContex

B.ExternalInterface

C.IInterpolator

D.FlexContentHolder

解析

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：

• ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开 在js中可调用的flash内的方法;
• ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

6.元素的alt和title有什么异同，选出正确的说法？(B)

不同的浏览器，表现一样

alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字

以上说法都不正确

解析

alt是html标签的属性，而title既是html标签，又是html属性。
title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

7.下列js可以让一个input的背景颜色变成红色的是？(A)

A.inputElement.style.backgroundColor = 'red';

B.inputElement.backgroundColor = 'red';

C.inputElement.style.backgroundColor = '#0000';

D.inputElement.backgroundColor = '#0000';

解析

一、先看题：

用js让一个input的背景颜色变成红色。

二、思路：

1. 获取该元素
2. 通过该元素拥有的属性或方法来改变元素的样式。

三、细节：

1. 获取元素可以借助document.getElementById()/document.getElementsByTagName()等若干方法，也可以利用层级关系（父子关系、兄弟关系等）。而这一点题目已经直接略过了，它直接给出了该元素的引用名称inputElement。
2. 通过js来改变元素样式的两个最常见的API为：style、className。使用style接口一次只能改变一个样式，而使用className则可以同时改变多个样式，当然前提是已经用css定义该类名的相关样式。
3. backgroundColor? background-color?
   简单说一下：在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析。
   eg:
   inputElement.style.backgroundColor = 'red'; // 这是没问题的
   inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...
   inputElement.style["background-color"] = 'red'; // 这也是可以的
4. 表示红色有若干种方法:
   • 颜色名：red
   • 百分数：rgb(100%, 0%, 0%)
   • 数值：rgb(255, 0, 0)
   • 十六进制：#FF0000
   • 简写的十六进制：#F00

8.下面有关html5标签说法错误的有？(B)

A.<audio> 标签定义声音，比如音乐或其他音频流

B.<canvas> 比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容

C.<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签

D.<command> 标签定义命令按钮，比如单选按钮、复选框或按钮

解析

这里考察HTML标签的使用： <audio> 标签定义声音，比如音乐或其他音频流。 A正确。 <canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 B错误，<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。 <menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 C正确 command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。 D正确。

9.下述有关css属性position的属性值的描述，说法错误的是？(B)

A.static：没有定位，元素出现在正常的流中

B.fixed：生成绝对定位的元素，相对于父元素进行定位

C.relative：生成相对定位的元素，相对于元素本身正常位置进行定位。

D.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

解析

在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

10.面有关浏览器中使用js跨域获取数据的描述，说法错误的是？(A)

A.域名、端口相同，协议不同，属于相同的域

B.js可以使用jsonp进行跨域

C.通过修改document.domain来跨子域

D.使用window.name来进行跨域

解析

1.CORS

CORS（Corss-Origin Resource Sharing,跨资源共享），基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部决定是否给予响应。

2.document.domain

将页面的document.domain设置为相同的值，页面间可以互相访问对方的JavaScript对象。

注意：

不能将值设置为URL中不包含的域；

松散的域名不能再设置为紧绷的域名。

3.图像Ping

var img=new Image();

img.οnlοad=img.οnerrοr=function(){

... ...

}

img.src="url?name=value";

请求数据通过查询字符串的形式发送，响应可以是任意内容，通常是像素图或204响应。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。

缺点：

只能发送GET请求；

无法访问服务器的响应文本，只能用于浏览器与服务器间的单向通信。

4.Jsonp

var script=document.createElement("script");

script.src="url?callback=handleResponse";

document.body.insertBefore(script,document.body.firstChild);

JSONP由两部分组成：回调函数和数据

回调函数是接收到响应时应该在页面中调用的函数，其名字一般在请求中指定。

数据是传入回调函数中的JSON数据。

优点：

能够直接访问响应文本，可用于浏览器与服务器间的双向通信。

缺点：

JSONP从其他域中加载代码执行，其他域可能不安全；

难以确定JSONP请求是否失败。

5.Comet

Comet可实现服务器向浏览器推送数据。

Comet是实现方式：长轮询和流

短轮询即浏览器定时向服务器发送请求，看有没有数据更新。

长轮询即浏览器向服务器发送一个请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即又向服务器发起一个新请求。其优点是所有浏览器都支持，使用XHR对象和setTimeout()即可实现。

流即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据，页面的整个生命周期内只使用一个HTTP连接。

6.WebSocket

WebSocket可在一个单独的持久连接上提供全双工、双向通信。

WebSocket使用自定义协议，未加密的连接时ws://；加密的链接是wss://。

var webSocket=new WebSocket("ws://");

webSocket.send(message);

webSocket.onmessage=function(event){

var data=event.data;

... ....

}

注意：

必须给WebSocket构造函数传入绝对URL；

WebSocket可以打开任何站点的连接，是否会与某个域中的页面通信，完全取决于服务器；

WebSocket只能发送纯文本数据，对于复杂的数据结构，在发送之前必须进行序列化JSON.stringify(message))。

优点：

在客户端和服务器之间发送非常少的数据，减少字节开销。

11.下面这个JS程序的输出是什么：(A)

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}
 
var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

A.0 1 0

B.0 1 2

C.0 0 0

D.0 0 2

解析

查了红宝石，要点如下：

（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；

（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内，

         但是一旦离开了这个函数，局部变量就无法访问，所有通过返回子函数到一个变量f1的方法，让

         f1指向堆中的函数作用域，这样可以使用局部变量i.

(3)   过程：

   第一次f1()  :f1=Foo()中，先执行Foo(): i = 0,return值返回给f1

 (f1指向子函数   f1()=function(){.....},因为子函数没有 定义i，所以向上找到父函数定义的 i:  )并执行子函数 输出i=0,再自加 i =1(覆盖了父函数Foo 的 i值);

  第二次f1() : 执行的是子函数 Function(){  ..},输出的是父函数 的 i=1,再自加 i =2;

  第一次f2():同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){ ...},所有此i非彼i,输出i=0;如果

               如果再次f2(),那么和第二次f1(),一样输出i=1; 

12.请给出这段代码的运行结果（ C）

<SCRIPT LANGUAGE="JavaScript">
var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);
alert(bb);
</SCRIPT>

A.1 1

B.1 2

C.2 1

D.2 2

解析

函数体内，bb并没有使用var来定义，按理说这个bb在预处理的时候应该是window的属性。但在这里，函数声明的时候，带了一个参数bb，也就是相当于在函数体内声明了var bb。所以，函数里的bb就是函数活动对象的属性。所以函数执行时会输出2。函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。

13.下面符合一个有效的javascript变量定义规则的是？(A)

A._$te$t2

B.with

C.a bc

D.2a

解析

A正确;

B是关键字；

C有空格；

D开头为数字；

第一个字符必须是一个 ASCII 字母（大小写均可），或一个下划线(_)。注意第一个字符不能是数字。 

后续的字符必须是字母、数字或下划线。 
变量名称一定不能是 保留字。 

14.下面有关javascript系统方法的描述，错误的是？(B)

A.parseFloat方法：该方法将一个字符串转换成对应的小数

B.isNaN方法：该方法用于检测参数是否为数值型，如果是，返回true，否则，返回false。

C.escape方法： 该方法返回对一个字符串编码后的结果字符串

D.eval方法：该方法将某个参数字符串作为一个JavaScript执行

解析

B;

NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。

针对NaN的特点，ECMAScript定义了isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10”或Boolean值。而任何不能被转换为数值的值都会导致这个函数返回true。

15.下面有关javascript常见事件的触发情况，描述错误的是？(C)

A.onmousedown：某个鼠标按键被按下

B.onkeypress：某个键盘的键被按下或按住

C.onblur：元素获得焦点

D.onchange：用户改变域的内容

解析

常见事件：

    1. 点击事件：

        1. onclick：单击事件

        2. ondblclick：双击事件

    2. 焦点事件
        1. onblur：失去焦点
        2. onfocus:元素获得焦点。
    3. 加载事件：
        1. onload：一张页面或一幅图像完成加载。
    4. 鼠标事件：
        1. onmousedown    鼠标按钮被按下。
        2. onmouseup    鼠标按键被松开。
        3. onmousemove    鼠标被移动。
        4. onmouseover    鼠标移到某元素之上。

        5. onmouseout    鼠标从某元素移开。

    5. 键盘事件：
        1. onkeydown    某个键盘按键被按下。    
        2. onkeyup        某个键盘按键被松开。
        3. onkeypress    某个键盘按键被按下并松开。

    6. 选择和改变
        1. onchange    域的内容被改变。
        2. onselect    文本被选中。
    7. 表单事件：
        1. onsubmit    确认按钮被点击。
        2. onreset    重置按钮被点击。

16.下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？(C)

A.<!DOCTYPE> 声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档

B.在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

C.DOCTYPE不存在或格式不正确会导致文档以标准模式呈现

D.浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

解析

文档类型

    DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。

 DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。

如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。

浏览器模式

    浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE 切换

对于 HTML 4.01 文档，

• 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。

• 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。

• 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。

• DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

17.下面有关JavaScript中 call和apply的描述，错误的是？B

A.call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

B.两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

C.apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

D.call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

解析

B

相同点:两个方法产生的 作用是完全一样的

不同点:方法传递的参数不同

call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递。

18.下述有关border:none以及border:0的区别，描述错误的是？(CD)

A.border:none表示边框样式无

B.border:0表示边框宽度为0

C.当定义了border:none，即隐藏了边框的显示，实际就是边框宽度为0

D.当定义边框时，仅设置边框宽度也可以达到显示的效果

解析

1.效果

border-style:none;//无边框         

border-width:0;//边框宽度为0px  

2.区别

（1）性能差异

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

Chrome：

border:none;>> border:initial none initial;

border:0;>> border:0 initial  initial ;

Firefox、360：

border:none; >>border:medium none;

border:0;>> border:0 none;

计算出的样式：

border:0px none 元素color属性值;

（2）浏览器兼容

IE7-不支持border:none;

W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。

19.下面有关CSS sprites说法错误的是？(C)

A.允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

B.利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位

C.CSS Sprites虽然增加了总的图片的字节，但是很好地减少网页的http请求，从而大大的提高页面的性能

D.CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

解析

CSS Sprites

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

2.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

20.下面列出的浏览器，无webkit内核的是（D）

A.chrome

B.Safari

C.搜狗浏览器

D.firefox

解析

D。浏览器 的内核引擎，基本上是四分天下：1）Trident: IE 以Trident 作为内核引擎；2)Gecko: Firefox 是基于 Gecko 开发；3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

注：2013年2月Opera宣布转向WebKit引擎

注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

关注公众号，获取更多干货