消除渲染阻塞 javascript答案

【问题标题】：Eliminate render blocking javascript消除渲染阻塞 javascript
【发布时间】：2016-02-17 14:41:13
【问题描述】：

我想按照 google 页面速度洞察力的建议，通过消除首屏内容上方的渲染阻塞 javascript 来提高移动设备上网页的性能。页面使用的所有 javascript 文件都是用于用户选择成分的页面顶部的文本框：

jquery-1.8.2.js、textext.js、home.js

我尝试将所有这些文件移动到 html 的末尾，但它导致文本框中断。我也尝试对脚本使用 async 属性，但这具有相同的效果。有什么办法可以解决这个问题吗？页面是here。

【问题讨论】：

它是怎么坏掉的？底部有脚本版本的链接吗？
抱歉，我无法提供指向该链接的链接，但基本上它阻止了文本框的工作，甚至使我的浏览器中的页面崩溃。
啊，我在 html 末尾交换了 home.js 和 textext.js 文件的位置，这似乎解决了文本框中断/页面崩溃的问题。但是我是否从折叠内容上方正确消除了渲染阻塞 javascript，还是有更好的方法我应该做到这一点？
听起来你修好了。

【解决方案1】：

一个可能的方向是寻找特定的阻塞函数（例如，alert）。然后通过在当前代码执行之前实现它们来覆盖那些具有非阻塞的。

例如，您可以将alert 实现为模态，让渲染继续流畅。

【讨论】：

有多少个阻塞调用？警觉和提示？渲染阻塞意味着其他东西，它意味着解析任何 JavaScript 代码会阻止 HTML 被渲染，您应该在 HTML 加载之后加载 JavaScript，以便它可以在请求 JavaScript 文件之前渲染 HTML。