JavaScript不得不知的图片Base64编码小知识(2)

CRP(Critical Rendering Path，关键渲染路径)：当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”。

通俗而言，就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染，而图片不会。

2. 页面解析 CSS 生成的 CSSOM 时间增加

Base64 跟 CSS 混在一起，大大增加了浏览器需要解析CSS树的耗时。其实解析CSS树的过程是很快的，一般在几十微妙到几毫秒之间。

CSS 对象模型 (CSSOM)：CSSOM是一个建立在web页面上的 CSS 样式的映射，它和DOM类似，但是只针对CSS而不是HTML。

CSSOM 生成过程：

CSSOM 生成过程大致是，解析 HTML ，在文档的 head 部分遇到了一个 link 标记，该标记引用一个外部 CSS 样式表，下载该样式表后根据上述过程生成 CSSOM 树。 这里我们要知道的是，CSSOM 阻止任何东西渲染，(意味着在CSS没处理好之前所有东西都不会展示)，而如果CSS文件中混入了Base64，那么(因为文件体积的大幅增长)解析时间会增长到十倍以上。

而且，最重要的是，增加的解析时间全部都在关键渲染路径上。

所以，当我们需要使用到 Base64 技术的时，一定要意识到上述的问题，有取舍的进行使用(大家在开发vue的时候，配合webpack打包，应该会发现有一些图片会被webpack打包成base64格式，一般是1024个字节以内的)。

（编辑：ASP站长网）