CSS加载新方式_html/css_WEB-ITnose

Chrome 浏览器有意改变``的加载方式，当其出现在``中时，这一变化将更加明显。笔者决定在本文中进行详细说明这种改变可能带来影响与好处。#####一.目前CSS文件的加载方式                        …content…    CSS 会阻碍渲染，因此在`all-of-my-styles.css`全部加载完之前，用户就只能面对一片空白的屏幕。通常，我们将某个站点的所有 CSS 样式合并为一到两个资源，这意味着用户会下载一堆当前页面根本就用不上的规则。这是因为网站可能包含许多不同类型的页面，每个页面都有自己的「组件」；而在组件级别传递 CSS 的话，会降低 HTTP/1 的性能。然而，对 SPDY 和 HTTP/2 来说，事实却并非如此。在这些协议中，许多小资源只需要很小的代价就能完成递送，并且被独立缓存。                                                 …content…    这样一来就解决了冗余问题，但也意味着你需要知道

输出``时页面将包含的内容，从而防止 streaming。与此同时，浏览器还是只能等待所有 CSS 样式加载完毕，才能开始渲染。如果加载 `/site-footer.css`的速度不够快，就会耽误所有页面的渲染。#####二.目前最先进的 CSS 加载方法 输出``。当使用内容决定布局的布局系统时（例如表格和 flexbox），要注意避免加载时出现内容错位。这不是什么新问题了，但是分步渲染会使得它出现得更为频繁。你可以通过 hack flexbox 来解决，但对整体页面布局来说，使用 CSS grid 工具效果更佳（不过对小一些的组件来说，flexbox 还是很棒的）。#####四.Chrome浏览器的改变[HTML 规范](https://html.spec.whatwg.org/multipage/semantics.html#the-link-element)并没有规定 CSS 应当怎样阻止页面渲染，它不鼓励在 body 中使用``，但是所有的浏览器都允许使用。当然了，浏览器们在处理 body 中的 link 时都有自己的方法： - **Chrome和Safari：**一旦发现 `` 就停止渲染，并且在已发现的样式表全部完成加载之前不会开始渲染。这会导致`` 前未被渲染的内容也被阻塞。 - **Firefox：**head中的``会阻塞渲染，直至所有已发现的样式表加载完毕，body中的``并不阻塞任何渲染，除非某个 head 中的样式表已经阻塞了渲染，这会导致无样式的内容出现闪烁（FOUC）。 - **IE/Edge：** 阻塞解析器直到样式表加载完毕，但是允许渲染``之前的内容。在 Chrome 团队，我们喜欢 IE/Edge 的方式，所以打算跟它看齐。这就允许上文描述的渐进式 CSS 渲染方式。我们正在努力把它变成标准，从允许``中的``开始。目前 Chrome/Safari 采用的方式是向下兼容的，带来的问题是阻塞渲染的时间比实际需要的长。Firefox 的方式稍微复杂一些，但有个解决的方法：**「Firefixing！」**因为 Firefox 并不总是为了``中的``阻塞渲染，我们得为这个多花点功夫来避免 FOUC。谢天谢地这很容易，因为`