WEB前端之：性能优化

[Mardanjan]

web前端性能优化要分两个方面说起，第一个是加载性能，第二个是渲染性能

加载页面方面的提升

1、DNS解析，域名解析成IP地址需要花费20ms到120ms的时间，我们在这里可以做一些优化，比如：DNS缓存，DNS预解析

用meta标签进行预解析**

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://liuxianan.com" />
<link rel="dns-prefetch" href="http://blog.liuxianan.com" />
<link rel="dns-prefetch" href="http://image.liuxianan.com" />
<link rel="dns-prefetch" href="http://resources.liuxianan.com" />
<link rel="dns-prefetch" href="http://cc.amazingcounters.com" />

2、DNS解析后得到真实的IP地址，此时浏览器会与服务器建立连接，服务器会给客户端发送HTML文件，这个时候我们可以做一些优化，比如：HTTP缓存 ，压缩HTML文件体积，使用CND，GZIP压缩，使用长连接，减少cookie体积，减少不必要的cookie的传输

1、HTTP缓存：强缓存和协商缓存，HTML缓存的话，如果命中缓存，服务器直接返回304状态码，浏览器直接从缓存中找出相应的文件，渲染给用户，这是避免了一次数据传输，达到了提升性能的目的。

2、压缩HTML文件，把css样式和脚本分离出来，可以达到减少体积的目的，浏览器是可以并发请求的，先请求HTML文件，然后再并发请求css文件和js文件，这样的话总比一次性全部资源的请求要快一些

3、请求静态文件使用CDN，可以从离当前位置最近的节点获取资源，传输速度会快一些

4、gzip压缩能压缩任何文本类型的文件，包括HTML,XML,JSON等，大大减少了要传输的数据的体积

5、长连接：建立一次tcp链接，发送多个请求，可以减少不必要的链接时所消耗的时间

6、cookie是在每次发送请求时都会被传输到服务器，可以减少cookie的体积达到减少传输数据体积的目的

7、因为cookie每次请求都会被发送到服务器，当我们请求图片等静态资源时，可以不需要发送cookie，我们可以把图片放在其它域名服务器上，从而达到减少cookie发送的次数的效果

3、当浏览器收到HTML文件后就进行DOM的解析和CSS样式的解析，我们可以在这里做一些优化，比如：CSS资源的请求放在head标签里，脚本资源的请求放在最低，link和script标签的href和src属性不为空

1、当浏览器收到html文件之后就进行dom的解析和css样式的解析，这两步是可以同步进行的，所以我们可以把CSS样式放在head标签里

2、把脚本放到最低，因为浏览器加载脚本时会造成后续资源的阻塞，为了不影响页面的渲染，我们可以选择把脚本放在最后进行加载

3、当link和script标签的href属性和scr属性为空是，浏览器会把当前页面的url值作为这个属性的值，会把当前页面下载一遍

渲染页面时的提升

1、减少DOM操作

2、批量进行DOM操作

3、虚拟DOM

4、图片要给固定的宽和高，如果图片没有给固定的宽和高的话，加载图片之前图片标签不会占据空间，图片加载后根据图片的大小进行重绘与重排，所以给图片标签一个固定宽高会减少一次重排与重绘

5、图片懒加载

6、预加载

7、图片合并

8、体积很小的图片用BASE64编码放到代码里达到减少一次请求的效果