美丽联合2018校招前端开发工程师笔试试卷及解析

水深无声 2022-05-29 09:13 243阅读 0赞

**1、以下选项，全部属于块级元素的一项是？ ( )**

![WEBRESOURCE1f46dbc894299064d80bcbb1b80224e6][]

解析： 块级元素:

特点：

1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

2.元素的高度、宽度、行高和顶底边距都是可以设置的。

3.元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素：

h1~h6,hr

div,dir(目录列表),dl(定义列表)

table,ul.ol,li,form,fieldset(from控制组)

p,pre

address,blockquote,center

menu(菜单列表)

noframes(对于不支持frame的浏览器显示此区块内容)

noscript(对于不支持script的浏览器显示此内容)

**2、** **下列js可以让一个input的背景颜色变成红色的是？**

![WEBRESOURCEb117fca33ea7aab345d9b16ba786b512][]

**3、** **下面CSS3新增伪类中不正确的一个是？**

![WEBRESOURCE85b3012120df6b7b03e23ea2f464834d][]

**解析：** p:last-of-type         选择其父元素的最后的一个P元素

p:last-child            选择其父元素的最后子元素(一定是P才行)

p:first-of-type        选择其父元素的首个P元素

p:first-child           选择其父元素的首个p元素(一定是p才行)

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)

**选第N个**

p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)   ........................从最后一个子元素开始计数

**4、下面代码的运行结果是**

![300823_1505813582351_54F3F337FB2260A3F282218A6A41AC14][]

![WEBRESOURCE4575e5b604f49d72e9f622c92df9f73d][]

解析： 延迟函数的回调会在循环条件结束时再执行，即使定时器执行的是setTimeout(..., 0)，因此会每次输出一个3来。

**5、** **'abcdefg'.substring(\_\_\_\_)的结果是”c" **  **这道题答案错了，应该是C**

![WEBRESOURCE0025d7c2df081c65c1cf8f50a563b371][]

解析：自己跑了一遍，答案是C

![WEBRESOURCE1bee405a6e914e784a71314f7d41c2a6][]

**6、** **以下可以设置表单元素为必填项的是**

![WEBRESOURCE2ba29d487f5f5c0a167a953224b269d3][]

**7、网页中颜色rgb(255,0,0)转换为16进制写法正确的是**

![WEBRESOURCEf8b77cebe0e691aa84ca00e2d444dfb0][]

**8、请填入数字，使得输出结果为 1234567 **

![300823_1505813368975_AB0BA8D10F61EDE4F9BC5384E0EA31F1][]

![WEBRESOURCEa99aaf7ce8f610c12c4e6fe186227d22][]

解析： 这里的考点是定时器函数间隔设置为0时是表示语句结束之后立即执行该定时器函数，这里的执行顺序是由上至下的，也就是，不带定时器的console执行之后立马依次执行间隔设置为0的定时函数，然后再是300ms间隔的定时器函数

**9、** **向当前\#list的最后元素之后添加100个新的li节点，合理的操作方式是？**

![300823_1505813871500_9DC1950B2AD5ADC5287FD0D759E4B53B][]

![WEBRESOURCE395d303e1ed26750c4f909181ad48cdf][]

解析： createDocumentFragment方法会创建一个文档片段，它的变化不会引起DOM树的重新渲染，从而不会导致性能问题。最后将创建的文档片段添加到DOM树中即可仅发生一次渲染就实现目标。

**10、** **以下的代码，从上到下img标签的背景色依次是 **

![300823_1505813946375_52788E971C0BEA04E8071D25B3AC3DCC][]

![WEBRESOURCEc0cf3a15354856c673fdfcb4ebbd5d81][]

解析： p:nth-child(even) \{\}

选择其父元素下偶数位的子元素（不论类别），且子元素为p元素。:nth-child()的参数从1开始。

p:last-child \{\}

选择其父元素最后一个子元素，且该子元素为p元素。如果最后一个子元素不为p，则该选择器不生效。

1、第一个p标签下的img，blue

2、第二个p标签，为父元素.list 下的第二个子元素，red

3、第三第四个p标签，位于父元素.list下的div中。所以上面两个伪类选择器不生效，blue

4、第五个p标签，该标签位于父元素.list下的第四个，:nth-child 选择器生效，red。这里要注意，.list>p:last-child并不是选择父元素.list中最后一个p元素，而是如果.list最后一个子元素为p元素的话，就选择它，否则不选择。

5、第六个p标签，同第三点，blue

**11、** **以下说法中错误的是**

![WEBRESOURCE1e4f8d56d941b7f732fe4a386c37aa08][]

**解析：** position：absolute;不一定是相对于父元素，可能是只有子绝父相的情况下才符合。

