2018個人Web前端面試總結

阿新 • • 發佈：2019-01-18

不斷面試不斷總結，持續更新中~

Css：

1.Css盒子模型有哪些，box-sizing有哪些應用

盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。

　　<!DOCTYPE HTML>
    幾種DOCTYPE都是標準的文件型別，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。

盒子程式碼：　box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

　在標準模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin

　在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;也就是盒子寬高 = 內容區域的寬高+padding+border;

2.水平居中？垂直居中？水平垂直居中？各有哪些方法

1.通過margin: 0 auto; text-align: center實現CSS水平居中。

2.通過display:flex實現CSS水平居中。

隨著越來越多相容flexbox，所以通過“display:flex”實現CSS水平居中的方案也越來越受青睞。

通過display:flex實現CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

這個跟CSS垂直居中的原理是一樣的，只是在flex-direction上有所差別，一個是row(預設值)，另外一個是column。

3.通過display:inline-block和text-align:center實現CSS水平居中。

display:inline-block能改父元素內的子元素的表達樣式，同樣需要配合“margin: 0 auto; text-align: center”使用。

4.通過display:table-cell和margin-left實現CSS水平居中。

對於父元素和子元素的寬度都確定的情況，適合通過display:table-cell和margin-left實現CSS水平居中。

使用時，父元素display:table-cell，子元素給剩餘寬度一半的margin-left。

5.通過position:absolute實現CSS水平居中。

這種方法跟上一個方法適用場景一樣，也是適用於父元素和子元素的寬度都確定的情況。

使用時，父元素position:absolute，子元素給剩餘寬度一半的margin-left。

3.position 的巢狀

static:static定位就是不定位，出現在哪裡就顯示在哪裡，這是預設取值，只有在你想覆蓋以前的定義時才需要顯示指定
relative:relative 就是相對元素static定位時的位置進行偏移，如果指定static時top是50象素，那麼指定relative並指定top是10象素時，元素實際top就是60象素了。
absolute:absolute絕對定位，直接指定top、left、right、bottom。有意思的是絕對定位也是“相對”的。它的座標是相對其容器來說的。容器又是什麼呢，容器就是離元素最近的一個定位好的“祖先”，定位好的意思就是其 Position是absolute或fixed或relative。如果沒有這個容器，那就使用瀏覽器初始的，也就是body或者html元素。標準是說只需要指定left和right，width可以自動根據容器寬度計算出來，可惜ie不支援。
fixed:fixed才是真正的絕對定位，其位置永遠相對瀏覽器位置來計算。而且就算使用者滾動頁面，元素位置也能相對瀏覽器保持不變，也就是說永遠可以看到，這個做一些彩單的時候可以用。可惜的是ie還不支援

inherit：該值使得屬效能夠繼承祖先設定。

position:absolute;
這個顧名思義是絕對佈局，在元素中設定之後，該元素會脫離文件流，它並不是像樓下說的相對於瀏覽器進行定位，而是一層一層向上尋找父元素，直到尋找到第一個position不為static的祖先元素，它相對於這個祖先元素進行定位。所以當你的父元素position:relative時，該子元素是相對於你的父元素進行定位。如果任何一個祖先元素都沒有設定position:relative，尋找到最外層的頂級元素html後自然不會繼續尋找，所以這時才是相對於瀏覽器進行定位。

4.清除浮動有哪幾種方法？

推薦的：

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

overflow:hidden

5.兩個元素如何平行對齊？哪幾種方法

display:inline-block

6.margin為負

Js：

1.基本資料型別

2.this預設的指向？在方法中巢狀方法，如何留住this？

1.window

2.var obj = {
val : 1,
outShow : function(){
var innerFunc = function(){ alert(this.val);};
innerFunc.bind(this)(); //彈出1
innerFunc.call(this); //彈出1
innerFunc.apply(this); //彈出1
}

};

3.Promise的用法

4.如何實現繼承，有哪幾種方法

1、原型鏈繼承

核心：將父類的例項作為子類的原型

2、構造繼承

核心：使用父類的建構函式來增強子類例項，等於是複製父類的例項屬性給子類（沒用到原型）

3、例項繼承

核心：為父類例項新增新特性，作為子類例項返回

4、拷貝繼承

5、組合繼承

核心：通過呼叫父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類例項作為子類原型，實現函式複用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

6、寄生組合繼承

核心：通過寄生方式，砍掉父類的例項屬性，這樣，在呼叫兩次父類的構造的時候，就不會初始化兩次例項方法/屬性，避免的組合繼承的缺點

