网络性能技巧 - 超越基础知识

>本文由New Relic赞助。感谢您支持使SitePoint成为可能的赞助商！ 多年来，我们在Sitepoint上进行了很多演出，我们相信现在是时候以一些更高级的方面来重新审视该主题了。本文中提到的方法与PHP无关，但是如果正确使用，您可以确定它们将使您的应用程序达到全新的水平。请注意，我们不会涵盖通常的内容 - 对CS，JS和图像的要求更少，这意味着更快的网站和类似的提示是常识。相反，我们将专注于一些鲜为人知/用过的升级。>

钥匙要点

>最大程度地减少HTML元素和不必要的标签可以帮助提高Web性能。使用预取技术提前加载资源也可以增强速度和用户体验。

>使用CSSLINT和CSS诸如检测错误和潜在性能问题的工具验证您的CSS。使用CSS 2D翻译以移动对象而不是顶部/左/左可以提高性能。

> Google的PagesPeed模块可​​以自动实施网站优化的最佳实践，改善静态资源的服务，缩小和优化CSS和JavaScript，并降低图像大小。
• >
使用Google的开源压缩算法，Zopfli可以将压缩增加3-8％，这对于向大量客户提供静态内容的网站可能会产生明显的影响。
• >
小型性能修复程序可能会对网站的整体性能产生重大影响。利用HAR和DEV工具分析等工具来监视您的网站的性能并实施必要的改进。
html
• >
>删除不必要的标签

越少元素，越好。删除不必要的html。

• vs.
  当然，

  不适用于所有情况，但是以一种使您可以删除尽可能多的DOM元素的方式构建您的HTML。

  >您还可以通过省略一些不需要的标签来减少HTML文档的文件大小。这确实看起来往往相当骇人听闻，并且似乎符合标准，因此只有在部署到生产时才能完成 - 这样您就不会混淆其他从事相同代码的开发人员。

  <span><span><span><div>>
      <span><span><span><div>>
          <span><span><span><p>></p></span>Some of my<span><span><span>></span>text<span><span></span></span>></span>.<span><span></span>></span>
  </span>    <span><span><span></span></span></span></span></span>
  </div></span>></span>
  </span><span><span><span></span></span></span>
  </div></span>></span></span>

  预摘要

  <span><span><span><div>>
      <span><span><span><p>></p></span>Some of my<span><span><span>></span>text<span><span></span></span>></span>.<span><span></span>></span>
  </span><span><span><span></span></span></span></span></span>
  </div></span>></span></span>

  >预选是指您提前需要资源的浏览器。资源可以是域的IP（DNS预取），图像或CSS文件等静态资源，甚至是整个页面。

  >当您期望用户访问您的网站后使用用户到另一个域时，或者，例如，您将静态资源托管在诸如images.example.com之类的子域上时，DNS预摘要可以帮助删除它为删除它所需的几个miliseconds DNS服务器将images.example.com解析为IP地址。收益并不多，但积累，它可以削减一些不错的加载时间，从您提出的用户浏览器的要求。 DNS预摘要是在

  中使用进行的：，并在所有主要浏览器中支持。如果您有任何子域，您希望当前的访问者使用当前的页面完成后加载，没有理由不使用DNS Prefetch。 >当您知道下一次访问中需要一些资源时，您可以预摘要并将它们存储在浏览器缓存中。例如，如果您有一个博客，并且在该博客上有一篇分为两部分的文章，则可以确保预载第二部分中的静态资源（即图像）。这样就这样做了：。 Picasa Web专辑广泛使用此图表将2个以下图像预先添加到您当前正在查看的图像。在较旧的浏览器上，您可以通过在JavaScript中加载幻影映像元素来实现这一目标：

  <span><span><span><div>>
      <span><span><span><div>>
          <span><span><span><p>></p></span>Some of my<span><span><span>></span>text<span><span></span></span>></span>.<span><span></span>></span>
  </span>    <span><span><span></span></span></span></span></span>
  </div></span>></span>
  </span><span><span><span></span></span></span>
  </div></span>></span></span>

  这将图像加载到缓存中，但在任何地方都不使用。不过，此方法对CSS和JS文件不起作用，因此，如果您希望它们在古代浏览器中预取，则必须对这些资源发挥创造力。 XMLHTTPREQUEST浮出水面 - 通过Ajax加载它们，不要在任何地方使用它们。请参阅此处有关如何实现这一目标的信息。
  >要注意的一件事是仅预取用我们确定或几乎确定用户需要的资源。如果用户正在阅读分页的博客文章，请肯定，请先预取。如果用户在表单提交屏幕上，请肯定会在提交后将其重定向到屏幕上可以预见的资源。不要将整个网站预摘要，也不要随机预取 - 考虑带宽，并谨慎使用预取，请牢记移动设备。移动设备通常在有限的带宽上，预先载荷2MB映像可能不会非常用户友好。您可以通过选择性预取料来避免这些问题 - 检测用户何时在移动设备上或在有限的带宽连接上，并且在这种情况下不要使用预取。更好的是，将设置添加到您的网站上，并要求人们同意预取用 - 将他们的喜好保存到LocalStorage中，并使用用户代理字符串将其放置，从而允许他们分别允许或不允许在每个设备上进行预取。

  >您还可以预摘要和predender整个页面。预摘要页面意味着获取其DOM含量 - HTML。由于大多数内容实际上是JavaScript，CSS和图像，因此通常不会提供太大的速度提升 - 页面预取的内容未获取内容。目前，这种类型的提取仅由Firefox完全支持。预处理是另一回事 - 预先启动仅在Chrome中，它不仅可以在幕后获取DOM，而且还以CSS，JS和图像的形式获取所有相关内容。实际上，它已经在背景中呈现整个页面 - 该页面坐在RAM中，完全打开和渲染，等待访问。当用户单击Prerendered链接时，这可以立即进行更改，但引入了与上一段中所述的相同问题 - 带宽可能会受到影响。此外，您的服务器将此Prerender注册为访问，因此，如果用户实际上改变了主意并且最终不会打开Prerendered网站，则可能会得到一些偏斜的分析。 prerender语法为：。

  。 目前，只有一种适当的方法可以检测您的页面已被预先处理或预取，这就是页面可见性API，目前在Android浏览器和Opera Mini以外的所有主要浏览器中都支持该页面。您使用此API来确保该页面实际上是在观看，然后启动您可能正在执行的任何分析。
  > css

