在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 瀏覽器F12 Finish DOMContentLoaded load時間如何計

瀏覽器F12 Finish DOMContentLoaded load時間如何計算出來？

瀏覽器F12 Finish DOMContentLoaded load時間如何計算出來？

回答
編輯回答
舊酒館

http://www.cnblogs.com/longm/...
計算白屏時間

<!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">
    // 白屏時間結(jié)束點
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 頁面內(nèi)容 -->
</body>
</html>

因此白屏時間則可以這樣計算出：

可使用 Performance API 時

白屏時間 = firstPaint - performance.timing.navigationStart;

首屏時間
通常計算首屏的方法有

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

1、首屏模塊標簽標記法

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

<!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>

時首屏時間等于 firstScreen - performance.timing.navigationStart;

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

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

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

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

此時首屏時間等于 加載最慢的圖片的時間點 - performance.timing.navigationStart;

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

由于統(tǒng)計首屏內(nèi)圖片完成加載的時間比較復雜。因此我們在業(yè)務中通常會通過自定義模塊內(nèi)容，來簡化計算首屏時間。如下面的做法：

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

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

這里有的

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

從頁面第一個請求開始計時，到頁面所有請求結(jié)束，到頁面所有元素繪制完成。期間的時間就是 time

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

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

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

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

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

參考:click here

2017年7月23日 17:49