大前端面試一(基礎)

時間  2019-11-30
標籤 前端 面試 基礎 欄目 快樂工作 简体版
原文   原文鏈接

1.盒模型

1. 五種佈局的優缺點

解答：javascript

  1. float佈局， 缺點：須要清除浮動。 優勢：兼容性好。
  2. 絕定位： 優勢：快捷，不容易出問題 缺點：佈局已經出文檔流，致使了方案的課使用性比較差。
  3. flexbox佈局： 優勢：解決上面兩種佈局的缺點，比較完美的一個。
  4. 表格佈局： 優勢：快捷，兼容性好 缺點： 三個佈局，不須要同時增高的。它是隨着更改增高的。
  5. grid佈局：
2. 假設高度已知，請寫出三欄佈局，其中左，右各位300px,中間自適應。

flexbox table佈局可使用。 中間自適應css

  1. 三種佈局方案裏面你感受最優的是哪一個？哪一個在工做中常常使用？
  2. 其餘延伸佈局：
左右寬度固定，中間自適應。 上下高度固定，中間自適應。 左寬度固定，右自適應。 右寬度固定，左自適應。 上高度固定，下自適應。 下高度固定，上自適應。
<section class="layout float">
        <style type="text/css">
            .layout.float div{
                min-height: 200px;
            }
            .layout.float .left-right-content{
                width: 100%;
            }
            .layout.float .left{
                width: 300px;
                background: red;
                float:left;
            }
            .layout.float .right{
                width: 300px;
                background: blue;
                float:right;
            }
            .layout.float .center{
                background: yellow
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <p>我是中間內容</p>
                <p>我是中間內容</p>
                <p>我是中間內容</p>
            </div>
        </article>
    </section>
    <section class="layout absolute">
        <style type="text/css">
            .layout.absolute div{
                position: absolute;
                min-height: 200px;
            }
            .layout.absolute .left{
                left: 0px;
                width: 300px;
                background: red;
            }
            .layout.absolute .right{
                right: 0px;
                width: 300px;
                background: blue;
            }
            .layout.absolute .center{
                left:300px;
                right: 300px;
                background: yellow
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">    中間內容</div>
        </article>
    </section>
    <section  class="layout flexbox" >
        <style type="text/css">
            .layout.flexbox{
                margin-top:240px;
            }
            .layout.flexbox .left-right-content{
                display: flex;
                min-height: 200px;
            }
            .layout.flexbox .left{
                width: 300px;
                background: red;
            }
            .layout.flexbox .right{
                width: 300px;
                background: blue;
            }
            .layout.flexbox .center{
                background: yellow;
                flex: 1;
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
                <div class="center">
                    flexbox內容
                </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout table">
        <style type="text/css">
            .layout.table .left-right-content{
                width: 100%;
                display: table;
                height: 100px;
            }
            .layout.table .left-right-content div{
                display: table-cell;
            }
            .layout.table .left{
                width: 300px;
                background: red;
            }
            .layout.table .right{
                width: 300px;
                background: blue;
            }
            .layout.table .center{
                background: yellow;
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="center">
                <p>table佈局</p>
                <p>table佈局</p>
                <p>table佈局</p>
                <p>table佈局</p>
                <p>table佈局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout grid">
        <style type="text/css">
            .layout.grid .left-right-content{
                width: 100%;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background: red;
            }
            .layout.grid .right{
                background: blue;
            }
            .layout.grid .center{
                background: yellow;
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="center">
                <p>grid 佈局</p>
                <p>grid 佈局</p>
                <p>grid 佈局</p>
                <p>grid 佈局</p>
                <p>grid 佈局</p>
                <p>grid 佈局</p>
                <p>grid 佈局</p>
                <p>grid 佈局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

 

2.CSS設置盒模型
  1. 盒模型的概念？ border margin padding 標準模型 和 IE模型
  1. 標準模型和IE模型的區別？ 計算高度和寬度的區別
標準模型：box-sizing:content-box; 值計算content高度和寬度。瀏覽器默認的模型。 IE模型：box-sizing:border-box; 計算border 和 padding的 高度和寬度。

3.js如何設置獲取盒模型的寬和高

dom.style.with/height 經過dom元素的style獲取寬和高，只能獲取內聯屬性的寬和高。 dom.currentStyle.width/height 瀏覽器無論怎樣渲染，都能獲取屬性的寬和高，缺點是隻能有ie瀏覽器支持。 window.getComputendStyle(dom).width/height 通用性更好一些。 dom.getBoundingClientRect().width/height; 計算一個元素的位置。根據視窗來獲取元素的位置。

4.實例題：（根據盒模型解釋邊距重疊）**

<section id="sec">
        <style type="text/css">
            #sec{
                background: #f00;
            }
            .child{
                height:100px;
                background: #000;
                margin-top:10px;
            }
        </style>
        <article class="child" >
            
        </article>
</section>

 

  1. BFC 的基本概念。
  2. BFC的原理。
  3. 如何建立BFC。
  4. BFC使用場景。

5.BFC機制 overflow:hidden;

<section id="sec">
        <style type="text/css">
            #sec{
                background: #f00;
                overflow: hidden;
            }
            .child{
                height:100px;
                background: #000;
                margin-top:10px;
            }
        </style>
        <article class="child" >
            
        </article>
</section>

 

6.BFC(邊距重疊解決方案)

BFC的基本概念： 塊級格式化上下文。html

BFC的原理：java

渲染規則：web

1.bfc垂直方向會發生重疊。 2.用來清楚浮動。 3.buf在頁面上是一個獨立容器，外面的容器不會影響內部的佈局內部的不會影響外面的佈局。算法

7.如何建立BFC：

overflow:hidden;
float:xxxx;//只要不爲none均可以建立BFC position:xxxx; //只要不static均可以建立BFC table-cell; //也能夠建立BFC； overflow:xxxxx;

8.使用場景：

    <section id="sec">
        <style type="text/css">
            #sec{
                background: #f00;
                overflow: hidden;
            }
            .child{
                height:100px;
                background: #000;
                margin-top:10px;
            }
        </style>
        <article class="child" >
            
        </article>
    </section>
    <section id="margin">
        <style type="text/css">
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin >p{
                margin:5px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>
        <p>3</p>
    </section>
    <section id="layout">
        <style type="text/css">
            #layout{
                background: red;
            }
            #layout .left{
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            #layout .right{
                height: 110px;
                background: #ccc;
                overflow: auto;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>
    <!-BFC即便是float也會參與高度計算-->
    <section id="float">
        <style type="text/css">
            #float{
                background: red;
                overflow: auto;    /*加上bfc*/
            }
            #float .float{
                float: left;
                font-size: 30px;
            }
        </style>
        <div class="float">
            我是浮動元素
        </div>
    </section>

 

