前端性能优化

2019独角兽企业重金招聘Python工程师标准>>>

1.压缩代码

通过压缩js、html、css 来减小网络请求资源的大小，减少网络负担。

2.图片压缩，根据不同场景使用不同图片格式

jpg图-有损压缩，压缩率较高，适合不需要透明的业务场景

png图-需要透明图片的业务场景

svg图-内嵌于html，适合图片样式相对简单的业务场景 如icon-font

3.css雪碧图

通过将多个小图片整合到一张图，来减少网络请求数量。

优点：减少了网络请求数量， 缺点：如果合并的图比较大，可能导致请求失败，

4、合写css

可以尽量将 padding margin border font background等进行合写

background:#000 url(image.jpg) top left no-repeat;

font:font-style   font-weight    font-size  font-familiy;

5、利用样式继承，尽可能卸载父类

所有元素都可以继承的属性：visibility 、cursor

内联元素和块元素可以继承的属性：white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration....

不可以继承的属性：Display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi

6.image inline

如果图片较小可以通过image64的形式把图片内签到html中，这样避免了网络请求

7.懒加载与预加载

懒加载-图片进入可视区域之后请求图片资源

实现原理-监听屏幕scroll事件，当图片的top小于屏幕高度，则将image-data中的图片地址放到 src属性中

参考-zepto.lazyload  和jquery.lazyload

预加载-预先把所有图片信息加载出来，保证后期使用时能够流畅显示。

参考jquery.preload

 

8.回流与重绘

回流-当页面布局和几何属性发生改变的时候会触发回流

触发回流的css样式：

1盒子模型相关属性：width、height、padding、margin、display、border、border-width、min-height

2定位属性和浮动：top、bottom、left、right、position、float、clear

3改变节点内部文字：text-align、overflow、font-weight、line-height、vertical-align、font-size、white-space

重绘-元素外观、风格发生改变时会触发重绘

触发重绘的css样式：

color、border-style、border-radius、visibility、text-decoration、background、background-*、outline、outline-color、box-shadow

 

优化方式：将回流和重绘的部分放到单独的图层中，则产生的重绘和回流会局限在该图层中。比如gif图 或者根据具体业务

chrome中创建图层的条件：

1.transform 2.video 3.canvas 4.flash 5.元素包含z-index并且存在兄弟节点时6.启用GPU 3D 加速时，如transform：translageZ(0)

常用的设置为图层的方法：1.transform：translateZ(0) 2.will-change:transform

常用优化方式：

1.用translate替代top

2.用opacity替代visibility

3.不要一天一条地修改Dom样式，预先定义好class，然后替换dom的className

4.把dom离线后再修改，比如先把dom设置为display：none(有一次回流和重绘)，然后修改dom 100次（没有回流和重绘），然后再把它显示出来

5.不要把dom属性值放在循环里当变量

如offsetHeight，offsetWidth。现在浏览器中回流是存在缓存的，短时间内的多个回流会存于缓存区中，并且实现统一的回流，但如果调用了offsetHeight或者offsetWidth属性的时候会强制刷新回流缓存，并获取最新的dom数据。我们还是希望回流中存在缓存机制，避免回流过于频繁。

6.不要使用table布局，可鞥很小的改动都要造成整个table的重新布局。

7动画实现速度的选择

8对于动画，动图（如gif）新建图层

9启用GPU硬件加速

 

转载于:https://my.oschina.net/kimyeongnam/blog/1922998