記一次「超詳細」前端校招筆試和麪試經歷

時間 2019-11-08

標籤一次詳細前端筆試面試經歷欄目快樂工作简体版

原文原文鏈接

杭州個推前端筆試題以及面試分享（浙江每日互動網絡科技股份有限公司）

筆試題照片

筆試解答

計算機基礎題（必作）

1.略

2.內存溢出和內存泄露

內存溢出是指已有的數據超過了其得到到的內存所能存儲的範圍，好比用一個字節存放1000這個數字就屬於內存溢出；
內存泄漏是指程序因爲錯誤或漏洞形成的內存佔用過多，或佔用內存後沒法釋放（不少狀況是申請了內存，但程序結束後沒有釋放）。css

3.數據庫中索引，主鍵，惟一索引，聯合索引的區別，對數據庫性能有什麼影響

索引是一種特殊文件，它包含對數據表裏全部記錄的引用指針
普通索引的惟一做用是加快訪問速度
普通索引，被索引的數據中能夠包含重複的數據，惟一索引就是規定了索引到的值各不相同
主鍵是一種特殊的惟一索引，一個表中只能容許有一個主鍵，用來惟一標識一條記錄
聯動索引就是索引能夠覆蓋多個數據列
索引加快了查詢的速度，可是減慢了添加刪除更新的速度，由於在執行這些操做以前須要先索引

4.數據庫中內聯接和外聯接區別

內鏈接：指鏈接結果僅包含符合鏈接條件的行，參與鏈接的兩個表都應該符合鏈接條件。
外鏈接：鏈接結果不只包含符合鏈接條件的行同時也包含自身不符合條件的行。包括左外鏈接、右外鏈接和全外鏈接。

內鏈接只能查詢兩個表中關係匹配的記錄外鏈接不只能查詢兩個表中關係匹配的記錄,並且能夠查詢不匹配的紀錄前端

5.線程和進程，多線程中死鎖怎麼處理

聯繫：

一個線程只屬於一個進程，一個進程能夠擁有多個線程，但至少有一個線程，稱爲主線程
資源統一分配給進程，同一進程中的線程共享該進程的全部資源
線程在執行過程當中，須要協做同步，不一樣進程之間線程須要經過消息通訊來達到同步

區別：

線程做爲調度和分配的基本單位，進程做爲分配資源的基本單位
併發性：不只進程之間能夠併發執行，同一進程中的不一樣線程之間也能進行併發執行
擁有資源：進程是擁有資源的獨立單位，線程不擁有資源，但能夠訪問隸屬於進程的全部資源

何時用多線程：

耗時或大量佔用處理器阻塞用戶界面操做
各個任務必須等待外部資源時

避免多線程中死鎖

加鎖順序（線程按照必定的順序加鎖）
加鎖時限（線程嘗試獲取鎖的時候加上必定的時限，超過期限則放棄對該鎖的請求，並釋放本身佔有的鎖）
死鎖檢測

6.緩存的應用場景

咱們先解釋下緩存，顧名思義，就是數據暫存的地方，你能夠理解爲從磁盤裏取出來數據，暫時存放在內存，以待後面處理來讀取。而能存放在緩存的數據，一般是頻繁訪問的，不會常常修改的數據。知道了什麼是緩存，什麼數據能夠放緩存，就能夠尋找合適的緩存(這裏說的緩存，就是對象或者容器了)。
目前，緩存的操做主要是兩種方式，一種是使用程序自帶的map對象(像jdk的hashmap)，一種是緩存軟件，第一種不細說，你們能夠看看hashmap的實現和應用，這裏主要說緩存軟件。如今流行的緩存軟件是memcached、redis(若是有不瞭解的，google)，有的博客還說到mongodb。我的認爲，由於要兼顧DB的某些特性，因此作不到其餘兩個緩存的爲了實現極高的吞吐量而採用的epoll 或 libevent事件驅動的方案，因此這裏排除。下面所說的緩存，就指的是第二種。

7.略

8.略

9.TCP和UDP區別

基於鏈接與不鏈接
UDP程序結構簡單
對系統資源的要求，TCP多，UDP少
TCP保證數據正確性，UDP可能丟包，TCP保證數據順序，UDP不保證
流模式，數據報模式

10.觀察者模式

