Java Web高效能開發 - 前端高效能

標籤：懶載入   16px   tps   header   訪問   haproxy   art   reg   應用程式   

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頭部  使用CDNCDN是指一種通過互連網互相串連的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、視頻、應用程式及其他檔案發送給使用者，來提供高效能、可擴充性及低成本的網路內容傳遞給使用者。 

Java Web高效能開發 - 前端高效能