耗時6小時的同花順面試

JavaScript · 發表 2019-03-14 15:32:51

摘要：簡歷就是你的臉，能將簡歷寫得好這說明一個人概括和表達能力不錯。這些都是能力的體現，一定要重視，以前我就是忽視了這一點（間接導致面試不成功）。好的簡歷都是改出來的。注意：千萬不要給自己挖坑，不要寫自己答不上來的知識點。要在面試之前，把簡歷上的知識點和延伸點都弄懂，如果你連簡歷上的寫的知識點都弄不...

簡歷就是你的臉，能將簡歷寫得好這說明一個人概括和表達能力不錯。這些都是能力的體現，一定要重視，以前我就是忽視了這一點（間接導致面試不成功）。好的簡歷都是改出來的。注意：千萬不要給自己挖坑，不要寫自己答不上來的知識點。要在面試之前，把簡歷上的知識點和延伸點都弄懂，如果你連簡歷上的寫的知識點都弄不懂，別人憑什麼錄取你。

跳槽和離職理由要恰當。

這一點很關鍵。雖然你的能力很強，但是你的理由不切當，別人一樣不會錄取你。公司歸屬感很重要滴。大廠不會招進一個隨時會走的人，也不會招一個為了金錢跳槽的人。一般理由都有：1，工資太低，想加薪；2，為了提升技術；3，換一個氛圍；4，其他因素（譬如，小孩上學、另一伴的工作、父母要求等等）。個人感覺，不能說理由1。大廠會認為你是金錢主義者，下一家給的多，你就去，毫無歸屬感。推薦理由2、理由3和理由4,哈哈，雖然你的目標是加薪。

注重平時積累（尤其是基礎知識和原理）

我19屆的，今年才畢業，已經在濱江實習了9個月了。這幾個月裡，我兢兢業業，刻苦努力完成公司裡的專案任務。我一邊做專案，一邊做筆記。推薦有道雲筆記。之前用過印象。哎，充滿金錢味的筆記（買不起會員）。我遇到過的bug，我會記載下來。在網上看到的優秀文章和優秀部落格，都是放進筆記中。我每天都會做總結，不僅有利於鞏固複習，還鍛鍊了自己概括能力，何樂而不為呢？面試前將筆記刷一遍，將面經刷一遍。重要的是前端面試題刷一遍（很多多會考到，沒考到就會問到，沒問到那也是你的隱形財富）。

面試前

其實筆試和麵試各1個小時，在路上竟然花了4個小時。下午4點約的面試，我早早就到了同花順，發現才1點多，是我太早了，突然想到一句話：準時是禮貌，早到是修養 :100: 。

筆試題

筆試題在網上可以找到 var A='當時的答案' var B='現在的答案'

JavaScript包括哪些資料型別，請分別編寫3種以上型別的判斷函式如：isString（）？

簡單型別：null、undefined、number、string、array 複雜型別：object 看不懂後者問的是啥。

字串、數字、布林、陣列、物件、null、undefined typeof, instanceof, isArray()?

編寫一個JavaScript函式，實時顯示當前時間，格式‘年-月-日時：分：秒’?

var date=new Date()
var year=date.getFullYear()
var month=date.getMonth()
var day=date.getDate()
var hour=date.getHours()
var minute=date.getMinutes()
var second=date.getSeconds()
console.log(year+'-'+month+'-'+day+'-'+hour+':'+minute+':'+second)
複製程式碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="show" style="width:300px;"/>
<script>
function getTime(){
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = (nowDate.getMonth() + 1) > 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1);
var day = nowDate.getDate() > 10 ? nowDate.getDate() : '0' + nowDate.getDate();
var hour = nowDate.getHours() > 10 ? nowDate.getHours() : (nowDate.getHours() == 0 ? 24 : '0' + nowDate.getHours());
var minutes = nowDate.getMinutes() > 10 ? nowDate.getMinutes() : '0' + nowDate.getMinutes();
var seconds = nowDate.getSeconds() > 10 ? nowDate.getSeconds() : '0' + nowDate.getSeconds();
var str= year +"-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
document.getElementById("show").value = str;
}
window.setInterval("getTime()", 1000);
</script>
</body>
</html>
複製程式碼

