前端面試筆試題彙總加自我理解

時間 2019-11-13

標籤前端面試筆試彙總自我理解欄目快樂工作简体版

原文原文鏈接

面試被虐，深感自身不足，基礎概念，加深理解，加上思考！全手動碼字！Offer會有的，麪包會有的！渣碩會變成不渣的。☺️javascript

html語義化css

1. 含義html

　　爲了良好的結構，在合適的位置使用合適帶有語義的標籤，使得開發者可以開發出更優雅便於閱讀的界面，更有利與適應於多設備和瀏覽器爬蟲和解析頁面。vue

2. 優勢html5

　　1. 使得頁面在沒有css的狀況下，也能展示良好的風格。java

　　2. 便於閱讀和二次開發。web

　　3. 更有利於搜索引擎優化和爬蟲。 why? 搜索引擎可以更快更好分析出頁面結構，找出須要的資源像圖像、視頻、音頻等，而且打上本身的標籤。（識別出該資源）面試

　　4. 可以適應於其餘設備（盲人閱讀器，移動端）。算法

html5中新增的標籤編程

header 頁眉
nav
section 和div類似
article 引用外部
aside aside和article通常配合使用，輔助區域，右側工具欄。
footer 從頁面頭部到底部增長的一些標籤，閉合、爲塊狀元素。
fgroup 對h1-h6標籤進行組合
time
address
datalist 以上爲表單中新增的元素
audio
video
embed
source 以上爲視頻音頻中新增
canvas

<embed src = "" height = "" width="" />

<audio preload="preload" controls = "controls" loop="loop" >
    <source src =""  type = "" />
</audio>

CSS3中新增的屬性

將CSS3中新增的屬性分爲幾個模塊：選擇器、邊框和背景、文字、2D和3D、動畫、多列布局、盒子模型。

CSS選擇器：

1.元素選擇器 2.屬性選擇器 3.僞類選擇器。

僞類選擇器分爲幾種：

1.描點僞類：:link :visited :hover :active 按照愛恨原則排序，不然會出現混亂。

2.用戶行爲僞類： :hover :active :focus

3.元素狀態僞類：主要針對於form表單 :enable :disabled -> input text元素 :checked :unchecked -> input checkbox

4:nth選擇器：first-child last-child nth-child nth-last-child nth-of-type nth-last-of-type first-of-type last-of-type only-child only-of-type

5.否認選擇器 :not

6.僞元素 ::first-letter ::first-line ::selection標識文本選中效果：background和color ::before ::after

標準盒子模型和IE盒子模型

content -> padding -> border -> margin

標準盒子模型計算寬度：content

IE盒子模型：content.width + padding + border　　如何控制使用哪一種模型?什麼屬性：box-sizing: border-box(IE) 在width內繪製padding\border | content-box(W3C) | inherit。

利用border屬性畫出一個三角形：

div{
            height: 0px;
            width: 0px;
            border: 50px solid white;
            border-top-color: red;
            border-bottom: none
        }

border屬性：能夠用來繪製圓形、三角形、橢圓、平行四邊形、梯形。

#圓形
div{
    width:50px;
    height:50px;
    background:red;
    border-radius:25px;
}
#橢圓
div{
    width:100px;
    height:50px;
    background:red;
    -webkit-border-radius:50px 25px;
    -moz-border-radius:50px 25px;
    border-radius:50px 25px;
}
#等邊三角形
div{
     width:0px;
     height:0px;
     border-left:50px solid transparent;
     border-right:50px solid transparent;
     border-bottom:100px solid red;
}
#直角三角形
div{
     width:0px;
     height:0px;
     border-top:50px solid red;
     border-right:50px solid transparent;
}

輸入一個網址，到最後顯示出頁面的過程。

這篇文章寫的很全面：https://www.jianshu.com/p/71cf7f69eca8

大體的過程以下：

