首页 > 代码库 > Java Web高性能开发 - 前端高性能

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

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