HTML5性能優化

来源:http://www.cnblogs.com/croso/archive/2016/03/10/5263130.html
-Advertisement-
Play Games

在HTML頁面完成展現之後，動態改變頁面元素或調整CSS樣式都會引起瀏覽器重繪，性能的損耗直接取決於動態改變的範圍：如果只是改變一個元素的顏色之類的信息則只會重繪該元素；而如果是增刪節點或調整節點位置則會引起其兄弟節點也一併重繪。 減少重繪並不是說不要重繪，而是要註意重繪範圍：①改...


HTML5性能優化

 

        在看完這兩章內容之後，我意猶未盡，於是乎從網上搜索關鍵字“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樣式有多重變動儘量合併到一起修改。

 

以改變一個<a>標簽的背景色、寬度和顏色為例。

 

<a href="javascript:void(0);" id="example">傳統的代碼</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.style.backgroundColor = "red"; 
 example.style.width = "200px"; 
 example.style.color = "white"; 
 } 
</script>


以上會執行3次重繪，而通過CSS代替javascript多次執行則只進行一次重繪。

 

<style> 
 .dblClick { 
 width: 200px; 
 background: red; 
 color: white; 
 } 
</style> 
<a href="javascript:;" id="example">CSS優化的代碼</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.className = "dblClick"; 
 } 
</script>

 

避免腳本阻塞載入

        當瀏覽器在解析常規的script標簽時，它需要等待script下載完畢，再解析執行，而後續的HTML代碼只能等待。CSS文件引入要放在<head>頭部，因為這是HTML渲染必備元素。為了避免阻塞載入，應把腳本放到文檔的末尾，而CSS是需要放在頭部的！

 

<head>
<link rel="stylesheet" href="common.css">
......
<script src="example.js"></script>
</body>

 

--避免節點深層級嵌套

        深層級嵌套的節點在初始化構建時往往需要更多的記憶體占用，並且在遍歷節點時也會更慢些，這與瀏覽器構建DOM文檔的機制有關。瀏覽器會把整個HTML文檔的結構存儲為DOM“樹”結構。當文檔節點的嵌套層次越深，構建的DOM樹層次也會越深。

 

如下代碼，完全能夠去掉<div>或<span>其中一個標簽。

<div>
  <span>
    <label>嵌套</label>
  </span>
</div>


頁面緩存

        通常不設置緩存的情況下，每次刷新頁面都會重新讀取伺服器的文件，而如果設置緩存之後，所有文件都可以從本地取得，這樣明顯極大提高了頁面效率。

 

我們可以通過設置頁面頭的expires來定義頁面過期時間，將過期時間定久一點就達到了“永久”緩存。

 

<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

 

 當然，如果你的項目代碼有變更，因為客戶端緩存了文件就得不到最新的文件，勢必造成顯示錯誤。基於這個問題的解決方案就是給鏈接文件加一個時間戳，如果時間戳有變化，瀏覽器會認為是新文件，就會向伺服器請求最新文件。

 

<script src="example2014-6-17.js"></script>
//如果是JSP，可以用EL表達式來取時間戳信息，這樣管理更加方便
<script src="example${your time param}.js"></script>
//或者這樣的寫法更優秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>


壓縮合併文件

        所有涉及到請求數據的文件儘量做壓縮，比如Javascript文件、css文件及圖片文件，特別是圖片文件，如果沒有高清晰要求，完全可以壓縮後再使用。

        數量少體積大的文件要比數量多體積小的文件載入速度快，所以有時候可以考慮將多個js文件、多個css文件合併在一起。

 

除此之外減少HTML文檔大小還可以採取下麵幾種方法：

①刪掉HTM文檔對執行結果無影響的空格空行和註釋

②避免Table佈局

③使用HTML5

 

--HTML+CSS3+Javascript各司其職

        讓三元素各司其職才能做出高性能的網頁：HTML是頁面之本也是內容之源，有了它就能跟CSS和Javascript交互；CSS3可以說是展現大師，而且日漸強大的CSS能代替Javascript做很多動態的事情如漸變、移動等動態效果；Javascript是動態數據之王，舊瀏覽器依靠js來完成動態效果展現，但現在的CSS也能完成js的工作，所以儘量將工作交給css，這樣會獲得更好的性能。（這個說得有點大）

 

--圖像合併實現CSS Sprites

        圖像合併其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS 的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

        一個頁面要用到多個圖標，完全可以將多個圖標合併成一個圖，然後只需要發一次圖片請求，通過css定位分割圖標即可。

 

--避免使用Iframe

        使用iframe並不會增加同功能變數名稱下的並行下載數，瀏覽器對同功能變數名稱的連接總是共用瀏覽器級別的連接池，在頁面載入過程中iframe元素還會阻塞父文檔onload事件的觸發。並且iframe是html標簽中最消耗資源的標簽，它的開銷比DIV、SCRIPT、STYLE等DOM高1~2個數量級。

 

避免onload事件被阻塞，可使用JavaScript動態的載入iframe元素或動態設置iframe的src屬性（但其僅在高級瀏覽器IE9及以上有效）。

 

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

 

