前端必知必會知識點彙總Part 2

9.JavaScript腳本加載defer與async特性

• JavaScript代碼的執行會阻塞頁面的解析渲染以及其餘資源的下載

• script標籤的位置：

  傳統全部script元素都放在head元素中，必須等到所有js代碼都被下載、解析、執行完畢後，才能開始呈現網頁的內容（瀏覽器在遇到標籤時纔開始呈現內容），這在須要不少js代碼的頁面來講，會形成瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口將是一片空白。所以。通常把script標籤放在標籤前面。

• defer&async：

  • 除IE9如下，其餘瀏覽器不支持內部腳本defer屬性，IE10+才支持async特性，opera mini不支持async特性，另外，async是不支持內部腳本的。
  • defer="defer"和async="true/false"
  • 沒有defer或async，瀏覽器會當即加載並執行指定的JS腳本，也就是說，不等待後續載入的文檔元素，讀到JS腳本就加載並執行。
  • 有async，加載後續文檔元素的過程將和JS的加載與執行並行進行（異步）。
  • 有defer，加載後續文檔元素的過程將和JS的加載並行進行（異步），但JS的執行要在全部文檔元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

• 共同點

  • 不會阻塞文檔元素的加載。
  • 使用這兩個屬性的腳本中不能調用document.write方法。指定異步腳本的目的是不讓頁面解析來等待腳本的下載和執行，從而異步加載頁面其餘內容，所以，建議異步腳本不要在加載期間修改DOM。
  • 容許不定義屬性值，僅僅使用屬性名。
  • 只適用於外部腳本（IE9如下支持，可是把延遲腳本放在頁面底部仍然是最佳選擇）

• 不一樣點

  • async讓瀏覽器能並行下載腳本且不阻塞瀏覽器的文檔解析和渲染，下載完成後腳本當即執行，可能無序執行，取決於下載完成的時間。必定會在window.onload以前執行，但可能在document的DOMContentLoaded以前或以後執行。
  • defer使得瀏覽器能延遲腳本的下載，等document文檔載入和解析完成後，按照他們在文檔中出現順序再去下載解析。也就是說defer屬性的script就相似於將script放在body底部的效果，會在document的DOMContentLoaded事件以前執行。

• 不支持async的瀏覽器能夠動態建立script，經過window.onload方法確保頁面加載完畢再將script標籤插入到DOM中。實現腳本的異步載入和執行。

  window.onload = function(){
    var script = document.createElement('script');
    script.setAttribute("type","text/javascript");
    script.src = url;
    document.body.appendChild(script);
  }
  複製代碼

10.判斷一個對象是否爲空

1. ES6的Object.keys()方法

   var data = {};
   var arr = Object.keys(data);
   console.log(arr.length == 0);// true
   複製代碼

2. Object.getOwnPropertyNames()方法

   var data = {};
   var arr = Object.getOwnPropertyNames(data);
   console.log(arr.length == 0);// true
   複製代碼

3. JSON.stringify()

   var data = {};
   var result = (JSON.stringify(data) == "{}");
   console.log(result);// true
   複製代碼

4. for in遍歷

   var data = {};
   var result = function() {
     for(var key in data) {
       return false;
     }
     return true;
   }
   alert(result);// true
   複製代碼

11.事件處理機制和事件委託

• 事件流：指從頁面中接收事件的順序，有冒泡流和捕獲流。

• DOM2級事件流：事件捕獲階段、處於目標階段、事件冒泡階段

  

  假設定義的事件綁定在圖中div上，實際的div元素在捕獲階段不會接收到事件，意味着在捕獲階段，事件從document到

  後就中止了。下一個階段是「處於目標階段」，因而事件在div上發生，並在事件處理中被當作是冒泡階段的一部分。最後，冒泡階段發生，事件又傳播迴文檔。

• DOM2級事件處理程序：

  addEventListener(eventName,handlers,boolean)和removeEventListener(),兩個方法都同樣接收三個參數,要處理的事件名,第二個是事件處理程序函數,第三個值爲布爾值。布爾值是true,表示在捕獲階段調用事件處理程序。false時表示在事件冒泡階段調用事件處理程序,通常建議在冒泡階段使用,特殊狀況纔在捕獲階段。

  經過addEventListener()添加的事件處理程序只能用removeEventListener()來移除，而且須要參數徹底一致，好比參數都是同一個函數的引用。

