Chrome 浏览器有意改变``的加载方式，当其出现在``中时，这一变化将更加明显。笔者决定在本文中进行详细说明这种改变可能带来影响与好处。#####一.目前CSS文件的加载方式…content… CSS 会阻碍渲染，因此在`all-of-my-styles.css`全部加载完之前，用户就只能面对一片空白的屏幕。通常，我们将某个站点的所有 CSS 样式合并为一到两个资源，这意味着用户会下载一堆当前页面根本就用不上的规则。这是因为网站可能包含许多不同类型的页面，每个页面都有自己的「组件」；而在组件级别传递 CSS 的话，会降低 HTTP/1 的性能。然而，对 SPDY 和 HTTP/2 来说，事实却并非如此。在这些协议中，许多小资源只需要很小的代价就能完成递送，并且被独立缓存。
…content… 这样一来就解决了冗余问题，但也意味着你需要知道输出``时页面将包含的内容，从而防止 streaming。与此同时，浏览器还是只能等待所有 CSS 样式加载完毕，才能开始渲染。如果加载 `/site-footer.css`的速度不够快，就会耽误所有页面的渲染。#####二.目前最先进的 CSS 加载方法在上面的代码中，通过一些内联样式我们可以加速初始渲染，同时隐藏起还没有加载完样式的组件，并通过 JavaScript 异步地完成加载。剩余的 CSS 加载完后会重写`.main-article`中的`display:none`。这个方法受到性能专家的推崇,他们认为这是快速完成初始渲染的好方法，并且经过实地测量确实在加载的时候快了不少。但也存在一些不足之处。。。。。。**「1.它需要一个（小的）JavaScript 库」**这是由 WebKit 的实现方式造成的。一旦页面中添加了``，即使样式表是由 JavaScript 加载的，WebKit 还是会在加载完成之前阻碍渲染。 在 Firefox 和 IE/Edge 浏览器中，通过 JS 加载样式表是完全异步进行的。稳定版本的 Chrome 浏览器是通过 WebKit 的方式加载的，但在 Canary 版本中，仍然是使用 Firefox/Edge 加载方式。**「2.必须经历两个加载阶段」**在上述模式中，内联的 CSS 通过`display:none`隐藏了没有加载完样式的内容，直到异步加载完剩余的 CSS 样式。如果你将这些样式分派到两个或多个 CSS 文件中，这些文件有可能不按照顺序加载，导致加载过程中出现内容错乱：内容错乱，就好比弹出广告一样，会导致用户体验挫败，必须全力消灭。既然有两个加载阶段，你就必须决定渲染的先后顺序。你当然会想首先渲染「位置显要」的内容。但是，所谓的「位置」是根据窗口大小来决定的。因此，问题来了，你得找出一把「万能」钥匙。#####三.一个更简单、更好的方法… … … … 计划是这样的：针对每个``，加载样式表时我们阻止渲染它的后续内容，但是允许渲染它之前的内容。样式表是并行加载的，但是按照一定的顺序显示。这使得``的效用与``相近。假设网站 header、正文和 footer 的 CSS 已经加载完毕，但其余内容仍在等待，那么页面会是这样的： - Header：已渲染 - 正文：已渲染 - 评论部分：未渲染，它前面的 CSS 还未被加载（`/comment.css`）。 - 关于本站：未渲染。它前面的 CSS 还未被加载（`/comment.css`）。 - Footer：未渲染。尽管它本身的 CSS 已加载完成，但它前面的 CSS 还未被加载（`/comment.css`）。这是一个按顺序渲染的页面。你不需要决定哪部分内容在「显要位置」，只要在页面组件第一次实例化之前引入该组件的 CSS 即可。它完全兼容 Streaming，因为除非你需要，否则不必要输出``。当使用内容决定布局的布局系统时（例如表格和 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。谢天谢地这很容易，因为`… 此处的`
相关课程推荐
独孤九贱(3)_JavaScript视频教程
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。没有它，你的前端生涯是不完整的。《php.cn独孤九贱（3）－JavaScript视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了javascript知识。
JavaScript教程142050次播放
独孤九贱(6)_jQuery视频教程
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程116618次播放
jQuery与Ajax基础与实战
jQuery是最流行的JS函数库，封装了许多实用的功能,其中最引人入胜的就是Ajax。 jQuery中的Ajax操作,语法简单,操作方便，使Ajax从未如此轻松，前端人员从此不再为与服务器异步交互而发愁,本套课程,精选了最常用的几个方法，从基本的语法到每个参数，再到具体实例进行了全面的讲解。
AJAX教程16311次播放
Git教程(60分钟全程无废话版)
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持
JavaScript教程14108次播放
1/1
