系統面試

草木紅發表於2020-11-01

一、一面/二面

(一) 頁面佈局

假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各位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盒模型

談談你對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協議

HTTP協議的主要特點
簡單快速：
靈活：通過同一套http協議可以傳輸不同的請求內容
無連線：
無狀態：
HTTP報文的組成部分
HTTP方法
POST和GET的區別
HTTP狀態碼
什麼是持久化連結
http 1.1支援 1.0不支援
什麼是管線化

(五) 物件導向

類與例項

類的宣告
生成例項

類與繼承

如何實現繼承
繼承的幾種方式

(六) 原型鏈

原型鏈類

建立物件有幾種方法

//方式一：字面量
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屬於誰的例項使用：ａ.__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;
	}
}

(七) 通訊

什麼是同源策略及限制
源：協議，域名，埠
限制：
- Cookie、LocalStorage和IndexDB無法讀取
- DOM 無法獲得
- AJAX請求不能傳送
前後端如何通訊
- Ajax : 同源
- websocket：可以非同源
- CORS：可以非同源

如何建立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)
                        }
                    }
                }
            }
        }

跨域通訊的幾種方式
- 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找
波蘭式和逆波蘭式

二、二面/三面

(一)渲染機制類

什麼是DOCTYPE及作用
doctype就是告訴瀏覽器什麼是DTD
4.0包括嚴格模式和寬鬆模式
瀏覽器渲染過程
重排Reflow
重繪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

(三)頁面效能

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

資源壓縮合並，減少HTTP請求

非核心程式碼非同步載入》非同步載入的方式》非同步載入的區別
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是在載入完之後立即執行，如果是多個，執行順序額載入順序無關

利用瀏覽器快取》快取的分類》快取的原理
利用CDN

預解析DNS

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

(四)錯誤監控

前端錯誤的分類
- 即時執行錯誤：程式碼錯誤
- 資源價值錯誤
錯誤的捕獲方式

即時執行錯誤的捕獲方式
- try…catch
- window.onerror
資源載入錯誤
- object.onerror
- performance.getEntries()
- Error事件捕獲
- 延伸：跨域的js執行錯誤可以捕獲嗎，錯誤提示是什麼，應該怎麼處理。

上報錯誤的基本原理

三、三面/四面

作業系統面試題
2020-09-28
作業系統面試題
面試資料-作業系統
2020-12-30
面試作業系統
作業系統面試經驗
2024-03-14
作業系統面試
分散式系統面試連環炮
2019-03-27
分散式面試
系統設計面試完整列表
2022-11-27
面試
系統設計相關面試題
2021-11-18
面試題
CodeKarle：推特系統設計面試
2022-01-27
面試
作業系統常見面試題
2021-10-02
作業系統面試題
面試CS基礎之作業系統
2017-03-24
面試作業系統
作業系統筆試、面試題
2014-06-10
作業系統筆試面試題
系統設計面試的萬金油
2021-09-10
面試
面試必考：秒殺系統如何設計？
2021-08-17
面試
如何利用系統思維準備面試？
2018-05-18
面試
《吊打面試官》系列-秒殺系統設計
2020-02-12
面試
作業系統常見面試題總結
2014-06-10
作業系統面試題
面試每日一題005：常見的遊戲經濟系統有哪些？（系統向）
2020-03-30
面試每日一題遊戲
面試官：系統需求多變時如何設計？
2021-11-23
面試
面試題：如何設計一個高併發系統？
2019-02-23
面試題
[Linux]經典面試題 - 系統管理 - 備份策略
2021-06-23
Linux面試題
計算機面試重難點之作業系統
2021-08-19
計算機面試作業系統
作業系統（考研，面試，期末複習）- 持續更新
2020-10-22
作業系統面試
作業系統、網路等八股面試題
2021-11-18
作業系統面試題
面試每日一題021：如何設計一個RPG養成系統？（系統向）
2020-04-24
面試每日一題
Linux系統運維面試題，Linux運維經典面試題講解
2019-04-22
Linux運維面試題
Java架構師面試題全集：Java基礎+技術框架+系統架構+分散式系統
2018-10-16
Java架構面試題框架分散式
系統架構設計面試指南(01)-微服務和CAP
2023-12-25
架構面試微服務
系統設計面試模擬 | 如何設計Netflix?
2017-09-27
面試
24 個必知必會的系統管理員面試問題
2019-12-14
面試
軟體測試系統學習流程和常見面試題
2020-11-23
面試題
給位元組的學姐講如何準備“系統設計面試”
2020-11-05
面試
CURD系統怎麼做出技術含量--怎樣引導面試
2021-11-09
面試
黑馬程式設計師面試題一(交通燈管理系統)
2013-12-05
程式設計師面試題
安卓系統工程師2018（面試題整理，含答案）
2018-09-06
安卓工程師面試題
系統設計（System Design）應該怎麼去應對面試？
2020-11-28
面試
系統架構設計面試指南(02)-MQ和檔案儲存
2024-01-02
架構面試MQ
面試每日一題003：基本的遊戲戰鬥公式有哪些？（系統向）
2020-03-26
面試每日一題遊戲公式
Android 高階面試-5：四大元件、系統原始碼等
2019-02-26
Android面試元件原始碼
開發多年HashMap原理不知道，Java開發者面試如何系統複習
2021-09-22
HashMapJava面試