function Cat(name){  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 建立一個沒有例項方法的類
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //將例項作為子類的原型
  Cat.prototype = new Super();  Cat.prototype.constructor = Cat

5.Ajax如何實現？

1.使用原生JavaScript實現

var xhr;if(window.XMLHttpRequest){
    xhr =newXMLHttpRequest();}else{
    xhr =newActiveXObject("microsoft.XMLHTTP");}
xhr.open('GET','action',true);
xhr.onreadystatechange =function(){if(xhr.readyState==4&& xhr.status==200){
          alert(responseText);}}
xhr.send(null);

2.使用jquery：

$("#username").bind("blur",function(){var $this = $(this);
     $.ajax({
           url:"user_validateUsername?username="+ $("#username").val(),
           dataType:"text",
           success:function(data){
                  $("#username-error").text("使用者名稱可用");}})});

3.使用Jquery的form表單驗證框架
需要引入jquery.form.js及以來的jquery類庫

//提交表單時使用ajax校驗使用者名稱var options ={
     url:"user_validateUsername?username="+ $("#username").val(),
     target:"#username-error"};
$("#form").ajaxForm(options);

4.使用Jquery的Validation框架
引入jquery.validate.js和messages_zh.js(optional)及jquery類庫

$("#registerForm").validate({
     debug:true,
     rules:{
        username:{//使用remote進行單個元素的ajax驗證
            remote:{
                  url:"user_validateUsername.action",
                  type:"post",
                  dataType:"text",
                  data:{
                      username:function(){return $("#username").val();}},
                  dataFilter:function(data,type){if(data =="true"){returntrue;}else{returnfalse;}}}}}

6.Js的垃圾回收

現在各大瀏覽器通常用採用的垃圾回收有兩種方法：標記清除、引用計數。

標記清除：

工作原理：是當變數進入環境時，將這個變數標記為“進入環境”。當變數離開環境時，則將其標記為“離開環境”。標記“離開環境”的就回收記憶體。

工作流程：

1. 垃圾回收器，在執行的時候會給儲存在記憶體中的所有變數都加上標記。

2. 去掉環境中的變數以及被環境中的變數引用的變數的標記。

3. 再被加上標記的會被視為準備刪除的變數。

4. 垃圾回收器完成記憶體清除工作，銷燬那些帶標記的值並回收他們所佔用的記憶體空間。

引用計數：

工作原理：跟蹤記錄每個值被引用的次數。

工作流程：

1. 聲明瞭一個變數並將一個引用型別的值賦值給這個變數，這個引用型別值的引用次數就是1。

2. 同一個值又被賦值給另一個變數，這個引用型別值的引用次數加1.

3. 當包含這個引用型別值的變數又被賦值成另一個值了，那麼這個引用型別值的引用次數減1.

4. 當引用次數變成0時，說明沒辦法訪問這個值了。

5. 當垃圾收集器下一次執行時，它就會釋放引用次數是0的值所佔的記憶體。

7.什麼情況會引起記憶體洩漏？

雖然有垃圾回收機制但是我們編寫程式碼操作不當還是會造成記憶體洩漏。

1. 意外的全域性變數引起的記憶體洩漏。

原因：全域性變數，不會被回收。

解決：使用嚴格模式避免。

2. 閉包引起的記憶體洩漏

原因：閉包可以維持函式內區域性變數，使其得不到釋放。

解決：將事件處理函式定義在外部，解除閉包,或者在定義事件處理函式的外部函式中，刪除對dom的引用。

3. 沒有清理的DOM元素引用

原因：雖然別的地方刪除了，但是物件中還存在對dom的引用

解決：手動刪除。

4. 被遺忘的定時器或者回調

原因：定時器中有dom的引用，即使dom刪除了，但是定時器還在，所以記憶體中還是有這個dom。

解決：手動刪除定時器和dom。

5. 子元素存在引用引起的記憶體洩漏

原因：div中的ul li 得到這個div，會間接引用某個得到的li，那麼此時因為div間接引用li，即使li被清空，也還是在記憶體中，並且只要li不被刪除，他的父元素都不會被刪除。

解決：手動刪除清空。

三大框架必須掌握一種~

2018個人Web前端面試總結

2、構造繼承

3、例項繼承

4、拷貝繼承

5、組合繼承

6、寄生組合繼承

7.什麼情況會引起記憶體洩漏？

2018個人Web前端面試總結

Web前端面試總結

web前端面試總結（2）

2019 web 前端面試總結（內附面經）

web前端面試總結整理

「前端面試」2018前端面試總結，看完弄懂，工資少說加3K

web前端面試知識點總結

2018年前端面試總結

web前端面試知識點總結（1）

2018前端面試總結

2018最新Web前端經典面試試題及答案

2018年web前端經典面試題總結整理

2018最新Web前端經典面試試題及答案-史上最全前端面試題(含答案)

2018年web前端經典面試題總結，你能做對幾個？

Web前端面試指導(十一)：樣式導入有哪些方式？

Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

前端面試總結（css）

前端面試總結（JavaScript）

Web前端面試指導(十七)：一個滿屏品字布局如何設計?

Web前端面試指導(十八)：用純CSS創建一個三角形的原理是什麽？

2018個人Web前端面試總結

2、構造繼承

3、例項繼承

4、拷貝繼承

5、組合繼承

6、寄生組合繼承

7.什麼情況會引起記憶體洩漏？

相關推薦