鍍金池/ 問答/HTML5  HTML/ 瀏覽器F12 Finish DOMContentLoaded load時(shí)間如何計(jì)

瀏覽器F12 Finish DOMContentLoaded load時(shí)間如何計(jì)算出來？

瀏覽器F12 Finish DOMContentLoaded load時(shí)間如何計(jì)算出來？

回答
編輯回答
舊酒館

http://www.cnblogs.com/longm/...
計(jì)算白屏?xí)r間

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript">
    // 不兼容performance.timing 的瀏覽器，如IE8
    window.pageStartTime = Date.now();
  </script>
  <!-- 頁面 CSS 資源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    // 白屏?xí)r間結(jié)束點(diǎn)
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 頁面內(nèi)容 -->
</body>
</html>

因此白屏?xí)r間則可以這樣計(jì)算出：

可使用 Performance API 時(shí)

白屏?xí)r間 = firstPaint - performance.timing.navigationStart;

首屏?xí)r間
通常計(jì)算首屏的方法有

首屏模塊標(biāo)簽標(biāo)記法
統(tǒng)計(jì)首屏內(nèi)加載最慢的圖片的時(shí)間
自定義首屏內(nèi)容計(jì)算法

1、首屏模塊標(biāo)簽標(biāo)記法

首屏模塊標(biāo)簽標(biāo)記法，通常適用于首屏內(nèi)容不需要通過拉取數(shù)據(jù)才能生存以及頁面不考慮圖片等資源加載的情況。我們會(huì)在 HTML 文檔中對(duì)應(yīng)首屏內(nèi)容的標(biāo)簽結(jié)束位置，使用內(nèi)聯(lián)的 JavaScript 代碼記錄當(dāng)前時(shí)間戳。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首屏</title>
  <script type="text/javascript">
    window.pageStartTime = Date.now();
  </script>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
</head>
<body>
  <!-- 首屏可見模塊1 -->
  <div class="module-1"></div>
  <!-- 首屏可見模塊2 -->
  <div class="module-2"></div>
  <script type="text/javascript">
    window.firstScreen = Date.now();
  </script>
  <!-- 首屏不可見模塊3 -->
  <div class="module-3"></div>
    <!-- 首屏不可見模塊4 -->
  <div class="module-4"></div>
</body>
</html>

時(shí)首屏?xí)r間等于 firstScreen - performance.timing.navigationStart;

事實(shí)上首屏模塊標(biāo)簽標(biāo)記法 在業(yè)務(wù)中的情況比較少，大多數(shù)頁面都需要通過接口拉取數(shù)據(jù)才能完整展示，因此我們會(huì)使用 JavaScript 腳本來判斷首屏頁面內(nèi)容加載情況。

2、統(tǒng)計(jì)首屏內(nèi)圖片完成加載的時(shí)間

通常我們首屏內(nèi)容加載最慢的就是圖片資源，因此我們會(huì)把首屏內(nèi)加載最慢的圖片的時(shí)間當(dāng)做首屏的時(shí)間。

由于瀏覽器對(duì)每個(gè)頁面的 TCP 連接數(shù)有限制，使得并不是所有圖片都能立刻開始下載和顯示。因此我們?cè)?DOM樹 構(gòu)建完成后將會(huì)去遍歷首屏內(nèi)的所有圖片標(biāo)簽，并且監(jiān)聽所有圖片標(biāo)簽 onload 事件，最終遍歷圖片標(biāo)簽的加載時(shí)間的最大值，并用這個(gè)最大值減去 navigationStart 即可獲得近似的首屏?xí)r間。

此時(shí)首屏?xí)r間等于 加載最慢的圖片的時(shí)間點(diǎn) - performance.timing.navigationStart;

3、自定義模塊內(nèi)容計(jì)算法

由于統(tǒng)計(jì)首屏內(nèi)圖片完成加載的時(shí)間比較復(fù)雜。因此我們?cè)跇I(yè)務(wù)中通常會(huì)通過自定義模塊內(nèi)容，來簡化計(jì)算首屏?xí)r間。如下面的做法：

忽略圖片等資源加載情況，只考慮頁面主要 DOM
只考慮首屏的主要模塊，而不是嚴(yán)格意義首屏線以上的所有內(nèi)容

2017年3月18日 15:58
編輯回答
扯機(jī)薄

這里有的

2017年8月5日 11:03
編輯回答
枕邊人

從頁面第一個(gè)請(qǐng)求開始計(jì)時(shí)，到頁面所有請(qǐng)求結(jié)束，到頁面所有元素繪制完成。期間的時(shí)間就是 time

瀏覽器會(huì)監(jiān)控請(qǐng)求和繪制是否完成

2018年4月24日 03:00
編輯回答
薄荷糖

首先你得知道瀏覽器渲染原理，DOMContentLoaded就是dom加載完畢，你打開一個(gè)網(wǎng)頁開始是空白的，然后一瞬間之內(nèi)容會(huì)展示出來，從空白頁到到展示內(nèi)容會(huì)觸發(fā)DOMContentLoaded
這時(shí)候問題又來了，什么是HTML文檔被加載和解析完成。要解決這個(gè)問題，我們就必須了解瀏覽器渲染原理。

當(dāng)我們?cè)跒g覽器地址輸入U(xiǎn)RL時(shí)，瀏覽器會(huì)發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器將請(qǐng)求的HTML文檔發(fā)送回瀏覽器，瀏覽器將文檔下載下來后，便開始從上到下解析，解析完成之后，會(huì)生成DOM。如果頁面中有css，會(huì)根據(jù)css的內(nèi)容形成CSSOM，然后DOM和CSSOM會(huì)生成一個(gè)渲染樹，最后瀏覽器會(huì)根據(jù)渲染樹的內(nèi)容計(jì)算出各個(gè)節(jié)點(diǎn)在頁面中的確切大小和位置，并將其繪制在瀏覽器上。
html的解析又會(huì)被js打斷，解析過程中遇到<script>標(biāo)簽的時(shí)候，便會(huì)停止解析過程，轉(zhuǎn)而去處理腳本，如果腳本是內(nèi)聯(lián)的，瀏覽器會(huì)先去執(zhí)行這段內(nèi)聯(lián)的腳本，如果是外鏈的，那么先會(huì)去加載腳本，然后執(zhí)行。在處理完腳本之后，瀏覽器便繼續(xù)解析HTML文檔。
所以一般js文件放到最后面
這里需要注意一點(diǎn)，在現(xiàn)在瀏覽器中，為了減緩渲染被阻塞的情況，現(xiàn)代的瀏覽器都使用了猜測(cè)預(yù)加載。當(dāng)解析被阻塞的時(shí)候，瀏覽器會(huì)有一個(gè)輕量級(jí)的HTML（或CSS）掃描器（scanner）繼續(xù)在文檔中掃描，查找那些將來可能能夠用到的資源文件的url，在渲染器使用它們之前將其下載下來。

在這里我們可以明確DOMContentLoaded所計(jì)算的時(shí)間，當(dāng)文檔中沒有腳本時(shí)，瀏覽器解析完文檔便能觸發(fā) DOMContentLoaded 事件；如果文檔中包含腳本，則腳本會(huì)阻塞文檔的解析，而腳本需要等位于腳本前面的css加載完才能執(zhí)行。在任何情況下，DOMContentLoaded 的觸發(fā)不需要等待圖片等其他資源加載完成。

參考:click here

2017年7月23日 17:49