耗時6小時的同花順面試

時間  2019-11-07
標籤 耗時 小時 同花順 面試 欄目 快樂工作 简体版
原文   原文鏈接

面試前注意點

一份漂亮的簡歷很重要

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

跳槽和離職理由要恰當。

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

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

我19屆的，今年才畢業，已經在濱江實習了9個月了。這幾個月裏，我兢兢業業，刻苦努力完成公司裏的項目任務。我一邊作項目，一邊作筆記。推薦有道雲筆記。以前用過印象。哎，充滿金錢味的筆記（買不起會員）。我遇到過的bug，我會記載下來。在網上看到的優秀文章和優秀博客，都是放進筆記中。我天天都會作總結，不只有利於鞏固複習，還鍛鍊了本身歸納能力，何樂而不爲呢？面試前將筆記刷一遍，將面經刷一遍。重要的是前端面試題刷一遍（不少多會考到，沒考到就會問到，沒問到那也是你的隱形財富）。css

面試前

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

筆試題

筆試題在網上能夠找到 var A='當時的答案'||'忘記了' var B='如今的答案'前端

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

A:vue

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

B:java

字符串、數字、布爾、數組、對象、null、undefined
typeof, instanceof, isArray()?
複製代碼

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

A:node

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

B:linux

<!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元素？

A:git

display:none/display:block
複製代碼

B:

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

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

A:

@+事件名，忘記了。

B:

html的元素的事件就只用控件自帶的的那麼幾個，
如onclick,onmousedown等等都是調用腳本執行

方法：
1. 在控件上直接激發事件
2. 在頁面加載的時候就調用腳本激發控件的某個事件
3. 在後臺利用後臺代碼強行執行控件的事件。
  或：
1. 爲HTML元素的事件屬性賦值 
2. 在JS中使用el.on*** = function() {…}
3. 使用DOM2的添加事件的方法 addEventListener或attachEvent
複製代碼

如何控制alert中的換行。

A:

\n或者\n\r
複製代碼

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

B:

<!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

B:

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=「witmax.cn/index.php?k…

B:

<!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中顯示出來。

B:

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


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

複製代碼

閉包有問題,忙完繼續改

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

B:

<!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>
複製代碼

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

B:

<!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的經常使用的方法和屬性列出來

A:

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

A:

JSON.parse(JSON.stringify(obj))
複製代碼

B：

function cloneObject(o) {
    // 1. 是不是object,是否爲空
    if (!o || 'object' !== typeof o) {
        return o;
    }
    // 2. 判斷其是數組仍是對象,並建立新的對象或數組
    var c = 'function' === typeof o.pop ? [] : {};

    // 3. 遍歷對象或數組
    for (let p in o) {
        // 4. 判斷o中的屬性p是否存在
        if (o.hasOwnProperty(p)) {
            let v = o[p];
            v && 'object' === typeof v ? c[p] = Ext.ux.clone(v) : c[p] = v
        }
    }
    return c;
}

a = {'name': 'qiufeihong'}
b = cloneObject(a)
a.name = 'youyuxi'
console.log('a', a)
console.log('b', b)

複製代碼

js中如何定義class，如何擴展protope？

A:

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

B：

Ele.className = 「***」; //***在css中定義，形式以下：.*** {…}

A.prototype.B = C;

A是某個構造函數的名字

B是這個構造函數的屬性

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

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

A:

  • 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方案，很多於兩種？

A:

async、defer

B:

