前端性能优化毁人不倦

前端相关

压缩文件

通过压缩JS，CSS，img 等文件的大小，来缩小网站的加载时间，文件小了，请求就快了

• 通过uglifyify对文件进行压缩（去除空白，长变量名改为短变量名等）

合并请求

合并请求的主要目的是减少浏览器对服务器发起的请求数，从而减少在发起请求过程中花费的时间。

• 合并JS、合并CSS以及合并小图片（也就是使用CSS精灵）等方式来减少请求

后端相关

开启GZIP压缩

GZIP在服务器进行配置，如果前端往后端传输js数据,可以通过pako库进行字符串压缩

• 后端在http.conf 配置开启gzip 压缩，后端配置后。浏览器会自动查询是否支持gzip

前端,后端相关

WebSocket

WebSocket是全双工通信协议，也就是长链接，

• 后端在服务器端配置WebSocket，开启WebSocket服务
• 前端在链接时，new WebSocket(‘xx’) 通过方法进行信息发送

var ws = new WebSocket("ws://localhost:9000/echo"); 

// Web Socket 已连接上，使用 send() 方法发送数据
ws.onopen = function(){
   ws.send("发送数据");
   alert("数据发送中...");
};

// 接受数据
ws.onmessage = function (evt) { 
   var received_msg = evt.data;
   alert("数据已接收...");
};

// 关闭 websocket
ws.onclose = function(){ 
   alert("连接已关闭..."); 
};

缓存设置

通过存储已请求的数据，减少数据请求

• 通过本地存储（cookie，sessionStorage，localStorage）存储非实时数据，减少不必要的数据请求。
• 后端对资源进行配置，配置正确的响应头信息，浏览器会根据响应头信息对资源进行缓存

域名拆分

域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求，一般50M以下网页类网站，域名保持在4、5个即可

• 将JS、CSS和图片分别使用三个域名加载，分别是 http://js.xxx.cn http://css.xxx.cn http://img.xxx.cn