8.DOM事件類：

1.DOM事件級別：
1.DOM0： element.onclick=function(){ } 2.DOM2: //若是是true是捕獲階段，若是是false則是捕獲階段觸發。 element.addEventListener("click",function(){ },false); 3.DOM3: //若是是true是捕獲階段，若是是false則是捕獲階段觸發。 element.addEventListener("keyup",function(){ },false);
2.DOM事件模型就是冒泡和捕獲。

捕獲 和 冒泡跨域

3.DOM事件流。

必需要看javascript高級程序設計裏面的事件瀏覽器

4.描述DOM事件捕獲的具體流程。

window->document->html（標籤）->body-> ...->目標元素。緩存

5.Event對象的常見應用。
event.preventDefault();             //阻止默認事件 event.stopPropagation(); //阻止默認流 event.stoplmmediatePropagiation(); //事件響應優先級 event.currentTarget(); //當前被點擊的元素 event.target(); //當前所綁定的事件
6.自定義事件。

CustomEvent安全

<div id="ev">
    我是測試自定義事件
</div>
<script type="text/javascript">
    var ev = document.getElementById("ev");
    var eve = new Event("test");
    ev.addEventListener("test",function(){
        console.log("test");
    });
    ev.dispatchEvent(eve);//觸發自定義事件
