前端知識整理 の IMWeb

 

2017-7-12

  1. 盒子模型

 

      網頁中的元素均可以當作是一個盒子模型，每一個元素佔有的空間包括content、padding、border、margin這四部分。盒子模型分爲兩種：W3C標準盒子模型、IE盒子模型。可經過box-sizing屬性選擇盒子模型，其屬性值有content-box、border-box。其中，默認爲content-box屬性值，即表示W3C標準盒子模型，其width與height自己不包含padding、border；而border-box表示IE盒子模型，其width與height自己包括padding、border。

 

  2. src與href區別

 

      src是引入，指向外部資源的位置，指向的內容會被嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，如js腳本、img圖片等。

     href是引用，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。如a標籤、link標籤。

 

  3. 同步與異步

 

      同步：同步阻塞模式。發送數據之後，須要等待接收方反饋信息，獲得其響應數據才能發送發送下一個。

      異步：非阻塞模式。發送數據後，不須要等待對方反饋便可發送下一個，當前面有響應返回時再進行相應處理便可。

 

  4. 建立、添加、移除、移動、複製、查找節點

 

      建立節點：createElement()、createDocumentFragment()、createTextNode()

      添加節點：appendChild()、insertBefore()、insertAfter()、

      移除節點：removeChild()、

      移動節點：replaceChild()

      複製節點：cloneNode()

      查找節點：getElementsByTagName()、getElementsByClassName()、getElementByIdName()、querySelector()、querySelectorAll()

 

 

2017-7-13

 

  1. 一次完整的http事務是怎麼樣的一個過程？

 

     域名解析 =》 發起tcp的3次握手 =》 創建tcp鏈接後發起http請求 =》服務器端響應http請求，瀏覽器獲得html代碼=》瀏覽器解析html代碼，並請求html代碼中的資源=》瀏覽器對頁面進行渲染呈現給用戶

 

  2. web攻擊技術

 

      XSS：跨站腳本攻擊，指經過存在安全漏洞的web網站註冊用戶的瀏覽器內運行非法的html標籤或JavaScript運行的一種攻擊。

     SQL注入攻擊：web應用程序對用戶輸入數據的合法性沒有判斷，攻擊者能夠在web應用程序中事先定義好的查詢語句的結尾上添加額外的SQL語句，以此來實現欺騙數據庫服務器執行非受權的任意查詢，從而進一步獲得相應的數據信息。

     CSRF跨站點請求僞造：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。

 

  3. ajax是什麼？ajax的交互模型?如何解決跨域問題？

 

     ajax：異步的JavaScript和XML，經過在後臺與服務器進行少許數據交互，實現網頁的異步更新，在不從新加載整個界面的狀況下，作到網頁的部分更新。

 

    ajax的交互模型：用戶發出異步請求，建立XMLHttpRequest對象；=》告訴XMLHttpRequest對象哪一個函數會處理XMLHttpRequest對象狀態的改變，爲此要把對象的onReadyStateChange屬性設置爲響應該事件的JavaScript函數的引用；（即響應http請求狀態變化的函數）=》建立請求，用open方法指定是get仍是post，url地址，是否異步；=》發送請求，send方法；=》接收結果並分析；=》實現刷新

 

    跨域問題的解決：

        使用document.domain+iframe解決子域問題；

        使用window.name；

        使用flash；

        使用iframe+location.hash；

        使用h5的postMessage；

        使用jsonp（動態建立script標籤）；

 

  4. 優雅降級與漸進加強

      優雅降級：一開始就構建完整的功能，而後利用css hack等方式對低版本瀏覽器進行兼容。

      漸進加強：先針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後針對高級瀏覽器進行效果、交互等改進或添加功能等達到更好的用戶體驗。

 

 

