web前端面試題必看

69.Javascript的typeof返回哪些數據類型；列舉3種強制類型轉換和2中隱式類型轉換

1）返回數據類型

undefined

string

boolean

number

symbol(ES6)

Object

Function

2）強制類型轉換

Number(參數)  把任何類型轉換成數值類型。

parseInt(參數1，參數2)  將字符串轉換成整數

parseFloat()將字符串轉換成浮點數字

string(參數)：能夠將任何類型轉換成字符串

Boolean()  能夠將任何類型的值轉換成布爾值。

3）隱式類型轉換

1.四則運算

加法運算符+是雙目運算符，只要其中一個是String類型，表達式的值即是一個String。

對於其餘的四則運算，只有其中一個是Number類型，表達式的值即是一個Number。

對於非法字符的狀況一般會返回NaN：

'1' * 'a'     // => NaN，這是由於parseInt(a)值爲NaN，1 * NaN 仍是 NaN

2.判斷語句

判斷語句中的判斷條件須要是Boolean類型，因此條件表達式會被隱式轉換爲Boolean。 其轉換規則同Boolean的構造函數。好比：

var obj = {};if(obj){

    while(obj);}

3.Native代碼調用

JavaScript宿主環境都會提供大量的對象，它們每每很多經過JavaScript來實現的。 JavaScript給這些函數傳入的參數也會進行隱式轉換。例如BOM提供的alert方法接受String類型的參數：

alert({a: 1});    // => [object Object]

一、  寫出3個使用this的典型應用

function Thing() { }

 Thing.prototype.foo = "bar";

 Thing.prototype.logFoo = function () {

      console.log(this.foo);

 }

 Thing.prototype.setFoo = function (newFoo) {

      this.foo = newFoo;

  }

  var thing1 = new Thing();

var thing2 = new Thing();

thing1.logFoo(); //logs "bar"

 thing2.logFoo(); //logs "bar"

 thing1.setFoo("foo");

 thing1.logFoo(); //logs "foo";

thing2.logFoo(); //logs "bar";

 thing2.foo = "foobar";

 thing1.logFoo(); //logs "foo";

 thing2.logFoo(); //logs "foobar";

2.

  function Thing1() { }

  Thing1.prototype.foo = "bar";

  function Thing2() {

     this.foo = "foo";

 }

  Thing2.prototype = new Thing1();

  function Thing3() {}

Thing3.prototype = new Thing2();

var thing = new Thing3();

console.log(thing.foo); //logs "foo"

3.

  function Thing() {}

  Thing.prototype.foo = "bar";

Thing.prototype.logFoo = function () {

function doIt() {

onsole.log(this.foo);

}

 doIt.apply(this);

  }

 function doItIndirectly(method) {

method();

}

var thing = new Thing();

doItIndirectly(thing.logFoo.bind(thing)); //logs bar

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

前端工程師屬於一個比較新興的技術，各類技術層出不窮，隨着客戶體驗的重要性前端須要掌握的技能也愈來愈多了，對前端的要求也愈來愈多了，並且咱們離客戶很近，除了掌握必要的技能還要掌握用戶的心理，屬於溝通。 前景：前景無疑是值得確定的，也須要咱們時刻關注最新的技術，這會是一個時刻都在學習的道路

二、  JQuery delegate函數的做用？請舉例說明

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數

例如點擊div中的p標籤 讓 彈個窗口