如何顯示/隱藏一個DOM元素？

display:none/display:block
複製程式碼

顯示：object.style.display="block";
隱藏：object.style.display="none";
複製程式碼

如何新增html元素的事件處理，有幾種方法。

@+事件名，忘記了。

html的元素的事件就只用控制元件自帶的的那麼幾個，
如onclick,onmousedown等等都是呼叫指令碼執行

方法：
1. 在控制元件上直接激發事件
2. 在頁面載入的時候就呼叫指令碼激發控制元件的某個事件
3. 在後臺利用後臺程式碼強行執行控制元件的事件。
或：
1. 為HTML元素的事件屬性賦值 
2. 在JS中使用el.on*** = function() {…}
3. 使用DOM2的新增事件的方法 addEventListener或attachEvent
複製程式碼

如何控制alert中的換行。

\n或者\n\r
複製程式碼

\n alert("text\ntext");
alert("再打個招呼。這裡演示了" + "\n" + "如何在訊息框中新增換行。")
複製程式碼

判斷一個字串中出現次數最多的字元，統計這個次數。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var str = "abcdefgaddda";
var obj = {};
// 每個字元出現次數
for (let i = 0; i < str.length; i++) {
var key = str[i];
typeof obj[key] === 'undefined' ? obj[key] = 1 : obj[key]++
}
var max = -1;
var max_key = key;
// 排序
for (let key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
document.write("字元:" + max_key + ",出現次數最多為:" + max + "次")
</script>
</body>
</html>
複製程式碼

判斷字串是否是這樣組成的，第一個必須是字母，後面可以是字母、數字、下劃線，總長度為5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/
console.log(reg.test("11a__a1a__a1a__a1a__"))

複製程式碼

請編寫一個JavaScript函式parseQueryString，他的用途是把URL引數解析為一個物件，如：var url=“http://witmax.cn/index.php?key0=0&key1=1&key2=2”；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function parseQueryString(url) {
var result = {};
var arr = url.split("?");
if (arr.length <= 1) {
return result;
} else {
arr = arr[1].split("&");
arr.forEach(item => {
let a = item.split('=')
result[a[0]] = a[1]
})
return result;
}
}

var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
console.log(ps)
</script>
</body>
</html>


複製程式碼

在頁面中有如下html：

<div id="field">
<input type="text" value="User Name"/>
</div><span class="red"></span>
複製程式碼

要求用閉包方式寫一個JS從文字框中取出值並在標籤span中顯示出來。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="firld">
<input type="text" value="User Name"/>
</div>
<span id="red" class="red"></span>
<span class="red"></span>
<span class="red"></span>
<span class="red"></span>

<script>
var result = (function () {
var value = document.getElementById("firld").children[0].value;
var all = document.getElementsByTagName("span");
for (let i = 0; i < all.length; i++) {
if (all[i].className == 'red') {
all[i].innerHTML = value;
}
}
})();
</script>
</body>
</html>

複製程式碼

在IE6.0下面是不支援position：fixed的，請寫一個JS使用固定在頁面的右下角。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box" class="tit"></div>
<script>
window.onscroll = window.onresize = window.onload = () => {
var getDiv = document.getElementById('box');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
getDiv.style.left = document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight + scrollTop + 'px';
}
</script>
</body>
</html>
複製程式碼

