资产预加载和资源提示与http / 2和weblink
资产预加载和资源提示与http / 2和weblink网页链接管理组件)链接
HTTP标题,它是在使用HTTP / 2和现代Web浏览器的预加载功能时提高应用程序性能的关键。
链接
头文件用于HTTP / 2服务器推送和W3C的资源提示在他们甚至知道他们需要它们之前将资源(例如CSS和JavaScript文件)推送给客户端。WebLink还支持与HTTP 1.x一起使用的其他优化:
- 要求浏览器获取或在后台渲染另一个网页;
- 进行早期DNS查找、TCP握手或TLS协商。
要考虑的重要事项是,即使在本地机器上工作,所有这些HTTP / 2功能都需要安全的HTTPS连接。主要的Web服务器(Apache,nginx,Caddy等)支持这个,但您也可以使用Docker安装程序和Symfony的运行时ob娱乐下载来自Symfony社区的KévinDunglas创作。欧宝体育平台怎么样ob娱乐下载
预加载的资产
12 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html><HTML.><头><元Charset.=“UTF-8”><标题>我的应用程序标题><关联rel=“样式表”href=“/ app.css”>头><身体><主要的角色=“主要”类=“容器”><!——……-->主要的>身体>HTML.>
|
按照传统的HTTP工作流,当这个页面被服务时,浏览器将对HTML页面发出一个请求,对链接的CSS文件发出另一个请求。然而,由于HTTP/2,您的应用程序可以开始发送CSS文件内容,甚至在浏览器请求它们之前。
为此,请首先安装WebLink组件:
1 |
$作曲家需要symfony /网页链ob娱乐下载接
|
现在,更新模板以使用preload()
weblink提供的枝条函数。这“作为”属性是强制性的,因为浏览器需要它来应用正确的优先级和内容安全策略:
1 2 3 4 |
<头><!——……--><关联rel=“样式表”href="{{预加载('/app.css',{作为:“风格”})}}">头>
|
如果重新加载页面,感知到的性能将会提高,因为当浏览器只请求HTML页面时,服务器会同时响应HTML页面和CSS文件。
请注意
您可以通过将其包装来预装资产preload()
功能:
1 2 3 4 |
<头><!——……--><关联rel=“样式表”href="{{预加载(资产(“构建/ app.css”))}}">头>
|
此外,据优先提示规范,您可以使用重要性
属性:
1 2 3 4 |
<头><!——……--><关联rel=“样式表”href="{{预加载('/app.css',{作为:“风格”,重要性:'低的'})}}">头>
|
它是如何工作的?链接添加到响应中的HTTP报头。当使用preload()
函数,下面的头信息被添加到响应中:链接< / app.css >;rel =“preload”;=“风格”
根据预加载规范,当HTTP / 2服务器检测到原始(HTTP 1.x)响应包含此HTTP标头时,它将在同一HTTP / 2连接中自动触发相关文件的推送。
流行的代理服务和CDN,包括ob直播appCloudflare,急剧和Akamai也利用了这个功能。这意味着您可以将资源推送到客户端,并立即提高应用程序在生产中的性能。
如果要防止推送,但通过发出早期单独的HTTP请求,请让浏览器预加载资源,使用nopush
选项:
1 2 3 4 |
<头><!——……--><关联rel=“样式表”href="{{预加载('/app.css',{作为:“风格”,nopush:真的})}}">头>
|
资源提示资源提示应用程序用来帮助浏览器决定应该先下载、预处理或连接哪些资源。
WebLink组件提供了以下Twig函数来发送这些提示:
dns_prefetch()
:“表示原点(例如https://foo.ob直播appcloudfront.net
),用于获取所需的资源,用户代理应该尽早解析这些资源”。preconnect ()
:“表示原点(例如https://www.pdashmedia.com.
),用于获取所需的资源。初始化早期连接,包括DNS查找、TCP握手和可选的TLS协商,允许用户代理掩盖建立连接的高延迟成本。预取()
:“识别下一个导航可能需要的资源,以及用户代理应该获取,以便用户代理在将来请求资源时能够提供更快的响应”。prerender ()
:“识别下一个导航可能需要的资源,以及用户代理应该获取并执行,以便用户代理在稍后请求资源时能够提供更快的响应”。
组件还支持发送与性能无关的HTTP链接和任何实现PSR-13.标准。例如,任何链接在HTML规范中定义:
1 2 3 4 5 |
<头><!——……--><关联rel=“替代”href="{{关联(' / index.jsonld ','备用')}}"><关联rel=“样式表”href="{{预加载('/app.css',{作为:“风格”,nopush:真的})}}">头>
|
前面的代码片段将导致这个HTTP头被发送到客户端:链接:;rel = "替代",< / app.css >;rel =“preload”;nopush
你也可以直接从控制器和服务添加到HTTP响应的链接:
/ / src /控制器/ BlogController.php命名空间App \控制器;用ob娱乐下载Symfony \包\ FrameworkBundle \ \ AbstractController控制器;用ob娱乐下载symfony \ component \ httpfoundation \请求;用ob娱乐下载Symfony \ \连接\ GenericLinkProvider组件;用ob娱乐下载Symfony \连接\ \组件链接;类Blogcontroller.扩展AbstractController.{上市功能指数(请求美元的请求){//使用AbstractController提供的addLink()快捷方式这个美元- >addlink.(美元的请求,新的链接('预加载','/app.css'));//如果你不想使用addLink()快捷方式linkProvider美元=美元的请求- >属性- >得到('_链接',新的GenericLinkProvider());美元的请求- >属性- >集('_链接',linkProvider美元- >withLink((新的链接('预加载','/app.css'))- >withAttribute(“是”,“风格”)));返回这个美元- >使成为(“……”);}}