在看完這兩章內容之后，我意猶未盡，于是乎從網上搜索關鍵字“Java Web高性能”，在IBM社區找到兩篇不錯的文章，而讓人更意外的是我發現那兩篇文章的內容跟《高性能HTML5》前兩章高度相似，不知道是誰抄襲誰的，大家可以鑒別下真偽，下面附上地址。
http://dl2.iteye.com/upload/attachment/0097/9373/b0e69540-e703-3530-81bb-c93de7b850a6.pdf
http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/
http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf2/
前面是讀后感，下面是我針對最近幾天學習到的提高Web性能進行了篇幅不小的總結，一來為新人提供幫助，二來自己做一下筆記，加深記憶。
--減少重繪
在HTML頁面完成展現之后，動態改變頁面元素或調整CSS樣式都會引起瀏覽器重繪，性能的損耗直接取決于動態改變的范圍：如果只是改變一個元素的顏色之類的信息則只會重繪該元素；而如果是增刪節點或調整節點位置則會引起其兄弟節點也一并重繪。
減少重繪并不是說不要重繪，而是要注意重繪范圍：①改動的DOM元素越深則影響越小，所以盡量深入節點改動；②對某些DOM樣式有多重變動盡量合并到一起修改。
以改變一個標簽的背景色、寬度和顏色為例。
傳統的代碼
以上會執行3次重繪，而通過CSS代替javascript多次執行則只進行一次重繪。
CSS優化的代碼
避免腳本阻塞加載
當瀏覽器在解析常規的script標簽時，它需要等待script下載完畢，再解析執行，而后續的HTML代碼只能等待。CSS文件引入要放在
頭部，因為這是HTML渲染必備元素。為了避免阻塞加載，應把腳本放到文檔的末尾，而CSS是需要放在頭部的！......
--避免節點深層級嵌套
深層級嵌套的節點在初始化構建時往往需要更多的內存占用，并且在遍歷節點時也會更慢些，這與瀏覽器構建DOM文檔的機制有關。瀏覽器會把整個HTML文檔的結構存儲為DOM“樹”結構。當文檔節點的嵌套層次越深，構建的DOM樹層次也會越深。
如下代碼，完全能夠去掉或其中一個標簽。
頁面緩存
通常不設置緩存的情況下，每次刷新頁面都會重新讀取服務器的文件，而如果設置緩存之后，所有文件都可以從本地取得，這樣明顯極大提高了頁面效率。
我們可以通過設置頁面頭的expires來定義頁面過期時間，將過期時間定久一點就達到了“永久”緩存。
--多域名請求
一般來說，瀏覽器對于相同域名的圖片，最多用2-4個線程并行下載（不同瀏覽器的并發下載數是不同的）。而相同域名的其他圖片，則要等到其他圖片下載完后才會開始下載。
有時候，圖片數據太多，一些公司的解決方法是將圖片數據分到多個域名的服務器上，這在一方面是將服務器的請求壓力分到多個硬件服務器上，另一方面，是利用了瀏覽器的特性。（大家可以去新浪、騰訊門戶網站查看，這些大型站點同一頁面加載的圖片可能由多個站點提供）
注：一個HTML請求的域名也不要太多（2~3個差不多），多了可能造成不同服務器連接時間差異，反而影響速度。
--避免空鏈接屬性
如這樣的設置方式是非常不可取的，即使鏈接為空，在舊的瀏覽器也會以固定步驟發送請求信息。
另外也不可取，最好的方式是在鏈接中加一個空的js代碼
--使用圖像的BASE64編碼
base64是一串字符串，他可以代表一個圖片的所有信息，也就是可以通過（S表示一串base64碼）來顯示圖片，這種方式不需要再向服務器發送請求，完全由瀏覽器解析成圖片。
目前高級瀏覽器都支持此功能，但要注意兩點：①低版本瀏覽器（如IE7）不支持；②base64字符串長度隨圖片的大小及復雜度成正比，base64也像URL一樣，也有超出長度的情況（在IE8下很常見）。所以要根據情況來使用。
--顯式設置圖片的寬高
如果HTML里的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成后再“回溯”該圖片并重新顯示，這會消耗額外時間。
document.getElementById("if").setAttribute("src","url");
--顯式指定文檔字符集
如果瀏覽器不能獲知頁面的編碼字符集，一般都會在執行腳本和渲染頁面前，把字節流緩存，然后再搜索可進行解析的字符集，或以默認的字符集來解析頁面代碼，這會導致消耗不必要的時間。
document.getElementById("if").setAttribute("src","url");--漸進式增強設計
漸進式增強設計的通俗解釋就是：首先寫一段滿足所有瀏覽器的基本樣式，再在后面針對不同高級瀏覽器編寫更漂亮的樣式
如下代碼，所有瀏覽器都支持background-color: #2067f5;滿足了瀏覽器基本現實需求，而后面的background-image: -webkit-gradient等則為不同高級瀏覽器使用，只要瀏覽器識別就能執行這段代碼（不識別，CSS也不會報錯只會直接忽略）。
.someClass
{ width: 100px;
height: 100px;
background-color: #2067f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5),
to(#154096));
background-image: -webkit-linear-gradient(top, #2067f5, #154096);
background-image: -moz-linear-gradient(top, #2067f5, #154096);
background-image: -ms-linear-gradient(top, #2067f5, #154096);
background-image: -o-linear-gradient(top, #2067f5, #154096);
background-image: linear-gradient(to bottom, #2067f5, #154096);
}
參考閱讀：多瀏覽器適配測試
--懶加載與預加載
預加載和懶加載，是一種改善用戶體驗的策略，它實際上并不能提高程序性能，但是卻可以明顯改善用戶體驗或減輕服務器壓力。
預加載表示當前用戶在請求到需要的數據之后，頁面自動預加載下一次用戶可能要看的數據，這樣用戶下一次操作的時候就立刻呈現，依次類推。
懶加載表示用戶請求什么再顯示什么，如果一個請求要響應的時間非常長，就不推薦懶加載。
--Flush機制
當一個頁面非常大，內容非常多，可以采用flush的形式分部分返回給頁面，這樣能告訴用戶我正在工作，顯示一部分內容比白屏等很長時間要好得多。在Java Web技術中，實現Flush非常簡單，只要調用 HttpServletResponse.getWriter輸出流的flush方法，就可以將已經完成加載的內容寫回給客戶端。
這種方式只適用于返回數據特別多、請求時間特別長的情況，常規數據還是用正常的實時全部返回最佳。這種實現方式實際會增加瀏覽器渲染時間和用戶整體等待時間，但從用戶體驗上會更加優秀。
--CDN機制
所謂的CDN，就是一種內容分發網絡，它采用智能路由和流量管理技術，及時發現能夠給訪問者提供最快響應的加速節點，并將訪問者的請求導向到該加速節點，由該加速節點提供內容服務。
通俗點說，你在成都（瀏覽器）購買了北京賣家（服務器）的產品，北京賣家通過快遞（CDN服務）寄送包裹，從北京到成都可以走路、坐汽車、火車或飛機，而采用CND的快遞會選擇飛機直達，因為這種寄送方式最快。
當然使用CDN有兩個注意事項：
1、CDN加速服務很貴，如果你覺得你的網站值得加速，可以選擇購買；
2、CDN不適合局域性網站，比如你的網站只有某一個片區訪問或者局域網訪問，因為區域性網絡本來就很近，無需CDN加速。
--HTTP協議的合理使用
瀏覽器緩存帶來的性能提升已經眾人皆知了，而很多人卻并不知道瀏覽器的緩存過期時間、緩存刪除、什么頁面可以緩存等，都可以由我們程序員來控制，只要您熟悉HTTP協議，就可以輕松的控制瀏覽器。
擴展閱讀：深入理解HTTP協議
--動靜分離
所謂的動靜分離，就是將Web應用程序中靜態和動態的內容分別放在不同的Web服務器上，有針對性的處理動態和靜態內容，從而達到性能的提升。我們知道如果一個HTML有多個域名請求數據文件會提高
Tomcat服務器在處理靜態和并發問題上比較弱，所以事先動靜分離的方式一般會用Apache+Tomcat、Nginx+Tomcat等。
以Apache+Tomcat為例，其運行機理是：頁面請求首先給Apache，然后Apache分析請求信息是靜態還是動態，靜態則本機處理，動態則交給Tomcat做處理。
這其實是負載均衡的雛形，這樣的實現不用讓開發人員做任何特殊開發，一個
交給服務器即可，至于這個文件是從Apache還是從Tomcat取得，開發人員完全無需關注。
--HTTP持久連接
持久連接（Keep-Alive）也叫做長連接，它是一種TCP的連接方式，連接會被瀏覽器和服務器所緩存，在下次連接同一服務器時，緩存的連接被重新使用。HTTP無狀態性表示了它不屬于長連接，但HTTP/1.1提供了對長連接的支持（不過這必須依賴瀏覽器和服務器雙方均支持長連接功能才行），最常見的HTTP長連接例子是“斷點下載”。
瀏覽器在請求的頭部添加 Connection:Keep-Alive，以此告訴服務器“我支持長連接，你支持的話就和我建立長連接吧”，而倘若服務器的確支持長連接，那么就在響應頭部添加“Connection:Keep-Alive”，從而告訴瀏覽器“我的確也支持，那我們建立長連接吧”。服務器還可以通過Keep-Alive:timeout=..., max=...的頭部告訴瀏覽器長連接失效時間。
配置長連接通常是要服務器支持設置，有測試數據顯示，使用長連接和不使用長連接的性能對比，對于Tomcat配置的maxKeepAliveRequests為50來說，效率竟然提升了將近5倍。
--GZIP壓縮技術
HTTP協議支持GZIP的壓縮格式，當服務器返回的HTML信息報頭中包含Content-Encoding:gzip，它就告訴瀏覽器，這個響應的返回數據已經壓縮成GZIP格式，瀏覽器獲得數據后要進行解壓縮操作，一定程度上減輕了服務器傳輸數據的壓力。
很多服務器已經支持通過配置來自動將HTML信息壓縮成GZIP，比如tomcat、又比如很火的Nginx。如果無法配置服務器級別的GZIP壓縮機制，可以改為程序壓縮。
// 監視對 gzipCategory 文件夾的請求
@WebFilter(urlPatterns = { "/gzipCategory/*" })
public class GZIPFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
String parameter = request.getParameter("gzip");
// 判斷是否包含了 Accept-Encoding 請求頭部
HttpServletRequest s = (HttpServletRequest)request;
String header = s.getHeader("Accept-Encoding");
//"1".equals(parameter) 只是為了控制，如果傳入 gzip=1，才執行壓縮，目的是測試用
if ("1".equals(parameter) && header != null && header.toLowerCase().contains("gzip")) {
HttpServletResponse resp = (HttpServletResponse) response;
final ByteArrayOutputStream buffer = new ByteArrayOutputStream();
HttpServletResponseWrapper hsrw = new HttpServletResponseWrapper(
resp) {
@Override
public PrintWriter getWriter() throws IOException {
return new PrintWriter(new OutputStreamWriter(buffer,
getCharacterEncoding()));
}
@Override
public ServletOutputStream getOutputStream() throws IOException {
return new ServletOutputStream() {
@Override
public void write(int b) throws IOException {
buffer.write(b);
}
};
}
};
chain.doFilter(request, hsrw);
byte[] gzipData = gzip(buffer.toByteArray());
resp.addHeader("Content-Encoding", "gzip");
resp.setContentLength(gzipData.length);
ServletOutputStream output = response.getOutputStream();
output.write(gzipData);
output.flush();
} else {
chain.doFilter(request, response);
}
}
// 用 GZIP 壓縮字節數組
private byte[] gzip(byte[] data) {
ByteArrayOutputStream byteOutput = new ByteArrayOutputStream(10240);
GZIPOutputStream output = null;
try {
output = new GZIPOutputStream(byteOutput);
output.write(data);
} catch (IOException e) {
} finally {
try {
output.close();
} catch (IOException e) {
}
}
return byteOutput.toByteArray();
}
……
}細節決定成敗，系統慢是由一個又一個不良的小細節造成的，所以開發初期做好充足的準備，開發中認真負責、不偷工減料，維護期更要注重代碼質量，這樣才能讓我們的系統穩定高效。
個人覺得一個產品的新版本質量可以從核心js文件看出來：如果核心js文件大小比上一版本大太多，明顯在性能上就會有問題，我們要爭做像谷歌、亞馬遜這樣優秀的團隊--能夠在功能升級的同時減小核心js文件大小。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
