web前端性能优化方案

 回流、重绘会影响网络性能优化

回流: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 ( 几何大小和位置发生改变 )
重绘: 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘 ( 文字、边框、背景颜色、外观风格 )

注意：回流必定触发重绘，而重绘不一定触发回流

 性能优化方案

一、客户端

1、压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

2、选择合适的图片格式
如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

3、合并静态资源
包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

4、使用CDN

   CDN(Content Delivery Network） 内容分发网络，CDN的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快的速度获取数据，即网络访问第一跳。CND 加速可以减少客户端到服务器的网络距离。
或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

5、延长静态资源缓存时间
这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

6、把CSS放在页面头部，把JavaScript放在页面底部
这样就不会阻塞页面渲染，让页面出现长时间的空白。（应用场景：js很复杂，页面很简单）

7、编写规范代码

规范的代码是软件的根基。规范的代码，可以提高编码的效率，可以降低开发者之间的沟通成本，可以规避不必要的安全问题。在保证代码规范的基础上，我们才能去谈性能优化和安全防护。

 8、JS和CSS阻塞导致页面加载缓慢

解决方法：
（1）把css放头部，把外部js放底部
（2）给script标签添加defer属性，仅限外部脚本，defer属性表示延迟脚本的执行，等到整个文档解析完再执行，defer属性能延迟执行，但是不会延迟下载，浏览器遇到script就立即下载脚本
（3）在页面加载完后动态创建脚本元素
（4）执行时间较长过程的函数可以放入settimeout函数中

9、资源合并和压缩减少HTTP请求次数

多次HTTP请求和连接也很消耗时间。

1、js脚本合并（js文件webpack合并打包）
2、css sprite 精灵图（多个小图合并）
3、图片懒加载（不在页面显示区域的图片先不加载）

10、合理使用HTTP缓存

合理使用HTTP的缓存机制，让浏览器把数据缓存到本地，再次加载同样的数据的时候，无需再向服务器请求文件，直接可以从本地缓存中读取，减少读取时间。

HTTP请求中合理添加 Expires 或 cache-control 报文头

11、初始化样式 

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异

但是初始化CSS会对搜索引擎优化造成小影响。

12、优化自己的代码？

代码重用

避免全局变量（命名空间，封闭空间，模块化mvc..）

拆分函数避免函数过于臃肿：单一职责原则

适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过程

内存管理，尤其是闭包中的变量释放。

13、避免重定向

     重定向是一个比较常使用的技术手段，比如服务器地址进行迁移，修改了请求的url地址，这时通常会使用重定向，把访问原网址的用户重定向到新的url。

     由于浏览器访问地址是一连串的过程，如果重定向的话，就需要在访问过程中重复发起一连串的动作，会消耗很多时间，因此避免出现多次重定向地址或资源的访问。 

二、服务端 

1、服务器文件加载缓慢可开启GZIP（文件压缩传输）

在服务端配置中开启GZIP压缩，它会把浏览器请求的页面，以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装。js文件可以开启GZIP，但是图片文件不要，图片启用GZip压缩，不仅浪费了CPU（压缩需要cpu运算），还增大了体积（压缩后体积不仅没有减少，还增大，可参考其他文章实验分析），势必影响服务器性能，影响网站速度。

2、减少cookies大小

　　去除没必要的cookie,将cookie size减到最小

3、避免空的图片src

　　空的图片任然会使浏览器发送请求到服务器，这样就浪费服务器资源了

4.使用CDN

　　CDN通过部署在不同地区的服务器来提高客户的下载速度。