mi家前端面經

時間 2019-12-11

標籤端面简体版

原文原文鏈接

已經很久沒想寫面經了……菜鳥面到生無可戀。javascript

1.用CSS實現下面圓形css

答案：html

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .circle{
            height: 0px;
            width: 0px;
            border-radius :50%;
            border-left:50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left-color: #000;
            border-right-color: #000;
            border-top-color:red;
            border-bottom-color:red;
        }
        .circle1{
            height: 0px;
            width: 0px;
            border-radius :50%;
            border:50px solid;
            border-color:black red black red;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

上面circle和circle1兩個class皆能夠。vue

2.堆排序，手動畫圖實現堆排序。如何建堆，如何排序。java

3.實際上是leetcode上面的一道原題：https://leetcode.com/problems/container-with-most-water/description/react

先用最笨的辦法O(n²)解，也就是循環遍歷求每兩根之間的盛水量，再求出最大值。webpack

再就是用兩根指針索引，雙指針，first和last，時間複雜度爲O(N)。git

這道題網上解法不少，可自行查看。github

4.html的盒子模型web

IE的盒子模型，標準盒子模型，box-sizing的用法。

5.float元素塌陷的緣由和解決辦法，順便問到了BFC盒子的觸發方式。

緣由：當元素設置浮動後，會自動脫離文檔流

解決辦法：

一、給父元素也添加float。這樣讓父元素與子元素一塊兒脫離文檔流浮動起來，保證子元素在父元素內，這樣父元素就能自適應子元素的高度，可是此方法有一弊端，必定會影響父元素以後的元素排列，甚至影響佈局。
二、給父元素一個固定高度，此方法適用於子元素高度已知而且固定的狀況。
三、添加一個塊級元素，並給此元素設置clear:both;清除浮動。在很早以前用的就是這種解決辦法，新建一個空的div，爲這個div設置clear：both；這樣無疑是增長了無心義的標籤，一個大型頁面中，這種標籤太可能是很差的。
四、給父元素添加 overflow：hidden；
五、經過僞類::after清除浮動

BFC盒子的觸發方式：

根元素或包含根元素的元素
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 爲 absolute 或 fixed）
行內塊元素（元素的 display 爲 inline-block）
表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
匿名錶格單元格元素（元素的 display爲 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
overflow 值不爲 visible 的塊元素
display 值爲 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
contain 值爲 layout、content或 strict 的元素
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不爲 auto，包括 ``column-count 爲 1）
column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中（標準變動，Chrome bug）

6.margin塌陷問題

在垂直方向（水平方向沒這問題），上面元素的margin-bottom和下面的margin-top，在文檔流中，只會取其中較大的一個實行，而不是上面的margin-bottom+下面的margin-top。

解決辦法：觸發BFC盒子、

7.js的原型鏈和構造器，連線

我已經懵了，有小夥伴連好了，能夠私信我一下。

8.Object.assign的特性和用法

淺拷貝

9.https的加密方式，對稱加密和不對稱加密

10.線程和進程的異同點，如何加鎖。

11.TCP協議的特色，三次握手四次揮手，擁塞控制，重傳之類的。

12.看代碼，說輸出結果和緣由

<script>
    window.onload=function(){
        function test(flag){
            if(flag){
                return function getValue(){
                    console.log('a');
                }
            }
            else{
                return function getValue(){
                    console.log('b');
                }
            }
            return getValue;
        }
        var c=test(true);
        c();// a
    }
</script>

這段考的是函數提高的問題，一共定義了倆getValue，那個生效了？由於flag===true，因此沒有執行到else，因此第一個getValue生效。

對於重複定義，變量的重複聲明是無用的，不會覆蓋以前同一做用域聲明的變量，但函數的重複聲明會覆蓋前面的聲明的同名函數或同名變量。

//變量的重複聲明無用
var a = 1;
var a;
console.log(a);//1

//覆蓋同名變量
var a;
function a(){
    console.log(1);
}
a();//1

//覆蓋同名函數
a();//2
function a(){
    console.log(1);
}
function a(){
    console.log(2);
}

13.看代碼，說輸出結果和緣由

window.onload=function(){
        var a=11;
        function test(){
            var a=1;
            var obj={
                a:10,
                b:2,
                fn:function(){
                    console.log(this.a+this.b);
                }
            };
            obj.fn();//12
        }
        test();
    }

當obj.fn（）被執行的時候，此時的this指向的是 obj 這個對象，由於fn函數是經過obj這個對象直接調用的。

14.看代碼，說輸出結果和緣由

var a=11;
function test(){
     var a=1;
      setTimeout(function(){
           console.log(this.a);//11
      },0);
}
test();

在通常狀況下，this對象時在運行時基於函數的執行環境綁定的：在全局函數中，this等於window，而當函數被做爲某個對象的方法調用時，this等於那個對象。可是，匿名函數的執行環境具備全局性，所以它的this對象一般指向windows.

15.看代碼，說輸出結果和緣由

var a=11;
function test(){
    console.log(a);//undefined
    var a=1;
}
test();

函數test有本身的做用域，而且做用域內聲明瞭變量a，根據變量提高的規則，在該做用域內未定義以前就是undefined。

16. 1+undefined=NaN

17.git經常使用步驟

git clone / git pull / git fetch

git checkout -b branchname

git add ./ git commit -m""/ git push

git merge / git rebase / git squash

18.jsonp 跨域

function getScript(url,callback){  
    var script = document.createElement("script");  
    script.type="text/javascript";  
    if(script.readyState){  
        script.onreadystatechange = function(){  
            if(script.readyState=="loaded"||script.readyState=="complete"){  
                script.onreadystatechange=null;  
                callback();  
            }  
        }  
    }else{  
        script.onload = function(){  
        callback();  
    }  
    }  
    script.src = url;  
    document.getElementsByTagName("head")[0].appendChild(script);  
}

什麼是同源策略，怎麼比較兩端的同源策略？兩端指的是那兩端？

還有那些html標籤默認跨域：script、img、link、iframe

http://www.javashuo.com/article/p-ajvnwvwz-dz.html

19.script是阻塞式加載？非阻塞式加載？

這也涉及了頁面渲染過程，各部分資源加載過程。

20.vue的生命週期

見：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

data定義在那個階段？

解：當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。

watch發生在哪一個階段？create階段通常作什麼事情？mounted階段作什麼事情？

active動態階段會發生什麼？

window.onload發生在vue的那個週期？

怎麼將vue的生命週期同普通html頁面加載週期對應起來。

vue的深刻響應式原理？

解：https://cn.vuejs.org/v2/guide/reactivity.html 主要仍是用了Object.defineProperty 的數據屬性和訪問其屬性，跟蹤依賴，在屬性被訪問和修改時通知變化。受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

21.在vue中，template、html、render均可以做爲模板，有什麼區別？

見：html：https://cn.vuejs.org/v2/api/#el

template：https://cn.vuejs.org/v2/api/#template

render：https://cn.vuejs.org/v2/api/#render

22.vue頁面和普通html頁面有什麼須要注意的事項？

<div class="test">
        <li>123</li>
        <li>123</li>
        <li>123</li>
</div>

上面這種狀況中的li元素在兩種頁面中都會渲染嗎？

23.隱式轉換

var a={};
var b={};
var c=[];
var d=[];
console.log(a==b);// false
console.log(c==d);// false
console.log(a==true);// false
console.log(b==true);// false
console.log(b==0);// false
console.log(a==0);// false
console.log(b==null);// false
console.log(a==null);// false
console.log(a=='1');// false
console.log(b=='1');// false

上面每一步比較，都發生了隱式轉換，轉換了什麼？比較的是什麼？結果是什麼？爲何？

其實引用類型比較的是該對象的地址，每一個變量都開闢了一塊屬於本身的地址，因此 a!=b

具體見mdn:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness

https://dorey.github.io/JavaScript-Equality-Table/

24.如何得到某個id爲「test」的元素的CSS屬性值？

<!DOCTYPE html>
<html>
<head>
    <style>
    #test{
        width :100px;
        height:100px;
    }</style>
</head>
<body>
    <div id="test" style="background-color:red">
    </div>
<script>
var dom = document.getElementById("test");
console.log(dom.style.backgroundColor);// red
console.log(dom.style.width);// 什麼都沒輸出

var computedStyle = document.defaultView.getComputedStyle(dom, null); 
console.log(computedStyle.width);// 100px
console.log(computedStyle.backgroundColor);// rgb(255, 0, 0)
</script>
</body>
</html>