文章内容
2021/12/9 20:38:56,作 者: 黄兵
Google reCAPTCHA 性能优化
最近使用 PageSpeed Insights 优化网站加载速度。具体截图如下：
reCaptcha API 库与页面一起加载，只有 1.2KB，但它会自动触发对 https://www.gstatic.com/recaptcha/releases/ 的请求，这为我们的页面添加了另外 127KB。如果用户从不与表单交互会发生什么？我们无缘无故地加载了一个 JavaScript 文件。
JavaScript 执行是解析器阻塞。这意味着当浏览器遇到脚本时，它必须暂停 DOM 构建，将其交给 JavaScript 引擎并在继续 DOM 构建之前允许脚本执行。
async 和 defer 属性改变了这种行为。
- 使用 async，浏览器在继续解析 HTML 文档的同时异步下载脚本。当脚本完成下载时，在脚本执行时会阻止解析。
- 使用 defer，浏览器在继续解析 HTML 文档的同时异步下载脚本。脚本在解析完成之前不会运行。
一图胜千言：
同时为了使用异步加载 reCAPTCHA 脚本，我们将 reCAPTCHA 代码改为异步加载方式，代码如下：
<script src="https://recaptcha.net/recaptcha/api.js?render=site_key&onload=onloadCallback&render=explicit" async defer></script>
之后回调代码如下：
window.onloadCallback=function (){
grecaptcha.execute(recaptchaV3Key, {action: action_name}).then(function (token) {
if (navigator.webdriver) {
return location.href = "/verify";
}
const csrfToken = $('meta[name=csrf-token]').attr('content');
$.ajax({
type: 'POST',
url: '/api/v1/verify/v3',
data: {token: token},
beforeSend: function (xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrfToken)
}
},
success: (res) => {
if (!res.success) {
// 后端验证失败，进入挑战
window.location.href = "/verify";
}
}
})
});
}
这样就完成了对 reCAPTCHA 脚本的异步调用。
参考资料：
1、Improve web performance lazy loading reCaptcha
2、How reCAPTCHA Is Killing Your Website’s Performance
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - Google reCAPTCHA 性能优化
评论列表