$(‘div’).delegate(‘p’, ‘click’, function(){  alert();}

三、  Eval函數的做用

eval能夠將字符串生成語句執行，通常執行動態的js語句。
eval的使用場合：有時候咱們預先不知道要執行什麼語句，只有當條件和參數給時才知道執行什麼語句，這時候eval就派上用場了。

四、  標籤上title與alt屬性的區別是什麼

title 是鼠標放上去的額外信息 alt 是不能正常顯示的信息

五、  對WEB標準以及w3c的理解與認識？

Web標準就是將頁面的解構、表現和行爲各自獨立實現，w3c對標註提出了規範化的要求1.對結構的要求：（標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO頗有幫助）

1）標籤字母要小寫；

2）標籤要閉合；

3）標籤不容許隨意嵌套。

2.對css和js的要求：

1）儘可能使用外聯css樣式表和js腳本，使結構、表現和行爲分紅三塊，符合規範，同時提升頁面渲染速度，提升用戶體驗；

2）樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class命名要作到見文知義，標籤越少，加載越快，用戶體驗更高，代碼維護更簡單，便於改版；

3）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性

六、  Css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？

ID 和 CLASS ；Class 可繼承 ；僞類A標籤能夠繼承；列表 UL LI DL DD DT 可繼承

；優先級就近原則，樣式定義最近者爲準；載入樣式以最後載入的定位爲準

優先級爲

!important > [ id > class > tag ]  

Important 比 內聯優先級高

七、  請戳出ie6/7下特有的cssbug

一：li邊距「無端」 增長

設置ul的顯示形式爲*display:inline-block;便可，前面加*是隻 針對IE6/IE7有效

二：IE6 不支持min-height屬性，但它卻認爲height就是最小高度

使用ie6不支持但其他瀏覽器支持的屬性!important。

三:Overflow:

在IE6/7中，overflow沒法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。

四：border：none 在IE6不起做用： 寫成border：0 就能夠了，

五:100%高度

在IE6下，若是要給元素定義100%高度，必需要明肯定義它的父級元素的高度，若是你須要給元素定義滿屏的高度，就得先給html和body定義 height:100%;。

六:雙邊距 Bug

當元素浮動時，IE6會錯誤的的把浮動方式的margin值雙倍計算，給float的元素添加一個display：inline

七：躲貓貓bug

些定義了:hover的連接，當鼠標移到那些連接上時，在IE6下就會觸發躲貓貓。
1.在（那個未浮動的）內容以後添加一個<span style=」clear: both;」></span>
2.觸發包含了這些連接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

八:IE6 絕對定位的元素1px 間距bug

當絕對定位的父元素或寬度爲奇數時，bottom和right會多出現1px，

解決方案，針對IE6進行hack處理

八、  如何將一個元素600毫秒的速度緩慢向上滑動顯示？

若是須要在父元素底部向上，能夠利用margin-top 把子元素，擠下去，同事父元素設置隱藏，而後改變margintop的值也能夠利用定來作，把子元素定位最下邊

(function(){

              var oDiv = document.createElement('div');

              oDiv.style.width = '100px';

              oDiv.style.height = '100px';

              oDiv.style.backgroundColor = 'red';

              oDiv.style.position = 'absolute';

              oDiv.style.marginTop = 100 + 'px';

              document.body.appendChild(oDiv);

              var timer = setInterval(function(){

                     var m = parseInt(oDiv.style.marginTop);

                     if (m == 0 ) {

                            clearInterval(timer);

                            return;

                     }

                     oDiv.style.marginTop = parseInt(oDiv.style.marginTop) - 1 + 'px';

              },600);

       })();

九、  寫一個獲取非行間樣式的函數

Function getStyle(obj, attr){

       If(obj.currentStyle){

              return obj.currentStyle[attr];

}else{

              return getComputedStyle(obj,false)[attr];

}

}

十、 請用正則表達式驗證數字

^[0-9]*$ 

十一、 爲何利用多個域名來提供網站資源會更有效？

1、        突破瀏覽器的併發限制（瀏覽器同一域名最大的併發請求數量爲6個，ie6爲2個）

2、        節約cookie帶寬

3、        CDN緩存更方便

4、        防止沒必要要的安全問題（尤爲是cookie的隔離尤其重要）

5、        節約主機域名鏈接數，優化頁面響應速度

十二、 你如何從瀏覽器的URL中獲取參數信息

瀏覽器宿主環境中，有一個location對象，同時這個對象也是window對象和document對象的屬性。

       location對象中提供了與當前窗口加載的文檔有關的的信息，即URL信息。

如 https://www.baidu.com/api/sousu?search=baidu&id=123#2

        location.href: 完整URL

        location.protocol: 返回協議（https:）

        location.host: 返回服務器名稱和端口號（www.baidu.com）

location.hostname: 返回服務器名稱（www.baidu.com）

location.port:返回服務器端口號（http默認80，https默認443）

location.pathname:返回URL中的目錄和文件名（api/sousu）

location.search:返回查詢字符串（?search=baidu&id=123#2）

location.hash:返回hash值（#2）

1三、 手機端文字大小用什麼單位

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

1四、 是否作過有上百圖層的psd切圖？ps隱藏其餘圖層，只顯示其中一個圖層的快捷鍵

Alt + 當前圖層前眼睛

1五、 瀏覽器標準模式和懷疑模式之間的區別是什麼？

這是個歷史遺留問題，W3C標準推出前，舊的頁面都是根據舊的渲染方式對頁面進行渲染的，所以在W3C標準推出後爲了保證舊頁面的正常顯示，保持瀏覽器的兼容性，這樣瀏覽器上就產生了可以兼容W3C標準渲染的嚴格模式和保證舊頁面顯示的怪異模式的標準兼容模式。

       具體表現：

1.在嚴格模式中 ：width是內容寬度 ，元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在怪異模式中 ：width則是元素的實際寬度 ，內容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2）能夠設置行內元素的高寬

    在標準模式下，給span等行內元素設置wdith和height都不會生效，而在怪異模式下，則會生效。

3）可設置百分比的高度

    在標準模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置高度，子元素設置一個百分比的高度是無效的。

4）用margin:0 auto設置水平居中在IE下會失效

    使用margin:0 auto在標準模式下可使元素水平居中，但在怪異模式下卻會失效, 怪異模式下的解決辦法，用text-align屬性:

   body{text-align:center};#content{text-align:left}

5）怪異模式下設置圖片的padding會失效

6）怪異模式下Table中的字體屬性不能繼承上層的設置

7）怪異模式下white-space:pre會失效

1六、 Javascript的同源策略

同源策略是Javascript重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。所謂的同源就是同協議，同主機名，同端口號。

它的精髓很簡單：它認爲自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被容許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。

1七、 你所作的WEB移動端項目中，有遇到哪些兼容?

給你們推薦個網址：

http://www.jb51.net/article/84973.htm

1八、 有了解響應式佈局嗎？請大致說一說

響應式佈局概念：Responsive design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

設計步驟：

1. 設置meta標籤
2. 根據媒體查詢設置樣式
3. 設置多種視圖寬度

注意點：

1. 寬度使用百分比
2. 處理圖片縮放問題

1九、 身爲覺得web前端工程師，你確定知道如今最流行的前端技

術吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

20、 請簡述爲何要使用數據庫的事務

數據庫事務(Database Transaction) ，是指做爲單個邏輯工做單元執行的一系列操做，要麼徹底地執行，要麼徹底地不執行。

原子性（Atomic）（Atomicity)
　　事務必須是原子工做單元；對於其數據修改，要麼全都執行，要麼全都不執行。一般，與某個事務關聯的操做具備共同的目標，而且是相互依賴的。若是系統只執行這些操做的一個子集，則可能會破壞事務的整體目標。原子性消除了系統處理操做子集的可能性。
　　一致性（Consistent）(Consistency)
　　事務在完成時，必須使全部的數據都保持一致狀態。在相關數據庫中，全部規則都必須應用於事務的修改，以保持全部數據的完整性。事務結束時，全部的內部數據結構（如 B 樹索引或雙向鏈表）都必須是正確的。某些維護一致性的責任由應用程序開發人員承擔，他們必須確保應用程序已強制全部已知的完整性約束。例如，當開發用於轉賬的應用程序時，應避免在轉賬過程當中任意移動小數點。
　　隔離性（Insulation）(Isolation)
　　由併發事務所做的修改必須與任何其它併發事務所做的修改隔離。事務查看數據時數據所處的狀態，要麼是另外一併發事務修改它以前的狀態，要麼是另外一事務修改它以後的狀態，事務不會查看中間狀態的數據。這稱爲隔離性，由於它可以從新裝載起始數據，而且重播一系列事務，以使數據結束時的狀態與原始事務執行的狀態相同。當事務可序列化時將得到最高的隔離級別。在此級別上，從一組可並行執行的事務得到的結果與經過連續運行每一個事務所得到的結果相同。因爲高度隔離會限制可並行執行的事務數，因此一些應用程序下降隔離級別以換取更大的吞吐量。
　　持久性（Duration）(Durability） 　　事務完成以後，它對於系統的影響是永久性的。該修改即便出現致命的系統故障也將一直保持2017-03-082017-03-08