Java Web高性能开发 - 前端高性能

作者：IBM developerWorks
链接：https://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

图片压缩

减少图片的大小，可以明显的提高性能，而对于已有图片，要想减少图片的大小，只能改变图片的格式，这里推荐的是 PNG8 的格式。

 

图像合并实现 CSS Sprites

把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

1. 减少网页的HTTP请求数，提高了页面性能，是CSS Sprites最大的优点

2. 减少图片的总体积，合并后图片的体积往往小于这些图片单独体积的总和

3. 解决了图片命名的困扰，方便风格更换

多域名请求

将图片数据分到多个域名的服务器上，一方面是将服务器的请求压力分到多个硬件服务器上。另一方面是突破了浏览器的并发下载数限制，实现多图片的并发下载。

 

图像的BASE64编码

将图片数据编码成BASE64的字符串，使用该字符串代替图像地址，使得图片的下载不用向服务器发出请求，而可以随着HTML的下载同时下载到本地

http://www.cnblogs.com/coco1s/p/4375774.html

 

GZIP压缩

HTTP协议支持GZIP的压缩格式，服务器响应的报头包含Content-Encoding: gzip，它告诉浏览器，这个响应的返回数据，已经压缩成GZIP格式，浏览器获得数据后要进行解压缩操作。

http://www.jianshu.com/p/d864fa98216e

 

懒加载与预加载

预加载原理是在用户查看一张图片时，就将下一张图片先下载到本地，而当用户真正访问下一张图片时，由于本地缓存的原因，无需从服务器端下载，从而达到提高用户体验的目的。

https://zhuanlan.zhihu.com/p/25455672

 

Flush机制的使用

Flush机制的思想是无需等到网页内容全部加载完毕，一次性写回客户端，而是可以部分逐次的返回。在Java Web技术中，只要调用HttpServletResponse.getWriter输出流的flush方法，就可以将已经完成加载的内容写回给客户端。

 

动静分离

所谓的动静分离，就是将Web应用程序中静态和动态的内容分别放在不同的Web服务器上，有针对性的处理动态和静态内容，从而达到性能的提升。常见的方案是Nginx + Tomcat。

https://lanjingling.github.io/2015/10/28/nginx-tomcat-cluster/

 

HTTP持久连接

持久连接（Keep-Alive）也叫做长连接，它是一种TCP的连接方式，连接会被浏览器和服务器所缓存，在下次连接同一服务器时，缓存的连接被重新使用。

https://imququ.com/post/transfer-encoding-header-in-http.html

By default HAProxy operates in keep-alive mode with regards to persistent connections: for each connection it processes each request and response, and leaves the connection idle on both sides between the end of a response and the start of a new request.（Since version 1.5）

 

HTTP协议的合理使用

使用诸如If-Modified-Since、Last-Modified、304状态码等与缓存相关的HTTP头部。

 

使用CDN

CDN是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。