</script>

 

7.獲取DOM
1.window //window對象 2.document //document 3.documet.documentElement //html 4.document.body //body 5.getElementById("id"); //內聯元素

8.HTTP協議類：

1.HTTP協議的主要特色

簡單快速 靈活 無鏈接 無狀態

2.HTTP報文的組成部分
 
 
 
 
請求報文
請求行GET/HTTP/1.1
請求頭Host/Connect/Pragma
空行
請求體請求的數據
 
 
 
 
請求報文
HTTP/1.1/200/ok
請求頭Host/Connect/Pragma
空行
請求體請求的數據
3.HTTP 方法
 
 
 
 
 
GET
獲取資源
POST
傳輸資源
PUT
更新資源
DELETE
刪除資源
HEAD
獲取報文頭部
4.POST 和GET的區別

幾個比較注意的事項

  1. GET在瀏覽器回退時是無害的，而POST會再次提交請求。
  2. GET請求會被瀏覽器主動緩存，而POST不會。
  3. GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。
5.HTTP 狀態碼
  1. 1xx:指示信息-表示請求已接受，繼續處理
  2. 2xx:成功-表示請求已經被成功處理
  3. 3xx:重定向-要完成請求必須進行更進一步的操做。
  4. 4xx:客戶端錯誤-請求有語法錯誤或者請求沒法實現
  5. 5xx:服務器錯誤--服務器未能實現合法的請求。
  1. 200 OK：客戶端請求成功
  2. 206 Partial Content:客戶發送了一個帶有Range頭的GET秦秋服務器完成了
  3. 301 全部請求的頁面已經轉移到新的url裏面
  4. 302 全部請求的頁面已經臨時轉移到新的url
  5. 304 客戶端有緩衝的文檔併發出了一個條件性的情趣，服務器高數客戶原來緩衝的文檔還能夠繼續使用。
  6. 400 客戶端請求有語法錯誤，不能被服務器所理解。
  7. 401：請求未被受權
  8. 403 請求頁面被禁止
  9. 404 未找到頁面
  10. 500：服務器發生不可預期的錯誤原來緩存的文檔還能夠繼續使用
  11. 503：請求未完成，服務器臨時過載或者立即，一段時間後可能恢復正常。
6.什麼是持久層

HTTP1.0支持持久連接 HTTP1.1不支持持久連接 若是是 websocket支持持久連接。 HTTP2.0 https://blog.csdn.net/zhuyiquan/article/details/69257126?locationNum=4&fps=1

7.什麼是管線化

一次打包請求響應。 請求1->請求2->請求3->響應1->響應2->響應3

9.原型鏈

1.建立對象有幾種方法
//原型 var o1 = {name:'o1'}; 結果：Object{name:"o1"}; //構造函數 var o2 = new Object({name:"o2"}); 結果：Object{name:"o1"} 
//經過new方法建立一個對象 var M = function(name){this.name=name}; var o3 = new M("o3"); 結果：M{name:"o3"} 
//Object.create();原型鏈 var P={name:"o3"}; var o4 = Object.create(P); 結果：Object{o4.name}

*** 任何一個函數只要被new使用了就能夠被稱爲是構造函數。

2.關聯關係
構造函數M 的prototype指向原型對象 M對象的prototype（原型對象）對象的constructor指向M這個構造函數 
M這個構造函數 new以後指向這個實例 這個實例的__proto__指向原型對象 
原型對象的__proto__指向的是原型對象。 
//經過new方法建立一個對象 var M = function(name){this.name=name}; var o3 = new M("o3"); 結果：M{name:"o3"}

