安全是有分量的

服务器高防_国内高防cdn节点_免费测试

2021-10-14 09:02栏目:行业

服务器高防_国内高防cdn节点_免费测试

2021年5月17日星期一Dan

我们之前已经描述了一些方法来发现阻止在浏览器中渲染的资源。现在我们将介绍一些可以用来加载资源的技术,这些技术可以防止资源阻塞。在你开始之前,您应该始终运行一些网站性能测试使用您喜爱的测试工具获得基线,以便您可以测量任何改进。我们推荐使用WebGetest.org进行测试。

在我们开始了解如何消除阻塞资源之前,我们应该回答以下问题:

什么是阻塞资源?

当浏览器从网站加载页面时,它开始从上到下读取页面中的HTML标记。如果是在读取时遇到CSS或JavaScript文件,浏览器将在下载和解析时停止并等待那个档案。当浏览器等待时,它不能做任何其他事情,比如处理HTML的其余部分或显示向用户提供的内容被屏蔽。

为什么这是一个问题?

如果我们生活在一个完美的世界中,我们只包含显示所需的信息,那就不会有问题了一页。然而,网站通常是使用预先构建的主题和第三方库构建的,这些主题和库可以包含很多内容CSS和Javascript。其中只有一小部分可能会被使用,或者可能只需要用于"褶皱以下"内容,或者它可能需要在网站的另一个页面上。注意:下面的折叠表示页面内容最初不适合在屏幕上显示。任何不必要的信息表示浏览器被阻止的时间超过必要时,会减缓用户的加载体验,可能会让他们感到沮丧。

CSS和Javascript文件通常位于HTML文档的最顶端,位于任何内容之前。这意味着他们必须在显示任何内容之前下载并解析。即使是服务器响应速度极快的网站如果有阻塞资源,时间看起来仍然很慢。

让我们举一个简单的例子,你有一个包含实时聊天小部件的网站。小部件的javascript是包含在本节页面的最顶部。浏览器必须停止并下载和解析CSS在向用户显示任何内容之前,小部件的Javascript(通常从第三方域下载)。即使聊天小部件可以在其他内容之后弹出,而不会影响用户体验。

在我们针对任何CSS或Javascript特定技术之前,您应该始终做的事情。

1。缩小所有文件

缩小是删除文件中的所有非必要字符,例如不相关的空白和代码注释。信息技术可以对下载大小产生重大影响。

2。确保服务器上已启用压缩

确保服务器配置为在提供CSS和Javascript时使用gzip或brotli压缩。

3。自我托管文件

如果CSS或Javascript位于第三方域中,即不是您网站所在的域名,则您应该考虑把文件上传到你的网站上,并把它提供给你的域名。这可能并不总是可能的,但如果它是否消除了浏览器的开销打开与另一个域的连接,它消除了第三方不压缩、缩小、,或者使用HTTP/2.

在主要浏览器中实现缓存分区后,使用第三方CDN为javascript、字体或CSS等资产提供服务不再有任何潜在优势。在服务器和主机上制作副本他们在你的域名上。

4。如果您无法自行托管,则预连接到第三方域

如果外部资产位于第三方域上,并且您绝对无法自行托管它们,则您可以获得通过告诉浏览器预连接到第三方域来改进加载。

使用预连接告诉浏览器在发现资产之前建立到域的早期连接在阅读HTML时。您可以在HTML的头部使用预连接,例如:

建立早期连接可以减少第三方加载时间100-500毫秒,这是不容忽视的。你应该只使用预连接关键的第三方资源,对于所有其他您可以使用dns预取的资源,例如:

这告诉浏览器尽早执行域的dns解析,这相当于查找电话号码在电话簿里。预解析dns可以节省20-120毫秒,听起来像是小数字,但请记住,差异很小因为100ms会对转化率产生较大的可测量影响。

5。仅从框架中选择您需要的内容

对于Bootstrap或jQuery UI等框架的用户来说,通常只使用所提供功能的一小部分。如果这是你,那么第一步就是删掉你没有用的东西。引导和Jquery UI是模块化的,免流专用ddos防御脚本,您可以可以将所有内容下载到一个包中,也可以将其拆分为您正在使用的位。

这四点将确保尽可能快地下载阻塞资源。现在我们可以讨论一些问题具体的技术,网站如何防御cc,将有助于减少任何阻塞,让您的页面显示迅速。请注意这不是一个详尽的概述,但是这些技术可能会让你用10%的工作量获得90%的收益。要获得最后的10%确实需要深入的技术理解,但是如果你想去那里,那么谷歌的web.dev网站是一个优秀的资源。

优化阻塞资源的技术

Javascript

有几种不同的技术可以优化Javascript的加载。首先,让我们看看默认值加载的行为。这些图片归功于Daniel Imms,他的网站也随着网络的发展而不断壮大。如前所述,默认行为是在遇到脚本时停止解析HTML文档,下载脚本并执行它。

现在让我们看看如何改变这种行为。

这是最初的优化技术,在引入延迟和异步之前。它通过将脚本移动到HTML文档的最末端,高防cdn有免费的吗,在这里下载并解析所有内容。

在上一节的示例中,聊天小部件现在将在向用户显示其余内容后加载并弹出。