• 事件對象：

  事件被觸發時，會默認給事件處理程序傳入一個參數e , 表示事件對象。在事件處理程序內部，對象this始終等於currentTarget的值，target包含事件的實際目標。（e.currentTarget === this）

  • preventDefault() 阻止事件的默認行爲
  • event.stopPropagation()能夠阻止事件的傳播.,取消進一步的事件冒泡或者捕獲

• 事件委託：

  • 利用事件冒泡，只在外層父元素指定一個事件處理程序，就能夠管理某一類型的全部事件。

  • 優勢：

    • 減小內存消耗：若是每一個dom節點都綁定事件，那麼會增長不少與dom的交互，同時會保存不少對象佔用內存，這二者都將致使頁面性能變低。而咱們若是隻使用一個代理，那麼會減小不少dom交互和內存佔用。
    • 動態綁定： 新生dom節點若是用原來的方式是沒法綁定事件的，用委託的方式這方面能夠輕鬆實現，保證父元素存在便可。

  • 例子：

    <ul id="myLinks">
      <li id="goSomewhere">Go somewhere</li>
      <li id="doSomething">Do something</li>
      <li id="sayHi">Say hi</li>
    </ul>
    複製代碼

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
    
    document.addEventListener("click", function (event) {
      var target = event.target;
      switch (target.id) {
        case "doSomething":
          document.title = "事件委託";
          break;
        case "goSomewhere":
          location.href = "http://www.baidu.com";
          break;
        case "sayHi": 
          alert("hi");
          break;
      }
    })
    複製代碼

  • 注意事項：

    使用「事件委託」時，並非說把事件委託給的元素越靠近頂層就越好。事件冒泡的過程也須要耗時，越靠近頂層，事件的」事件傳播鏈」越長，也就越耗時。若是DOM嵌套結構很深，事件冒泡經過大量祖先元素會致使性能損失。

12.load和DOMContentLoaded事件

• Dom文檔加載步驟：

  1. 解析html結構
  2. 加載外部腳本和樣式表文件
  3. 解析並執行腳本代碼
  4. 構造HTML DOM模型 //DOMContentLoaded執行點
  5. 加載圖片等外部文件
  6. 頁面加載完畢 //load

• 應用場景：

  給元素綁定事件處理函數，將綁定的函數放在這兩個事件的回調中，保證能在頁面元素加載完畢以後再綁定事件的函數。

13.HTTP狀態碼

• 1xx：指示信息–表示請求已接收，繼續處理。
• 2xx：成功–表示請求已被成功接收、理解、接受。
• 3xx：重定向–要完成請求必須進行更進一步的操做。
• 4xx：客戶端錯誤–請求有語法錯誤或請求沒法實現。
• 5xx：服務器端錯誤–服務器未能實現合法的請求。
• 常見狀態碼：
  • 200：OK。請求成功，通常用於GET與POST請求。
  • 204：No Content。無內容。服務器成功處理，但未返回內容。在未更新網頁的狀況下，可確保瀏覽器繼續顯示當前文檔。
  • 301：Moved Permanently。永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。從此任何新的請求都應使用新的URI代替。
  • 302：Found。臨時移動。與301相似。但資源只是臨時被移動。客戶端應繼續使用原有URI。
  • 304：Not Modified。未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端一般會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源。
  • 400：Bad Request。客戶端請求的語法錯誤，服務器沒法理解。
  • 401：Unauthorized。請求要求用戶的身份認證。
  • 403：Forbidden。服務器理解請求客戶端的請求，可是拒絕執行此請求。
  • 404：Not Found。服務器沒法根據客戶端的請求找到資源（網頁）。經過此代碼，網站設計人員可設置"您所請求的資源沒法找到"的個性頁面
  • 500：Internal Server Error。服務器內部錯誤，沒法完成請求。

14.移動端觸摸事件

• touchstart: 當手指觸摸屏幕時候觸發；

• touchmove: 當手指在屏幕上滑動的時候連續觸發；能夠調用阻止默認事件event.preventDefault()阻止屏幕滾動；

