多益網絡前端筆試題整理

時間 2019-11-11

原文原文鏈接

2017校招javascript

1 寫出inline和inline-block的差異：
佈局方式相同，惟一的區別在inline-block能夠設置寬高，inline不能夠。另外：inline設置上下內邊距和上下外邊距會形成一些mess。

2 寫出五大主流瀏覽器的內核名稱
ie(trident),firefox(gecho),google chrome(blink),safari(webkit),oprea(blinnk)css

3 根據具體的情景寫出一個JSON數據
知道JSON數據怎麼寫，瞭解JSON數據和JS對象的區別就能夠，很簡單。html

4 考察字體大小的單位：rem,em,百分比java

em:node

核心觀點:
能夠複合計算，當前元素的一個em值的大小等於父元素的字體大小（若是父元素被定義了字體大小，遞歸找父元素），不然等於瀏覽器通常默認的16pxreact

remjquery

核心觀點：避免em的複合計算，相對root html元素的大小。web

百分比：與em類似

5 隱藏元素的N種方式ajax

opacity正則表達式

.hide {
opacity: 0;
}
佔據空間，能夠響應用戶交互，能夠有動畫。

visibility

.hide {
visibility: hidden;
}

佔據空間，可是不響應用戶交互，能夠有動畫。

display
display: none

不佔據空間，不響應交互，沒有動畫。

Position

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
不佔據空間，響應交互

6 jQuery中live,bind,on,delegate的區別

.bind()是直接綁定在元素上

.live()則是經過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。和.bind()的優點是支持動態數據。

.delegate()則是更精確的小範圍使用事件代理，性能優於.live()

.on()則是最新的1.9版本整合了以前的三種方式的新事件綁定機制

7 如何去除img元素底部的空白

1.img{vertial-align:middle}

2.div{line-height:0}//div爲img的父標籤

3.img{float:left}

4.img{font-size:0}//會形成圖文混亂

5.img{display:block}

1.svg畫四邊形，四個點的座標分別是（220，100）（300，210）（170，250）（123，234）

2.寫出promise構造函數

var promise=new Promise(
    function (resolve,reject) {
    if("異步處理成功"){
        resolve ();
    }else{
        reject();
    }

});
promise.then(
    function A () {
        console.log("事件處理成功時的操做")

    },
    function B() {
        console.log("事件處理失敗時的操做")
    }
)

3.如何讓動態插入的div響應綁定事件

<ul></ul>
</div>
//jquery 1.7版之後使用on動態綁定事件
$("#testdiv ul").on("click","div", function() {
//do something here
});

4.如何阻止冒泡事件和默認事件
（1）阻止冒泡事件

