福利1：某知名互联网下载服务提供商前端工程师笔试题
题目部分
一、单选题
1．下列选项中，不是把网页抽象成三部分（HTML、CSS和JavaScript）后的优点的是（ ）。
A．增强HTML文档的可读性
B．跨平台，可方便迁移到不同设备中
C．在HTML文档中可按需加载相应的文件，减少不必要的请求
D．将相关功能的文件集中到一起，更易于维护和调用
2．以下能够控制元素的盒模型的属性是（ ）。
A．box-sizing B．box-shadow C．box-flex D．box-pack
3．常用的HTTP位于TCP/IP的（ ）。
A．应用层 B．传输层 C．表示层D．会话层
4．对下面代码的描述中，正确的是（ ）。
A．回调函数会在延迟2s后执行一次
B．回调函数会以2s为间隔重复执行
C．回调函数会在延迟2min后执行一次
D．回调函数会重复执行2000次
5．敏捷软件开发方法是一种（ ）。
A．数学观 B．建模观 C．工程观D．协作观
6．某公司使用包过滤防火墙控制进出公司局域网的数据，在不考虑使用代理服务器的情况下，下面描述错误的是（ ）。
A．该防火墙能够使公司员工只能访问Internet上与其业务联系的公司的IP地址
B．该防火墙能够仅允许HTTP通过，不允许其他协议通过，如TCP/UDP
C．该防火墙能够使员工不能直接访问FTP服务器端口号为21的FTP地址
D．该防火墙能够仅允许公司中具有某些特定IP地址的计算机可以访问外部网络
7．为了使虚存系统有效地发挥其预期的作用，所运行的程序应具有的特性是（ ）。
A．该程序不应含有过多的I/O操作
B．该程序大小不应超过实际的内存容量
C．该程序的指令相关不应过多
D．该程序应当具有较好的局部性
8．如果入栈序列是a1，a3，a5，a2，a4，a6，出栈序列是a5，a4，a2，a6，a3，a1，那么栈的容量最小是（ ）。
A．2 B．3 C．4 D．5
9．对于一棵排序二叉树，可以得到有序序列的遍历方式是（ ）遍历。
A．前序 B．中序 C．后序 D．都可以
二、多选题
1．以下对网页的描述中，正确的是（ ）。
A．网页由HTML、CSS和JavaScript组成
B．HTML负责内容和结构
C．CSS负责样式呈现
D．JavaScript负责动态交互
2．以下属于CSS3中全新的特性的是（ ）。
A．选择器 B．动画 C．伸缩盒D．阴影
3．jQuery中被誉为工厂函数的是（ ）。
A．ready() B．jQuery() C．$() D．function()
三、填空题
1．下面的div元素，在W3C盒模型中的宽度是__________px，在IE盒模型中的宽度是__________px。
2．执行下面的代码，在控制台输出的x为__________，y为________。
3．执行下面的代码后，在控制台输出的y为__________。
4．0 || 1得到的结果为__________，0 && 1 得到的结果为__________。
四、问答题
1．HTML的含义是什么？
2．什么是XHTML？
3．什么是CSS预处理器？
4．什么是盒模型？
5．什么是互联网？
6．请简单介绍一下HTTP。
7．相等（=）和全等 （===）运算符有哪些区别？
8．split()与join()方法有哪些区别?
9．两个运算符typeof与instanceof有哪些区别？
五、编程题
1．用纯CSS实现一个三角形。
2．请用JavaScript实现冒泡排序。
3．请实现一个遍历至100的循环，在能被3整除时输出“three”，在能被5整除时输出 “five”，在能同时被3和5整除时输出“all”。
4．不借助第三方类库，用多种方式读取下面文本框中的value属性值。
六、开放题
1．你对我们公司有什么了解？
2．如果你在这次面试中没有被录用，你会怎么办?
3．如果你被录取了，接下来将如何开展工作？
详细解读
一、单选题
1．答案：B
分析：把网页抽象成三部分主要是为了使职责更分明，并且网页并不会因为抽象成三部分后才能跨平台。因此，选项B的描述并不准确。
2．答案：A
分析：选项B中的box-shadow属性用于添加阴影；C、D两个选项中的box-flex和box-pack都是旧版本的伸缩属性，前者用于创建伸缩容器，后者用于主轴对齐。
3．答案：A
分析：TCP/IP是为互联网服务的协议簇，它将通信过程抽象为四层，分别是应用层、传输层、互联网层和网络接口层。SMTP、FTP、HTTP等常用的协议都位于应用层。
4．答案：B
分析：setInterval()是一个定时器函数，它接收两个参数，第一个参数是要执行的代码（字符串或函数），第二个参数是延迟时间（以毫秒为单位）。第一个参数中的代码能在指定的时间后重复执行，由此可知，只有选项B的描述是正确的。
5．答案：D
分析：敏捷软件开发方法是一种应对快速变化的需求的软件开发能力。它们的具体名称、理念、过程和术语都不尽相同，相对于“非敏捷”，敏捷更强调程序员团队与业务专家之间的紧密协作、面对面的沟通（认为比书面的文档更有效）、频繁交付新的软件版本、紧凑而自我组织型的团队、能够很好地适应需求变化的代码编写和团队组织方法，也更注重作为软件开发中人的作用。所以，敏捷软件开发方法是一种创作与交流的协作观。所以，选项D正确。
6．答案：B
分析：包过滤防火墙的作用通常是直接转发报文，它对用户完全透明，而且速度较快，一般包含有一个包检查模块（通常称为包过滤器），可以根据数据包中的各项信息来控制站点与站点、站点与网络、网络与网络之间的相互访问，但无法控制传输数据的内容，因为数据内容属于应用层，而包过滤器工作在传输层和网络层。
对于选项A与选项D，无论是源IP地址还是目的IP地址，都是网络层的IP地址，都在包过滤防火墙的控制范围内。因此，通过配置目的IP和源IP，可以使公司员工只能访问互联网上与其业务联系的公司的IP地址，可以仅允许公司中具有某些特定IP地址的计算机可以访问外部网络。所以，选项A与选项D中的描述是正确的。
对于选项B，由于HTTP是超文本传输协议，是应用层协议，包过滤防火墙工作在传输层和网络层，因此，它无法实现对应用层协议的限制。所以，选项B中的描述是错误的。
对于选项C，默认情况下，FTP开放的端口号是21，它是传输层TCP的端口号。因此，虽然FTP是应用层协议，但是通过包过滤防火墙可以限制TCP端口号，即可以使员工不能直接访问FTP服务器端口号为21的FTP地址。所以，选项C中的描述是正确的。
7．答案：D
分析：对于选项A，程序不应含有过多的I/O操作，是原因，但这不是主要原因。所以，选项A错误。
对于选项B，显然该描述正好和虚存的目的相悖。所以，选项B错误。
对于选项C，该程序的指令相关不应过多，是原因，但这不是主要原因。所以，选项C错误。
对于选项D，程序应当具有较好的局部性，可以使虚存系统有效地发挥其预期的作用，描述正确。所以，选项D正确。
8．答案：C
分析：本题解题的关键是了解栈的后进先出的性质。通过入栈序列与出栈序列可以模拟一下其具体的出栈与入栈过程，过程如下：
第一步：a1进栈，此时栈中元素为1。
第二步：a3进栈，此时栈中元素为2。
第三步：a5进栈，此时栈中元素为3。
第四步：根据进栈出栈顺序，a5出栈，a2进栈，此时栈中元素为3。
第五步：a4进栈，此时栈中元素为4。
第六步：根据进栈出栈顺序，a4出栈，此时栈中元素为3。
第七步：根据进栈出栈顺序，a2出栈，此时栈中元素为2。
第八步：a6进栈，此时栈中元素为3。
第九步：根据进栈出栈顺序，a6出栈，此时栈中元素为2。
第十步：根据进栈出栈顺序，a3出栈，此时栈中元素为1。
第十一步：根据进栈出栈顺序，a1出栈，此时栈中元素为0。
由以上分析可知，栈中元素最多的时候为4个，所以，栈容量至少为4。选项C正确。
9．答案：B
分析：排序二叉树的特点为，对于一个结点而言，所有左子树结点元素的值都小于这个结点元素的值，所有右子树结点的元素的值都大于这个结点元素的值，且左右子树都是排序二叉树。由于中序遍历的顺序为左子树、根、右子树，显然，中序遍历得到的序列是有序的。所以，选项B正确。
二、多选题
1．答案：ABCD
分析：网页由三部分组成，分别是HTML、CSS和JavaScript，三部分的职责正如选项B、选项C和选项D中所描述的那样。
2．答案：BCD
分析：CSS3是一个规范集合，包括升级到版本3的CSS规范以及版本号还是1的新规范，动画、伸缩盒和阴影是CSS3全新的特性。而选项A中的选择器原先就存在，CSS3只是完善了它，使其拥有更丰富的功能。
3．答案：BC
分析：jQuery的工厂函数是选项B中的jQuery()，而该函数还有一个别名，也就是选项C中的“$”，用一个美元符号来代替函数名称。
三、填空题
1．答案：122、100
分析：IE盒模型中内容的宽或高将会包含内边距和边框，题目中div元素的宽度为100px，那么IE盒模型中的宽度也是100px。而W3C盒模型中内容的宽或高并不会包含内边距和边框，如果要获取W3C盒模型的宽度，那么需要把内容的宽度、内边距以及边框相加，在此题中得到的结果是122px。
2．答案：0、1
分析：如果把++运算符单独放在一行，那么它会和下面的语句合并，作为一个整体被解析。本题中的代码相当于“x;++y;”，代码执行后，x变量保持原样，而y变量会加一。
3．答案：0
分析：switch语句中的x变量会与case子语句中的表达式进行全等（===）匹配，由于x变量是一个字符串，而case子语句中的条件是数字，因此无法匹配case子语句，只能执行default子语句中的代码块，y变量最终会被定义为0。
4．答案：1、0
分析：逻辑或（||）在布尔运算过程中，如果碰到真值，那么就会返回这个操作数。由于第一个表达式中的第二个操作数是真值，因此计算结果就是这个值，也就是1。逻辑与（&&）在布尔运算过程中，如果碰到假值，那么就会返回这个操作数。第二个表达式中的第一个操作数就是假值，因此直接返回它，也就是0。
四、问答题
1．答案：HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标记语言。HTML经历过多个版本，包括HTML 2.0、HTML 3.x、HTML 4.x以及最新的HTML 5。HTML源于标准通用标记语言（Standard Generalized Markup Language，SGML），遵循SGML指定的语法和规则，但从HTML 5开始，将不再基于SGML。
2．答案：HTML的格式比较松散，这会导致一些问题，如兼容性差、移植性差等。为了解决上述所列的种种问题，W3C在2000年发布了XHTML 1.0。XHTML是XML的一种应用，作为HTML的一个子集，它完全兼容HTML，但格式更严谨。XHTML有过三个版本，分别是1.0、1.1和2.0。XHTML 1.0与HTML 4.01的不同之处在于语法规则，前者需要按照XML的要求来规范HTML，其中，XML是SGML的一个子集。
3．答案：CSS预处理器（CSS Preprocessor）能为CSS增加编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用、代码冗余、可维护性低的问题。对CSS来说，它不是锦上添花而是雪中送炭，常用的预处理器有Less、Sass和Stylus。
4．答案：盒模型（Box Model，也称为框模型）就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型：W3C盒模型和IE盒模型（IE6以下，不包含IE6以及怪异模式下的IE 5.5+）。两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会包含。
5．答案：互联网一词现在已经家喻户晓，它是由许多网络互联构成的一个巨型网络。早期的网络仅仅是连接计算机，而现代的互联网连接的却是全世界的人。互联网已经不再是单纯的以数据为核心，而是以人为中心，它已经渗透到了生活中的方方面面，颠覆了许多传统模式，例如足不出户就能购物、社交或娱乐。
6．答案：HTTP（HyperText Transfer Protocol）即超文本传输协议，是一种获取网络资源（例如图像、HTML文档）的应用层协议，它是互联网数据通信的基础，由请求和响应构成。通常，首先客户端会发起HTTP请求（在请求报文中会指定资源的URL），然后用传输层的TCP建立连接，最后服务器响应请求，做出应答，回传数据报文。HTTP自问世到现在，经历了几次版本迭代，目前主流的版本是HTTP/1.1，新一代HTTP/2.0是HTTP/1.1的升级版，各方面都超越了前者，但新技术要做到软硬件兼容还需要时间。
7．答案：相等运算符用于比较两个操作数是否相等，操作数会进行类型转换。全等运算符用于比较两个操作数是否严格相等，操作数不会进行类型转换。如下代码所示，第一个表达式的计算结果为true，而第二个表达式的计算结果却为false。
8．答案：首先，两者所属的对象不同，split()方法属于String和RegExp对象，而join()方法属于Array对象；其次，两者的功能不同，split()方法能将字符串分割为数组，join()方法能将数组中的元素衔接成一段字符串。
9．答案：两者之间主要有以下三个方面的区别：
（1）typeof运算符用于检测数据类型，而instanceof运算符用于检测对象之间的关联性。
（2）typeof运算符执行完后会返回一个小写字母的类型字符串，而instanceof运算符执行完后会返回一个布尔值。
（3）typeof运算符只需一个操作数，这个操作数可以是基本类型或函数，而instanceof运算符需要两个操作数，并且左操作数不能是基本类型，右操作数必须是函数，否则运算结果将会没有意义。
五、编程题
1．答案：先将元素（如div）的宽高设为0，边框的宽度设为50px，4个部分的边框可拼成一个正方形。然后将其他三部分的颜色设为透明，剩下的部分就是一个三角形，如下代码所示：
2．答案：冒泡排序是一种最基本的排序算法。其核心思想是比较相邻两个位置的元素，当满足指定的条件时，交换两者的位置；当不满足条件时，保持不变。如果用冒泡排序实现从小到大的排列，那么可以像下面这么写。
3．答案：如果整数A除以非零整数B，得到的商为整数并且余数为零，那么就说明A能被B整除。在JavaScript中，如果对两个整数（即两个操作数）进行取余运算，得到的余数为零，那么就能确定执行了一次整除操作。可以像下面这样按要求输出指定的值。
4．答案：先用4种方式查找到文本框（如下所列），再读取它的value属性。
（1）使用DOM中的查找方法getElementById()获取文本框。
（2）使用Document对象的forms属性，先通过数字索引获取表单元素，再通过控件的id属性获取文本框。
（3）与第二种类似，只是通过id属性获取表单元素，其他都一样。
（4）获取表单元素的方式可以与第二种或第三种一样，但通过Form对象的elements属性来获取文本框，具体代码如下所示：
六、开放题
1．提示：
回答这类问题的时候千万要谨慎，不要泛泛而谈，如果求职者的答案是完全不了解，那么就没有必要继续面试了，当然录用的可能性也几乎就为零了。没有哪一家企业希望对自己一无所知的人成为企业的一员，求职者被录用的机会当然也就很渺茫了。求职者一定要有备而来，事先做好“功课”，多了解一些与企业有关的信息，最好能够表达出对企业有关方面非常感兴趣，所以求职者必须能够谈论关于这个企业的产品、收入、业界声望、服务、形象、目标、管理风格、职工、历史和企业文化等问题，但是也不要表现出对这个企业的一切都了如指掌，最好回答能够体现出自己对该公司做了一些研究，但是不要让面试官被你打败，同时表达出希望能够了解关于公司更多情况的愿望。
针对这样的问题，可以采用这样的态度来开始回答问题：“我觉得贵公司是我最感兴趣的公司之一。在我的求职过程中，我也对比过很多其他同类型企业，我觉得贵公司在员工管理、人才培养、薪酬待遇等方面都非常优秀，出于这些原因，我还是更加倾向于贵公司。”但是也不要这样说：“每个人都告诉我这个公司处于困境中，有各种各样的麻烦，这就是我来这儿的原因”，即使那是你来的真实原因，不管怎么样，还是应该用一个积极的态度来回答这个问题。
有一个小窍门，就是回答的时候，尽量能够与招聘广告或宣讲会上的内容一致，有条件的话，最好能同企业内部员工交流一下，做到知己知彼，那样效果可能会更好。
2．提示：
求职是一个双向选择的过程，有接受就有拒绝，有成功就有失败。所以，作为一名求职者，一定要清楚这一点，有时候即使自己的实力达到了企业的标准，也不能保证万无一失，最终也有可能被企业拒绝。
当面试官对求职者提出此类问题时，并不表示求职者就没有希望了，就一定不会被录用。一般而言，没有哪个面试官是因为要拒绝求职者才提出此类问题。如果真要拒绝求职者，也不用多此一举提出此类问题了。提出这类问题的目的，主要是想考查求职者在遇到挫折时的一种应对措施，以此评价求职者的处事能力，毕竟未来的工作往往会有困难、有挫折。
作为面试官，一般希望求职者在遇到失败时，能够具备以下优良素质：
（1）敢于面对。面对失败不气馁，从心理意志和精神上体现出对这次失败的抵抗力。
（2）自信。相信自己经历了这次之后经过努力一定能行，能够超越自我。
（3）善于反思。对于失败的教训能认真客观地总结，能够从自身的角度找差距，而不是怨天尤人。不要抱怨面试官不是“伯乐”，首先要看自己是不是“千里马”。能够正确对待自己，实事求是地评价自己，辩证地看待自己的长短得失。
（4）能够走出阴影。每一次失败都会给自己的心灵上抹上一层阴影，能克服这一次失败带给自己的心理压力，时刻牢记自己的弱点，防患于未然，加强学习，提高自身素质。
（5）再接再厉，继续努力。能够在以后的学习工作中继续努力，争取取得下一次的成功。
3．提示：
面试官提出该类问题一方面是为了考查求职者的应变能力，另一方面也是为了考查求职者是否有一个良好的规划，因为好的规划是成功的开始。
所以，在回答此类问题时，应该着重突出以下几个方面的内容：
（1）个人适应能力强。强调自己能够尽快熟悉工作环境，融入工作集体，了解本单位的工作职能、组织架构以及自己的工作职责。
（2）谦虚谨慎、低调做人，不自高自大。强调进入一个新单位，面临一个陌生的环境，自己作为一名新人，会有很多问题需要学习，自己一定会积极学习、虚心求教。向领导、向老同志、向同事学习，与他们多交流、多沟通，加深了解，增进感情；不争名夺利，不斤斤计较；识大体、顾大局，争取能够早日胜任新的工作。
（3）服从安排。强调自己会遵守纪律，服从组织安排，在争取自己权益的同时，也顾全企业大局，脚踏实地地从事本职工作。
（4）努力工作。强调自己尽快地进入工作角色，学习岗位相关知识，努力工作，以企业利益最大化为奋斗目标，不断开拓创新，为企业的美好明天贡献自己的力量。
最后我先介绍一下自己，我从事java开发的全栈工程师5年，今年花了一个月整理了一份最适合2018年学习资料，这里有许多想学习Java的，我这有一个java交流群，有兴趣就进群看下，我们有大量的学习资料，还会在群里直播授课
群号：644038439 邀请码：炫迈
扫一扫
6554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