當對象間存在一對多關係時，則使用觀察者模式（Observer Pattern）。好比，當一個對象被修改時，則會自動通知它的依賴對象。觀察者模式屬於行爲型模式。vue

前端筆試題

1.css有哪些選擇器，如何區分優先級，下面的代碼是什麼效果

派生選擇器（用HTML標籤申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）

除了前3種基本選擇器，還有一些擴展選擇器，包括css3

後代選擇器（利用空格間隔，好比div .a{ }）
羣組選擇器（利用逗號間隔，好比p,div,#a{ }）

CSS選擇器的優先級的定義es6

基本原則：

通常而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。面試

複雜的計算方法：

用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
#xxx li 優先級 100 +1

<style>
#id{color:green;}
.class-a{
    color:blue;
}
#my-id.class-b{color:yellow;}
p.class-a.class-b{
    color:red;
}
</style>
<body>
    <p class="class-b class-a" id="my-id">123</p>
</body>

答案是yellow,黃色redis

2.如何用css讓一個元素不可見

opcity: 0; 隱藏對應的元素而且擠佔該元素原來的空間。
display : none; 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: hidden; 隱藏對應的元素而且擠佔該元素原來的空間。

便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。mongodb

3.補充一下.b的css代碼，使得<div class="b"></div>在頁面水平居中，列出你能想到的全部方法

.b{
    width:200px;
    height:100px;
    background:#ccc;
    //繼續補充代碼
}

傳統的居中方式

添加代碼margin:0 auto;便可數據庫

絕對定位方式（必須已知子元素寬高，而且父元素須要relative定位）

添加代碼json

position:absolute;
left:50%;
margin-left:-100px;

絕對定位方式（不用知道子元素寬高，但父元素須要relative定位）

position:absolute;
left:0;
right:0;
margin:0 auto;

4.若是一個頁面由於圖片大且多加載慢，應該如何去優化？

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

5.如何消除一個數組裏面重復的元素？

這個是一個常考題，網上一搜方式不少。
首先介紹一種es6的解決方法

ES6裏新添加了兩個很好用的東西，set和Array.from。

set是一種新的數據結構，它能夠接收一個數組或者是類數組對象，自動去重其中的重複項目。

var arr = [1,1,'1','1',null,null,undefined,undefined,NaN,NaN];
console.log(new Set(arr));

在這咱們能夠看見，重複的項目已經被去掉了，包括NaN。正常狀況下，NaN === NaN 返回的是false，可是在set裏，同樣可以幫你去重。

可是這裏你們能夠看到，set返回的是一個對象，可是咱們想要的是數組啊。

這回，就該輪到Array.from出場了，它的做用，就是能夠把類數組對象、可迭代對象轉化爲數組。

var arr = [1,1,'1','1',null,null,undefined,undefined,NaN,NaN];
var newArr = Array.from(new Set(arr));
console.log(newArr);

再介紹一種利用indexOf方法的去重

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr){
    for(var i=0;i<arr.length;i++){
        if(nArr.indexOf(arr[i])==-1){
            nArr.push(arr[i]);
        }
    }
    return nArr;
}
console.log(removeItem(arr));

6.請簡述var let const的區別

var定義的變量能夠修改，若是不初始化會輸出undefind,而且有時候會泄露到全局，形成一些影響
爲了解決這個泄露的bug，有了es6的let，let至關於給行數定義了一個塊級域，函數內部使用let定義的變量只能在函數內部起做用
const是用來定義一個不變的量，不能修改的量，必須賦初值

7.如何深拷貝對象，JSON.stringfiy須要注意什麼

講講淺拷貝和深拷貝的概念，js中的淺拷貝和深拷貝，知識針對複雜數據類型（Object,Array)的複製問題。

淺拷貝：是拷貝引用，拷貝後的引用都是指向同一個對象的實例，彼此之間的操做會互相影響

var a = {c:1};
var b = a;
console.log(a === b); // 輸出true。
a.c = 2;
console.log(b.c); // 輸出 2

深拷貝：在堆中從新分配內存，而且把資源對象全部屬性都進行新建拷貝，拷貝後的對象與原來的對象是徹底隔離，互不影響

常見方法有JSON.parse(),JSON.stringify()，jQury的$.extend(true,{},obj)