function stopBubble(e) {

if(e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
};

（2）阻止默認事件

function stopDefault(e){

if(e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
};

JavaScript中止冒泡和阻止瀏覽器默認行爲

5.翻譯：Using store state in a component simply includes returning the state within a computed property , because the store state is reactive . Triggering changes simply means committing mutations in component methods .

在組件中使用存儲狀態簡單地包括在計算屬性中返回狀態，由於存儲狀態是被動的。觸發的變化意味着在組件的方法進行突變。

6.實現ajax的過程和代碼
（1）建立XMLHttpRequest對象；
（2）註冊回調函數，在XMLHttpRequest中設置要發送的請求，利用的是open（first,second,third）方法

@param first：提交的方式 get或者是post
@param second：該次請求的路徑url，若是是get，則須要在路徑後加上傳遞的相應參數parama，該url爲servlet對應的url
@param third：提交的模式是同步模式仍是異步模式 true表明異步模式

（3）發送請求給服務器，利用的是xmlHttp.send(null) ，加上null表明火狐和ie都支持
（4）利用xmlHttp的onreadystatechange的事件來監視xmlHttp.readyState的狀態，每次改變時都調用函數(回調函數)
（5）在回調函數中處理返回值利用dom模型寫到頁面的指定位置實現局部刷新

7.new操做符作了什麼？

（1）建立了一個空對象

var obj = new object();

（2）設置原型鏈

obj._proto_ = fn.prototype;

（3）讓fn的this指向obj，並執行fn的函數體

var result = fn.call(obj);

（4）判斷fn的返回值類型，若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。

if (typeof(result) == "object"){

fnObj = result;
} else {
fnObj = obj;
}

8.寫出3種異步加載方案

異步加載又叫非阻塞加載，瀏覽器在下載執行js的同時，還會繼續進行後續頁面的處理。默認狀況javascript是同步加載的，也就是javascript的加載時阻塞的，後面的元素要等待javascript加載完畢後才能進行再加載，對於一些意義不是很大的javascript，若是放在頁頭會致使加載很慢的話，是會嚴重影響用戶體驗的。異步加載主要有如下三種方式：
（1）async：

定義：async 屬性規定一旦腳本可用，則會異步執行。
用法：<script type="text/javascript" src="async.js" async="async"></script>
註釋：async 屬性僅適用於外部腳本（只有在使用 src 屬性時）。
註釋：有多種執行外部腳本的方法：
若是 async=」async」：腳本相對於頁面的其他部分異步地執行（當頁面繼續進行解析時，腳本將被執行）；
若是不使用 async 且 defer=」defer」：腳本將在頁面完成解析時執行；
若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本。

（2）defer：

只支持IE
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載爲止。有的 javascript 腳本 document.write 方法來建立當前的文檔內容，其餘腳本就不必定是了。
若是您的腳本不會改變文檔的內容，可將 defer 屬性加入到

（3）建立script，插入到DOM中，加載完畢後callBack

19春招

一、寫出手機號的正則表達式

^1[3|4|5|7|8]\d{9}$ ^開始符號首位爲1 第2位爲3或4或5或7或8 後面9位爲任意數字 $結束符號

二、css的繼承屬性

字體系列：font、font-size、font-weight

文本系列：text-align、line-height、color、text-transform

cursor、visibility、list-style

三、css製做動畫效果的3個屬性

transition、transform、animation

四、Promise的例子

function aaa(){

var p = new Promise(function(resolve,reject){

setTimeout(function(){

console.log('11111');

resolve('2222'); },1000); });

return p;}

aaa().then(function(data){

console.log(data);

});

五、css繪製一個直角梯形

一開始想到了border，但設置了高度，因此沒有成功

<head>

<style>

.mask{ height: 0; width: 100px; border-top: 100px solid red; border-left: 37px solid transparent; }

</style>

</head>

<body>

</body>

六、HTTP協議請求方式

get、post、put、head、connect、trace、options、delete

18年

JS基礎是要有的，字符串函數 split() 還有數組一些api ， reverse() join('') 這些要熟悉

正則表達式！是必考，反正我作的校招筆試題都會有問到，不直接問都會應用到。多益問的是寫出手機號正則，還算簡單

圖像格式： .jpg .png .svg .gif 圖像有啥區別

寫出幾個你網站優化的方法：應該往減小http請求，壓縮源代碼，控制圖片大小，緩存，減小DOM操做方面等答。

原生AJAX 其實ajax蠻簡單的，用的也不少。這個記住四步就能夠了

form 表單提交的屬性和請求的方法屬性分別是？ action 和 method 這個method屬性臨時忘了，本身都想打一巴本身了

翻譯英文片斷，多益還有這個題，有點夠嗆，看了應該是框架文檔原文。

大題：給你一段JSON數據，每條JSON表明一個對象，有個屬性指向它的父對象，請把這段JSON轉爲一個樹形結構的對象。

二、計算機網絡中五層協議分別是什麼，HTTP屬於哪一層？

計算機網絡中五層協議分別是（從下向上）：1) 物理層 2）數據鏈路層 3）網絡層 4）傳輸層 5）

應用層七層：物理層->數據鏈路層->網絡層->傳輸層->會話層->表示層->應用層

其功能分別是：

1）物理層主要負責在物理線路上傳輸原始的二進制數據；

2）數據鏈路層主要負責在通訊的實體間創建數據鏈路鏈接；

3）網絡層主要負責建立邏輯鏈路，以及實現數據包的分片和重組，實現擁塞控制、網絡互連等功能；

4）傳輸曾負責向用戶提供端到端的通訊服務，實現流量控制以及差錯控制。（TCP、UDP）

5）會話層：定義了什麼時候開始、控制和結束一個回話，包括對多個雙向消息的控制和管理，以便在只完成連續消息的一部分時能夠通知應用，從而使得表示層看到的數據是連續的，某些狀況下，若是表示層收到了全部的數據，則用數據表明表示層。

6）表示層：主要功能是定義數據格式以及加密，

7）應用層爲應用程序提供了網絡服務。通常來講，物理層和數據鏈路層是由計算機硬件（如網卡）實現的，網絡層和傳輸層由操做系統軟件實現，而應用層由應用程序或用戶建立實現。

三、傳輸層有哪些協議?TCP協議與UDP協議的區別。

傳輸層（Transport Layer）是OSI中最重要, 最關鍵的一層,是惟一負責整體的數據傳輸和數據控制的一層.傳輸層提供端到端的交換數據的機制，檢查分組編號與次序。傳輸層對其上三層如會話層等，提供可靠的傳輸服務,對網絡層提供可靠的目的地站點信息.主要功能：爲端到端鏈接提供傳輸服務.這種傳輸服務分爲可靠和不可靠的,其中Tcp是典型的可靠傳輸,而Udp則是不可靠傳輸. 爲端到端鏈接提供流量控制,差錯控制,服務質量(Quality of Service,QoS)等管理服務. 具備傳輸層功能的協議： TCP UDP SPX NetBIOS NetBEUI

四、你聽過 DNS嗎？能夠講講嗎？（我只聽過沒印象） DNS（Domain Name System，域名系統），萬維網上做爲域名和IP地址相互映射的一個分佈式數據庫，可以使用戶更方便的訪問互聯網，而不用去記住可以被機器直接讀取的IP數串。經過域名，最終獲得該域名對應的IP地址的過程叫作域名解析（或主機名解析）。DNS協議運行在UDP協議之上，使用端口號53。

五、排序算法有哪些？並給出時間複雜度

插入排序

選擇排序

冒泡排序

快速排序

哈希排序

堆排序

六、事件響應問題事件：JavaScript 建立動態頁面。事件是能夠被 JavaScript 偵測到的行爲。網頁中的每一個元素均可以產生某些能夠觸發 JavaScript 函數或程序的事件。好比說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，須要瀏覽器作出處理，返回給用戶一個結果。

七、你聽過 ES6規範嗎，列舉一些你所知道的差異

答案請參考：https://blog.csdn.net/chenjuan1993/article/details/80952918