昨天，我用桌面版 Chrome 的任务管理器发现本博客的首页，一个标签，占用内存达到 500多M，而其他网站的单个标签一般占用内存在 100M 以内，包括像淘宝、京东这样的庞大页面。很明显我的页面不正常。
经过一番排查，终于找到了问题所在。
我现在使用的主题，通常情况下，背景是一张木纹的图片，只有在每周三和周六，背景是从左到右由浅入深的渐变色（点击查看）。
昨天是周三，问题就出在这个渐变背景上。该效果是用纯 CSS 实现的，核心代码如下：
body{
background: -webkit-linear-gradient(90deg, #C04848 10%, #721948 90%) !important; /* Chrome 10+, Saf5.1+
background: -moz-linear-gradient(90deg, #C04848 10%, #721948 90%) !important; /* FF3.6+ */
background: -ms-linear-gradient(90deg, #C04848 10%, #721948 90%) !important; /* IE10 */
background: -o-linear-gradient(90deg, #C04848 10%, #721948 90%) !important; /* Opera 11.10+ */
background: linear-gradient(90deg, #C04848 10%, #721948 90%) !important; /* W3C */
}
CSS 中使用的 linear-gradient 属性导致了内存的飙升，以下是首页占用内存的对比：
同一个页面，仅 <body> 的背景不同，使用了 linear-gradient 作为背景的页面占用内存 571M，纯颜色背景页面占用内存 50M，使用相同的图片背景页面占用内存 60-120M ，差别非常明显。
这个问题在 StackOverflow 也有讨论，普遍的观点是使用图片作为背景比用 CSS3 的 linear-gradientv 更节省客户端的资源。很容易理解：绘制图片是很耗费资源的，使用 CSS3 实现只是将资源耗费由设计师的电脑转嫁到了访客的电脑。我的整个 <body> 的背景都是使用的都是渐变，将差别严重放大了。
好消息是，对我的8G内存来说，实际感受的差别远远没有内存占用的差别大，不过作为强迫症患者，我还是把背景换成了图片。
周六见了！ 😢
渐变背景你用在哪里的？？没看到啊？ 还可以定时 😮
可不可以考虑引用外链的css 会不会好点？
周三和周六才是渐变背景啊。。。 😮
引用外链效果也是一样的，浏览器都要渲染出来
我现在的 CSS 就是外链，CDN 嘛
感觉好高级的样子，(*^__^*)
其实没什么技术含量 😣
😄 你也太在意细节了怎么这占用内存高都能发现＝ ＝
无意中发现的，本来是想看我用的 Chrome 扩展都有哪些比较耗内存的
原来这样，css3也是个坑
嗯，不过还是掩饰不了CSS3的伟大
一般这种渐变放在小部件上，你用在body这么大的上面，并且屏幕超级大，肯定很吃内存的~~
是的，我错了 😮
非常喜欢你的博客风格哈
是这个原因啊