阿里2017秋招前端面试笔试题

时间 2019-11-11

标签阿里前端面试笔试栏目阿里巴巴繁體版

原文原文链接

一、正则表达式javascript

二、布局：static,absolute,relative,stickyhtml

如下代码，分别给节点 #box 增长以下样式，问节点 #box 距离 body 的上边距是多少？前端

<body style=”margin:0;padding:0”>java

<div id=”box” style=”top:10px;margin:20px 10px;”>正则表达式

</div>segmentfault

</body>数组

若是设置 position: static ; 则上边距为 20px浏览器

若是设置 position: relative ; 则上边距为 30 px性能优化

若是设置 position: absolute ; 则上边距为 30 px前端性能

若是设置 position: sticky ; 则滚动起来上边距为 10 px

position: static ; 则上边距为( 20 ) px 静态定位 top值无效

position: relative ; 则上边距为( 30 ) px 移动的时候会包括margin
position: absolute ; 则上边距为( 30 ) px 移动的时候会包括margin
position: fixed ; 则上边距为( 30 ) px 固定定位的margin也会生效移动的时候也会包括margin
position: sticky ; 则上边距为( 20 ) px，页面滚动起来为（10）px，margin会无效；页面没滚动的时候是静态定位

三、实现动态加载一个 JavaScript 资源

var script = document.createElement("script");
        var head = document.getElementsByTagName("head")[0];

        script.type = "text / javascript";
        script.src = " //i.alicdn.com/resource.js";

            // 绑定资源加载成功事件
            script.onreadystatechange = function () {
                // 判断资源加载状态是否为加载成功或加载完成
                if (/^(loaded|complete)$/.test(script.readyState)) {
                    script.onreadystatechange = null;
                    
                }
            };

        // 绑定资源加载失败事件
        script.onerror = function () {
            
        };

        head.insertBefore(script, head.firstChild)
    </script>
参考：https://www.cnblogs.com/croso/p/5294251.html

四、请问何为混合应用 (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同步支持

五、前端性能优化（CSS动画篇）

https://segmentfault.com/a/1190000000490328

滥用硬件加速会致使严重性能问题，由于它增长了内存使用，而且它会致使移动端电池寿命减小。在Blink和WebKit的浏览器中，某个元素具备3D或透视变换（perspective transform）的CSS属性，会让浏览器建立单独的图层。

在Blink和WebKit的浏览器中，一当一个节点被设定了透明度的相关过渡效果或动画时，浏览器会将其做为一个单独的图层，但不少开发者使用translateZ(0)或者translate3d(0,0,0)去使浏览器建立图层。这种方式能够消除在动画开始以前的图层建立时间，使得动画尽快开始（建立图层和绘制图层仍是比较慢的），并且不会随着抗锯齿而导出突变。不过这种方法须要节制，不然会由于建立过多的图层致使崩溃

六、

Array对象经常使用方法中：

不改变原数组：

一、 concat()

链接两个或多个数组
不改变原数组
返回被链接数组的一个副本

二、join()

把数组中全部元素放入一个字符串
不改变原数组
返回字符串

三、 slice()

从已有的数组中返回选定的元素
不改变原数组
返回一个新数组

四、 toString()

把数组转为字符串
不改变原数组
返回数组的字符串形
改变原数组：

五、 pop()
- 删除数组最后一个元素，若是数组为空，则不改变数组，返回undefined
- 改变原数组
- 返回被删除的元素
六、 push()
- 向数组末尾添加一个或多个元素
- 改变原数组
- 返回新数组的长度
七、 reverse()
- 颠倒数组中元素的顺序
- 改变原数组
- 返回该数组
八、 shift()
- 把数组的第一个元素删除，若空数组，不进行任何操做，返回undefined
- 改变原数组
- 返回第一个元素的值
九、 sort()
- 对数组元素进行排序(ascii)
- 改变原数组
- 返回该数组
十、 splice()
- 从数组中添加/删除项目
- 改变原数组
- 返回被删除的元素
十一、 unshift()

五、HTTP 2.0 协议详解

http://blog.csdn.net/zqjflash/article/details/50179235

六、

请实现方法 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

 var object = {
    b: { c: 4 }, d: [{ e: 5 }, { e: 6 }]
    };

function parse(obj,string){
  var arr=string.split(".");
  arr.forEach(function(item,index){
   // console.log(index);
   // console.log(item);
   if(!isNaN(item)){
    console.log('232');
    var temp=arr[index-1]+"["+item+"]";
   // console.log(temp);
   // console.log(arr);
    arr.splice(index-1,2,temp);
   // console.log(arr);

  }
});
return eval("obj."+arr.join(".")) || "undefined";
}

console.log(parse(object, 'd.1.e') == 6);