如何查找在Chrome中阻止的資源（CSS，JS等）

Question

有沒有一種方法可以通過編程方式確定Chrome中阻止頁面呈現的資源（CSS，JS等）。作爲這一部分，我正在從瀏覽器端尋找測量結果。開始渲染： - 是否有任何API可以給我這個指標，即瀏覽器實際開始渲染過程的時間，以及所有阻止該資源的資產（CSS/JS），即阻止資源的渲染過程下載第一。

Answer 1

WebPageTest是一款免費工具，可讓您分析給定頁面的網絡和瀏覽器活動。使用這個工具，你可以通過幾個簡單的步驟來回答這個問題。

我對stackoverflow.com進行了一次測試用於演示。以下是結果：http://www.webpagetest.org/result/151220_VX_ace62f5c0dc195c1b597436a34a9d1e5/1/details/#tableDetails

前14個請求以綠色突出顯示，表示它們全都發生在頁面的第一個繪製（aka start render）之前。

---

既然你問一個編程的方式來獲取這些信息，你可以使用WebPageTest API（或node.js API wrapper）提交的測試和分析結果。

使用API​​會去是這樣的：

1. Get an API key。這是使用公共實例的API所必需的。你也可以啓動你自己的private instance，它不需要密鑰，如果你願意，你可以測試內部開發Web服務器。
2. 提交對您的網頁的測試。
3. 調查結果是完整的。

4. 保存中位數測試運行。這將使接下來的幾行代碼更易於閱讀。

   var test = result.data.median.firstView; 
   

5. 獲取第一次噴漆時間。對於中位加載時間的測試，您可以在test.firstPaint訪問此度量標準。示例情況下的結果是1517毫秒。

   var firstPaintTime = test.firstPaint; 
   

6. 遍歷請求並保存在第一次繪製時間之前開始的每一個請求。

   var blockingRequests = test.requests.filter(function(request) { 
       return request.load_start < firstPaintTime; 
   }); 
   

7. 將請求列表映射到URL列表。

   var blockingURLs = blockingRequests.map(function(request) { 
       return request.full_url; 
   }); 
   

瞧，你最終阻斷呈現URL列表：

["http://stackoverflow.com/", "http://cdn.sstatic.net/stackoverflow/all.css?v=019092e20b09", "http://i.stack.imgur.com/tKsDb.png", "http://cdn.sstatic.net/Js/stub.en.js?v=2ad47c1cbf74", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "http://i.stack.imgur.com/uE37r.png", "http://i.stack.imgur.com/BfCOt.png", "http://i.stack.imgur.com/sCwbu.png", "http://i.stack.imgur.com/atMwl.png", "http://cdn.sstatic.net/img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59", "http://cdn.sstatic.net/Img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic.net/img/favicons-sprite16.png?v=5f1c9ad029b2ea2d9d06ae792ba589ab", "http://cdn.sstatic.net/Js/full-anon.en.js?v=5552791d9794"] 

如果您想了解更多關於如何使用WebPageTest做這樣的事情，檢查出我的書Using WebPageTest。

Answer 2

是的，在開發工具中，您可以打開「網絡」選項卡，其中會顯示各種統計信息，包括顯示頁面呈現的點以及稍後何時觸發事件。

例如，下面是截圖，如果我加載堆棧溢出了清除緩存：

注意接近尾聲的垂直線。藍色的是內容加載的點;紅色的點擊事件發生的點數爲load。查看與這些產品線對接的資源可以告訴你什麼是封鎖。

但是該工具可以做的不止於此。 This article更詳細地進入該過程。

進行編程訪問，看看window.performance及其getEntries方法，如：

window.performance.getEntries() 

這裏就是我打的是到控制檯，並擴大了第一個條目的例子：

作爲文本的第一項：

 
connectEnd: 318.01 
connectStart: 318.01 
domainLookupEnd: 318.01 
domainLookupStart: 318.01 
duration: 24.845000000000027 
entryType: "resource" 
fetchStart: 318.01 
initiatorType: "script" 
name: "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 
redirectEnd: 0 
redirectStart: 0 
requestStart: 322.99 
responseEnd: 342.855 
responseStart: 323.89500000000004 
secureConnectionStart: 0 
startTime: 318.01 
workerStart: 0 

That API is described here。