瀏覽器接受url，url包括：協議、網絡地址、端口、請求參數等。
瀏覽器判斷是是否有緩存，緩存是否過時，若有直接跳至第8步。
若是網絡地址不是IP地址，須要進行DNS解析域名，返回一個IP地址。
根據IP地址，創建TCP鏈接。
瀏覽器向服務器發送HTTP請求。
服務器接受請求，從它的文檔空間裏查找資源並返回HTTP響應。
瀏覽器根據返回的HTTP的響應的headers的狀態碼，進行相應的處理。
根據返回的相應，看該資源是否能夠被緩存。
解碼，若是內有js/css等靜態資源，需向服務器再發送請求。
根據返回的html構建出Dom樹，根據css構建出相應的css規則樹，渲染頁面。
js中也會出現對dom樹的操做，進行迴流和重繪，從新渲染，肯定相應佈局。
繪製界面。

須要知道的一些問題：

js的阻塞解析特性

　　html解析器是自上而下，當遇到例如script、link以內的標籤時，就會去相應下載資源，這樣會阻塞html解析器繼續向下執行。這就是爲何通常將javascript放在</body>標籤以前，這樣仍是會影響頁面的顯示。

　　無阻塞腳本技術，如今script標籤支持async和defer標記，對於外聯的，表示能夠異步的下載，等下載完成後再執行。還能夠動態加載腳本，建立dom元素。這樣能夠加快頁面響應的速度。

function loadScript(url,callback){
     var script = document.createElement("script");
     script.type = "text/javascript";
     if(script.readyState){
           script.onreadystatechange = function(){
                 if(script.readyState = "loaded"|| script.readyState =="complete"){
                      script.onreadystatechange = null;
                      callback();
                }
                
        }
    }else {
        script.onload = function(){
                callback();
        }
    }
   script.src = url;
   document.getElementsByTagName("head")[0].appendChild(script);    
}

其餘關於dns查詢ip、TCP三次握手與四次揮手、http一些經常使用狀態碼、瀏覽器緩存機制cache-control、last-modified、etag、expires等在文章裏都有講。

js閉包

要說閉包，先要提到js的做用域。js的做用域ES5中，爲全局做用域，和函數做用域。在ES6中增長了塊級做用域。

做用域提高：對於var變量，在申明以前就使用了它，會出現做用域提高的現象，輸出時值爲undefined。可是let,const不容許出現，以前用回出現referenceError。

須要注意！變量不用var聲明，默認爲全局變量。

暫時性死區：對於塊做用域，只要在內部聲明瞭let，即不受外部影響，const一樣。

閉包爲1.能夠訪問函數內部的變量的函數。

　　　2.定義在函數內部的函數。

3.是鏈接函數內部與外部的橋樑，爲了解決函數做用域的問題。

　　　4.使變量維持在內存中。

function A(){
     var a = 1;
     function B(){
　　　　　console.log(a);
     }
　　　return B;
}
var ww = A();
ww();

閉包使得變量一直保存在內存中，在函數結束後不會被銷燬，濫用閉包會形成性能問題，在IE內存會泄漏。注意使用，會改變父變量的值。

解決方式：局部變量在用完以後，退出函數以前刪除。

React生命週期函數

實例化
存在期
銷燬期

初始實例化階段：

1.getDefaultProps( ) 只調用一次

2.getInitialState() 在內部可訪問props內的變量

3.componentWillMount() 最後能夠修改state的機會

4.render()

5.componentDidMount() 已經繪製，能夠訪問真實DOM

存在期：更新

1.componentWillReceiveProps

2.shouldComponentUpdate false即不執行下面的更新 this.forceUpdate()

3.componentWillUpdate

4.render

5.componentDidUpdate 能夠訪問真實DOM

銷燬期：

willComponentUnmount() 在didMount中註冊的事件在這裏刪除。

React的虛擬Dom

MVVM的模式，將狀態和視圖進行綁定。

1.在JS中構建出虛擬的DOM。

2.將虛擬的DOM應用到真實DOM中，繪製出頁面。