請實現，滑鼠移到頁面中的任意標籤，顯示出這個標籤的基本矩形輪廓。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit {
display: block;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="box" class="tit">div</div>
<p class="tit">p</p>
<a class="tit" href="www.baidu.com" alt="www.baidu.com">a</a>
<script>
function mouseBorder(t) {
var c = t.childNodes

for (let i = 0; i < c.length; i++) {
var d = c[i];

if (d.nodeType == 1) {
d.onmouseover = function () {
this.style.border = '1px solid red'
}
d.onmouseout = function () {
this.style.border = ''
}
mouseBorder(d);
}
}

}

mouseBorder(document.body);
</script>
</body>
</html>
複製程式碼

js的基礎物件有哪些，window和document的常用的方法和屬性列出來

window屬性：location 方法：alert()、 document屬性：方法：getElementById(),getElementsByName()

B：

String,Number,Boolean

Window:

方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

屬性：name,parent,screenLeft,screenTop,self,top,status

Document

方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

屬性：cookie,doctype,domain,documentElement,readyState,URL,
複製程式碼

JavaScript中如何對一個物件進行深度clone

JSON.parse(JSON.stringify(obj))
複製程式碼

B：

function cloneObject(o) {if(!o || 'object' !== typeof o) {return o;}var c = 'function' === typeof o.pop ? [] : {};var p, v;for(p in o) {if(o.hasOwnProperty(p)) {v = o[p];if(v && 'object' === typeof v) {c[p] = Ext.ux.clone(v);}else {c[p] = v;}}}return c;};
複製程式碼

js中如何定義class，如何擴充套件protope？

FUNCTION.protope.myName=function(){
}
複製程式碼

B：

Ele.className = “***”; //***在css中定義，形式如下：.*** {…}

A.prototype.B = C;

A是某個建構函式的名字

B是這個建構函式的屬性

C是想要定義的屬性的值
複製程式碼

ajax是什麼？ajax的互動模型？同步和非同步的區別？如何解決跨域問題？

ajax是javascript非同步通訊機制
同步阻塞，只有一個任務完成後才能完成下一個任務非同步非阻塞，等待一個任務的同時可以執行另一個任務
ACAO、nigix

B：

Ajax是多種技術組合起來的一種瀏覽器和伺服器互動技術，基本思想是允許一個網際網路瀏覽器向一個遠端頁面/服務做非同步的http呼叫，並且用收到的資料來更新一個當前web頁面而不必重新整理整個頁面。該技術能夠改進客戶端的體驗。包含的技術：

XHTML：對應W3C的XHTML規範，目前是XHTML1.0。

CSS：對應W3C的CSS規範，目前是CSS2.0

DOM：這裡的DOM主要是指HTML DOM，XML DOM包括在下面的XML中

JavaScript：對應於ECMA的ECMAScript規範

XML：對應W3C的XML DOM、XSLT、XPath等等規範

XMLHttpRequest：對應WhatWG的Web Applications1.0規範（http://whatwg.org/specs/web-apps/current-work/）

AJAX互動模型

同步：指令碼會停留並等待伺服器傳送回覆然後再繼續

非同步：指令碼允許頁面繼續其程序並處理可能的回覆

跨域問題簡單的理解就是因為JS同源策略的限制，a.com域名下的JS無法操作b.com或c.a.com下的物件，具體場景如下：

PS：（1）如果是埠或者協議造成的跨域問題前端是無能為力的

(2) 在跨域問題上，域僅僅通過URL的首部來識別而不會嘗試判斷相同的IP地址對應的域或者兩個域是否對應一個IP

前端對於跨域的解決辦法：

(1) document.domain+iframe

(2) 動態建立script標籤
複製程式碼

請給出非同步載入js方案，不少於兩種？

async、defer

預設情況javascript是同步載入的，也就是javascript的載入時阻塞的，後面的元素要等待javascript載入完畢後才能進行再載入，對於一些意義不是很大的javascript，如果放在頁頭會導致載入很慢的話，是會嚴重影響使用者體驗的。

(1) defer，只支援IE
defer屬性的定義和用法（我摘自w3school網站）
defer 屬性規定是否對指令碼執行進行延遲，直到頁面載入為止。
有的 javascript 指令碼 document.write 方法來建立當前的文件內容，其他指令碼就不一定是了。

如果您的指令碼不會改變文件的內容，可將 defer 屬性加入到

(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦指令碼可用，則會非同步執行。
示例：
複製程式碼 程式碼如下:

註釋：async 屬性僅適用於外部指令碼（只有在使用 src 屬性時）。
註釋：有多種執行外部指令碼的方法：
•如果 async="async"：指令碼相對於頁面的其餘部分非同步地執行（當頁面繼續進行解析時，指令碼將被執行）
•如果不使用 async 且 defer="defer"：指令碼將在頁面完成解析時執行
•如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行指令碼

(3) 建立script，插入到DOM中，載入完畢後callBack，見程式碼：
複製程式碼 程式碼如下:

function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
複製程式碼

有關連結：非同步載入js的幾種方式

參考答案：

預設情況javascript是同步載入的，也就是javascript的載入時阻塞的，後面的元素要等待javascript載入完畢後才能進行再載入，對於一些意義不是很大的javascript，如果放在頁頭會導致載入很慢的話，是會嚴重影響使用者體驗的。

非同步載入方式：

(1) defer，只支援IE

(2) async：

(3) 建立script，插入到DOM中，載入完畢後callBack，見程式碼：function loadScript(url, callback){var script = document.createElement("script")script.type = "text/javascript";if (script.readyState){ //IEscript.onreadystatechange = function(){if (script.readyState == "loaded" ||script.readyState == "complete"){script.onreadystatechange = null;callback();}};} else { //Others: Firefox, Safari, Chrome, and Operascript.onload = function(){callback();};}script.src = url;document.body.appendChild(script);}
複製程式碼

多瀏覽器檢測通過什麼？

B：

（1） navigator.userAgent

（2） 不同瀏覽器的特性，如addEventListener
複製程式碼

面試題

面試知識點兩個面試官人超級好。

window.onload()在哪個週期中？

沒聽清楚，懵逼了。

B：

當文件內容完全載入完成會觸發該事件。可以為此事件註冊事件處理函式，並將要執行的指令碼程式碼放在事件處理函式中，於是就可以避免獲取不到物件的情況。

如何非同步載入js？

見筆試題

vue生命週期？

beforeCreate：此時獲取不到prop和data中的資料； created：可以獲取到prop和data中的資料； beforeMount：獲取到了VDOM; mounted：VDOM解析成了真實DOM; beforeUpdate：在更新之前呼叫； updated：在更新之後呼叫； keep-alive：切換元件之後，元件放進activated，之前的元件放進deactivated； beforeDestory：在元件銷燬之前呼叫，可以解決記憶體洩露的問題，如setTimeout和setInterval造成的問題。 destory：元件銷燬之後呼叫。

快取

快取可以說是效能優化中簡單高效的一種優化方式了，它可以顯著減少網路傳輸所帶來的損耗。

對於一個數據請求來說，可以分為發起網路請求、後端處理、瀏覽器響應三個步驟。瀏覽器快取可以幫助我們在第一和第三步驟中優化效能。比如說直接使用快取而不發起請求，或者發起了請求但後端儲存的資料和前端一致，那麼就沒有必要再將資料回傳回來，這樣就減少了響應資料。

接下來的內容中我們將通過以下幾個部分來探討瀏覽器快取機制：

快取位置快取策略實際場景應用快取策略

socket-io與http請求的區別?

Socket實現伺服器與客戶端之間的物理連線，並進行資料傳輸。主要有TCP/UDP兩個協議。Socket處於網路協議的傳輸層。
TCP：傳輸控制協議，面向連線的的協議，穩定可靠。當客戶和伺服器彼此交換資料前，必須先在雙方之間建立一個TCP連線，之後才能傳輸資料。
UDP：廣播式資料傳輸，UDP不提供可靠性，它只是把應用程式傳給IP層的資料報傳送出去，但是並不能保證它們能到達目的地。由於UDP在傳輸資料報前不用在客戶和伺服器之間建立一個連線，且沒有超時重發等機制，故而傳輸速度很快。
優點：1.傳輸資料為位元組級，傳輸資料可自定義，資料量小。相應的移動端開發，手機費用低
2.傳輸資料時間短，效能高
3.適合C/S之間資訊實時互動
4.可以加密，資料安全性高
缺點： 1.需要對傳輸的資料進行解析，轉化為應用級的資料
2.對開發人員的開發水平要求高
3.相對於Http協議傳輸，增加了開發量

Http請求主要有http協議，基於http協議的soap協議，常見的http資料請求方式有get和post，web服務

優點：1.基於應用級的介面使用方便
2.要求的開發水平不高，容錯性強
缺點： 1.傳輸速度慢，資料包大。
2.如實現實時互動，伺服器效能壓力大
3.資料傳輸安全性差

HTTP協議：簡單物件訪問協議，對應於應用層，HTTP協議是基於TCP連線的

tcp協議：對應於傳輸層

ip協議：對應於網路層 
TCP/IP是傳輸層協議，主要解決資料如何在網路中傳輸；而HTTP是應用層協議，主要解決如何包裝資料。

Socket是對TCP/IP協議的封裝，Socket本身並不是協議，而是一個呼叫介面（API），通過Socket，我們才能使用TCP/IP協議。

 

http連線：http連線就是所謂的短連線，即客戶端向伺服器端傳送一次請求，伺服器端響應後連線即會斷掉；

socket連線：socket連線就是所謂的長連線，理論上客戶端和伺服器端一旦建立起連線將不會主動斷掉；但是由於各種環境因素可能會是連線斷開，比如說：伺服器端或客戶端主機down了，網路故障，或者兩者之間長時間沒有資料傳輸，網路防火牆可能會斷開該連線以釋放網路資源。所以當一個socket連線中沒有資料的傳輸，那麼為了維持連線需要傳送心跳訊息~~具體心跳訊息格式是開發者自己定義的



Socket適用場景：網路遊戲，銀行互動，支付。
http適用場景：公司OA服務，網際網路服務。
複製程式碼

generator如何執行？如何讓generator自動next（不通過next.next.next）？

function* f(){
yeild()
yeild()
yeild()
...
}
f().next().next()
複製程式碼

async await 中間加上await

Generator 算是 ES6 中難理解的概念之一了，Generator 最大的特點就是可以控制函式的執行。在這一小節中我們不會去講什麼是 Generator，而是把重點放在 Generator 的一些容易困惑的地方。

function *foo(x) {
let y = 2 * (yield (x + 1))
let z = yield (y / 3)
return (x + y + z)
}
let it = foo(5)
console.log(it.next())// => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

你也許會疑惑為什麼會產生與你預想不同的值，接下來就讓我為你逐行程式碼分析原因

首先 Generator 函式呼叫和普通函式不同，它會返回一個迭代器
當執行第一次 next 時，傳參會被忽略，並且函式暫停在 yield (x + 1) 處，所以返回 5 + 1 = 6
當執行第二次 next 時，傳入的引數等於上一個 yield 的返回值，如果你不傳參，yield 永遠返回 undefined。此時 let y = 2 * 12，所以第二個 yield 等於 2 * 12 / 3 = 8
當執行第三次 next 時，傳入的引數會傳遞給 z，所以 z = 13, x = 5, y = 24，相加等於 42
Generator 函式一般見到的不多，其實也於他有點繞有關係，並且一般會配合 co 庫去使用。當然，我們可以通過 Generator 函式解決回撥地獄的問題，可以把之前的回撥地獄例子改寫為如下程式碼：

function *fetch() {
yield ajax(url, () => {})
yield ajax(url1, () => {})
yield ajax(url2, () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

複製程式碼

遇到過的相容性問題？

一直做的是PC端的專案，公司不考慮相容性問題，基本都是跑在chrome瀏覽器上的。肯定不能這麼說啊 B:

遇到的相容性問題與解決方法
瀏覽器相容問題一：不同瀏覽器的標籤預設的外補丁和內補丁不同

問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS裡*{margin:0;padding:0;}

備註：這個是最常見的也是最易解決的一個瀏覽器相容性問題，幾乎所有的CSS檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。

瀏覽器相容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最常見的瀏覽器相容問題）

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性

備註：我們最常用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設定如果用margin實現，這就是一個必然會碰到的相容性問題。

瀏覽器相容問題三：設定較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設定高度

問題症狀：IE6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度

碰到頻率：60%

解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。

備註：這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。

瀏覽器相容問題四：行內屬性標籤，設定display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug

問題症狀：IE6裡的間距比超過設定的間距

碰到機率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，為了設定寬高，我們需要設定display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

瀏覽器相容問題五：圖片預設有間距

問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。

碰到機率：20%

解決方案：使用float屬性為img佈局

備註：因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裡，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器相容問題的用法，所以我禁止他們使用）

瀏覽器相容問題六：標籤最低高度設定min-height不相容

問題症狀：因為min-height本身就是一個不相容的CSS屬性，所以設定min-height時不能很好的被各個瀏覽器相容

碰到機率：5%

解決方案：如果我們要設定一個標籤的最小高度200px，需要進行的設定為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。

瀏覽器相容問題七：透明度的相容CSS設定

做相容頁面的方法是：每寫一小段程式碼（佈局中的一行或者一塊）我們都要在不同的瀏覽器中看是否相容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為瀏覽器對標籤的預設屬性解析不同造成的，只要我們稍加設定都能輕鬆地解決這些相容問題。如果我們熟悉標籤的預設屬性的話，就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題。

/* CSS hack*/ 
我很少使用hacker的，可能是個人習慣吧，我不喜歡寫的程式碼IE不相容，然後用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨遊；其他（IE8 chrome ff safari opera等）

◆IE6認識的hacker 是下劃線_ 和星號 *

◆IE7 遨遊認識的hacker是星號 *

比如這樣一個CSS設定：

height:300px;*height:200px;_height:100px; 
IE6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設定，認為高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設定，把高度設定為100px；

IE7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先順序相同且想衝突的屬性設定後一個會覆蓋掉前一個，所以書寫的次序是很重要的。
複製程式碼

promise原理？

三種狀態：pending、resolve和reject 三種狀態中，除了pending可以改成後兩者，其他都不能變，成功就往resolve去，失敗就往reject去。

Promise 翻譯過來就是承諾的意思，這個承諾會在未來有一個確切的答覆，並且該承諾有三種狀態，分別是：

等待中（pending）
完成了 （resolved）
拒絕了（rejected）
這個承諾一旦從等待狀態變成為其他狀態就永遠不能更改狀態了，也就是說一旦狀態變為 resolved 後，就不能再次改變

new Promise((resolve, reject) => {
resolve('success')
// 無效
reject('reject')
})

當我們在構造 Promise 的時候，建構函式內部的程式碼是立即執行的

new Promise((resolve, reject) => {
console.log('new Promise')
resolve('success')
})
console.log('finifsh')
// new Promise -> finifsh
Promise 實現了鏈式呼叫，也就是說每次呼叫 then 之後返回的都是一個 Promise，並且是一個全新的 Promise，原因也是因為狀態不可變。如果你在 then 中 使用了 return，那麼 return 的值會被 Promise.resolve() 包裝

Promise.resolve(1)
.then(res => {
console.log(res) // => 1
return 2 // 包裝成 Promise.resolve(2)
})
.then(res => {
console.log(res) // => 2
})
當然了，Promise 也很好地解決了回撥地獄的問題，可以把之前的回撥地獄例子改寫為如下程式碼：

ajax(url)
.then(res => {
console.log(res)
return ajax(url1)
}).then(res => {
console.log(res)
return ajax(url2)
}).then(res => console.log(res))
前面都是在講述 Promise 的一些優點和特點，其實它也是存在一些缺點的，比如無法取消 Promise，錯誤需要通過回撥函式捕獲。
複製程式碼

koa和express？

koa和express原理和用法都是一樣的，app.get/post/put要用下，路由分發方便。多了一generator

Express 採用 callback 來處理非同步，Koa v1 採用 generator，Koa v2 採用 async/await。下面分別對 js 當中 callback、promise、generator、async/await 這四種非同步流程控制進行了對比， generator 和 async/await 使用同步的寫法來處理非同步，明顯好於 callback 和 promise，async/await 在語義化上又要比 generator 更強。錯誤處理 Express 使用 callback 捕獲異常，對於深層次的異常捕獲不了，Koa 使用 try catch，能更好地解決異常捕獲。

Express 優點：線性邏輯，通過中介軟體形式把業務邏輯細分、簡化，一個請求進來經過一系列中介軟體處理後再響應給使用者，清晰明瞭。缺點：基於 callback 組合業務邏輯，業務邏輯複雜時巢狀過多，異常捕獲困難。

Koa 優點：首先，藉助 co 和 generator，很好地解決了非同步流程控制和異常捕獲問題。其次，Koa 把 Express 中內建的 router、view 等功能都移除了，使得框架本身更輕量。缺點：社群相對較小

你有哪些優秀程式碼可以講講？哪些好專案？

我提到的是我做得的專案中的貢獻。

你怎麼學習？

github關注大佬動態，看他們部落格。慕課網、Stack Overflow，v2、掘金等等。

會用哪些linux命令？

mkdir、cd、shutdowm、ls，當時只想到常用的一些。

B:常用的

cat、chmod、file、find、git、ln、mv、rcp、scp、which、whereis、grep、let、sort、cd、rm、kill、shutdowm、sudo、gzip、zip

看什麼書？其中有什麼你要說的

犀牛書和紅皮書當字典查。generator不太懂其原理。

你為什麼要從事前端？什麼時候？未來展望？為什麼要用vue？

喜歡前端啊,喜歡展示的效果
大二的時候
未來3-5年成為前端技術大佬，具體措施是將vue原理看懂的同時js底層深入。之後往服務端靠。
經朋友推薦，vue輕量級，有模板，上手快。

echarts如何畫圖？

A: 我不知道，但是我有一點點想法。用canvas畫，比如要畫一個柱狀圖，先給他一個x軸和y軸，然後將每個柱子往上畫，柱子之間的距離和粗細要進行計算

B: 第一、echarts的實現，是通過canvas來實現的。由於canvas的限制，所以echarts在實現的時候多是繪製一些，規則的、可預期的、易於實現的東西。

第二、echarts的核心就是options的配置物件。一般而言，我們使用最多的是直角座標圖、極點圖、以及地圖。

第三、對於直角座標，必須配置xAsix和yAxis；對於極點座標，必須配置radiusAxis和angleAxis；

第四、對series系列的認識，它是一個數組。陣列中的每一項代表著一個單獨的系列，可以配置顯示為散點圖scatter、折線圖line、柱狀圖bar等等功能。series的data一般是一個每一項都是陣列的陣列，類似於：[[],[],[]]這樣的形式，裡層陣列一般代表xAsix、yAxis或者radiusAxis、angleAxis等等。

參考網上鍊接:echarts繪圖

你用什麼佈局？

flex佈局和grid佈局

1、邊距與浮動佈局
1.1、負邊距
1.1.1、向上移動
1.1.2、去除列表右邊框
1.1.3、負邊距+定位，實現水平垂直居中
1.1.4、去除列表最後一個li元素的border-bottom
1.2、雙飛翼佈局
1.3、多欄佈局
1.3.1、柵格系統
1.3.2、多列布局
2、流式佈局（Fluid）
3、瀑布流佈局
3.1、常見瀑布流佈局網站
3.2、特點
3.3、masonry實現瀑布流佈局
3.3.1、下載並引用masonry
3.3.2、準備內容
3.3.3、初始化外掛
3.3.4、使用了圖片的瀑布流
3.3.5、圖片基礎
3.4、圖片載入處理
3.4.1、imagesLoaded 圖片載入進度監聽
3.4.2、圖片延遲載入
3.5、Infinite Scroll 滾動分頁
3.5.1、非同步載入普通頁面
3.5.2、非同步載入json並解析
4、響應式佈局（Responsive）
4.1、媒介型別
4.2、媒介查詢的應用位置（Media Queries）
4.3、Media Queries Hello World
4.4、媒介查詢語法
4.5、響應式柵格系統（Responsive）
4.6、respond.js
4.7、移動優先（Mobile First）
4.8、視區（viewport）
4.8.1、需要設定viewport的原因
4.8.2、設定viewport的方法
4.8.3、小節
5、REM實現響應式佈局
5.1、使用javascript設定相對尺寸
5.2、使用媒介查詢設定字型尺寸
6、彈性佈局（Flexbox）


複製程式碼

參考網上鍊接:頁面佈局大全

把UI圖給你，你要怎麼操作？沒有UI庫呢？

A: 先選UI庫，將UI圖拆分，拆分成一個個元件。選擇佈局，flex，grid佈局。用html和css實現框架，完成細枝末節。

B: 拿到UI圖，我們就需要快速分割頁面佈局。再進行考慮是用哪種佈局方式，如響應式、網格、FlexBox佈局等。而有些時候，我們就需要自己規劃，製作一個基本的線框圖（Wireframe）等等。

如何SEO?

除了服務端渲染，還可以通過語義化標籤：article、section

頁面中杜絕出現死連結（404頁面）（伺服器處理）
避免瀏覽器中異常錯誤的丟擲
增加關鍵詞優化
對於不經常更新的資料，最好採用瀏覽器的304快取做處理
使用字型圖示代替一些頁面中的位置
合理的title、description、keywords
語義化的HTML程式碼
重要內容HTML程式碼放在最前
少用iframe：搜尋引擎不會抓取iframe中的內容
非裝飾性圖片必須用alt
提高網站速度

我的問題：

技術棧？

目前是Vue，之後會轉向React+typescript。

團建？打球？

一週一次團建，還沒有技術分享會
樓上有足球場、旁邊是籃球場

996嗎？

不是，是彈性工作制度。

如果我進來，我做什麼？

你可以做公司的活動頁，小程式的等等。

面試後

面試完後千萬記得要做筆記，就算沒通過，也是一份面試經驗，要把它當作學習。水滴石穿 :100: 。

入職前

在和HR聊到薪資問題的時候，不妨大膽問個清楚：除了工資之外，還有其他的薪資福利嗎？比如五險一金，考核標準，福利，社保，補貼和獎金。

補貼是指車貼、飯貼、房貼、汽油補貼、出差津貼、通訊費、置裝費、過節費等工資以外的現金福利，另外一些企業還會設立各種名目繁多的獎金，如半年獎、季度獎、加班獎、先進獎、考勤獎等。手把手教你跟HR談工資
五險一金，包括醫療保險、養老保險、失業保險、工傷保險、生育保險、住房公積金。 HR和我談五險一金，我該知道哪些以防被坑？

歡迎關注我的掘金賬號。有興趣也可以關注我的 GitHub 。當然也可以加我微信：qiufeihong0203。原文