> css lint

• >使用CSSLINT验证您的CSS并指出错误和潜在的性能问题。阅读并尊重CSSlint Wiki中规定的规则，以编写最有效的CSS。
  > css解释
  很像SQL在数据库世界中解释，也有一个漂亮的CSS解释工具 - https：//github.com/josh/css-ecplain。您可以使用它来分析CSS选择器。如果您想立即对其进行测试，请将此文件的内容粘贴到浏览器的控制台中，然后发出命令，例如cssexplain（'。item.subclass.anotherclass'）。

• 的目标是在1到10的比例下获得最低的得分。您也可以在我的JSFiddle中尝试一下。虽然结果不太认真（最好遵循CSSLINT建议），但他们仍然在解释选择器的复杂性方面做得很好，至少暗示了可能的问题。
  >翻译与顶部/左

  >使用CSS 2D翻译以移动对象而不是顶部/左/左。当保罗·爱尔兰人和克里斯·科耶（Paul Irish）和克里斯·科耶（Chris Coyer）做得非常出色时，尝试详细解释这一点是没有意义的。确保您阅读/观看它们的材料，并在可能的情况下烘烤这些知识 -

  在可能的

  >。

• >平滑滚动

  您可能已经注意到，诸如Facebook和Google take 年龄之类的网站在打开它们时可以滚动。几乎就像他们需要时间进行热身。这是当今许多网站上的问题，也是一个巨大的UX Gutpunch。使您的页面顺利滚动并不像看起来那样困难，尤其是当您知道要寻找什么时。减少滚动滞后的关键是最大程度地减少油漆 - 油漆是当屏幕上的内容从框架上变化时会发生什么，并且浏览器需要在屏幕上重新粉刷它 - 它需要计算新的外观，并将这种新外观拍打到渲染网站的其中一层包括。有关这些问题的更多信息，并了解如何诊断油漆问题，请参阅Paul Lewis的出色帖子。

  >服务器

>用一些简单的获胜来优化您的php

• >您可以做很多事情来从PHP侧加速您的应用程序。有关一些简单的胜利，请参阅弗雷德里克·米切尔（Fredric Mitchell）的最后一篇文章或SitePoint上的任何其他与绩效有关的文章。

  >

  使用Google的PagesPeed模块

  Google的PagesPeed模块是一个模块，您可以安装到Nginx和Apache中，该模块自动实现了一些最佳实践以进行网站优化。该模块评估客户所感知的网站的性能，确保尽可能尊重所有规则，并特别改善静态资源的服务。它将为您缩小，优化和压缩CSS和JavaScript，通过删除未使用的元数据来降低图像大小，设置到有效的标题以更好地利用浏览器缓存等等。最重要的是 - 它不需要您的架构更改。只需将其插入您的服务器即可。要安装模块，请按照以下说明进行操作 - 您需要从nginx的来源构建，但这仅是一对工作的命令。要正确介绍PagesPeed，请参见以下视频 - 到目前为止，它已经有点旧了，但仍然是一个非常宝贵的资源：

  >

• 使用spdy

  在类似于PageSpeed的努力中，Google还领导了SPDY的发展。 MOD_SPDY是另一个旨在更快地为您的网站服务的Apache模块。安装它并不像人们喜欢的那样简单，并且还需要浏览器支持，但这一天看起来看起来更好。 SPDY实际上是一种协议（很像HTTP是一个协议），它可以在能够的情况下拦截并替换HTTP请求，从而更快地为站点服务。有关更多信息，或者更好的是，此新手友好的细分，请参阅此高级概述。虽然使用SPDY可能会冒险，因为我们仍在等待更广泛的采用，但到目前为止，收益似乎超过了风险。