3.當發生變動時，進行DOM diff算法，比較出差別後應用到真正的dom樹。

Dom diff具體算法：

原來進行樹遍歷須要O(n^3)，在React的Dom diff中，大膽假設不會發生層級間節點的移動，只對相同層的節點進行比較。

Tree diff，即對相同層的節點比較，只會發生刪除、增長、移動操做。若是出現了跨層級的操做，會影響React的性能，因此不推薦進行跨層級的Dom操做。

Component diff算法，若是是同一組件，繼續向下比較 Dom tree，若是不相同則判斷爲dirty component替換到下面全部的組件，若是肯定沒有發生變化，則可使用shouldComponentUpdate的方法進行阻止更新。

Element diff算法，提供刪除、插入、移動方法，同時提供一直機制就是爲全部的element增長惟一的key，若是新集合中的元素老集合中也存在，經過比較MountIndex和lastIndex，若是MountIndex < lastIndex 即進行移動。可是當出現尾部的元素忽然移動到首部時，該元素不移動，其餘元素移動到該元素後的現象。

因此在React中應儘可能避免跨層的Dom操做，而且儘可能減小最後一個節點移動到最前的操做，當節點數量過多或更新操做太過頻繁時會影響性能。

跨域

1. jsonp

2.script img

3.window.name + iframe

4.document.domain

5.postMessge

6.cors 跨瀏覽器同源策略

7.websocket

行內元素與塊級元素

塊級元素

1.元素佔一行

2.能夠設置行高和內外邊距

3.寬和瀏覽器大小相同，與內容無關

4.內部能夠包括行內元素、塊級元素

行內元素

1.元素和其餘行內元素在一行

2.不能夠設置高，可是替換元素img、input可設置

3.寬度與內容有關

4.容納文本和其餘行內

inline-block：既具備block能夠設置寬高，又具備inline的不換行的特性。

Promise異步編程

Promise本質上是一個構造函數，支持的方法有race、all，同時原型有then，catch等方法。

Promise定義的異步調用的過程有1.pending(未處理，正在請求)2.resolved（已解決）3.rejected(已拒絕)

將對象的狀態和回調函數分離開來。

var promise = new Promise(function(resolve,reject){})接受，在內部能夠進行相應處理。

then方法能夠接受到返回的結果，並處理，並返回一個promise對象，這樣能夠進行一個鏈式調用。

prototype 和 _proto

顯式原型和隱式原型

每一個函數在建立以後都會擁有一個prototype的屬性，指向該構造函數的原型對象。做用：實現對象的繼承和屬性的共享。

萬物皆對象，函數也是對象，也有_proto的屬性。

隱式原型，每一個對象都是隱藏的_proto的屬性，在瀏覽器中能夠訪問。做用：經過構成原型鏈，能夠依據原型鏈訪問屬性。

對象的proto等於它的構造函數的prototype。

Delegate函數

delegate函數爲指定元素（被選元素的子元素）添加一個或多個事件處理並綁定函數。

$("div").delegate(element,eventtype,data(可選),function);

Redux 與 Flux

當React中的組件愈來愈多時，須要一個特定的管理方式來管理這些state。

Flux是一個框架，也能夠說是一種思想，既能夠應用於React也能夠應用於其餘框架。

action-->dispatcher-->store-->view -->action指向dispatcher，dispatcher是最重要的部分，將其餘部分的邏輯統一在內部，dispatcher發送action給store，store處理與本身有關的事件，調用change方法，告訴已經controller-views狀態發生改變，調用setstate方法，從新渲染。

與Redux比較，Redux只有一個Store方法，主要的關鍵是Reducer函數，能夠有多個Reducer函數，以後能夠經過CombineReducer合併成一個。參數會state,action，最後返回newState。

Redux中單向數據流的概念？只能從一個方向來修改狀態，狀態可預測，能夠被操做，狀態變化經過手動調用通知，沒有「暗箱」操做。

同時是單向綁定，Model綁定到View，Js操做改變Model，從而改變View。