var a = {c: {d: 1}};
var b = $.extend(true, {}, a);
console.log(a === b); // 輸出false
a.c.d = 3;
console.log(b.c.d); // 輸出 1，沒有改變。

JSON.stringfiy須要注意什麼

首先講一下JSON.parse()和JSON.stringfiy的概念

JSON.parse()是將字符串轉黃成json對象

var str = '{"name":"zp","age":"22"}'
結果：
JSON.parse(str)

Object

    age: "22"
    name: "zp"
    __proto__: Object

JSON.stringfiy則相反，是將json對象轉換成字符串

vara = {a:1,b:2}
結果：
JSON.stringify(a)

"{"a":1,"b":2}"

JSON.stringfiy須要注意的地方

JSON.stringfiy將不會轉換不具備json表示形式的值

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在方括號中）
對象（在花括號中）
null

undefined不在其中。

8.<a onclick="a.click">和<a onclick="a.click()">二者的寫法有差異嗎，若是有，差異是什麼

前者調用的是一個函數，當點擊的時候能夠執行函數
然後者只是將函數運行後的值賦值給了a，因此當點擊的時候並不會執行函數

9.按時間順序排序的日誌信息，如何快速找到指定時間的日誌。時間複雜度是多少

這個是數據結構中的日誌信息，有興趣的同窗能夠自行百度

10.寫一個fiter函數執行器，第一個參數爲filter函數，剩餘的參數傳入filter執行，並返回結果，exeFilter()

首先看看js filter()的用法，
array.filter(function(currentValue,index,arr), thisValue)
參數描述

function(currentValue, index,arr)
- currentValue 必須。當前元素的值
- index 可選。當前元素的索引值
- array 可選。當前元素屬於的數組對象
thisValue 可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"

var ages = [32, 33, 16, 40];

function exeFilter(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(exeFilter);
}

11.這題是一個瀏覽器，console中報錯信息，要求一條條解釋，圖片沒拍到，能夠自行腦補

面試

宣講會6點開始，晚飯沒吃，就跑去聽宣講會了，本來覺得7，8點就能結束，可是宣講+筆試+面試，硬是拖到了10點鐘才吃上晚飯。

廢話很少說，講重點

面試排隊輪到我了，首先和麪試官打個招呼，簡歷遞給他，他直接開始看簡歷了，沒說啥，我就本身先進行了自我介紹，講了下基本狀況，以及一些實習經歷

接着面試官開始問問題，一上來就直接問的框架，看來框架仍是挺重要

面試官：你的簡歷上寫了angular.js,你能講講angular嗎？

因爲臨時接到的宣講會通知，框架還沒整理準備好，只說了一些簡單的知識，加上單頁面的跳轉。而後我強調了vue，可是面試官嗯了一下，沒太在乎，就過去了。應該公司側重angular吧。感受這一問題沒回答好

接着就是照簡從來問了

gulp

面試官：你能說說gulp嗎？
我：gulp是前端工程化開發工具，可以極大的加強工做流程
面試官：那你主要用gulp幹了哪些具體的事呢？
我：主要用gulp進行圖片壓縮，less，sass編譯，es6編譯爲es5以及其餘自動化工做
面試官：那gulp有哪些api呢？
我：
- gulp.task 主要就是運用這個進行任務的建立，其餘還有* gulp.src 用來查找一個或多個文件
- gulp.watch用來監聽文件的變化，
- gulp.dest指定文件輸出的文件夾路徑
面試官：嗯好

es6

面試官：你能講一下let和var的區別嗎
我：var定義的變量有時候會泄露到全局，有必定的影響，而es6的let能夠解決這個問題，let至關與賦予了一個塊級做用域，let定義的變量只能在該做用域中起做用
面試官：嗯好的

響應式

面試官：你能講一下你對響應式的理解嗎
我：
- 響應式主要是文檔呈現方式可以隨瀏覽器寬度的改變而隨之改變。
- 我主要是運用bootstrap的柵格化系統加上媒體查詢來達到這一目的。
- 另外我還了解了fundation, fundation和bootstrap的主要區別我以爲是，fundation是可以隨着瀏覽器大小改變，實時改變文檔樣式，並且具備像css3中transition同樣的過渡效果，而bootstrap是當瀏覽器寬度大小改變到一個固定值的時候，文檔樣式產生響應改變
面試官：嗯好的