系統面試
一、一面/二面
(一) 頁面佈局
- 假設高度已知,請寫出三欄佈局,其中左欄、右欄寬度各位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屬於誰的例項使用: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執行錯誤可以捕獲嗎,錯誤提示是什麼,應該怎麼處理。
- 上報錯誤的基本原理
三、三面/四面
相關文章
- 作業系統面試題作業系統面試題
- 系統設計面試參考-設計Spotify系統面試
- 面試資料-作業系統面試作業系統
- 作業系統面試經驗作業系統面試
- 分散式系統面試連環炮分散式面試
- 系統設計面試完整列表面試
- 系統設計 相關面試題面試題
- CodeKarle:推特系統設計面試面試
- 作業系統常見面試題作業系統面試題
- 面試CS基礎之作業系統面試作業系統
- 作業系統筆試、面試題作業系統筆試面試題
- 作業系統之面試常考作業系統面試
- 系統設計面試的萬金油面試
- 面試必考:秒殺系統如何設計?面試
- 如何利用系統思維準備面試?面試
- 《吊打面試官》系列-秒殺系統設計面試
- 作業系統常見面試題總結作業系統面試題
- 面試每日一題005:常見的遊戲經濟系統有哪些?(系統向)面試每日一題遊戲
- 面試官:系統需求多變時如何設計?面試
- 面試題:Linux 系統基礎提問 (一)面試題Linux
- 面試題:如何設計一個高併發系統?面試題
- [Linux]經典面試題 - 系統管理 - 備份策略Linux面試題
- 計算機面試重難點 之 作業系統計算機面試作業系統
- 作業系統(考研,面試,期末複習)- 持續更新作業系統面試
- 作業系統、網路等八股面試題作業系統面試題
- 面試每日一題021:如何設計一個RPG養成系統?(系統向)面試每日一題
- Linux系統運維面試題,Linux運維經典面試題講解Linux運維面試題
- Java架構師面試題全集:Java基礎+技術框架+系統架構+分散式系統Java架構面試題框架分散式
- 系統架構設計面試指南(01)-微服務和CAP架構面試微服務
- 系統設計面試模擬 | 如何設計Netflix?面試
- 24 個必知必會的系統管理員面試問題面試
- 軟體測試系統學習流程和常見面試題面試題
- 給位元組的學姐講如何準備“系統設計面試”面試
- CURD系統怎麼做出技術含量--怎樣引導面試面試
- 黑馬程式設計師面試題一(交通燈管理系統)程式設計師面試題
- 吊打面試官!全網最全多租戶系統設計方案面試
- 安卓系統工程師2018(面試題整理,含答案)安卓工程師面試題
- 系統設計(System Design)應該怎麼去應對面試?面試