daily-question-04（前端每日一題04）

在這裏記錄着天天本身遇到的一道印象深入的前端問題，以及一道生活中隨處可見的小問題。

強迫本身造成積累的習慣，鞭撻本身不斷前行，共同窗習。

Github 地址

2019/05/13 - 2019/05/19

• 請解釋 <script>、<script async> 和 <script defer> 的區別

  點擊

  1. <script src="script.js"></script>

  沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。

  2. <script async src="script.js"></script>

  有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。

  3. <script defer src="myscript.js"></script>

  有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

• html5 新標籤有哪些？

  點擊

  <article>
    標籤訂義外部的內容。好比來自一個外部的新聞提供者的一篇新的文章，或者來自
    blog 的文本，或者是來自論壇的文本。亦或是來自其餘外部源內容。
  
    <aside>
      標籤訂義 article 之外的內容。aside 的內容應該與 article 的內容相關。
  
      <audio>
        標籤訂義聲音，好比音樂或其餘音頻流。
  
        <canvas>
          標籤訂義圖形，好比圖表和其餘圖像。這個 HTML
          元素是爲了客戶端矢量圖形而設計的。它本身沒有行爲，但卻把一個繪圖 API
          展示給客戶端 JavaScript 以使腳本可以把想繪製的東西都繪製到一塊畫布上。
  
          <command>
            標籤訂義命令按鈕，好比單選按鈕、複選框或按鈕。
  
            <datalist>
              標籤訂義可選數據的列表。與 input
              元素配合使用，就能夠製做出輸入值的下拉列表。
  
              <details>
                標籤訂義元素的細節，用戶可進行查看，或經過點擊進行隱藏。與
                <legend>
                  一塊兒使用，來製做 detail
                  的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉
                  detail。
  
                  <figcaption>
                    標籤訂義 figure 元素的標題。」figcaption」 元素應該被置於
                    「figure」 元素的第一個或最後一個子元素的位置。 HTML5:
                    <figure><figcaption>PRC</figcaption></figure>
  
                    <figure>
                      標籤用於對元素進行組合。使用
                      <figcaption>
                        元素爲元素組添加標題。 HTML5:
                        <figure>
                          <figcaption>PRC</figcaption>
                          <p>
                            The People's Republic of China was born in 1949...
                          </p>
                        </figure>
  
                        <footer>
                          標籤訂義 section 或 document
                          的頁腳。典型地，它會包含創做者的姓名、文檔的創做日期以及/或者聯繫信息。
  
                          <header>
                            標籤訂義 section 或 document 的頁眉。
  
                            <hgroup>
                              標籤用於對網頁或區段（section）的標題進行組合。
  
                              <nav>
                                標籤訂義導航連接的部分。
  
                                <section>
                                  標籤訂義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。
  
                                  <source />
                                  標籤爲媒介元素（好比
                                  <video>
                                    和
                                    <audio>
                                      ）定義媒介資源。
  
                                      <video>
                                        標籤訂義視頻，好比電影片斷或其餘視頻流。
                                        HTML5:
                                        <video src="movie.ogg" controls="controls" >
                                          您的瀏覽器不支持 video 標籤。
                                        </video>
                                      </video>
                                    </audio>
                                  </video>
                                </section>
                              </nav>
                            </hgroup>
                          </header>
                        </footer>
                      </figcaption>
                    </figure>
                  </figcaption>
                </legend></details >
            </datalist></command ></canvas >
      </audio>
    </aside>
  </article>
  複製代碼

• <a> 標籤中 href="javascript:;" 表示什麼意思？？

  點擊

  這裏的 href="javascript:;" ，其中 javascript: 是僞協議，它可讓咱們經過一個連接來調用 javascript 函數.而採用這個方式 javascript:; 能夠實現 A 標籤的點擊事件運行時，若是頁面內容不少，有滾動條時，頁面不會亂跳，用戶體驗更好。

• 實現數組扁平化的方法？

  參考文章： 《數組的去重與扁平化》