默認狀況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){ //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);}
複製代碼

多瀏覽器檢測經過什麼？

B：

（1） navigator.userAgent

  （2） 不一樣瀏覽器的特性，如addEventListener
複製代碼

面試題

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

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

A:

沒聽清楚，懵逼了。

B：

當文檔內容徹底加載完成會觸發該事件。能夠爲此事件註冊事件處理函數，並將要執行的腳本代碼放在事件處理函數中，因而就能夠避免獲取不到對象的狀況。

如何異步加載js？

見筆試題

vue生命週期？

A:

beforeCreate：此時獲取不到prop和data中的數據； created：能夠獲取到prop和data中的數據； beforeMount：獲取到了VDOM; mounted：VDOM解析成了真實DOM; beforeUpdate：在更新以前調用； updated：在更新以後調用； keep-alive：切換組件以後，組件放進activated，以前的組件放進deactivated； beforeDestory：在組件銷燬以前調用，能夠解決內存泄露的問題，如setTimeout和setInterval形成的問題。 destory：組件銷燬以後調用。

緩存

B:

緩存能夠說是性能優化中簡單高效的一種優化方式了，它能夠顯著減小網絡傳輸所帶來的損耗。

對於一個數據請求來講，能夠分爲發起網絡請求、後端處理、瀏覽器響應三個步驟。瀏覽器緩存能夠幫助咱們在第一和第三步驟中優化性能。好比說直接使用緩存而不發起請求，或者發起了請求但後端存儲的數據和前端一致，那麼就沒有必要再將數據回傳回來，這樣就減小了響應數據。

接下來的內容中咱們將經過如下幾個部分來探討瀏覽器緩存機制：

緩存位置 緩存策略 實際場景應用緩存策略

socket-io與http請求的區別?

B:

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）？

A:

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

async await 中間加上await

B:

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()

複製代碼

遇到過的兼容性問題？

A:

一直作的是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，遨遊中高度超出本身設置高度

問題症狀：IE六、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原理？

A:

三種狀態：pending、resolve和reject 三種狀態中，除了pending能夠改爲後二者，其餘都不能變，成功就往resolve去，失敗就往reject去。

B:

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？

A:

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

B:

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，v二、掘金等等。

會用哪些linux命令？

A:

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？

A:

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

echarts如何畫圖？

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

B: 第1、echarts的實現，是經過canvas來實現的。因爲canvas的限制，因此echarts在實現的時候可能是繪製一些，規則的、可預期的、易於實現的東西。

第2、echarts的核心就是options的配置對象。通常而言，咱們使用最多的是直角座標圖、極點圖、以及地圖。

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

第4、對series系列的認識，它是一個數組。數組中的每一項表明着一個單獨的系列，能夠配置顯示爲散點圖scatter、折線圖line、柱狀圖bar等等功能。series的data通常是一個每一項都是數組的數組，相似於：[[],[],[]]這樣的形式，裏層數組通常表明xAsix、yAxis或者radiusAxis、angleAxis等等。

參考網上連接:echarts繪圖

你用什麼佈局？

A:

flex佈局和grid佈局

B:

一、邊距與浮動佈局
1.一、負邊距
1.1.一、向上移動
1.1.二、去除列表右邊框
1.1.三、負邊距+定位，實現水平垂直居中
1.1.四、去除列表最後一個li元素的border-bottom
1.二、雙飛翼佈局
1.三、多欄佈局
1.3.一、柵格系統
1.3.二、多列布局
二、流式佈局（Fluid）
三、瀑布流佈局
3.一、常見瀑布流佈局網站
3.二、特色
3.三、masonry實現瀑布流佈局
3.3.一、下載並引用masonry
3.3.二、準備內容
3.3.三、初始化插件
3.3.四、使用了圖片的瀑布流
3.3.五、圖片基礎
3.四、圖片加載處理
3.4.一、imagesLoaded 圖片加載進度監聽
3.4.二、圖片延遲加載
3.五、Infinite Scroll 滾動分頁
3.5.一、異步加載普通頁面
3.5.二、異步加載json並解析
四、響應式佈局（Responsive）
4.一、媒介類型
4.二、媒介查詢的應用位置（Media Queries）
4.三、Media Queries Hello World
4.四、媒介查詢語法
4.五、響應式柵格系統（Responsive）
4.六、respond.js
4.七、移動優先（Mobile First）
4.八、視區（viewport）
4.8.一、須要設置viewport的緣由
4.8.二、設置viewport的方法
4.8.三、小節
五、REM實現響應式佈局
5.一、使用javascript設置相對尺寸
5.二、使用媒介查詢設置字體尺寸
六、彈性佈局（Flexbox）


複製代碼

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

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

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

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

如何SEO?

A:

除了服務端渲染，還能夠經過語義化標籤：article、section

B:

  • 頁面中杜絕出現死連接（404頁面）（服務器處理）

  • 避免瀏覽器中異常錯誤的拋出

  • 增長關鍵詞優化

  • 對於不常常更新的數據，最好採用瀏覽器的304緩存作處理

  • 使用字體圖標代替一些頁面中的位置

  • 合理的title、description、keywords

  • 語義化的HTML代碼

  • 重要內容HTML代碼放在最前

  • 少用iframe：搜索引擎不會抓取iframe中的內容

  • 非裝飾性圖片必須用alt

  • 提升網站速度

個人問題：

技術棧？

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

團建？打球？

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

996嗎？

不是，是彈性工做制度。

若是我進來，我作什麼？

你能夠作公司的活動頁，小程序的等等。

面試後

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

入職前

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

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

最後，別忘了給這個項目點一個star哦，謝謝支持。

blog

一個學習編程技術的公衆號。天天推送高質量的優秀博文、開源項目、實用工具、面試技巧、編程學習資源等等。目標是作到我的技術與公衆號一塊兒成長。歡迎你們關注，一塊兒進步，走向全棧大佬的修煉之路

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