--多功能變數名稱請求

        一般來說，瀏覽器對於相同功能變數名稱的圖片，最多用2-4個線程並行下載（不同瀏覽器的併發下載數是不同的）。而相同功能變數名稱的其他圖片，則要等到其他圖片下載完後才會開始下載。

        有時候，圖片數據太多，一些公司的解決方法是將圖片數據分到多個功能變數名稱的伺服器上，這在一方面是將伺服器的請求壓力分到多個硬體伺服器上，另一方面，是利用了瀏覽器的特性。（大家可以去新浪、騰訊門戶網站查看，這些大型站點同一頁面載入的圖片可能由多個站點提供）

        註：一個HTML請求的功能變數名稱也不要太多（2~3個差不多），多了可能造成不同伺服器連接時間差異，反而影響速度。

 

--避免空鏈接屬性

        如<img src=""><a href="">這樣的設置方式是非常不可取的，即使鏈接為空，在舊的瀏覽器也會以固定步驟發送請求信息。

        另外<a href="#"></a>也不可取，最好的方式是在鏈接中加一個空的js代碼<a href="javascript:void();"></a>

 

--使用圖像的BASE64編碼

        base64是一串字元串，他可以代表一個圖片的所有信息，也就是可以通過<img src="data:image/png;base64,S">（S表示一串base64碼）來顯示圖片，這種方式不需要再向伺服器發送請求，完全由瀏覽器解析成圖片。

        目前高級瀏覽器都支持此功能，但要註意兩點：①低版本瀏覽器（如IE7）不支持；②base64字元串長度隨圖片的大小及複雜度成正比，base64也像URL一樣，也有超出長度的情況（在IE8下很常見）。所以要根據情況來使用。

 

--顯式設置圖片的寬高

        如果HTML里的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成後再“回溯”該圖片並重新顯示，這會消耗額外時間。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");


 

--顯式指定文檔字元集

        如果瀏覽器不能獲知頁面的編碼字元集，一般都會在執行腳本和渲染頁面前，把位元組流緩存，然後再搜索可進行解析的字元集，或以預設的字元集來解析頁面代碼，這會導致消耗不必要的時間。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

 

 

--漸進式增強設計

        漸進式增強設計的通俗解釋就是：首先寫一段滿足所有瀏覽器的基本樣式，再在後面針對不同高級瀏覽器編寫更漂亮的樣式

        如下代碼，所有瀏覽器都支持background-color: #2067f5;滿足了瀏覽器基本現實需求，而後面的background-image: -webkit-gradient等則為不同高級瀏覽器使用，只要瀏覽器識別就能執行這段代碼（不識別，CSS也不會報錯只會直接忽略）。

 

<div class="someClass"></div> 
.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做處理。

        這其實是負載均衡的雛形，這樣的實現不用讓開發人員做任何特殊開發，一個<img src="demo.jpg">交給伺服器即可，至於這個文件是從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文件大小。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C#刪除程式自身【總結】
    出處：http://www.cnblogs.com/Interkey/ 偶然看到一個可以自刪除的程式，於是瞭解下如何實現。然後整理如下： 思路： 在.NET程式中，因為運行中的程式是受系統保護的，不能自己刪除自身的，所以自刪除的思路： 在關閉本程式之前啟動新的進程打開另一個程式，調用這個程式來刪除原
  • GridView多層嵌套和摺疊與展開
    Insus.NET近段時間應朋友的要求，寫一個GridView多層嵌套和摺疊與展開。這個功能的GridView多層嵌套沒有問題，因為已經做了無限次數，但是摺疊與展開的功能，卻花上不少時間(網上找資料)，雖找到資料可參考，還是瞭解明它，並修改適合自己程式使用。效果如下： 站點中多個頁面使用，因此Ins
  • android高德地圖定位實現
    高德地圖api解釋的實在是太爛了，一度想用系統獲取location，添加button實現定位功能，奈何高德地圖右上角又有定位按鈕，於是乎高德地圖定位研究如下： package com.example.basicmap; import java.util.List; import android.ap
  • Spring源碼解析 - BeanFactory介面體系解讀
    BeanFactory是Spring IOC實現的基礎,這邊定義了一系列的介面,我們通過這些介面的學習,可以大致瞭解BeanFactory體系各介面如何分工合作.為閱讀具體實現打下基礎.
  • JSP中文亂碼解決方案
    JSP中文亂碼解決方案，給出了較為詳細的步驟。
  • 說說數組
    數組（Array），字面上講，就是一組相同的數據，一種簡單的線性結構，對應到記憶體上，就是一塊連續的固定大小的記憶體塊的組合。一旦用到數組，說明我們對數據的規模是心中有數的，因此數組的大小是需要提前預定的。 效率，電腦永遠不會停止追求效率。為了追求效率，數組表現出它最明顯的兩個特點，其一，數組大小需要
  • js面向對象與原型
    創建對象 var box = new Object();//創建對象 box.name = 'Lee'; //添加屬性 box.age = 100; box.run = function(){ return this.name + this.age + "運行中"; //this 表示當前作用域下對
  • 用javascript得到客戶端IP的新方法
    javascript得到客戶端IP的新方法 很久以來，我都是經過http://fw.qq.com/ipaddress來得到客戶端用戶的IP，這個方法簡單、快速、實用 。 我們調用它的寫法是： <script type="text/javascript" src="http://fw.qq.com/i
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類