• >

  使用WebP进行图像

  WebP是一种旨在替换所有其他方法的图像格式 - JPG，PNG和GIF。它支持α层（透明度），动画，无损和有损压缩等。浏览器的采用率非常慢，但是如今，使用可以自动化WebP转换的工具，例如上述页面pagespeed模块（它可以自动将图像自动转换为webP）。有关WebP的深入介绍和讨论，请参阅此综合指南。 用zopfli

  压缩

• >使用zopfli压缩来预压缩静态资源。这是一种开源压缩算法，再次由Google带头，与在线使用的通常压缩方法相比，该算法将压缩增加了3-8％。在较小的网站上，这几乎没有什么不同，但是如果您正在扩展应用程序或将静态内容提供给许多客户，那么这肯定会带来明显的不同，正如Google Web Fonts团队所报道的：

结论

有很多方法可以改善应用程序的性能，并且与生活中通常一样 - 整体大于零件的总和。实施我们在本文中提到的一些措施以及之前提到的措施，您将获得一个不错的，有形的改进。实现所有这些，您拥有一个如此快速，可以随着时间的推移而运行的应用程序。监视您的应用程序，使用HAR，查看开发工具分析或注册为您提供所有这些服务的服务 - 不要忽略网站的性能方面。虽然这些天大多数项目都是“做和离开”，但不要让您的客户不愿为您感到骄傲的网站。 永远不要低估您可以做的小问题 - 您永远不知道哪一个将是卓越的转折点！

在网络性能技巧上经常询问问题（常见问题解答）

> html中的DIV和跨度标签之间有什么区别？ DIV标签是一个块级元素，用于较大的代码块，而跨度标签是一个内联元素，用于一条线内的一小部分HTML。它们之间的主要区别是它们如何影响网页的布局。 Div元素创建了一条新线路并占用全部宽度，而SPAN元素不会创建新线路，并且仅在必要时占用尽可能多的宽度。

>

>如何提高网站的性能？最有效的方法之一是优化图像。大型高分辨率图像可以减慢您的网站，因此调整，压缩和优化它们的大小很重要。另一种方法是缩小您的CSS和JavaScript文件，这可以减少文件的大小并加快网站的速度。您还可以使用内容交付网络（CDN）更快地将内容交付给世界各地的用户。

>网站性能对用户体验的影响是什么？对用户体验的重大影响。缓慢加载的网站会使用户感到沮丧并导致更高的跳出率。另一方面，快速加载的网站可以提高用户满意度，提高参与度并可能导致更高的转化率。因此，优化网站的性能以提供最佳的用户体验至关重要。

> html如何影响网站的性能？

极大地影响了网站的性能。例如，不必要的标签，过度使用表以及不当使用表单可以减慢您的网站。另一方面，干净，结构良好的HTML可以提高您的网站的加载速度和整体性能。

>

>有哪些高级的Web性能技巧？预加载以在后台加载资源，实现服务器推动为单个客户端请求发送多个响应，并使用服务工作者来缓存资源并直接从缓存中提供它们。这些技术可以显着改善您的网站的性能，但是它们需要对Web技术和仔细实施有深入的了解。

>

>我如何衡量网站的性能？

>您可以使用几种工具来使用几种工具衡量您网站的性能，包括Google的PagesPeed Insights，GTMetrix和WebPagetest。这些工具可以为您的网站加载速度，资源使用量和其他性能指标提供详细的见解。他们还可以提供有关如何提高网站性能的建议。

JavaScript在网站性能中的作用是什么？虽然它可以增强网站的功能和互动性，但书写或过多的JavaScript可以减慢网站的速度。因此，重要的是要编写有效的JavaScript，最大程度地减少其使用，并推迟或异步加载JavaScript文件以提高网站的性能。

> CSS如何影响网站性能？

CSS以多种方式影响网站性能。大型，复杂的CSS文件可以放慢您的网站，因此保持CSS清洁且组织良好很重要。您还应该避免使用过多的CSS动画，因为它们可能引起性能问题。此外，您应该使用CSS Sprites将多个图像合并为一张图像，减少HTTP请求的数量并提高网站的加载速度。

>

>服务器响应时间对网站性能的影响是什么？ >服务器响应时间是服务器响应浏览器请求所需的时间。缓慢的服务器响应时间可以大大减慢您的网站，而快速服务器响应时间可以提高网站的加载速度。因此，重要的是选择可靠的托管提供商并优化服务器配置以改善服务器响应时间。

>

>如何为移动设备优化我的网站？

>为移动设备优化您的网站至关重要，因为越来越多的用户正在其智能手机和平板电脑上浏览网络。您可以通过使用响应式设计，优化移动图像，减少使用重型JavaScript和CSS以及实施移动友好的导航来优化移动设备的网站。您还应该在各种移动设备上测试您的网站，以确保其在所有移动设备上的性能都很好。

以上是网络性能技巧 - 超越基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！