har文件分析http
When I consider the performance of a website, several things come to mind. I think about looking at the requests of a page, understanding what resources are being loaded, and how long these resources take to be available to users.
當我考慮網站的性能時,會想到幾件事。 我考慮查看頁面的請求,瞭解正在加載哪些資源,以及這些資源對用戶可用的時間。
The network tab will give you a table containing all assets loaded on the page. It will also show you relevant information about the origin of those assets (domain, HTTP status code, size), who initiated the request, and the order in which they were loaded in a waterfall representation.
網絡標籤會爲您提供一個表格,其中包含頁面上加載的所有資產。 它還將向您顯示有關這些資產的來源(域,HTTP狀態代碼,大小),發起請求的人以及以瀑布表示形式加載它們的順序的相關信息。
You can add more information to this table by right-clicking one of the table headers and choosing other columns.
您可以通過右鍵單擊表標題之一併選擇其他列來向該表添加更多信息。
The size, time and waterfall columns will be crucial to understanding the performance of a page. The size value will present the gzipped size of the resource (when applicable), while the time column shows the total duration from the start of the request to the receipt of the final byte in the response.
大小,時間和瀑布列對於理解頁面的性能至關重要。 size值將顯示資源的壓縮大小(如果適用),而time列顯示從請求開始到響應中最後一個字節接收的總持續時間。
Last, but not least, the waterfall column demonstrates when the asset is loaded along with the other requests.
最後但並非最不重要的一點是,瀑布列說明了何時將資產與其他請求一起加載。
Performance improvements are noticeable by changes in your code/environment. So how do we keep track of what is being analyzed by the Network tab? By exporting the page in HAR format.
通過更改代碼/環境,可以顯着提高性能。 那麼,我們如何跟蹤「網絡」選項卡正在分析的內容? 通過以HAR格式導出頁面。
A HAR (short for HTTP Archive) file is a JSON file containing all information about a browser’s interactions with a page. It will contain the HTML document and its respective JS and CSS files.
HAR(HTTP存檔的縮寫)文件是一個JSON文件,其中包含有關瀏覽器與頁面交互的所有信息。 它將包含HTML文檔及其各自的JS和CSS文件。
Along with this content, a HAR file will also contain all headers’ information and the browser metadata (that is, the time of each request).
除此內容外,HAR文件還將包含所有標頭的信息和瀏覽器元數據(即每個請求的時間)。
It is important to mention here that cookies and form data will also be logged in the file, so be careful to not include sensitive information (personal details, passwords, credit card numbers) while auditing pages.
在此必須提及,cookie和表單數據也將記錄在文件中,因此在審覈頁面時請注意不要包含敏感信息(個人詳細信息,密碼,信用卡號)。
Also, you should audit pages in private windows, which avoids browser extensions. It's important to avoid a browser’s extensions since they may modify the loading times of a page.
另外,您應該在專用窗口中審覈頁面,這樣可以避免瀏覽器擴展。 避免瀏覽器擴展很重要,因爲它們可能會修改頁面的加載時間。
Once you have a HAR file, you can try a few HAR viewers online. My personal favourite is the one created by Jan Odavarko.
擁有HAR文件後,您可以在線嘗試一些HAR查看器。 我個人最喜歡的是Jan Odavarko創建的 。
What I like about this viewer in particular is the fact you can have multiple files open at the same time, which makes it easier to compare them.
我特別喜歡該查看器的事實是,您可以同時打開多個文件,這使得比較它們變得更加容易。
HAR files can be useful to collect information about the assets of a page. Since you have detailed information about their content, you can compare what has improved (or in some cases, not improved) after a new feature is launched or a redesign is completed, for example.
HAR文件可用於收集有關頁面資產的信息。 由於您具有有關其內容的詳細信息,因此,例如,在啓動新功能或完成重新設計後,您可以比較哪些方面有所改進(或在某些情況下沒有改進)。
During my workflow, I like to keep track of the final size/time values of a few pages of the product that I am working on.
在工作流程中,我想跟蹤正在處理的產品幾頁的最終大小/時間值。
Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Cover photo by William Daigneault/Unsplash
也張貼在我的博客上 。 如果您喜歡此內容,請在Twitter和GitHub上關注我。 威廉·戴格諾 ( William Daigneault)/ Unsplash的封面照片
翻譯自: https://www.freecodecamp.org/news/using-har-files-to-analyze-performance-over-time/
har文件分析http