2017-7-14

 

  1. javascript中什麼是僞數組？如何將僞數組化爲標準數組

     

      僞數組：沒法直接調用數組方法或屬性，但仍可利用真正數組遍歷方法對其進行遍歷。

     

       轉化方法：可使用Array.prototype.slice.call(fakeArray)方法或者[].slice.call(fakeArray,0)方法或者Array.from(fakeArray)方法將數組轉化爲真正的Array對象。

 

  2. cookie、session、localStorage、sessionStorage

     

      cookie：cookie數據存放在客戶的服務器上。不是很安全，只在cookie存放不敏感數據。數據存儲空間小。有必定的有效期。cookie在瀏覽器與服務器間來回傳遞。

      session：數據放在服務器上。session相對於cookie較安全。

      localStorage：持久化的本地存儲，除非主動刪除數據，不然不會過時。容量比cookie大。localStorage爲了在本地存儲數據而生。存儲空間更大、更多豐富易用接口、獨立的存儲空間。

      sessionStorage：用於本地存儲一個會話中的數據，只在同一個會話中的頁面才能訪問且當會話結束時數據也銷燬，即會話級別的本地存儲。容量比cookie大。sessionStorage爲了在本地存儲數據而生。存儲空間更大、更多豐富易用接口、獨立的存儲空間。

 

  3. tcp與udp區別

      tcp：基於鏈接的協議，發送數據前必須創建可靠的鏈接。一個tcp鏈接須經歷三次對話進行鏈接。傳送大量數據，速度慢。相對安全可靠。

     udp：面向非鏈接的協議，無需事先創建鏈接，可直接發送數據。一次只發送少許數據，速度快，但安全性不高。

 

  4.  線程與進程區別

 

       進程：具備必定獨立功能的程序關於某個數據集合上的一次運行活動。進程是擁有資源的基本單位。

       線程：線程是進程的一部分。線程是CPU調度和分配的基本單位，比進程更小的能獨立運行的基本單位。

        ps：（1）一個線程只能屬於一個進程，而一個進程能夠擁有多個線程，但至少有一個線程。（2）資源分配給進程，而同一進程的全部線程共享該進程的全部資源。進程是擁有資源的一個獨立單位，線程不擁有系統資源，但能夠訪問隸屬於進程的資源。（3）處理機分配給線程，即真正在處理機上運行的是線程。（4）線程在執行過程當中，須要協做同步。不一樣進程的線程間要利用消息通訊的辦法實現同步。（5）進程間能夠併發執行，同一個進程的多個線程之間也可併發執行。（6）進程是CPU資源分配的最小單位，線程是CPU調度的最小單位。（7）進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存。

 

  5. 減小頁面加載時間的方法

 

     減小http請求（圖片地圖、css精靈、靜態資源合併壓縮、靜態資源文件進行緩存）；

     減小DNS查找；

     避免重定向；

     使用ajax緩存；

     延遲載入組件；

     預先載入組件；

     減小dom元素數量及操做；

     縮小cookie；

 

  6. http與https

     http是超文本傳輸協議，用來在網絡上傳送超文本的傳輸協議，信息是明文傳輸；而https是具備安全性的ssl加密傳輸協議，安全超文本傳輸協議，對數據進行壓縮和解壓操做並返回網絡上傳送回的結果。

    http端口號爲80；而https端口號爲443.

    http是面向無鏈接的、無狀態的、不安全的；而https是由ssl+http協議構建的可進行加密傳輸、身份認證的網絡協議，比http安全。

    http以http://開頭；而https則以https://開頭。

    http工做在應用層，而https工做在傳輸層。

    http無需證書，而https須要CA機構頒發的的ssl證書。

 

 

2017-7-15

 

  1. null、undefined區別

      null：表示無的對象，轉化爲數值時爲0；表示空引用，是object類型；

      undefined：表示無的原始值，轉化爲數值時爲NaN;當聲明變量未初始化時，變量值爲undefined；表示未定義，是undefined類型；

      ps：（1）undefined表示缺乏值，即此處應該有一個值，但還沒定義，用法：變量聲明但未賦值；調用函數時，應該提供的參數沒有提供時，該參數爲undefined；對象沒有賦值的屬性，該屬性的值爲undefined；函數沒有返回值時，默認返回undefined；（2）null表示沒有對象，即此處不該該有值，用法：做爲函數的參數，表示該函數的參數不是對象；做爲對象原型鏈的終點。

      ps：（1）null、undefined都表示沒有的、不存在的值，在進行邏輯轉換時都說false，兩值進行比較時爲true

console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(null==undefined);//true
console.log(null===undefined);//false     

console.log(undefined==Object);//false    
console.log(null==Object);//false

 

  2. new操做符具體作了什麼？

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

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

      新建立的對象由this所引用，且最後隱式地返回this；

 

  3. 哪些操做會形成內存泄露？如何解決？

      內存泄露：指任何對象在您再也不須要擁有或須要它以後仍然存在。

      setTimeout的第一個參數使用字符串而非函數的話，會引起內存泄露，其餘還有閉包、控制檯日誌、循環、回調函數或計時器、自動類型轉換、意外的全局變量等

   

       解決方法：不用的變量手動釋放掉null；針對意外的全局變量在聲明時使用var，JavaScript文件頭部加上「use strict」；避免事件致使的循環引用；採用顯示類型轉換；

 

   

