javascript - 关键渲染路径和第 3 方库

Question

我正在尝试关注 Ilya Grigoric's performance best practices通过内联关键的 css 和 js 并在以后异步加载所有其余部分。

我的问题是当我的页面需要第 3 方库以呈现其关键路径时。我想当使用像 Angularjs 这样的 MVC 库时，这不是一个真正的选择，但是如果我想使用第 3 方模板库怎么办？是否有足够小的模板库可供我内联？

我真的在尝试遵循这些最佳实践并构建一个超快速的移动网络应用程序，但使用当今的现代前端开发工具(Angularjs/Polymer 等)确实很难做到这一点

Answer 1

这个问题很笼统，很难回答。

这里有几个问题。首先，“足够小”的概念是相对的。您可以内联任意数量的 javascript，因此从技术上讲，您可以内联您找到的任何模板库。

我不知道 Grigoric 的具体指导是什么，但如果您需要模板库为用户呈现任何内容，那么它是您关键路径的一部分，应该尽快加载。也就是说，如果您正在尝试为您的用户创建一个快速的体验，那么您最好呈现 html 服务器端，以便移动设备可以更快地响应响应。如果您的整个文档是在设备上使用 javascript 模板创建的，您将不得不等待整个 DOM 加载，等待 javascript 解析，最后等待您的模板被处理，然后才能向用户显示任何内容.

编辑:

在遇到性能问题之前不要针对性能问题进行优化

目标不是制作“尽可能快的页面”。相反，您的目标应该是制作一个“运行良好”的页面。您的问题并没有真正的“正确”答案 - 这实际上取决于您的具体情况和目标。

关于“如果 js 在 head 中，会不会是个问题”:答案是肯定的。当然，您可以进行调整以加快速度，但基本架构仍然具有相同的局限性 - 当您在客户端上呈现模板时，您正在客户端上进行大量处理。此外，您必须等待大量时间才能在第一次请求时下载资源，这比纯 html 下线时要多。

无论哪种方式，在这两种情况下，您的应用都可以完美运行。如果您有更具体的问题，您应该只实现一些东西并回来。