PC略懂性能优化_1

[Hanzhuo0322]

PC略懂性能优化_1

PC略懂社图片优化

一、问题：

PC略懂社图片（搜狗云图处理后的图片）显示慢，原因有两方面：

1. 有的图片本身很大（比如gif图），导致图片请求的时间过长；

2. 图片本身的渲染时间比较长；

略懂社1.8版本对图片的渲染时间进行了优化

二、优化方法：

优化前：

PC略懂社的图片都是通过img标签来显示图片，并且图片的展示规则如下：

之前实现这些规则都是通过JS修改图片的width，height，margin-left，margin-top等属性来实现

这样的话会带来一定的性能问题：页面会出现局部的reflow和重repaint

优化后：

PC略懂社的图片（除查看大图和富文本的图片）都改为div+backgroundImage的方式来显示

图片的显示规则统一放在CSS端来处理

这样可以避免更改img的width，height，margin-left，margin-top属性，从而减少页面中的reflow和repaint

三、图片优化前后对比：

以略懂社兴趣广场的首屏加载为例 （Chrome浏览器）

优化前：

优化后：

---	Rendering	Painting	总时间
优化前	537.1ms	69.4ms	606.5ms
优化后	228.4ms	73.5ms	301.9ms

通过对比可以看出兴趣广场首屏加载时，Rendering+Painting的总时间相对于优化前减少了300ms，紫色部分(Rendering)明显减少