阿里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);