前端面試

時間 2019-11-16

標籤前端面試欄目快樂工作简体版

原文原文鏈接

前端跳槽面試必備技巧css

一面前端

頁面佈局類 / CSS盒模型vue

DOM事件類 / HTTP協議類css3

面向對象類 / 原型鏈類程序員

通訊類 / 安全類 / 算法類web

二面面試

渲染機制 / 異步線程算法

頁面性能 / 錯誤監控跨域

MVVM框架 (vue) 解析數組

工做原理 / 生命週期

雙向綁定 / 項目特點

面試是一個考試。是通過精心設計的。

(1) Javascript的算法包含哪些？

去重，數組排序，交叉

(2) 前端性能優化

(3) 數組的操做

(4) CSS，以及CSS3新增的屬性

(5) JS的面向對象

(6) Vue的生命週期，以及工做原理

(7) 在Vue開發的過程當中遇到過哪些問題

(8) ES6的繼承類

程序員的第三年，是一到坎，基礎知識掌握不紮實，學高階知識，根本沒用。

因此，基礎知識，加ES6，加Vue，基本就好了。

有一個要注意的一點就是，若是你學的東西，將來用不上。那麼你就是在浪費時間。

(1)

頁面佈局 / CSS盒模型

DOM事件 / HTTP協議

面向對象 / 原型鏈

通訊 / 安全 / 算法

(1) 頁面佈局

題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px，中間自適應。

至少不下於3種解決方案：

(1)浮動

(2)絕對定位

(3) flex-box

(4) 表格佈局(table-box)

(5)grid 網格佈局

(1)浮動解決方案

<style>

* {

　　margin:0;

　　padding:0;

}

.layout article div {

　　min-height: 100px;

}

/** 浮動方案 **/

.layout.float .left {

　　float: left;

　　width: 300px;

　　background: red;

}

.layout.float .right {

　　float:right;

　　width: 300px;

　　background: blue;

}

.layout.float .center {

　　background: yellow;

}

</style>


<section class="layout float">
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮動解決方案</h1>
                1.這是三欄佈局中間部分
                2.這是三欄佈局中間部分
            </div>
        </article>
    </section>

(2) 絕對定位

// VSCode 快捷寫法
// 而後回車
div.left+div.center+div.right

不斷的收集面試題，以及刷面試題。

最高端的還有北郵的計算機研究生，能夠去了解一下。怎麼會沒有事情作？

<style>
        * {
            margin:0;
            padding:0;
        }
        .layout article div {
            min-height: 100px;
        }
    
        .layout.absolute .left-center-right > div {
            position: absolute;
        }
        .layout.absolute .left {
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }
        .layout.absolute .right {
            right:0;
            width: 300px;
            background: blue;
        }
    </style>

　　<section class="layout absolute">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>絕對定位解決方案</h2>
                1.這是三欄佈局絕對定位中間部分。
            </div>
            <div class="right"></div>
        </article>
    </section>

(3) flexbox解決方案

<style>
        * {
            margin:0;
            padding:0;
        }
        .layout article div {
            min-height: 100px;
        }
    
        .layout.flexbox .left-center-right {
            display: flex;
        }
        .layout.flexbox .left {
            width: 300px;
            background: red;
        }
        .layout.flexbox .center {
            flex:1;
            background: yellow;
        }
        .layout.flexbox .right {
            width: 300px;
            background: blue;
        }
    </style>
    <section class="layout flexbox">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>flexbox解決方案</h2>
                1.這是三欄佈局flexbox中間部分
                2.這是三欄佈局flexbox中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>

(4) 表格佈局

<style>
        * {
            margin:0;
            padding:0;
        }
        .layout article div {
            min-height: 100px;
        }
    
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right > div {
            display: table-cell;
        }
        .layout.table .left {
            width: 300px;
            background: red;
        }
        .layout.table .center {
            background: yellow;
        }
        .layout.table .right {
            width: 300px;
            background: blue;
        }

    </style>
    <section class="layout table">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>表格佈局解決方案</h2>
                1.這是三欄佈局表格佈局中間部分
                2.這是三欄佈局表格佈局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>

(5) 網格佈局