2017-7-16

 

  1. 一個頁面從輸入URL到頁面加載顯示完成，這個過程當中發生了什麼？

      （1）當發送一個URL請求時，瀏覽器會開啓一個線程來處理該請求，同時在遠程DNS服務器上啓動一個DNS查詢，這能使瀏覽器得到請求對應的IP地址；

      （2）瀏覽器與遠程web服務器經過tcp三次握手協商創建tcp/ip鏈接。即同步報文、同步-應答報文、應答報文。這三個報文在瀏覽器和服務器間傳遞。該握手首先由客戶端嘗試創建通訊，而服務器應答並接受客戶端請求，最後由客戶端發出該請求已被接受的報文。

       （3）一旦tcp/ip創建，瀏覽器會經過該鏈接向遠程服務器發送http的get請求，遠程服務器找到資源並使用http響應返回該資源，值爲200的http狀態碼錶示ok。

       （4）此時，web服務器提供資源服務，客戶端開始下載資源。

       （5）請求返回後，瀏覽器開始解析html生成dom樹，根據css生成css Rule樹，JavaScript根據DOM API操做dom。從而呈現頁面。

 

  2. http狀態碼

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

      200：ok

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

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

      301：請求的網頁已永久移動到新位置

      302：臨時性重定向

      304：自上次請求後，請求的網頁未修改過

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

      401：請求未受權

      403：禁止訪問

      404：找不到如何與URI相匹配的資源

      500：最多見的服務器端錯誤

      503：訪問器端暫時沒法處理請求

 

  3. JavaScript的同源策略

      同源策略是一種安全協議，爲了防止某個文檔或腳本從多個不一樣源裝載，一段腳本只能讀取來自同一來源的窗口和文檔的屬性。同源是指：協議、端口號、域名都相同。

 

2017-7-17

 

  1. XHTML、HTML區別：

      HTML是一種基本的網頁設計語言，XHTML是基於XML的置標語言。XHTML比HTML使用起來更嚴格，如標籤必須關閉、標籤名必須小寫、元素需正確嵌套、XHMTL須有根元素等。

 

  2. 語義化HTML

     讓頁面內容結構化，便於對搜索引擎解析。 在沒有css樣式渲染的條件下，也能夠看出文檔結構，且易閱讀。便於團隊成員之間合做。

 

  3. 常見瀏覽器內核

      Trident內核：IE、360、搜狗       （-ms-）

      Gecko內核：Firefox                    （-moz-）

       Presto內核：Opera7+                 （-o）

       Webkit內核：Safari、Chrome、 （-webkit）

 

2017-7-18

 

  1. this理解

 

      調用函數的那個對象。（1）純粹的函數調用，屬於全局性調用，所以this表明全局對象global。（2）做爲對象方法調用，this指向這個上級對象。（3）做爲構造函數調用，經過該函數new一個新對象，this指向這個新對象。（4）apply與call使用，可改變this的指向。

 

  2. JavaScript做用域鏈

 

       當執行一段JavaScript代碼時，JavaScript引擎會爲其建立一個做用域，又稱執行上下文，在頁面加載完成後會首先建立一個全局做用域，而後每執行一個函數，會創建一個相應的做用域，從而造成了一條做用域鏈。每一個做用域都有一條對應的做用域鏈，鏈頭是全局做用域，鏈尾是當前函數做用域。

       做用域鏈的做用是用於解析標識符，當函數被建立時，會將this、arguments、命名參數及該參數中的全部局部變量添加到該當前做用域中，當JavaScript須要查找變量X時，首先從做用域鏈中的鏈尾即當前做用域進行查找是否具備X屬性，若沒有，則順着做用域鏈繼續查找，直到找到或到達鏈頭，即全局做用域鏈，沒找到則拋出參數異常。

 

  3. JavaScript原型鏈

     

      JavaScript中的每個對象都有一個prototype屬性，稱之爲原型，而原型的值是一個對象，所以，原型也有本身的原型，從而造成了一條原型鏈。原型鏈的鏈頭爲object，其prototype爲null。

       原型鏈的做用是用於對象繼承。函數A的原型屬性是一個對象，當這個函數被用做構造函數來建立實例時，該函數的原型屬性將被做爲原型賦值給全部對象實例，如新建一個數組，則該數組的方法繼承於數組的原型。

        當訪問對象的一個屬性時，首先查找對象自己，找到則返回，找不到則沿着原型鏈查找其原型上的屬性，直到找到或到達根，若始終未找到則返回false。

 

2017-7-19

 

  1. JavaScript繼承

      原型鏈

