前端性能优化

一、减小HTTP请求

基本原理

在浏览器（客户端）和服务器发生通讯时，就已经消耗了大量的时间，尤为在网络状况比较糟糕的状况下

方法：

　　合并图片（精灵图）

　　合并css和js文件

　　图片较多的也米娜也可使用lazyLoad等技术进行优化

二、正确理解Repaint和Reflow

repaint和relow也就是重绘和重排

基本原理

repaint就是在一个元素的外观别改变 可是灭有改变布局的i状况下发生，如改变visibility背景等

reflow 若是在reflow的过于频繁 CPU使用率会死命的网上飙

减小性能影响的方法

若是经过好色之style改变节点的样式 每设置一次就会致使一次reflow 因此最好经过设置class的样式

有动画效果的元素 他的position数星星应当设为flex货absolute 这样不会影响其余元素的布局

三、减小对DOM的操做

基本原理

对DOM访问次数越多 与js的链接次数越多 简介次数越多就须要更多的时间

解决办法

合理使用js变量储存内容 考虑大量DOM元素中循环的性能开销 在循环结束时 一次性写入 减小DOM元素的查询和修改

查询时能够将其复制给局部变量

注意：在IE中hover会下降相应的速度

四、使用json格式进行数据交换

基本原理

json是一种轻量级的数据减缓格式，采用彻底独立于语言的文本格式 是理想的数据交换格式

json也是js原生格式 也就是说明js处理json数据时不须要任何特殊的API或者工具包

json序列化后通常比XML序列化后数据体积小

五、高效使用HTML标签和CSS样式

六、使用CDN家督（内容分发网络）

不足：实用性不太好

解决方法：在网络内容发生变化时将新的网络内容从服务器直接传送到缓存器 或者当对网络的内容访问增长时

将数据源服务器的网络内容尽量实时的复制到缓存服务器

七、将css和js放到外部文件中引用 css放头 js放尾（即便用外部样式引用文件而非直接使用内部样式）