前 3 大网站性能问题以及如何解决它们

news/2024/5/10 18:24:31/文章来源:https://blog.csdn.net/yueqian_edu/article/details/123083190

　　令人惊讶的是，即使现在，你也可以访问已建立组织的主页，但如果开发人员和设计人员知道将故障排除工作的重点放在哪里，则可以轻松解决这些严重的网站性能问题。

　　在大多数情况下，当今互联网上遇到的最大网站性能问题通常归结为以下三个问题的某种组合。

　　1.页面权重过大

　　你的网站发送给客户端的数据越少，页面加载速度就越快。随着高速互联网连接成为常态，这个网站性能问题不再是一个问题，但仍有很多地方无法依赖快速数据连接。

　　有时，页面重量问题可以很容易地解决。设计师喜欢高分辨率的 PNG 图像，但切换到轻度压缩的 JPEG 图像可以将图像文件的大小减少 30%。你还可以将视频文件的大小从 1080p 缩小到 720 并看到类似的影响，但会损害用户体验。

　　此网站性能问题的另一个简单解决方法是停止调整大图像的大小。这个问题在响应式网站上尤其常见。例如，移动端渲染使用 800 像素宽的主图，并从桌面渲染调整 2048 像素宽的图像，这将极大地影响页面重量和页面加载速度。不要调整图像大小，而是从一开始就使用适当大小的图像。

　　2. 急切地加载 JavaScript

　　JavaScript 代表了可以轻松修复的网站性能问题的另一个常见来源。许多页面将外部 JavaScript 文件的引用放在页面顶部，通常在 HTML <HEAD> 元素中，这是一个不好的做法。

　　浏览器可以维持的传出连接数量是有限的。如果头部引用了五个或六个 JavaScript 文件，则会阻止五六个其他资源的下载。此外，他们阻止的资源很可能是 CSS 文件和图像，它们会在首屏呈现，这严重损害了网站的速度指数。

　　你可以通过将 HTML 页面顶部的脚本标签移动到底部来简单地解决此网站性能问题。或者，可以使用 defer 属性修饰 <script> 标签以延迟加载，直到所有其他资源都被渲染。但是，如果现有网站是由假定 JavaScript 会急切加载的开发人员编写的，那么这一举措也会对现有网站产生负面影响。

　　如果开发人员将 jQuery 或 Handlebars 引用放在 HTML 页面的正文中，并且这些 JavaScript 片段不在下载所有外部 JavaScript 文件后触发的 onReady 事件中，则会发生运行时错误，并且网站将无法正常运行。这只是为什么网站性能优化应该是整个开发过程中的重中之重而不是事后考虑的另一个原因。

　　3. 在大型 DOM 上过度使用 CSS 选择器

　　所有现代网站都使用 CSS 进行样式设置。然而，设计师通常会将整个网站的所有样式放在一个 CSS 文件中。因此，CSS 文件会增长。一个网站列出超过 1,000 种样式的情况并不少见，即使任何给定的页面实际上可能只需要 40 或 50 个。

　　此外，一个页面拥有 1,000 个 DOM 元素并不少见，尽管这是大多数性能专家建议的上限。如果有 1,000 个样式和 1,000 个 DOM 元素，则浏览器必须进行潜在的 100 万次样式表评估。如此高的数量可能会使移动设备完全爬行，即使是 RAM 或可用时钟周期较低的台式计算机，开始向用户呈现页面的速度也会很慢。

　　将整个站点普遍使用的样式放在一个常用引用的 CSS 文件中是有意义的。但该文件不应与单个页面上使用的样式混淆。对于使用非常特定样式的网页组件，使用内联 CSS 比将样式放在需要针对从未使用过的页面评估给定选择器的公共文件中更有意义。