阿里巴巴 前端工程师面试题
阿里巴巴2017秋招前端笔试题
下面的 JSX 代码中,哪一个无法达到预期的效果?
正确答案: C
<h2>Hello World</h2>
<input type=”checkbox”/>
<div class=”msg-box”>{msg}</div>
<label htmlFor=”name”>Leo</label>
<div style={{height: 50}}></div>
<img src={imgSrc}/>
正则表达式 /a+(bab)?(caac)*/ ,下列选项中是该正则表达式的子集是?
正确答案: C
/(bab)(caca)/
/a(bab){2}(caac)*/
/a{2}/
/a+(bab){0,1}(ca)+(ca)/
/a(^bab)+(caac){1,}/
/a+(babc){2,}(acc){1,}/
下列说法错误的是:
正确答案: C
在Blink和WebKit的浏览器中,某个元素具有3D或透视变换(perspective transform)的CSS属性,会让浏览器创建单独的图层。
我们平常会使用left和top属性来修改元素的位置,但left和top会触发重布局,取而代之的更好方法是使用translate,这个不会触发重布局。
移动端要想动画性能流畅,应该使用3D硬件加速,因此最好给页面中的元素尽量添加translate3d或者translateZ(0)来触发3D硬件加速。
解决浏览器渲染的性能问题时,首要目标就是要避免层的重绘和重排。
将数组 var a=[1,2,3]
变成数组 [4,3,2,1]
下面的方式正确的是?
正确答案: A C
a.reverse().unshift(4)
a.push(4).reverse()
a.push(4); a.reverse()
a.splice(3,1,4).reverse()
目前 HTTP2 协议已经逐渐普及到日常服务器中,以下对于 HTTP2 协议描述正确的是:
正确答案: A B C D
所有http请求都建立在一个TCP请求上,实现多路复用
可以给请求添加优先级
服务器主动推送 server push
HTTP2的头部会减小,从而减少流量传输
请问下面哪种方式可以在不改变原来数组的情况下,拷贝出数组 b ,且满足 b!=a 。
例如数组 a
为 [1,2,3]
。
正确答案: B D
let b=a;
let b=a.slice();
let b=a.splice(0,0);
let b=a.concat();
以下代码,分别给节点 #box 增加如下样式,问节点 #box 距离 body 的上边距是多少?
<body style=”margin:0;padding:0”>
<div id=”box” style=”top:10px;margin:20px 10px;”>
</div>
</body>
如果设置 position: static ; 则上边距为____ px
如果设置 position: relative ; 则上边距为____ px
如果设置 position: absolute ; 则上边距为____ px
如果设置 position: sticky ; 则滚动起来上边距为____ px
position: static,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性,只有margin:20px 10px好使,margin-top为20px,所以上边距为20px
position: relative ; 元素设置相对于原本位置的定位,margin-top的20px加上top的10ox为30px
position: absolute 同上,只不过这个定位是脱离文档流的
position: sticky 元素未滚动,在当前可视区域他的top值不生效,只有margin生效,滚动起来后margin 失效,top值生效
我们需要实现动态加载一个 JavaScript 资源,但是有几处不知道如何处理,需要您的帮助完成这一项工作
var script = document.createElement(“script”);
var head = document.getElementsByTagName(“head”)[0];
script.type = “text/javascript”;
script.src = “//i.alicdn.com/resource.js”;
// 绑定资源加载成功事件
script.aaa = function( ){
// 判断资源加载状态是否为加载成功或加载完成
if(bbb.test (script.ccc ) ) {
script.onreadystatechange = null;
. . . .
}
};
// 绑定资源加载失败事件
script.ddd = function( ) {
. . . .
};
head.insertBefore (script , head.firstChild)
参考答案
(1) onreadystatechange
(2) /^(loaded|complete)$/
(3) readyState
(4) onerror
请使用两种不同的CSS方法(要求dom结构不同)实现下图所示的条形图。
从左到右的条形分别记为A,B,C,D,E。A的高度为30%,颜色为#f00;B的高度为80%,颜色为#ddd;C的高度为70%,颜色为#0fd;D的高度为60%,颜色为#ff0;E的高度为90%,颜色为#234,每个条形之间的距离可以任意设置(可以考虑使用CSS3新属性来实现)。
https://www.nowcoder.com/test/question/done?tid=39075211&qid=50532#summary
请实现方法 parse ,作用如下:
var object = {
b: { c: 4 }, d: [{ e: 5 }, { e: 6 }]
};
console.log( parse(object, ‘b.c’) == 4 ) //true
console.log( parse(object, ‘d[0].e’) == 5 ) //true
console.log( parse(object, ‘d.0.e’) == 5 ) //true
console.log( parse(object, ‘d[1].e’) == 6 ) //true
console.log( parse(object, ‘d.1.e’) == 6 ) //true
console.log( parse(object, ‘f’) == ‘undefined’ ) //true
function parse(obj, str) {
str.replace('[', '.').replace(']', '').split('.').map((ele) => obj = obj[ele.trim()]);
return obj || 'undefined';
}
请问何为混合应用 (Hybrid APP) ,与原生 Native 应用相比它的优劣势。
Hybrid APP 是 Native APP 上结合使用了 Web View (Native APP 的模块或称组件,用来加载Web资源),采用了Web 技术的 APP,本质上属于原生应用(APP外壳)。
- 优势:
- 兼容性良好,“一次开发,多处运行”,能够减少原生APP开发在多平台带来的问题
- 代码移植性高
- 开发者社区活跃,能够及时应用最新适合的Web技术来解决问题,提高用户体验
- APP更加轻便,内容更新方便,部分更新不用从 APP Store 下载
- 劣势:
- 性能:相对不如 Native APP 性能良好、体验流畅
- Web技术在APP中操作权限有限,需要APP同步支持
阿里巴巴 前端工程师面试题
- https://www.nowcoder.com/test/192316/summary
- https://www.nowcoder.com/test/215894/summary
- https://www.nowcoder.com/test/178/summary
- https://www.nowcoder.com/test/5937284/summary