A中相对定位，元素位移参照为自己原有位置

在Microsoft Internet Explorer 中，盒模型默认使用的是 content-box

**12、** **下列不等于true是**

![WEBRESOURCE329d31484cc79cbefc72e6c5040cc572][]

**13、以下能用来设置网页数值的单位的是**

![WEBRESOURCE56b414b06499ef17d58b09874089ce1b][]

**14、以下说法中正确的是**

![WEBRESOURCEeaf70be6618463e45bda8a82c6ffee5f][]

**15、以下结果等于字符串string的是**

![WEBRESOURCE1937e998b4e90b911725809a94e23a84][]

**16、以下关于箭头函数的说法正确的是 **

![WEBRESOURCE931932a7a7129d607ee9cd8e3a3f8ca7][]

**17、关于栈（stack）和堆（heap），下列说法正确的是**

![WEBRESOURCE32bb592c1fd39c7ae357d7f85cd9f44a][]

**18、以下关于JSON的说法错误的是**

![WEBRESOURCE602b9b07868762869b14f12533606489][]

**解析：** JSON基于  [ECMAScript][]  (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：

\{"firstName": "Json"\}

\[\]表示数组。

多个键值对之间用逗号分开。

**19、同源策略指哪几部分相同**

![WEBRESOURCE2497a78832ba62d33ea77cc32467563c][]

**解析：** 同源是指，域名，协议，端口相同

**20、以下关于同源策略的说法错误的是**

![WEBRESOURCEcb40707e0486083e3bf6f586ed8d9b83][]

**解析：** B.端口、协议、域名相同才叫同源。

C.同源策略是针对浏览器的，服务端不是浏览器。

**21、** **以下描述正确的是？**

![300823_1505814727829_70CD04AB42DA43E9BE917815F8C6E2E9][]

![WEBRESOURCE5f15f8b8aeca5bcae426ea31bdbff1bd][]

解析： A. 调用的是来各自实例中的方法

B. 原型不会被修改

C. 查找方式是向上查找, 因此正确

D. 修改原型的同名方法不会影响本身的方法

**22、** **在前端开发过程中使用 use strict 模式的目的是什么？**

![WEBRESOURCE7b3a76f26e0b8e2b949505f66489d4f8][]

**23、HTTP协议中可以控制缓存的有哪些？**

![WEBRESOURCE024dd01b07b9cefe8341649da344395b][]

**解析：** 1.Expires：过期时间。（HTTP 1.0的字段）

浏览器再次发起请求的时候会先检查是否超过这个时间，如果没超过则直接从缓存中读取信息。但是如果浏览器的时间和服务器的时间不一致，就会出现问题。

2.Cache-control：max-age=6000(毫秒)/no-cache/no-store/private/public （HTTP 1.1的字段）

同时设置Expires和max-age的情况下，使用max-age

3.Last-Modified：最后一次修改时间。

4.Etag：被请求变量的实体标记

**24、** **以下对Javascript作用域链的理解正确的是?**

![WEBRESOURCE98f6bb41c47097d1320fa3bc3c8910fe][]

**25、cookie 和 session 的区别描述正确的是**

![WEBRESOURCE4ea64628e428c7134a5f915b082a44aa][]

**解析：** Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

**26、声明var a = b = true;，下列b等于true的是**

![WEBRESOURCEd9b3620fa1e01608e13e35737f018e27][]

**27、下列无效的CSS选择器的是**

![WEBRESOURCE1ab26b3383478c62f66e01511389c418][]

**28、关于XML和JSON区别的描述正确的是**

![WEBRESOURCE576186b742d80ee7ef9af1b6d9e1b5d7][]

**解析：** （1）可读性方面：基本相同，XML的可读性比较好；

（2）可扩展性方面：都具有良好的扩展性；

（3）编码难度方面：相对而言，JSON的编码比较容易；

（4）解码难度：JSON的解码难度基本为零，XML需要考虑子节点和父节点；

（5）数据体积方面：JSON相对于XML来讲，数据体积小，传递的速度比较快；

（6）数据交互方面：JSON与javascript的交互更加方便，更容易解析处理，更好的数据交互；

（7）数据描述方面：XML对数据描述性比较好；

（8）传输速度方面：JSON的速度远远快于XML。

**29、** **以下代码，想要实现 a.add() 计算 a.x+a.y 的值，以下可行的方式有**

![300823_1505815100948_5D4B38F93E26C17B6C64B0E2D491407D][]

![WEBRESOURCE238d4b7a0437053591306879c32271b3][]

解析： d选项得是 b.add.bind(a)(); 才可以运行返回 this.x+this.y 的结果

**30、** **下列哪些情况可触发reflow**

![WEBRESOURCEe38d321056f5299876b66e94b98e2173][]

**解析：**

**体现：**

repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。

**如何触发：**

style变动造成repaint和reflow。

不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。

除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

**常见触发场景：**

1、触发repaint：

*  color的修改，如color=\#ddd；
 *  text-align的修改，如text-align=center；
 *  a:hover也会造成重绘。
 *  :hover引起的颜色等不导致页面回流的style变动。
 *  等等太多，一时间写出来也太难想了。

2、触发reflow：

*  width/height/border/margin/padding的修改，如width=778px；
 *  动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
 *  appendChild等DOM元素操作；
 *  font类style的修改；
 *  background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
 *  scroll页面，这个不可避免；
 *  resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
 *  读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

**31、** **试着编写一个 arrayMerge() 函数，实现该函数被调用时，传递任意数量的数组，返回一个合并后的数组（可不局限于一种实现）。**

**function**  arrMerge()\{

**var**  res = \[\];

**for** (let i=0;i<arguments.length;i++)\{

res = res.concat(arguments\[i\]);

**return**  res;

console.log(arrMerge(\[1,2,3\],\[2,3\]))

**32** **、** **请用代码实现如下倒计时组件（包括HTML，JS，CSS代码），要求：支持单页面多次调用及移动端显示；**

![300823_1505815434450_A7F8C4B78223CB0BC5C95DC5B0C231CB][]

自己还没有写出来，可以参考下这个 [http://flipclockjs.com/][http_flipclockjs.com]  该插件上有所有的翻页时钟的源码。

[WEBRESOURCE1f46dbc894299064d80bcbb1b80224e6]: https://note.youdao.com/yws/res/1554/WEBRESOURCE1f46dbc894299064d80bcbb1b80224e6
[WEBRESOURCEb117fca33ea7aab345d9b16ba786b512]: https://note.youdao.com/yws/res/1552/WEBRESOURCEb117fca33ea7aab345d9b16ba786b512
[WEBRESOURCE85b3012120df6b7b03e23ea2f464834d]: https://note.youdao.com/yws/res/1557/WEBRESOURCE85b3012120df6b7b03e23ea2f464834d
[300823_1505813582351_54F3F337FB2260A3F282218A6A41AC14]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505813582351_54F3F337FB2260A3F282218A6A41AC14
[WEBRESOURCE4575e5b604f49d72e9f622c92df9f73d]: https://note.youdao.com/yws/res/1561/WEBRESOURCE4575e5b604f49d72e9f622c92df9f73d
[WEBRESOURCE0025d7c2df081c65c1cf8f50a563b371]: https://note.youdao.com/yws/res/1566/WEBRESOURCE0025d7c2df081c65c1cf8f50a563b371
[WEBRESOURCE1bee405a6e914e784a71314f7d41c2a6]: https://note.youdao.com/yws/res/1569/WEBRESOURCE1bee405a6e914e784a71314f7d41c2a6
[WEBRESOURCE2ba29d487f5f5c0a167a953224b269d3]: https://note.youdao.com/yws/res/1572/WEBRESOURCE2ba29d487f5f5c0a167a953224b269d3
[WEBRESOURCEf8b77cebe0e691aa84ca00e2d444dfb0]: https://note.youdao.com/yws/res/1575/WEBRESOURCEf8b77cebe0e691aa84ca00e2d444dfb0
[300823_1505813368975_AB0BA8D10F61EDE4F9BC5384E0EA31F1]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505813368975_AB0BA8D10F61EDE4F9BC5384E0EA31F1
[WEBRESOURCEa99aaf7ce8f610c12c4e6fe186227d22]: https://note.youdao.com/yws/res/1578/WEBRESOURCEa99aaf7ce8f610c12c4e6fe186227d22
[300823_1505813871500_9DC1950B2AD5ADC5287FD0D759E4B53B]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505813871500_9DC1950B2AD5ADC5287FD0D759E4B53B
[WEBRESOURCE395d303e1ed26750c4f909181ad48cdf]: https://note.youdao.com/yws/res/1582/WEBRESOURCE395d303e1ed26750c4f909181ad48cdf
[300823_1505813946375_52788E971C0BEA04E8071D25B3AC3DCC]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505813946375_52788E971C0BEA04E8071D25B3AC3DCC
[WEBRESOURCEc0cf3a15354856c673fdfcb4ebbd5d81]: https://note.youdao.com/yws/res/1587/WEBRESOURCEc0cf3a15354856c673fdfcb4ebbd5d81
[WEBRESOURCE1e4f8d56d941b7f732fe4a386c37aa08]: https://note.youdao.com/yws/res/1592/WEBRESOURCE1e4f8d56d941b7f732fe4a386c37aa08
[WEBRESOURCE329d31484cc79cbefc72e6c5040cc572]: https://note.youdao.com/yws/res/1598/WEBRESOURCE329d31484cc79cbefc72e6c5040cc572
[WEBRESOURCE56b414b06499ef17d58b09874089ce1b]: https://note.youdao.com/yws/res/1601/WEBRESOURCE56b414b06499ef17d58b09874089ce1b
[WEBRESOURCEeaf70be6618463e45bda8a82c6ffee5f]: https://note.youdao.com/yws/res/1605/WEBRESOURCEeaf70be6618463e45bda8a82c6ffee5f
[WEBRESOURCE1937e998b4e90b911725809a94e23a84]: https://note.youdao.com/yws/res/1609/WEBRESOURCE1937e998b4e90b911725809a94e23a84
[WEBRESOURCE931932a7a7129d607ee9cd8e3a3f8ca7]: https://note.youdao.com/yws/res/1612/WEBRESOURCE931932a7a7129d607ee9cd8e3a3f8ca7
[WEBRESOURCE32bb592c1fd39c7ae357d7f85cd9f44a]: https://note.youdao.com/yws/res/1615/WEBRESOURCE32bb592c1fd39c7ae357d7f85cd9f44a
[WEBRESOURCE602b9b07868762869b14f12533606489]: https://note.youdao.com/yws/res/1619/WEBRESOURCE602b9b07868762869b14f12533606489
[ECMAScript]: https://wapbaike.baidu.com/item/ECMAScript
[WEBRESOURCE2497a78832ba62d33ea77cc32467563c]: https://note.youdao.com/yws/res/1623/WEBRESOURCE2497a78832ba62d33ea77cc32467563c
[WEBRESOURCEcb40707e0486083e3bf6f586ed8d9b83]: https://note.youdao.com/yws/res/1627/WEBRESOURCEcb40707e0486083e3bf6f586ed8d9b83
[300823_1505814727829_70CD04AB42DA43E9BE917815F8C6E2E9]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505814727829_70CD04AB42DA43E9BE917815F8C6E2E9
[WEBRESOURCE5f15f8b8aeca5bcae426ea31bdbff1bd]: https://note.youdao.com/yws/res/1633/WEBRESOURCE5f15f8b8aeca5bcae426ea31bdbff1bd
[WEBRESOURCE7b3a76f26e0b8e2b949505f66489d4f8]: https://note.youdao.com/yws/res/1637/WEBRESOURCE7b3a76f26e0b8e2b949505f66489d4f8
[WEBRESOURCE024dd01b07b9cefe8341649da344395b]: https://note.youdao.com/yws/res/1640/WEBRESOURCE024dd01b07b9cefe8341649da344395b
[WEBRESOURCE98f6bb41c47097d1320fa3bc3c8910fe]: https://note.youdao.com/yws/res/1644/WEBRESOURCE98f6bb41c47097d1320fa3bc3c8910fe
[WEBRESOURCE4ea64628e428c7134a5f915b082a44aa]: https://note.youdao.com/yws/res/1647/WEBRESOURCE4ea64628e428c7134a5f915b082a44aa
[WEBRESOURCEd9b3620fa1e01608e13e35737f018e27]: https://note.youdao.com/yws/res/1651/WEBRESOURCEd9b3620fa1e01608e13e35737f018e27
[WEBRESOURCE1ab26b3383478c62f66e01511389c418]: https://note.youdao.com/yws/res/1654/WEBRESOURCE1ab26b3383478c62f66e01511389c418
[WEBRESOURCE576186b742d80ee7ef9af1b6d9e1b5d7]: https://note.youdao.com/yws/res/1658/WEBRESOURCE576186b742d80ee7ef9af1b6d9e1b5d7
[300823_1505815100948_5D4B38F93E26C17B6C64B0E2D491407D]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505815100948_5D4B38F93E26C17B6C64B0E2D491407D
[WEBRESOURCE238d4b7a0437053591306879c32271b3]: https://note.youdao.com/yws/res/1663/WEBRESOURCE238d4b7a0437053591306879c32271b3
[WEBRESOURCEe38d321056f5299876b66e94b98e2173]: https://note.youdao.com/yws/res/1667/WEBRESOURCEe38d321056f5299876b66e94b98e2173
[300823_1505815434450_A7F8C4B78223CB0BC5C95DC5B0C231CB]: https://uploadfiles.nowcoder.net/images/20170919/300823_1505815434450_A7F8C4B78223CB0BC5C95DC5B0C231CB
[http_flipclockjs.com]: http://flipclockjs.com/