问题标签 [front-end-optimization]

我正在尽我最大的努力遵循 Google PageSpeed 指南，了解如何设计我的网站以获得最佳性能。

在分析网站后，谷歌会根据这些准则给我一个分数或排名。

使我的分数保持低的一项准则是以下准则：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS。

您的页面有 1 个阻止 CSS 资源。这会导致呈现页面的延迟。

http://www.my-website.com/bundles/styles/125/core

我已经做了很多来解决这个问题。

这包括将 CSS 的一部分嵌入到 HTML 本身（只有第一次渲染所需的那些部分），并尝试通过内联脚本加载 CSS。

我在 HTML 正文的末尾添加了这段代码：

然而，Googe PageSpeed 仍然抱怨它被渲染阻塞。

为什么会这样，我该如何解决这个问题？

使用默认构建设置，我得到以下构建层：(X+A)、(Y+A+B)、(Z+B)。

我想要：（X+A）、（Y+A）、Z、B

当我们询问 Y 和 Z 模块时，B 应该只加载一次。

我找到了CommonsChunkPlugin，但我无法正确配置它。

在构建 Web 应用程序时，我喜欢区分“重要”代码和“多余”代码。“重要”代码是运行应用程序功能所需的代码，通常与用户交互相关联。“多余”代码是在后台运行的代码，可能会处理诸如移动轮播图像、检查更新或向新闻提要添加元素等事情。

在优化 Web 应用程序时，将任何“多余”的 JS 包装在 a 中似乎是个好主意，window.requestAnimationFrame()以防止它阻塞更重要的 JS 并减慢用户交互。几乎所有记录的用途window.requestAnimationFrame()都与动画有关，但我不明白为什么它不能在其他情况下使用。

tl;dr：window.requestAnimationFrame()在动画相关代码之外使用有什么缺点吗？

我将很快开始一个新项目，其中涉及升级我现有的应用程序前端以使用 React.js。当前的前端对使用 Microsoft 技术构建的服务器进行标准 REST 调用，该技术不打算在短期内进行更改。

我想利用服务器端渲染的概念和新的 React Saga 框架来提高 SEO 和性能。据我了解，为了实现这一点，我需要运行 Node.js 服务器来启用此行为，并从 Node.js 对现有 API 进行服务器到服务器调用。

我的问题是..这是一个通用的架构吗？即让Node.js 充当中间人服务器？（UI - 节点 - 现有 API）。或者有没有更好的方法/技术将现有的非 JS API 与最新最好的 UI 框架集成？

您可以为有关该主题的一些阅读提供的任何资源/材料也将是一个很大的帮助！

谢谢。

用 ajax 渲染 html 的最佳方法是什么？

way1:最初有较少的 html 并通过 ajax 放置更多的动态 html。

way2:最初有更多的 html 并通过 ajax 放置更少的动态 html。

例如我的 html

方式1：

初始 html

动态html

方式2：

初始 html

动态html

这个例子很小，但我希望你能了解上下文。所以问题是哪个最适合前端性能。另外，当我们通过javascript动态添加html时，浏览器是否会重新绘制整个页面？

我真的很难让我的主页的 PageSpeed 洞察价值超过 80 对 100。

我正在使用谷歌云存储并设置 Cache-Control 的元数据（例如： gsutil -h "Cache-Control:public,max-age=3600" cp -a public-read -r html gs://bucket/html ）但在 PageSpeed 结果中我仍然看到

应该修复：利用浏览器缓存

我不知道如何解决上述问题，因为我已将缓存控制设置为所有文件。

另一个建议是：

消除首屏内容中的渲染阻止 JavaScript 和 CSS - 我只使用 bootstrap.css、main.css（自定义 css 文件）、jquery.js，如何消除这些脚本或文件的渲染阻止，我试图内联css（但从长远来看，维护似乎很复杂）

请帮忙 ！！

我需要在我的 AngularJS 应用程序中插入一个标题。

我曾经有一个包含函数的标头和标头控制器，因为标头包含用户名和.login/logoutlogin/logout

现在我将其更改为header 指令，但为了在所有应用程序页面中使用标题，我必须重复编写login/logout函数并在所有其他页面控制器中获取用户名，这显然是重复且低效的。

我是AngularJS的新手，所以我想知道是否有解决这个问题的好习惯。我可以在指令本身中编写这些函数，然后只从控制器传递用户名，这是一个好习惯吗？

我正在努力找出网站的性能瓶颈。我正在使用 chrome空缓存和硬重新加载选项，并使用隐身模式（未启用扩展名）点击它。

为了确定页面加载时间，使用 chrome 工具的网络选项卡，当我使用相同（空缓存和硬重新加载）选项访问同一页面时，它会报告巨大的变化。

例如：-

下面是第一次命中，显示加载时间为 8.2 秒，有 25 个请求和 477KB 数据：-

就在我再次点击（第二次点击）之后，我得到了相同的请求和大小，但加载时间增加到 9.25 秒。

而在第三击中，它减少到仅 6.89 秒。

现在，我的问题是我正在做同样的事情，那么为什么加载时间变化很大。

根据 Mozilla 工程师的一篇文章，Web Workers 需要大约 40 毫秒才能启动（延迟）。

Web Workers 有多快？ https://hacks.mozilla.org/2015/07/how-fast-are-web-workers/

Web Worker 需要大约 40 毫秒来实例化。此外，这个时间非常稳定，只有几毫秒的变化。

在 JSFiddle 测试中，我注意到启动延迟在 15 毫秒到 70 毫秒之间变化。延迟似乎在约 40 毫秒左右不稳定。Chrome 似乎更快（6 毫秒到 25 毫秒）。

https://jsfiddle.net/pvr5xroh/1/

为什么 Web Workers 的启动延迟这么高？

在开发网站时，使用 CDN 链接来集成字体、jquery 和所有这些东西是一种好习惯吗？还是将文件保存在我们自己的服务器上更好。假设，我将我的 jquery 文件保存在位于美国的托管空间中，并且我的浏览器发出请求。如果我使用 CDN 会更好吗？这样浏览器就可以从最近的CDN服务器获取文件，这是真正的逻辑吗？我的意思是它是这样工作的吗？