//原型鏈繼承
function SuperType(){
    this.prototype = true;
}
SuperType.prototype.getSuperValue=function(){
    return this.property = false;
};
function SubType(){
    this.subproperty = false;
}
SubType.prototype = new SuperType();//繼承了SuperType
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};
var instance=new SubType();
console.log(instance.getSuperValue()); //false

 

      借用構造函數

//借用構造函數
function SuperType(){
    this.colors=["red","blue","green"];
}
function SubType(){
    SuperType.call(this);//繼承了SuperType
    //在子類型構造函數內部調用超類型構造函數
}
var instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'blue', 'green', 'black' ]

var instance2=new SubType();
console.log(instance2.colors);//[ 'red', 'blue', 'green' ]

 

      原型鏈+構造函數

//原型鏈+構造函數
function SuperType(name){
    this.name=name;
    this.colors=["red","pink","blue"];
}
SuperType.prototype.sayName=function (){
    console.log(this.name);
};
function SubType(name,age){
    SuperType.call(this,name);//繼承屬性
    this.age=age;
}
SubType.prototype=new SuperType();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function (){
    console.log(this.age);
};
var instance1=new SubType("Greg",26);
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'pink', 'blue', 'black' ]
instance1.sayName();//Greg
instance1.sayAge();//26

var instance2=new SubType("NN",25);
console.log(instance2.colors);//[ 'red', 'pink', 'blue' ]
instance2.sayName();//NN
instance2.sayAge();//25

 

      原型式繼承

 

      寄生式繼承

 

      寄生組合式繼承

     

 

  2. 清除浮動

 

       父級元素定義height；

       結尾處加空div標籤clear:both；

       父級元素定義僞類:after和zoom；

       父級div定義overflow:hidden;

       父級div定義overflow:auto;

       父級浮動，定義寬度；

       結尾加br標籤，clear:both；

 

 

2017-7-20

 

  1. IE與DOM事件流區別

 

      執行順序不同：IE是時間冒泡，DOM是先事件捕獲後冒泡。ps：NetSpace是事件捕獲。

 

      參數不同：   

IE使用: 
[Object].attachEvent("eventHandlerName", fnHandler); //綁定函數 
[Object].detachEvent("eventHandlerName", fnHandler); //移除綁定 

DOM使用： 
[Object].addEventListener("eventName", fnHandler, boolValue); //綁定函數 
[Object].removeEventListener("eventName", fnHandler, boolValue); //移除綁定 

boolValue參數用於設置事件綁定的階段，true爲捕獲階段，false爲冒泡階段。

 

      事件加不加on：

IE：
element.attachEvent('onclick',handlerEvent);

element.detachEvent('onclick',handlerEvent);

DOM：
element.addEventListener('click',handlerEvent, boolValue);

element.removeEventListener('click',handlerEvent, boolValue);

 

      this指向問題：

IE：var oTarget=oEvent.srcElement; 
DOM：var oTarget=oEvent.target; 

 

     阻止事件默認行爲：

IE：oEvent.returnValue=false; 
DOM：oEvent.preventDefault(); 

 

     阻止事件冒泡：

IE：oEvent.cancelBubble=true; 
DOM：oEvent.stopPropagation(); 



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

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

 

 

2017-7-21

 

  1. 閉包

   

        函數嵌套函數，內部函數能夠引用外部函數的參數和變量，參數和變量不會被垃圾回收機制回收。

        （1）變量常駐內存；（2）避免全局變量的污染；（3）私有成員的存在；（4）可能形成內存泄露；

 

  2. 垃圾回收機制及內存管理

 

       標記清除法：當變量進入環境時，將其標記爲「進入環境」，當變量離開時，將其標記爲「離開環境」；垃圾收集器在運行的時候會給存儲在內存中的全部變量都加上標記，而後去掉環境中的變量以及被環境中的變量引用的變量的標記，而在此以後再被加上標記的變量視爲準備刪除的變量，緣由是環境中的變量已經沒法訪問到這些變量，最後垃圾收集器完成內存清除工做，銷燬那些帶標記的值並回收它們所佔用的內存空間。

       

       引用計數法：跟蹤記錄每一個值被引用的次數。的那個聲明瞭一個變量並將一個引用類型值賦值給該變量時，則這個值的引用次數爲1，若同一個值又被賦給另外一個變量，則該值的引用次數加1；相反，若包含對這個值引用的變量取得了另一個值時，則該值的引用減1.當這個值的引用次數變爲0時，則說明沒法再訪問該變量值，則將其佔用的內存進行回收。