web前端性能优化，这几个你值得知道

　　相信大家都听过这么一句话，“脸蛋和身材决定了我是否愿意了解你的心灵，而你的心灵又决定了我是否会一票否决掉你的脸蛋和身材”。对于一个网站来说，这个道理也是同样适用的，即使你有着丰富而有价值的内容，但是客户却在外面半天进不去，也会慢慢地失去耐心。

　　尤其在如今这个信息爆炸的时代，人们的节奏总是的，对于一个网站的耐心毕竟是有限的可怜的，如果网站不进行优化必定会流失相当一部分的客户，带来不必要的损失。那么从web前端的性能优化上来说有哪些常见、实用的方法呢？

　　1.使用CDN

　　CDN（内容分发网络）部署在各大运营商机房，当用户通过浏览器请求资源时可以直接反馈给用户，极大的减轻了服务器数据中心的压力。本质上CDN也是一种缓存，如果你的所在地距离某个CDN节点很近，那么网站响应的速度提升也是非常明显的。另外CDN所缓存的资源主要为静态资源，如静态页面、图片、css和js文件等。CDN加速对于一些遍布范围较大的网站来说效果为明显，使用的话像阿里云CDN产品，其节点多达280多个，覆盖运营商也比较全面。

　　2.减少外部http协议

　　网页加载的时间与http请求密不可分，而外部资源的加载的速度则与主机服务提供商服务器架构和分布地点有关。我们可以通过检查自己的网站上多余的图片、css、JavaScript和一些组件，然后对应的去逐个完善，就可以减少一些http请求。

　　3.使用预获取

　　顾名思义预获取就是在真正有需要去请求之前就获取一些必要的数据和资源，以提升用户的浏览体验。预获取主要有方式：

　　1.链接预先获取

　　2.DNS预先获取

　　3.预先渲染

　　根据你想要使用的预先获取形式，你只需在网站HTML中的链接属性上增加rel="prefetch",rel="dns-prefetch"，或者rel="prerender"标记。

　　4.压缩HTML、CSS和JavaScript

　　在编写代码时候会有一些多余的空格，这会占用字节，使用一些压缩工具可以有效解决这个问题。值得注意的是，压缩后的文件，其可读性就会变差，后期想维护就会变得困难了。

　　5.优化图片

　　一张高清的图片大概几兆左右，而很多时候我们并不需要这样的画质，一般我们都会选择将其保存为高画质的就可以了，这样会有效减小加载图片带来的压力。像JPEG图片那样包含了时间、地点、相机型号的格式，更不是我们所需要的。

　　6.Ajax请求方式

　　POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）

　　GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。所以在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。