除了排名靠前的搜索排名外，您可能还会在Google Search Console中遇到有关“ 首次输入延迟”的警告。 使用开发工具（ 性能选项卡，CPU图表 ）分析页面性能后，您可能会发现JavaScript在CPU主线程上消耗了时间。 该JavaScript可能包含广泛支持的但较旧的网络资源XML HTTP请求（XHR）。
现代JavaScript不必像XHR那样锁定CPU主线程。 新模式还使请求和管理JSON数据变得容易。 让我们看看如何使用一个简单的脚本来完成此任务，该脚本获取COVID-19统计信息以显示在浏览器中。
复制上面的源代码，并将其粘贴到文本编辑器中。 将其另存为本地文件在桌面上（或您会记得的地方）。 确保为其提供.html扩展名，以便使用Web浏览器轻松打开它。 双击新文件，或使用浏览器的[文件]→[打开文件]菜单项导航到该文件。
如果您已连接到Internet，则应该在页面上看到统计信息。 我们的脚本从由多个新闻工作者管理的源中获取JSON数据，并将其解压缩以更新页面DOM。 刷新页面或定期访问页面以跟踪最新统计信息。
将功能分配为值
考虑此代码时，请跳过打开的HTML，以查看script标记内发生的情况。 JavaScript的第一行是一条语句，该语句将一个复杂值（一个函数）分配给名称“ getCovidStats”。
const getCovidStats = async() => {
赋值是介于“ getCovidStats”之后的第一个等号与第28行的分号之间的所有值： async() => { ...};
分号在此处终止值分配。
由于代码声明了async（）函数，因此当我们引用getCovidStats时，我们将需要以调用函数的形式进行操作才能使其正常工作。 我们需要使用括号，如在第29行看到的那样： getCovidStats();
注意我们在函数执行后如何命名getCovidStats() ？ 最好在函数的主要操作后命名它们-标记函数的作用-作为常规命名约定。 这使将来的程序员更容易遵循我们的代码。 如果您在几个月后或几年后再返回自己的代码，这也使您更容易遵循自己的代码。
关于常数的说明
const关键字是“ constant”的简写，“ constant”是一个通用的编程概念，其含义是不应更改的值。 在这种情况下， getCovidStats是一个常量。
不能无错误地重新分配或声明JavaScript常量。 JavaScript为我们提供了错误消息作为保护轨，以免出现错误代码。 条件迫使我们正确使用常量。
在编写常量值时，您可以将值“硬编码”到变量名中，就像在石头上凿凿一样。 我们经常将函数编写为常量变量，因为我们不希望函数的行为异常。
async（）函数
不要汗水=>箭头-我们的async()函数的主体由一组花括号包围： {} ，在第9行打开，在第28行关闭。请注意嵌套的try {} ， catch {} ， finally {}方法，这些方法也以花括号为界。 花括号中的代码是调用这些函数或方法时将运行的代码。
它们在这里依次被调用。
等待
我们的async（）函数引入了一个在try块中使用的特殊的新关键字： await 。 当我们使用async() { await { code } }它暗示着JavaScript’Promise’最终会在将来的某个时间返回。 使用await不会阻止处理其他任务。 其他代码可以运行，而此时我们“等待” Promise的返回。
提取API
我们正在使用fetch() ，它为我们指定为必需参数的URL返回Promise对象。 网络方法（例如带有Promises的fetch()是很好的用例，因为网络连接性完全不可预测。 我们不希望我们的程序停止等待即时响应。 我们要继续前进，并指望Promise会重返生产线。
关于浏览器支持的说明
带有await的Fetch API和async()函数是现代的JavaScript模式，旧的浏览器（尤其是非Edge IE浏览器）并不总是支持这种模式。 注意有关为目标市场编写代码的警告。
如果您需要支持旧的浏览器，则可以考虑采用可提供具有polyfill的高级功能的部署策略，或者可以优雅地使用最低分母的浏览器。
我们的covid-19数据源
我们使用的消息来源由主要新闻机构的几位记者掌握。 它为我们提供了对简单GET请求的JSON响应。 对于我们的目的而言，这是理想的。
有分散的数据源支持国际站点，这些站点对爆发具有惊人的可视化效果 。 查看这些用于数据的用途并尝试找到开放的API可能会导致PDF（ WHO状况报告 ）或CSV（ John Hopkins ），但是为了简单起见，我们需要JSON。
SEO的更多开发技巧
- 我们的开发人员SEO专栏
- SEO 101的编码：了解源代码，压缩代码和编译后的代码
- SameSite对Cookie的要求：SEO和开发人员需要了解什么
- 使用安全外壳连接到远程主机