• Git 和 SVN 的區別?

  點擊

  > Git 和 SVN 孰優孰好，每一個人有不一樣的體驗。 > > Git是分佈式的，SVN是集中式的 > > 這是 Git 和 SVN 最大的區別。若能掌握這個概念，二者區別基本搞懂大半。由於 Git 是分佈式的，因此 Git 支持離線工做，在本地能夠進行不少操做，包括接下來將要重磅推出的分支功能。而 SVN 必須聯網才能正常工做。 > > Git 複雜概念多，SVN 簡單易上手 > 全部同時掌握 Git 和 SVN 的開發者都必須認可，Git 的命令實在太多了，平常工做須要掌握add,commit,status,fetch,push,rebase等，若要熟練掌握，還必須掌握rebase和merge的區別，fetch和pull的區別等，除此以外，還有cherry-pick，submodule，stash等功能，僅是這些名詞聽着都很繞。 > > 在易用性這方面，SVN 會好得多，簡單易上手，對新手很友好。可是從另一方面看，Git 命令多意味着功能多，若咱們能掌握大部分 Git 的功能，體會到其中的奧妙，會發現再也回不去 SVN 的時代了。 > > Git 分支廉價，SVN 分支昂貴 > > 在版本管理裏，分支是很常使用的功能。在發佈版本前，須要發佈分支，進行大需求開發，須要 feature 分支，大團隊還會有開發分支，穩定分支等。在大團隊開發過程當中，經常存在建立分支，切換分支的需求。 > > Git 分支是指針指向某次提交，而 SVN 分支是拷貝的目錄。這個特性使 Git 的分支切換很是迅速，且建立成本很是低。 > > 並且 Git 有本地分支，SVN 無本地分支。在實際開發過程當中，常常會遇到有些代碼沒寫完，可是需緊急處理其餘問題，若咱們使用 Git，即可以建立本地分支存儲沒寫完的代碼，待問題處理完後，再回到本地分支繼續完成代碼。

• 前端日誌埋點方案?

  《小蝌蚪傳記：200行代碼實現前端無痕埋點》

• npm、yarn 依賴包管理的原理，二者的區別 ?

  點擊

  首先，這兩個都屬於 js 包管理工具，均可以安裝包或者模塊, 二者命令有所不一樣

  yarn 是由 facebook、google等聯合開發推出的，具備速度快，離線工做， 從多個源安裝，安裝版本統一，更簡潔的輸出，多註冊來源處理， 更好的語義化的優勢

2019/05/06 - 2019/05/12

• 如何有效避免迴流與重繪 ?

  點擊

  1. Display 的值會影響佈局，從而影響頁面元素位置變化，因此會更改渲染樹的結構，慎用

  2. 使用 DocumentFragment 進行緩存操做,引起一次迴流和重繪

  3. 使用 cloneNode (true or false) 和 replaceChild 技術，引起一次迴流和重繪。

  4. 不要對元素進行 JS 動畫流操做，儘可能使用 CSS 動畫屬性，以減小回流的 Render Tree 的規模

• 從輸入 URL 到頁面展示的詳細過程 ?

  參考文章： 《輸入URL至頁面渲染》

• 瀏覽器跨標籤通訊 ?

  localstorage 或者 cookie 或者 url 傳遞參數

• 瀏覽器海量數據存儲 ?

  點擊

  cookie 用於短時間存儲用戶身份，登陸狀態等較小的信息；localStorage/sessionStorage 用於長期存儲數據，瀏覽器關閉不影響它們的內存，相比於 cookie，storage 能存儲較多；IndexedDB 是瀏覽器提供的接近於 NoSQL 的數據庫，容許存儲大量數據。

