在我們前面的文章中，我們始終使用await page.GotoAsync(url);加載頁面，我們的目的是等待足夠長的時間讓頁面上的元素出現。但是，我們更希望永遠不要因為等待浪費任何時間。

WaitUntil

GotoAsync方法的定義如下：

Task<IResponse?>?GotoAsync(string?url,?PageGotoOptions??options?=?null);

而在PageGotoOptions參數中，有一個WaitUntil，它的作用是判斷當前操作是否成功。可選值包括：

• DOMContentLoaded 認為在 DOMContentLoaded 事件完成時操作完成

• Load 認為在 load 事件完成時操作完成

• NetworkIdle 認為在至少 500 毫秒內沒有網絡連接時操作完成

• Commit 認為接收到網絡響應并且文檔開始加載時操作完成

上述概念從字面上不好理解，下面讓我們用一個 Demo 來演示一下：

var?url?=?"https://stackoverflow.com/";var?page1?=?await?browser.NewPageAsync();
await?page1.GotoAsync(url,?new?PageGotoOptions?{?WaitUntil?=?WaitUntilState.Commit?});
await?page1.ScreenshotAsync(new?PageScreenshotOptions?{?Path?=?"Commit.png",?FullPage?=?true?});var?page2?=?await?browser.NewPageAsync();
await?page2.GotoAsync(url,?new?PageGotoOptions?{?WaitUntil?=?WaitUntilState.DOMContentLoaded?});
await?page2.ScreenshotAsync(new?PageScreenshotOptions?{?Path?=?"DOMContentLoaded.png",?FullPage?=?true?});var?page3?=?await?browser.NewPageAsync();
await?page3.GotoAsync(url,?new?PageGotoOptions?{?WaitUntil?=?WaitUntilState.Load?});
await?page3.ScreenshotAsync(new?PageScreenshotOptions?{?Path?=?"Load.png",?FullPage?=?true?});var?page4?=?await?browser.NewPageAsync();
await?page4.GotoAsync(url,?new?PageGotoOptions?{?WaitUntil?=?WaitUntilState.NetworkIdle?});
await?page4.ScreenshotAsync(new?PageScreenshotOptions?{?Path?=?"NetworkIdle.png",?FullPage?=?true?});

我們用 4 種不同的WaitUntil值等待 https://stackoverflow.com/ 加載完成并截圖。下面是對應的效果

Commit

僅顯示了頁面默認窗口視圖下的元素。

DOMContentLoaded

顯示了完整頁面（圖片太長，僅截取了部分）。

Load

和 DOMContentLoaded 的效果基本一樣，但是包含了所有圖片資源。

NetworkIdle

和 Load 的效果基本一樣，但是頁面頂部出現了警告。

這是因為，有個 js 文件無法下載,需要等待網絡連接超時關閉：

結論

通過上面的 Demo，我們已經可以判斷出頁面加載的整個狀態變化如下：

Commit -> DOMContentLoaded -> Load -> NetworkIdle

你可以根據實際情況，選擇最適合的WaitUntil，避免無效的等待。

添加微信號【MyIO666】，邀你加入技術交流群