第三方 JavaScript 性能
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
了解第三方 JavaScript 对性能的影响,以及您可以采取哪些措施来防止其拖慢网站速度。
第三方 JavaScript 通常是指您的网站中嵌入的具有以下特征的脚本:
网站会将这些脚本用于各种目的,包括:
- 社交分享按钮
- 视频播放器嵌入
- 聊天服务
- 广告 iframe
- 分析和指标脚本
- 用于实验的 A/B 测试脚本
- 辅助库(如日期格式设置、动画和功能库)
第三方脚本可以提供强大的功能,但这还远远不够。它们还会影响隐私、安全性和页面行为,并且尤其会给性能带来问题。
如果存在大量的 JavaScript,就会降低性能。但是,由于第三方 JavaScript 通常不在您的控制范围之内,因此可能会带来其他问题。
网络
设置连接需要时间,而向多个服务器发送过多请求会导致速度下降。对于安全连接而言,这一时间会更长,因为安全连接可能会涉及 DNS 查找、重定向以及到处理用户请求的最终服务器多次往返。
第三方脚本往往会增加网络开销,例如:
- 触发其他网络请求
- 拉取未经优化的图片和视频
- HTTP 缓存不足,这会强制频繁提取网络资源
- 资源的服务器压缩不足
- 由不同第三方嵌入提取的框架和库的多个实例
渲染
第三方 JavaScript 的加载方式非常重要。如果是在关键渲染路径中同步完成,则会延迟对文档其余部分的解析。
如果第三方出现服务器问题且未能投放资源,系统就会阻止呈现,直到请求超时(时长介于 10 到 80 秒之间)。您可以使用 WebPageTest 单点故障测试来测试和模拟此问题。
解决办法
通常不可避免地要使用第三方 JavaScript,但您可以采取以下措施来最大限度地减少负面影响:
- 在选择第三方资源时,请青睐发送最少代码量且仍能为您提供所需功能的资源。
- 为第三方内容使用效果预算,以控制其费用。
- 不要使用两家不同供应商的相同功能。您可能不需要两个跟踪代码管理器或两个分析平台。
- 定期审核并清理多余的第三方脚本。
如需了解如何审核第三方内容并高效加载内容,从而获得更好的性能和用户体验,请参阅优化您的第三方资源部分的其他帖子。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2019-08-13。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2019-08-13\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2019-08-13。"],[],[]]