系統面試

草木紅發表於2020-11-01

一、一面/二面

(一) 頁面佈局

  1. 假設高度已知,請寫出三欄佈局,其中左欄、右欄寬度各位300px,中間自適應。
    在這裡插入圖片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout {
            margin-top: 10px;
        }

        .layout .left,
        .layout .right,
        .layout .center {
            height: 200px;
        }

        .layout .left,
        .layout .right {
            background-color: antiquewhite;
            width: 300px;
        }

        .layout .center {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <section class="layout float">
        <style>
            /*左右浮動,脫離文件流,中間部分不浮動依舊在文件流中,因為中間部分是塊元素
              所以會沾滿整個頁面寬度(不是左右塊剩下的寬度),文字實現環繞效果
            */
            .layout.float .left {
                float: left;
            }

            .layout.float .right {
                float: right;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <!--注意中間部分所在的位置-->
            <div class="center">
                <h1>浮動解決方案</h1>
            </div>
        </article>
    </section>
    <section class="layout position">
        <style>
            .position .left-center-right {
                position: relative;
            }

            .position .left-center-right .left,
            .position .left-center-right .right {
                position: absolute;
                top: 0;
            }

            .position .left-center-right .left {
                left: 0;
            }

            .position .left-center-right .right {
                right: 0;
            }

            .position .left-center-right .center {
                margin: 0 300px;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <!--注意中間部分所在的位置-->
            <div class="center">
                <h1>定位解決方案</h1>
            </div>
        </article>
    </section>
    <section class="layout flexbox">
        <style>
            .flexbox .left-center-right {
                display: flex;
            }

            .flexbox .left-center-right .center {
                flex: 1;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <!--注意中間部分所在的位置-->
            <div class="center">
                <h1>flexbox解決方案</h1>
            </div>
            <div class="right"></div>

        </article>
    </section>
    <section class="layout table">
        <style>
           .table .left-center-right{
                display: table;
                width: 100%;
            }

            .table .left-center-right>div {
                display: table-cell;
            }
            .table .left-center-right .center{
                display: block;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <!--注意中間部分所在的位置-->
            <div class="center">
                <h1>table解決方案</h1>
            </div>
            <div class="right"></div>

        </article>
    </section>
    <section class="layout grid">
        <style>
           .grid .left-center-right{
                display: grid;
                width: 100%;
               grid-template-columns: 300px auto 300px;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <!--注意中間部分所在的位置-->
            <div class="center">
                <h1>grid解決方案</h1>
            </div>
            <div class="right"></div>

        </article>
    </section>
</body>
</html>

延伸:
(1). 高度未知,哪個還可以使用
flex、表格
(2). 相容性(哪個最實用)
(3). 各自的優缺點
[1]. 浮動: 優點相容性好,缺點浮動造成BFC問題
[2]. 定位:優點快捷相容性好,缺點佈局脫離了文件流,造成佈局上不好
[3]. flex:處理掉上述的兩個缺點,移動端常見,相容性不好
[4]. 表格:相容性好,缺點seo不好,當一個超過固定高度時,其他的也會變高
[5].網格:佈局方便,相容不好

頁面佈局小結:

  • 語義化掌握到位
  • 頁面佈局理解深刻
  • css基礎知識紮實
  • 四位靈活且積極上進
  • 程式碼書寫規範

頁面佈局的變通

  • 左右固定,中間自適應
  • 上下高度固定,中間自適應

兩欄佈局

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

(二) css盒模型

  1. 談談你對css盒模型的認識
  • 基本概念:標準模型+IE模型

  • 標準模型和IE模型區別
    標準模型的寬和高不包括border和padding,ie模型包括

  • css如何設定這兩種模型
    box-sizing: content-box;(標準盒模型,瀏覽器預設)
    box-sizing: border-box; (ie盒模型)

  • JS如果設定獲取盒模型對應的寬和高
    dom.style.width/height (只能去內連樣式的寬和高)
    dom.currentStyle.width/height (ie支援)
    window.getComputedStyle(dom).width/height(fireFox,chrome)
    dom.getBoundingClientRect().width/height

  • 例項題(根據盒模型解釋邊距重疊)
    在父元素中內嵌一個子元素
    https://blog.csdn.net/kouzuhuai2956/article/details/106988594

  • BFC(Block formatting context)直譯為塊級格式化上下文
    BFC的基本概念
    BFC的原理
    如何建立BFC
    BFC的使用場景

  • IFC
    在這裡插入圖片描述在這裡插入圖片描述

(三) DOM事件

  • 基本概念:DOM事件的級別
    DOM0 : element.onclick = function (){}
    DOM2 : element.addEventLIstener(‘click’, function(){},false)
    DOM3 : element.addEventListener(‘keyup’, function(){}, false)
  • DOM事件模型
    捕獲和冒泡
  • DOM事件流
    捕獲、目標階段、冒泡
  • 描述DOM事件捕獲的具體流程
    window》document》html》body》…》目標
  • Event物件的常見應用
    event.preventDefault()
    event.stopPropagation()
    event.stopInnediatePropagation()
    event.currentTarget
    event.target
  • 自定義事件
    Event / CustomEvent 後者可以傳遞引數
    //這裡就是eve
    var eve = new Event("custome");
    //這裡就是ev,是一個dom節點
    ev.addEventlistener("custome", function(){
    	console.log('custome');
    });
    ev.dispatchEvent(eve);
    

(四) HTTP協議

  1. HTTP協議的主要特點
    簡單快速:
    靈活:通過同一套http協議可以傳輸不同的請求內容
    無連線:
    無狀態:

  2. HTTP報文的組成部分
    在這裡插入圖片描述

  3. HTTP方法
    在這裡插入圖片描述

  4. POST和GET的區別
    在這裡插入圖片描述

  5. HTTP狀態碼
    在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述

  6. 什麼是持久化連結
    http 1.1支援 1.0不支援
    在這裡插入圖片描述

  7. 什麼是管線化
    在這裡插入圖片描述在這裡插入圖片描述

(五) 物件導向

  1. 類與例項
  • 類的宣告
  • 生成例項
  1. 類與繼承
  • 如何實現繼承
  • 繼承的幾種方式

(六) 原型鏈

  1. 原型鏈類
  • 建立物件有幾種方法

    //方式一:字面量
    var o1 = {name:'1'};
    var o11 = new Object({name: 'o11'})
    
    //方式二:建構函式
    var M = function(){this.name = 'o2'};
    var o2 = new M()
    
    //方式三:Object.create()
    var P = {name:'o3'};
    var o3 = Object.create(P)
    

    Object.create()建立物件為什麼為空
    因為建立的例項使用原型鏈來連結的,o3.__proto__ === P,

  • 原型、建構函式、例項、原型鏈
    在這裡插入圖片描述

    • 建構函式通過new 創造例項
    • 原型的最高階為Object.prototype
    • 函式才有prototype
    • 物件才有__proto__ (其實函式也有,因為函式也是物件)
  • instanceof的原理
    在這裡插入圖片描述
    物件A繼承物件B,物件B繼承了物件C,物件A的例項a
    a instanceof A 為 true, a instanceof B 為true,a instanceof C為true
    想要更精確的判斷a屬於誰的例項使用:a.__proto__.construct === A更嚴謹

    var M = function(name){
    this.name = name;
    }
    var o3 = new M(o3);
    console.log(o3 instanceof Object); //true
    console.log(o3.__proto__ === Object);//false
    
  • new運算子
    在這裡插入圖片描述

var new2 = function(func){
	var o = Object.create(func.prototype)
	var k = func.call(o);
	if(typeof k === 'object'){
		return k
	}else{
		return o;
	}
}

(七) 通訊

  1. 什麼是同源策略及限制
    源:協議,域名,埠
    限制:
    - Cookie、LocalStorage和IndexDB無法讀取
    - DOM 無法獲得
    - AJAX請求不能傳送

  2. 前後端如何通訊
    - Ajax : 同源
    - websocket:可以非同源
    - CORS:可以非同源

  3. 如何建立Ajax
    - XMLHttoRequest 物件的工作流程
    - 相容性處理
    - 事件的觸發條件
    - 事件的觸發順序

    function json(options) {
                var opt = {
                    url: '',
                    type: 'get',
                    data: {},
                    success: function () {},
                    error: function () {}
                };
                if (opt.url) {
                    var xht = XMLHttpRequest ? new XMLHttpRequest() : new Window.ActiveXObjct("Microsoft.XMLHTTP");
                    data = opt.data;
                    url = opt.url;
                    type = opt.type.toLocaleUpperCase();
                    dataArr = [];
                    for (var k in data) {
                        dataArr.push(k + '=' + data[k]);
                    }
                    if (type == 'GET') {
                        url = url + "?" + dataArr.join('&');
                        xhr.open(type, url.replace(/\?$/g, ''), true);
                        xhr.send();
                    }
                    if (type === 'POST') {
                        xhr.open(type, url, true);
                        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                        xhr.send(dataArr.join('&'));
                    }
                    xhr.onload = function () {
                        if (xhr.status === 200 || xhr.status === 304) {
                            var res;
                            if (opt.success && opt.success instanceof Function) {
                                res = xhr.responseText;
                                if (typeof res === 'string') {
                                    res = JSON.parse(res);
                                    opt.success.call(xhr, res);
    
                                }
                            }
                        } else {
                            if (opt.error && opt.error instanceof Function) {
                                opt.error.call(xhr, res)
                            }
                        }
                    }
                }
            }
    
  4. 跨域通訊的幾種方式
    - JSONP
    利用script標籤非同步載入實現的
    - Hash
    - postMessage
    - WebSOcket
    - CORS

(八) 安全

  • xss (http//ww.imooc.com/learn/812)

  • CSRF(Cross-site request forgery) 跨站請求偽造
    基本概念和縮寫的意思

    攻擊原理
    在這裡插入圖片描述

    防禦措施
    Token驗證
    Referer 驗證
    隱藏令牌

(九) 演算法

  • 排序
    快速排序:https://segmentfault.com/a/1190000009426421
    選擇排序、希爾排序,都在這個站

  • 堆疊、佇列、連結串列
    掘金去搜.

  • 遞迴
    遞迴去segmentfault找

  • 波蘭式和逆波蘭式

二、二面/三面

(一)渲染機制類

  1. 什麼是DOCTYPE及作用
    doctype就是告訴瀏覽器 什麼是DTD
    在這裡插入圖片描述4.0包括嚴格模式和寬鬆模式
    在這裡插入圖片描述
  2. 瀏覽器渲染過程
    在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述
  3. 重排Reflow
    在這裡插入圖片描述
  4. 重繪Repaint

在這裡插入圖片描述
5. 佈局Layout

(二)js執行機制

console.log(1);
setTimeout(()=>{
	console.log(2)
}, 0)
console.log(3);
for(var i = 0; i < 4; i++){
	setTimeout(function (){
		console.log(i);
	}, 1000)
}
  • 如何理解JS的單執行緒
    同一時間只能執行一個事情
  • 什麼是任務佇列
  • 什麼是Event Loop
  • 什麼時候會觸非同步任務
  • setTimeout和setInterval
    dom時間
    es6中的promise

(三)頁面效能

題目: 提升頁面效能的方法有哪些

  1. 資源壓縮合並,減少HTTP請求

  2. 非核心程式碼非同步載入》非同步載入的方式》非同步載入的區別
    1.動態指令碼載入
    2.defer

    	<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./defer1.js" defer></script>
        <script src="./defer2.js" defer></script>
    </head>
    <body>
        <div>
            defer
        </div>
        <script>
            document.write("<p>這是writer</p>")
        </script>
        <script>
            for(var i = 0; i< 200000; i++){
                if(i%20000 ==0){
                    console.log(i);
                }
            }
        </script>
    </body>
    </html>
    

在這裡插入圖片描述

 3.async
非同步載入的區別
 1.defer是在HTML解析完之後才會執行,如果是多個,按照載入的順序依次執行
 2.async是在載入完之後立即執行,如果是多個,執行順序額載入順序無關
  1. 利用瀏覽器快取》快取的分類》快取的原理
    在這裡插入圖片描述

  2. 利用CDN

  3. 預解析DNS

    <meta http-quiv="x-dns-prefetchcontrol" content="on">
    <link rel="dns-prefetch" href="//host_name_to_prefetch.com">
    

(四)錯誤監控

  1. 前端錯誤的分類
    • 即時執行錯誤:程式碼錯誤
    • 資源價值錯誤
  2. 錯誤的捕獲方式
  • 即時執行錯誤的捕獲方式
    • try…catch
    • window.onerror
  • 資源載入錯誤
    • object.onerror
    • performance.getEntries()
    • Error事件捕獲
    • 延伸:跨域的js執行錯誤可以捕獲嗎,錯誤提示是什麼,應該怎麼處理。
      在這裡插入圖片描述
  1. 上報錯誤的基本原理
    在這裡插入圖片描述

三、三面/四面

相關文章