原型鏈的基本原理： 實例化經過原型鏈找到他的原型對象的方法(原型鏈上的方法是被共享的)。都是被實例所共享的。（說白了就是這樣的一段代碼）

var obj1 = function(name){this.name} var o1 = new obj(name); obj1.prototype.say()=function(){console.log("我要說話了");} var o5 = new obj(obj1); o1.say(); //這裏是可使用的 o5.say(); //o5這個實例化對象也能夠調用say()這個方法。
3.instanceof的原理
4.new運算符

一個新對象被建立。它繼承自foo.prototype。

構造函數foo被執行。執行的時候，相應的傳參數會被傳入，同時上下文(this)會被指定爲這個心實例。new foo 等同於new foo(),只能用於在不傳遞任何參數的狀況下。

若是構造函數返回一個對象，那麼這個對象會取代整個new 出來的結果。若是構造函數沒有返回對象，那麼new 出來的結果爲步驟1建立的對象。

10.面向對象

1.類與實例 類的聲明 生成實例
/*
      類的聲明
    */
    function Animal1(){
        this.name = "name";
    }
    /*
    ES6中的class聲明
    */
    class Animal2(){
        constructor(props){
            let name = "name";
        }
    }
    /*實例化*/
    console.log(new Animal1(),new Animal2());

 

2.類與繼承
//call繼承

function Parent1(){
    this.name="parent1";
}
function child1(){
    Parent1.call(this); //apply 改變函數運行的上下文
    //改變了父類的指向
    this.type="child1";
}
結果：
child1 {name: "parent1", type: "child1"}
    name:"parent1"
    type : "child1"
//原型鏈繼承

function Parent1(){
        this.name="parent1";
    }
    Parent1.prototype.say() = function(){};    //這裏是不能繼承的
    function child1(){
        Parent1.call(this); //apply 改變函數運行的上下文
        //改變了父類的指向
        this.type="child1";
    }
    console.log(new child1);
//藉助原型鏈實現繼承
    function Parent2(){
        this.name = "parent2"
    }
    function child2(){
        this.type="child2";
    }
    child2.prototype = new Parent2();    //實現繼承父類
    console.log(new child2());
    結果：
    child2 {type: "child2"}
    type:"child2"
        __proto__:Parent2
        name : "parent2"
            __proto__ : Object
            
這種繼承有一種缺點：
//組合繼承

function Parent3(){
        this.name = "Parent3";
        this.play=[1,2,3];
    }
    function child3(){
        Parent3.call(this);
        this.name = "child3";
    }
    child3.prototype = new Parent3();
    var s3 = new child3();
    var s4 = new child3();
    s3.play.push(4);
    console.log(s3.play,s4.play);
    缺點：
    
//優化組合繼承：

/*組合繼承的優化*/
    function Parent4(){
        this.name = "Parent4";
        this.play=[1,2,3];
    }
    function child4(){
        Parent4.call(this);
        this.name = "child4";
    }
    child4.prototype =  Parent4.prototype;
    var s5 = new child4();
    var s6 = new child4();
    s5.play.push(4);
    console.log(s5.play,s6.play);

 

11.安全類：

1. CSRF
1. 基本概念

跨站請求僞造攻擊

2. 攻擊原理
3. 防護措施

Token認證，Referer驗證(頁面來源) 隱藏令牌

2. XSS
1. 基本概念

跨域腳本攻擊

2. 攻擊原理

注入腳本 http://www.imooc.com/learn/812

3. 防護措施

http://www.imooc.com/learn/812

區別：XSS：注入腳本運行 CSRF：利用自己的漏洞執行自己的接口

12.算法：

1.排序

冒泡排序 快速排序 選擇排序 希爾排序 二分法排序

2.堆棧，列隊，鏈表
3.遞歸
4.波蘭式和逆波蘭式
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程