If we use the http link header to provide a link to a CSS file very early on what browsers would NOT download this link and are there any browsers for which a CSS file provided this way would block rendering the "above the fold content"?
如果我们使用http链接标头很早就提供了一个链接到CSS文件的浏览器不会下载此链接,是否有任何浏览器以这种方式提供的CSS文件会阻止呈现“首屏内容”?
This would be the HTTP header:
这将是HTTP标头:
Link: <style.css>; rel="stylesheet"
This an untested PHP implementation of the same thing (if one does not configure apache to do it like hinted at in the link above):
这是一个未经测试的同一件事的PHP实现(如果没有像上面的链接中暗示的那样配置apache):
<?php
header('Link: <style.css>; rel="stylesheet"');
?>
Question: cross browser compatibility and render blocking behavior
问题:跨浏览器兼容性和渲染阻止行为
2 个解决方案
#1
1
Apologies in advance that my response is not directly in reference to use of the http Link header. If the objective is to try and load non-critical CSS asynchronously(in the background without blocking page rendering), this can be achieved with JavaScript. See the loadCSS project for some good documentation and examples.
提前道歉,我的回复并未直接参考http Link标头的使用。如果目标是尝试异步加载非关键CSS(在后台而不阻止页面呈现),这可以通过JavaScript实现。有关一些好的文档和示例,请参阅loadCSS项目。
Normally, all CSS files included in a standard way(e.g. <link href="path/to/mystylesheet.css" rel="stylesheet">) do in fact block page rendering until ALL stylesheets have finished loading. This is for good performance reasons by browsers in order to prevent multiple re-layouts and re-paints when loading a page after each stylesheet finishes loading.
通常,以标准方式包含的所有CSS文件(例如 )实际上会阻止页面呈现,直到所有样式表都已完成加载。这是出于良好的性能原因,浏览器为了防止在每个样式表加载完成后加载页面时多次重新布局和重新绘制。
The idea with this solution is basically to alter the media type for the non-critical stylesheet(s) to something the browser will see as unimportant for page rendering(e.g. "only x"), and then manually switch the media type back to the standard "all" (or other value as needed), which is likely after then resource is finished loading, but could be further deferred if desired based on your use case.
使用此解决方案的想法基本上是将非关键样式表的媒体类型更改为浏览器将视为对页面呈现不重要的内容(例如“仅x”),然后手动将媒体类型切换回标准的“全部”(或其他需要的值),这可能是在资源完成加载之后,但如果需要,可以根据您的用例进一步推迟。
This method is pretty reliable as long as you only need to to support relatively modern browsers. I've used it in production for content thats had millions of pageviews. You may be able to implement something similar using the Link header but you'd still need some client side script in place to detect when the resource finished loading and to switch the media type back to "all".
只要您只需要支持相对现代的浏览器,此方法就非常可靠。我已经在生产中使用它来获取有数百万次综合浏览量的内容。您可以使用Link标头实现类似的功能,但您仍需要一些客户端脚本来检测资源何时完成加载并将媒体类型切换回“all”。
#2
-3
I am not sure if you can do that with a header() function, but non-blocking css can be done with JavaScript - see this paste: http://pastebin.com/TYcnb99m
我不确定你是否可以用header()函数做到这一点,但是非阻塞css可以用JavaScript完成 - 请看这个粘贴:http://pastebin.com/TYcnb99m
It uses local storage as cache for loaded css files and is non-blocking.
它使用本地存储作为加载的css文件的缓存,并且是非阻塞的。
Some more links:
更多链接:
Hope this helps.
希望这可以帮助。
#1
1
Apologies in advance that my response is not directly in reference to use of the http Link header. If the objective is to try and load non-critical CSS asynchronously(in the background without blocking page rendering), this can be achieved with JavaScript. See the loadCSS project for some good documentation and examples.
提前道歉,我的回复并未直接参考http Link标头的使用。如果目标是尝试异步加载非关键CSS(在后台而不阻止页面呈现),这可以通过JavaScript实现。有关一些好的文档和示例,请参阅loadCSS项目。
Normally, all CSS files included in a standard way(e.g. <link href="path/to/mystylesheet.css" rel="stylesheet">) do in fact block page rendering until ALL stylesheets have finished loading. This is for good performance reasons by browsers in order to prevent multiple re-layouts and re-paints when loading a page after each stylesheet finishes loading.
通常,以标准方式包含的所有CSS文件(例如 )实际上会阻止页面呈现,直到所有样式表都已完成加载。这是出于良好的性能原因,浏览器为了防止在每个样式表加载完成后加载页面时多次重新布局和重新绘制。
The idea with this solution is basically to alter the media type for the non-critical stylesheet(s) to something the browser will see as unimportant for page rendering(e.g. "only x"), and then manually switch the media type back to the standard "all" (or other value as needed), which is likely after then resource is finished loading, but could be further deferred if desired based on your use case.
使用此解决方案的想法基本上是将非关键样式表的媒体类型更改为浏览器将视为对页面呈现不重要的内容(例如“仅x”),然后手动将媒体类型切换回标准的“全部”(或其他需要的值),这可能是在资源完成加载之后,但如果需要,可以根据您的用例进一步推迟。
This method is pretty reliable as long as you only need to to support relatively modern browsers. I've used it in production for content thats had millions of pageviews. You may be able to implement something similar using the Link header but you'd still need some client side script in place to detect when the resource finished loading and to switch the media type back to "all".
只要您只需要支持相对现代的浏览器,此方法就非常可靠。我已经在生产中使用它来获取有数百万次综合浏览量的内容。您可以使用Link标头实现类似的功能,但您仍需要一些客户端脚本来检测资源何时完成加载并将媒体类型切换回“all”。
#2
-3
I am not sure if you can do that with a header() function, but non-blocking css can be done with JavaScript - see this paste: http://pastebin.com/TYcnb99m
我不确定你是否可以用header()函数做到这一点,但是非阻塞css可以用JavaScript完成 - 请看这个粘贴:http://pastebin.com/TYcnb99m
It uses local storage as cache for loaded css files and is non-blocking.
它使用本地存储作为加载的css文件的缓存,并且是非阻塞的。
Some more links:
更多链接:
Hope this helps.
希望这可以帮助。