• 域名解析的過程？

  點擊

  一、在瀏覽器中輸入 www.qq.com 域名，操做系統會先檢查本身本地的 hosts 文件是否有這個網址映射關係，若是有，就先調用這個 IP 地址映射，完成域名解析。

  二、若是 hosts 裏沒有這個域名的映射，則查找本地 DNS解析器緩存，是否有這個網址映射關係，若是有，直接返回，完成域名解析。

  三、若是 hosts 與 本地DNS解析器緩存 都沒有相應的網址映射關係，首先會找 TCP/ip 參數中設置的 首選DNS服務器，在此咱們叫它 本地DNS服務器，此服務器收到查詢時，若是要查詢的域名，包含在本地配置區域資源中，則返回解析結果給客戶機，完成域名解析，此解析具備權威性。

  四、若是要查詢的域名，不禁 本地DNS服務器區域解析，但該服務器已緩存了此網址映射關係，則調用這個 IP 地址映射，完成域名解析，此解析不具備權威性。

  五、若是 本地DNS服務器 本地區域文件與緩存解析都失效，則根據 本地DNS服務器 的設置（是否設置轉發器）進行查詢，若是未用轉發模式，本地 DNS 就把請求發至 13 臺根 DNS，根 DNS 服務器收到請求後會判斷這個域名 (.com) 是誰來受權管理，並會返回一個負責該頂級域名服務器的一個IP。本地DNS服務器 收到 IP 信息後，將會聯繫負責 .com 域的這臺服務器。這臺負責 .com 域的服務器收到請求後，若是本身沒法解析，它就會找一個管理 .com 域的下一級 DNS 服務器地址(http://qq.com)給 本地DNS服務器。當 本地DNS服務器 收到這個地址後，就會找 http://qq.com 域服務器，重複上面的動做，進行查詢，直至找到 www.qq .com 主機。

  六、若是用的是轉發模式，此 DNS 服務器就會把請求轉發至上一級 DNS 服務器，由上一級服務器進行解析，上一級服務器若是不能解析，或找根 DNS 或把轉請求轉至上上級，以此循環。不論是 本地DNS服務器 用是是轉發，仍是根提示，最後都是把結果返回給 本地DNS服務器，由此 DNS 服務器再返回給客戶機。

• JavaScript 異常處理的方式，統一的異常處理方案

  參考文章：《JavaScript的異常處理》

• 如何解決頁面加載海量數據而不凍結前端 UI ?

  點擊

  題目：10w 條記錄的數組，一次性渲染到頁面上，如何處理能夠不凍結UI？
  複製代碼

  分治思想，在必定的時間內屢次加載數據，直至渲染完成，使用 window.requestAnimationFrame 和 document.createDocumentFragment() 實現

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>頁面加載海量數據</title>
    </head>
  
    <body>
      <ul id="list-with-big-data">
        100000 數據
      </ul>
      <script> // 此處添加你的代碼邏輯 (function() { const ulContainer = document.getElementById('list-with-big-data'); // 防護性編程 if (!ulContainer) { return; } const total = 100000; // 插入數據的總數 const batchSize = 4; // 每次批量插入的節點個數，個數越多，界面越卡頓 const batchCount = total / batchSize; // 批處理的次數 let batchDone = 0; // 已完成的批處理個數 function appendItems() { // 使用 DocumentFragment 減小 DOM 操做次數，對已有元素不進行迴流 const fragment = document.createDocumentFragment(); for (let i = 0; i < batchSize; i++) { const liItem = document.createElement('li'); liItem.innerText = batchDone * batchSize + i + 1; fragment.appendChild(liItem); } // 每次批處理只修改 1 次 DOM ulContainer.appendChild(fragment); batchDone++; doAppendBatch(); } function doAppendBatch() { if (batchDone < batchCount) { // 在重繪以前，分批插入新節點 window.requestAnimationFrame(appendItems); } } // kickoff doAppendBatch(); // 使用 事件委託 ，利用 JavaScript 的事件機制，實現對海量元素的監聽，有效減小事件註冊的數量 ulContainer.addEventListener('click', function(e) { const target = e.target; if (target.tagName === 'LI') { alert(target.innerText); } }); })(); </script>
    </body>
  </html>
  複製代碼