<style>
        * {
            margin:0;
            padding:0;
        }
        .layout.grid .left-center-right {
            display: grid;     /** 父容器聲明爲網格佈局 **/
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .layout.grid .left {
            background: red;
        }
        .layout.grid .center {
            background: yellow;
        }
        .layout.grid .right {
            background: blue;
        }
    </style>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>網格佈局解決方案</h2>
                1.這是三欄佈局網格佈局中間部分
                2.這是三欄佈局網格佈局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>

這道題目怎麼延申？

(1) 這5種解決方案各自有什麼優缺點？

浮動解決方案的兼容性比較好，只要把清除浮動給作好的話。

絕對定位解決方案，好處是快捷，缺點是佈局已經脫離文檔流了，那意味着下面全部的子元素也必須脫離文檔流。

那麼就致使了這個方案的有效性，也就是可以使用性是比較差的。

flexbox佈局，是CSS3中新出現的一種佈局方式，flexbox佈局，是比較完美的一個，如今的移動端，基本上

都是基於flexbox佈局。

表格佈局，在不少場景中，仍是比較適用的。表格佈局的兼容性是很是好的。由於IE8不兼容flexbox，因此，在

低版本的瀏覽器中可使用表格佈局。

網格佈局，是新出的技術。

(2) 還有，若是高度未知，中間的高度被撐開了，須要左邊和右邊也跟着被撐開。那麼剛纔寫的5種方案，

哪一個還能夠被適用？哪一個已經不能夠用了？

若是高度未知，哪種解決方案再也不適用？

浮動解決方案不能用。

絕對定位解決方案不能用。

flexbox解決方案能夠用。

表格佈局能夠用。

網格佈局不能用。

(3) 這5種方案的兼容性(瀏覽器)如何？真正到業務中去使用，哪個最實用？

(4) 爲何浮動解決方案，中間的超出部分爲何會這樣顯示？

原理就是內容向左浮動的時候，當內容超出之後，左邊的寬度是固定的，中間的文字，沒有了遮擋物，

因此，內容就會向左。

(5) 如何讓浮動解決方案的中間超出部分，不要跑到左邊去？

這個時候，應該怎麼作？

答案是建立BFC。

什麼是BFC，在盒模型中有這個概念。

頁面佈局的變通

三欄佈局：

左右寬度固定，中間自適應
上下寬度固定，中間自適應

兩欄佈局：

左寬度固定，右自適應
右寬度固定，左自適應
上高度固定，下自適應
下高度固定，上自適應

還有一個佈局面試題，比較常見，"居中"。

題目：一、請寫出css樣式實現一個不定寬高的彈出框上下左右居中（至少兩種）

就是彈層高度寬度不肯定，始終上下左右居中(css方法)

(1) translate定位解決方案

CSS3的屬性，IE8不支持。

這是css3的transform的屬性，能夠將寬高度設爲百分比，IE8不支持，在移動端使用較好。

    <style>
        * {
            margin:0;
            padding:0;
        }
        .translateCenter {
            width: 40%;
            height: 20%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: blue;
        }
    </style>
    <div class="translateCenter">我是translate居中定位</div>

(2) margin居中定位解決方案

不須要肯定div的寬度和高度，讓top，bottom，left，right都爲0，再加個margin: auto。 IE7不支持。

    <style>
        * {
            margin:0;
            padding:0;
        }
        .marginCenter {
            width: 40%;
            height: 20%;
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            margin: auto;
            background: yellow;
        }
    </style>
    <div class="marginCenter">我是margin居中定位</div>

(3) 另外一種簡單的margin居中佈局解決方案。

不須要肯定div的寬度和高度。原理相似於translate。

    <style>
        * {
            margin:0;
            padding:0;
        }
        .marginCenter {
            width: 40%;
            height: 20%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -20%;
            margin-top: -10%;
            background: blue;
        }
    </style>
    <div class="marginCenter">我是margin居中定位</div>

(4) 使用flexbox佈局解決方案

純css實現不定寬度提示框水平垂直頁面居中。

一些提示框裏的文字字數是不必定的，寬度不能寫死。

運用flexbox佈局。

justify-content: center;

align-items: center;

控制 .text 在頁面水平垂直居中。

提示框不須要設置寬度和高度，只須要控制父容器。

    <style>
        * {
            margin:0;
            padding:0;
        }
        .wrapper {
            position: fixed;
            top:0;
            bottom:0;
            z-index:99;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            background: red;
        }
        .text {
            background: rgba(0,0,0,.6);
            padding: 10px;
            color: #fff;
        }
    </style>
    <div class="wrapper">
        <div class="text">我是flexbox居中定位</div>
    </div>

總結：

有四個解決方案：

(1) 經過translate實現不定寬高元素水平垂直居中

.demo1 {
   position: absolue;
　　top: 50%;
　　left:50%;
　　-webkit-transform: translate(-50%, -50%);
}

簡單分析：

先把元素設定爲絕對定位。

絕對定位指的就是 position: absolute;

position:relative; 指的是相對定位。

而後經過top 和 left把元素的最左點和最上點移動到屏幕的中間。

最後經過 translate屬性，根據元素自身大小，相對向左和向上移動自身寬高的50%。

從而實現了不定寬高元素的水平垂直居中。

(2) 經過margin居中定位實現不定寬高元素水平垂直居中。

(3) 另外一種簡單的margin居中定位解決方案，原理相似於translate屬性。

(4) 經過flexbox佈局解決方案。

.wrapper1 {
　　display: -webkit-flex;
　　justify-content: center;
　　align-items: center;
}

簡單分析：

設置父級元素 display 爲flex；

justify-content 設定子元素水平居中。

align-items 設定子元素垂直居中。

延申：

使用flexbox佈局解決方案的時候，要注意兼容性寫法。

.container{  
    display: -webkit-box;   /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
    display: -moz-box;      /* Firefox 17- */  
    display: -webkit-flex;  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
    display: -moz-flex;     /* Firefox 18+ */  
    display: -ms-flexbox;   /* IE 10 */  
    display: flex;          /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
}