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

1、正则表达式

2、布局：static,absolute,relative,sticky

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

</div>

</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会无效；页面没滚动的时候是静态定位

3、实现动态加载一个 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

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

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

https://segmentfault.com/a/1190000000490328

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

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

6、

Array对象常用方法中：

不改变原数组：

1、 concat()

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

2、join()

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

3、 slice()

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

4、 toString()

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

5、 pop()
- 删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined
- 改变原数组
- 返回被删除的元素
6、 push()
- 向数组末尾添加一个或多个元素
- 改变原数组
- 返回新数组的长度
7、 reverse()
- 颠倒数组中元素的顺序
- 改变原数组
- 返回该数组
8、 shift()
- 把数组的第一个元素删除，若空数组，不进行任何操作，返回undefined
- 改变原数组
- 返回第一个元素的值
9、 sort()
- 对数组元素进行排序(ascii)
- 改变原数组
- 返回该数组
10、 splice()
- 从数组中添加/删除项目
- 改变原数组
- 返回被删除的元素
11、 unshift()

5、HTTP 2.0 协议详解

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

6、

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

posted @ 2018-01-02 23:50 lu0511 阅读(1534) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

lu0511

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

不改变原数组：

改变原数组：

5、HTTP 2.0 协议详解

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

公告