• touchend: 手指離開屏幕時觸發；

• touchcancel: 系統中止跟蹤觸摸時觸發；

  以上事件都會冒泡，並且均可以取消冒泡。

• 觸摸事件屬性：

  • touches: 跟蹤返回Touch對象的數組；
  • targetTouchs: 特定事件目標的Touch對象的數組；
  • changeTouchs: 上次觸摸以來改變了的Touch對象的數組；

• Touch對象包含的屬性：

  • clientX: 觸摸目標在瀏覽器中的x座標
  • clientY: 觸摸目標在瀏覽器中的y座標
  • pageX: 觸摸目標在當前DOM中的x座標
  • pageY: 觸摸目標在當前DOM中的y座標
  • screenX: 觸摸目標在屏幕中的x座標
  • screenY: 觸摸目標在屏幕中的y座標
  • target: 觸摸的DOM節點目標

15.meta標籤用法

1. SEO搜索引擎優化
2. 定義頁面的language
3. 自動刷新並指向新的頁面
4. 實現網頁轉換時的動態效果
5. 控制頁面緩衝
6. 網頁的頂級定級評價
7. 控制窗口顯示

• name/content屬性：

  • keywords告訴搜索引擎網頁的關鍵字

  • description告訴搜索引擎網站的主要內容

  • robots告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引

    對應的content有all,none,index,noindex,follow,nofollow。默認是all

  • author

  • renderer告訴瀏覽器渲染模式

  • viewport視圖模式

• http-equiv/content屬性：

  • X-UA-Compatible瀏覽模式

  • expires設定網頁到期時間，到期後必須到服務器上從新傳輸，必須使用GMT時間格式

    <meta http-equiv="expires"content="Fri,01Jan201618:18:18GMT">
    複製代碼

  • Pragma(cache模式)

    若是禁止瀏覽器從本地緩存訪問則將content設爲no-cache

  • Refresh自動刷新並在多少秒後且指向新的頁面

    <meta http-equiv="Refresh" content="2;URL=http://www.lbw.com">
    複製代碼

  • Set-cookie 網頁若是過時，存盤的cookie也將被刪除，GMT時間格式

    <meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
    複製代碼

  • Window-target 當content爲_blank，強制當前窗口以獨立頁面顯示

  • content-Type 顯示字符集

  • content-Language 顯示語言

  • Cache-Control 指定請求和響應遵循的緩存機制

16.計算機網絡相關

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

• TCP：面向鏈接、傳輸可靠(保證數據正確性,保證數據順序)、用於傳輸大量數據(流模式)、速度慢，創建鏈接須要開銷較多(時間，系統資源)

• UDP：面向非鏈接、傳輸不可靠、用於傳輸少許數據(數據包模式)、速度快

• TCP通常用於文件傳輸（FTP HTTP 對數據準確性要求高，速度能夠相對慢），發送或接收郵件（POP IMAP SMTP 對數據準確性要求高，非緊急應用），遠程登陸（TELNET SSH 對數據準確性有必定要求，有鏈接的概念）等等；UDP通常用於即時通訊（QQ聊天 對數據準確性和丟包要求比較低，但速度必須快），在線視頻（RTSP 速度必定要快，保證視頻連續，可是偶爾花了一個圖像幀，人們仍是能接受的），網絡語音電話（VoIP 語音數據包通常比較小，須要高速發送，偶爾斷音或串音也沒有問題）等等。

• HTTPS即加密的HTTP，HTTPS並非一個新協議，而是HTTP+SSL（TLS）。本來HTTP先和TCP（假定傳輸層是TCP協議）直接通訊，而加了SSL後，就變成HTTP先和SSL通訊，再由SSL和TCP通訊，至關於SSL被嵌在了HTTP和TCP之間

• 線程和進程：

  線程是最小的執行單元，而進程由至少一個線程組成。如何調度進程和線程，徹底由操做系統決定，程序本身不能決定何時執行，執行多長時間。 進程指計算機中已運行的程序。 線程指操做系統可以進行運算調度的最小單位。

• 死鎖：當兩個以上的運算單元，雙方都在等待對方中止運行，以獲取系統資源，可是沒有一方提早退出時，就稱爲死鎖。