base64减少图片请求

1. 使用base64减少

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 技术的时，一定要意识到上述的问题，有取舍的进行使用。

base64减少图片请求相关推荐

减少HTTP请求之合并图片详解（大型网站优化技术）
一.相关知识讲解看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样 ...
减少图片HTTP 请求的方案
<Higb Performance Web Sites>(中文名:"高性能网站建设指南")这本书对于前端工程师来说,绝对值得一读.本人有幸从公司借阅了,但不幸的是感觉翻 ...
使用图片精灵优化前端减少http请求
所谓的图片精灵(CSS sprite)其实就是把几张图拼成一张图而已.它提供了一种把很多小图片拼成一张大一些的图片从而在低并发的浏览器上达到快速传输并呈现内容的目的. 大多数网站会做跨页面的图片精灵. ...
WebP 在减少图片体积和流量上的效果如何？—— WebP 技术实践分享
作者 | Jackson 编辑 | 尾尾不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题.而 WebP 技术的出现,为解决该问题提 ...
优化--减少HTTP请求
一. 图片地图 (将几张图片合为一张,根据用户点击的位置发送不同请求,减少了图片的请求数量) 案例所在位置:http://stevesouders.com/hpws/imagemap.php 二.cs ...
WebP 在减少图片体积和流量上的效果如何？MIP技术实践分享
作者 | Jackson 编辑 | 尾尾不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题.而 WebP 技术的出现,为解决该问题提 ...
WebP 在减少图片体积和流量上的效果如何？WebP 技术实践分享
作者 | Jackson 编辑 | 尾尾不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题.而 WebP技术的出现,为解决该问题提供 ...
减少HTTP请求(大型网站优化技术)
在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 "利用将小图标合成一张背景图来减少HT ...
高并发大流量专题---3、前端优化（减少HTTP请求次数）
高并发大流量专题---3.前端优化(减少HTTP请求次数) 一.总结一句话总结: 图片地图:使用<map><area></area></map>标签. ...
如何减少http请求
如何减少http请求 img 的usemap: <img usemap="#map1" border=0 src=""><map name=& ...

base64减少图片请求

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

base64减少图片请求相关推荐

最新文章

热门文章