web面試題

時間 2019-11-30

標籤 web 面試欄目 HTML 简体版

原文原文鏈接

1、請將冒泡排序和快速排序的算法寫出來javascript

實現冒泡排序：css

[html] view plain copyhtml

var times=0; 前端

var bubbleSort=function(arr){ html5

for(var i=0;i<arr.length-1;i++){ java

for(var j=i+1;j<arr.length;j++){ jquery

if(arr[i]>arr[j]){//若是前面的數據比後面的大就交換webpack

var temp=arr[i]; git

arr[i]=arr[j]; 程序員

arr[j]=temp;

}

console.log("第"+(++times)+"次排序後："+arr);

}

return arr;

}

console.log("The result is:"+bubbleSort(arr));

實現快速排序：

[javascript] view plain copy

var times=0;

var quickSort=function(arr){

//若是數組長度小於等於1無需判斷直接返回便可

if(arr.length<=1){

return arr;

}

var midIndex=Math.floor(arr.length/2);//取基準點

var midIndexVal=arr.splice(midIndex,1);//取基準點的值,splice(index,1)函數能夠返回數組中被刪除的那個數arr[index+1]

var left=[];//存放比基準點小的數組

var right=[];//存放比基準點大的數組

//遍歷數組，進行判斷分配

for(var i=0;i<arr.length;i++){

if(arr[i]<midIndexVal){

left.push(arr[i]);//比基準點小的放在左邊數組

}

else{

right.push(arr[i]);//比基準點大的放在右邊數組

}

console.log("第"+(++times)+"次排序後："+arr);

}

//遞歸執行以上操做,對左右兩個數組進行操做，直到數組長度爲<=1；

return quickSort(left).concat(midIndexVal,quickSort(right));

};

console.log(quickSort(arr));

2、position的值， relative和absolute分別是相對於誰進行定位的？

absolute :生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。

fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。

relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。

static 默認值。沒有定位，元素出如今正常的流中

sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

3、談談你對webpack的見解

WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源。

webpack的兩大特點：

1.code splitting（能夠自動完成）

2.loader 能夠處理各類類型的靜態文件，而且支持串聯操做

webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。

webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：

1. 對 CommonJS 、 AMD 、ES6的語法作了兼容

2. 對js、css、圖片等資源文件都支持打包

3. 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持

4. 有獨立的配置文件webpack.config.js

5. 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間

6. 支持 SourceUrls 和 SourceMaps，易於調試

7. 具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活

8.webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快

4、javascript對象的幾種建立方式

1，工廠模式

2，構造函數模式

3，原型模式

4，混合構造函數和原型模式

5，動態原型模式

6，寄生構造函數模式

7，穩妥構造函數模式

5、javascript繼承的6種方法

1，原型鏈繼承

2，借用構造函數繼承

3，組合繼承(原型+借用構造)

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

6、說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

7、建立ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

8、棧和隊列的區別? 棧和堆的區別？

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

隊列先進先出，棧先進後出。

棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

棧區（stack）—由編譯器自動分配釋放，存放函數的參數值，局部變量的值等。

堆區（heap）—通常由程序員分配釋放，若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

9、說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

1.函數嵌套函數

2.函數內部能夠引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

具體請看：詳解js閉包

10、cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：

將登錄信息等重要信息存放爲SESSION

其餘信息若是須要保留，能夠放在COOKIE中

11、介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

12、說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

13、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

拖拽釋放(Drag and drop) API

語義化更好的內容標籤（header,nav,footer,aside,article,section）

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 的數據在瀏覽器關閉後自動刪除

表單控件，calendar、date、time、email、url、search

新的技術webworker, websocket, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

14、談談你對重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。

對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS

使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

對於移動平臺的優化

針對於SEO進行優化

深層次的網站重構應該考慮的方面

減小代碼間的耦合

讓代碼保持彈性

嚴格按規範編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

加強用戶體驗

一般來講對於速度的優化也包含在重構中

壓縮JS、CSS、image等前端資源(一般是由服務器來解決)

程序的性能優化(如數據讀寫)

採用CDN來加速資源加載

對於JS DOM的優化

HTTP服務器的文件緩存

15、HTTP狀態碼

100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

200 OK 正常返回信息

201 Created 請求成功而且服務器建立了新的資源

202 Accepted 服務器已接受請求，但還沒有處理

301 Moved Permanently 請求的網頁已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。

304 Not Modified 自從上次請求後，請求的網頁未修改過。

400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未受權。

403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最多見的服務器端錯誤。

503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

16、git fetch和git pull的區別

git pull：至關因而從遠程獲取最新版本並merge到本地

git fetch：至關因而從遠程獲取最新版本到本地，不會自動merge

17、對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

首先要求咱們的代碼高複用低耦合，這樣文件小，好維護，並且好擴展。

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

一、實現界面交互

二、提高用戶體驗

三、加快先後端數據交互

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

參與項目，快速高質量完成實現效果圖，精確到1px；

與團隊成員，UI設計，產品經理的溝通；

作好的頁面結構，頁面重構和用戶體驗；

處理hack，兼容、寫出優美的代碼格式；

針對服務器的優化、擁抱最新前端技術。

18.document load 和document ready的區別
Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

19、介紹一下 JS 的基本數據類型和內置對象。

Undefined、Null、Boolean、Number、String

JS 有哪些內置對象。

Object是 JavaScript 中全部對象的父對象

數據封裝類對象：Object、Array、Boolean、Number、String

其餘對象：Function、Argument、Math、Date、RegExp、Error

20、列舉幾條 JavaScript 的基本代碼規範。

（1）不要在同一行聲明多個變量

（2）若是你不知道數組的長度，使用 push

（3）請使用 ===/!== 來比較true/false或者數值

（4）對字符串使用單引號''(由於大多時候咱們的字符串。特別html會出現")

（5）使用對象字面量替代 new Array 這種形式

（6）絕對不要在一個非函數塊裏聲明一個函數，把那個函數賦給一個變量。瀏覽器容許你這麼作，可是它們解析不一樣

（7）不要使用全局函數

（8）老是使用 var 來聲明變量，若是不這麼作將致使產生全局變量，咱們要避免污染全局命名空間

（9）Switch 語句必須帶有 default 分支

（10）使用 /**...*/ 進行多行註釋，包括描述，指定類型以及參數值和返回值

（11）函數不該該有時候有返回值，有時候沒有返回值

（12）語句結束必定要加分號

（13）for 循環必須使用大括號

（14）if 語句必須使用大括號

（15）for-in 循環中的變量應該使用 var 關鍵字明確限定做用域，從而避免做用域污染

（16）避免單個字符名，讓你的變量名有描述意義

（17）當命名對象、函數和實例時使用駝峯命名規則

（18）給對象原型分配方法，而不是用一個新的對象覆蓋原型，覆蓋原型會使繼承出現問題

（19）當給事件附加數據時，傳入一個哈希而不是原始值，這可讓後面的貢獻者加入更多數據到事件數據裏，而不用找出並更新那個事件的事件處理器

21、javascript的typeof返回哪些數據類型
Object number function boolean underfind

22、例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,number）
隱式（== – ===）

23、split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字符串

24、數組方法pop() push() unshift() shift()（將所學的全部對數組增刪的方法都列出來）
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

push方法用於將一個或多個元素添加或附加到數組的末尾。使用這種方法，能夠經過傳遞多個參數來附加多個元素。

　　Unshift方法就像在數組開頭工做的push方法。該方法用於將一個或多個元素添加到數組的開頭。

25、IE和DOM事件流的區別，什麼是DOM事件流
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題
Dom事件流見 https://segmentfault.com/a/1190000004463384（必定要理解，理解以後寫出答案）

26.ajax請求的時候get 和post方式的區別
一個在url後面一個放在虛擬載體裏面
有大小限制
安全問題
應用不一樣一個是論壇等只須要請求的，一個是相似修改密碼的

27、元素的樣式/類如何改變?

　　能夠經過如下方式完成：

　　document.getElementById(「myText」).style.fontSize = 「20?;

　　或

　　document.getElementById(「myText」).className = 「anyclass」;

28、cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：

將登錄信息等重要信息存放爲SESSION

其餘信息若是須要保留，能夠放在COOKIE中

29、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

1）建立新節點

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

2）添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //並無insertAfter()

3）查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，

會獲得一個數組，其中包括id等於name值的)

getElementById() //經過元素Id，惟一性

30、null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

當聲明的變量還未被初始化時，變量的默認值爲undefined。

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不該該有值。典型用法是：

（1）做爲函數的參數，表示該函數的參數不是對象。

（2）做爲對象原型鏈的終點。

31、new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

二、屬性和方法被加入到 this 引用的對象中。

三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

32、什麼是JavaScript?(這是基本題，對不少程序員來講也是送分題!)

　　JavaScript是客戶端和服務器端腳本語言，能夠插入到HTML頁面中，而且是目前較熱門的Web開發語言。同時，JavaScript也是面向對象編程語言。

　　相似的基本題目還包括：JavaScript都有哪些類型?JavaScript是誰發明的?......

33、列舉Java和JavaScript之間的區別?

Java是一門十分完整、成熟的編程語言。相比之下，JavaScript是一個能夠被引入HTML頁面的編程語言。這兩種語言並不徹底相互依賴，而是針對不一樣的意圖而設計的。 Java是一種面向對象編程(OOPS)或結構化編程語言，相似的如C ++或C，而JavaScript是客戶端腳本語言，它被稱爲非結構化編程。

　34、什麼是全局變量?這些變量如何聲明，使用全局變量有哪些問題?

　　全局變量是整個代碼長度可用的變量，也就是說這些變量沒有任何做用域。var關鍵字用於聲明局部變量或對象。若是省略var關鍵字，則聲明一個全局變量。

　　例：// Declare a global globalVariable = 「Test」;

　　使用全局變量所面臨的問題是本地和全局變量名稱的衝突。此外，很難調試和測試依賴於全局變量的代碼。

35、git fetch和git pull的區別

git pull：至關因而從遠程獲取最新版本並merge到本地

git fetch：至關因而從遠程獲取最新版本到本地，不會自動merge

36、說說你對MVC和MVVM的理解

MVC

View 傳送指令到 Controller

Controller 完成業務邏輯後，要求 Model 改變狀態

Model 將新的數據發送到 View，用戶獲得反饋