阿里巴巴 前端工程师面试题

🌙
手机阅读
本文目录结构

阿里巴巴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/86369/summary

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了