概述

当网页未能在用户设备上正确显示或运行时，就会出现网页渲染问题。 这些问题可能表现为多种形式，例如不完整或失真的图像、布局错误、加载时间过长或功能无响应。 这些问题的原因可能源于多种因素。 

超文本传输协议 Archive（HAR）是一种可以帮助诊断和解决网页渲染问题的工具。 HAR允许网络管理员捕获和分析网络流量数据，包括请求、响应和计时，以识别用户访问网页时出现的问题。 这些数据能够提供有关网页加载和性能的见解，识别任何瓶颈或错误，并帮助找到渲染问题的根本原因。

本文将探讨如何利用HAR数据来解决网页渲染问题。

环境

需要HAR数据。

说明

在重现问题时收集HAR数据。 有关如何收集HAR数据的说明，请参阅这篇文章。 我们将探讨如何利用收集到的HAR数据，通过查看超文本传输协议状态代码以及超文本传输协议请求的响应时间来揭示问题。  

超文本传输协议状态代码

超文本传输协议状态代码提供有关客户端请求到服务器状态的信息，有助于诊断和解决在通信过程中可能出现的任何问题。 以下是常见的超文本传输协议状态代码及其意义。 请参阅 超文本传输协议/1.1状态代码定义 页面以获取详细信息。

• 200 - 成功
• 404 - 页面未找到 / 错误请求
• 401 - 未授权
• 403 - 禁止访问 
• 304 - 未修改（内容已缓存）
• 500 - 内部服务器错误

步骤

1. 将收集到的HAR数据加载到Google HAR分析器中
2. 按超文本传输协议状态代码过滤请求。
   示例
   下方显示了一个加载到Google HAR分析器中的HAR文件。 此连接是尝试浏览Facebook的一个例子，其中内容未正确加载。 通过过滤非成功（非2xx）的超文本传输协议状态代码，我们可以看到有很多403（禁止）对域名x.x.fbcdn.net的响应（用黄色标记）。 下一步是进一步调查这些请求为何被拒绝。 
   
   
   
3. 对于谷歌访问受限的国家（例如中国），无法访问Google HAR分析器。 在这种情况下，您可以在收集数据时使用相同的开发者工具加载HAR数据，然后按超文本传输协议状态代码降序排序。
   

网页加载时间长

与网络应用程序相关的最常见问题之一是网页加载速度慢，或者在某些情况下，彻底加载失败。 通过利用收集到的HAR数据，我们可以深入了解每个请求的详细信息，并识别出哪些请求在加载过程中遇到了显著延迟。 某些请求可能会被卡在永久加载的状态中，导致应用程序整体速度缓慢。 分析HAR数据可以帮助我们找出这些问题请求，并采取适当措施来解决它们。

步骤

1. 将收集到的HAR数据加载到Google HAR分析器中

2. 点击 延迟响应请求（通常是查看总时间最长的条）

3. 检查延迟的主要原因是阻塞、等待还是接收。
   重要的时间字段
   已阻止时间 - 请求在可以由浏览器发送之前花费的等待时间。
   等待时间 - 等待服务器响应的时间。 如果这个值很高，可能意味着服务器忙或存在性能问题。 如下图所示，我们可以看到服务器大约有5秒的等待时间：
   接收时间 - 这是服务器将所需信息传输到客户端所用的时间。 通常在此处检测到网络问题。 
   
   注意: 在Chrome开发者工具中使用时，此时间字段也可用，提供类似的时间阶段分解。 有关时间分解阶段的详细说明，请参阅预览时间。
   

4. 对于谷歌访问受限的国家（例如中国），无法访问Google HAR分析器。 在这种情况下，您可以在收集数据的相同开发者工具中加载HAR数据。
5. 分析将类似于步骤2，我们专注于识别响应时间最长的连接。 如下面提供的截图所示，在概览部分，我们可以观察到几个连接在加载过程中存在显著延迟。 通过在概览部分中突出显示这些连接，我们可以识别出某些请求需要超过30秒才能加载完成。 选择这些连接之一显示这是对app.launchdarkly.com的请求。
   
6. 一旦识别出那些加载时间长的请求，就可以进一步进行调查以找出延迟的根本原因。 一个可能的因素是检查是否存在可能阻止这些请求的内部防火墙。
7. 在某些地区，例如中国，某些应用程序内长时间挂起的请求可能归因于内嵌跟踪器，这是一个已知问题。 欲了解更多详情，请参阅中国 | 网页存在渲染问题。