、*{} #zishu *{} 盡量避開
由于不同瀏覽器對HTML標簽的解釋有差異,所以最終的網頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風險,設計者通常會在CSS的一個始就把所有標簽的默認屬性全部去除,以達到所有簽標屬性值都統一的效果。所以就有了*通配符。*會遍歷所有的標簽;
*{margin:0; padding:0}
●建議的的解決辦法:
不要去使用生僻的標簽,因為這些標簽往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的去使用那些常用的標簽;
不要使用*;而是把你常用到的這些標簽進行處理;例如:body,li,p,h1{margin:0; padding:0}
2、濾鏡的一些東西不要去用
IE的一些濾鏡在FIREFOX中不支持,往往寫一些效果時你還是使用CSS HACK;而濾鏡是一個非常毫資源的東西;特別是一些羽化、陰影和一個前透明的效果;
●建議的解決辦法:
能不使用就不要使用,一方面兼容問題;很多效果只能在IE中使用;
就本例而言,如果非要這樣在的效果,建議用圖片作背景;(只說優化速度,實際應用還是可以小部分用,有人可能會說,用圖片還多一個HTTP請求呢,呵呵……)
一個非常好的例子,就是在今年512大地震時,很多網站一夜之間全部變成了灰色,他們只用了一行CSS代碼:
body{filter: gray;}
但,你會看會看到這些網頁非常的慢,打開后你的CPU也會飆升,不夸張的說,如果你的電腦配置差,干死你也不為過。
3、一個頁面上少用絕對定位
絕對定位(position:absolute)是網頁布局中很常用到的,特別是作一些浮動效果時,也會讓頁面看起來非常的酷。但網頁中如果使用過多的絕對定位,會讓你的網頁變得非常的慢,這一點上邊FIREFOX表現要比IE還要差。
●建議的解決辦法:
盡可能少用,這個少用的值是多少,也沒有一個非常好的值來說明;還要看絕定定位這個標簽里邊的內容的多少;在這里我只能說,這樣寫會有性能問題,少用。
如果能用變通實現同樣的效果,就用變通的辦法。
4、background 背景圖片的平鋪
有些網頁的背景或頁面中某塊的背景通常要用到圖片的平鋪,平鋪后就會有平鋪次數的問題,如果是單次還好,如果是多次,就廢了。
●建議的作法:
色彩少的圖片要作成gif圖片;
平鋪的圖片盡可能大一些,如果是色彩少的GIF圖片,圖片大一些,實際大小也不會大多少;上邊的兩個例子就很好的證明,第一個圖片非常少,第二個圖大較大一些;但速度是非常不一樣的;
5、讓屬性盡可能多的去繼承
盡可能讓一些屬性子可以繼承父,而不是覆蓋父;
6、CSS的路徑別太深
#zishu #info #tool #sidebar h2{ font-size:12px;}
7、能簡寫的一些就簡寫
這個對渲染速度沒有影響;只是少幾個字符;
8、別放空的的class或沒有的class在HTML代碼中
9、float 的應用
這個東西我的感覺是如果使用不當,百分百有性能問題,而且還非常的大,但實在不知道怎么樣能弄一個例子出來;這里只能建議大家如果不是很明白float是怎么工作的,還是少使用為妙。
曾經因為這個把IE干死過,我寫過一個例子,雖說和這個沒有什么太大的關系:IE之死__原來與CSS有關.
10、合理的布局
為什么這么說呢,合理的布局,可以改變CSS的寫法以及渲染過程。
擊上方 關注訂閱黑碼教主獲取更多精彩內容
在多重嵌套循環的程序上,如果能分出出多個獨立循環也比嵌套在一個循環體內來的更有益。
優化循環的3種方式:減少每次迭代的開銷、減少迭代的次數或者重新設計應用程序。
在測試的時候僅可能模擬真實環境:如低端機器和低速網絡。
?
對于連續頁面之間的差別很小的應用而言,使用Ajax技術能帶來顯著的改善。
?
在HTML頁面完成展現之后,動態改變頁面元素或調整CSS樣式都會引起瀏覽器重繪,性能的損耗直接取決于動態改變的范圍:如果只是改變一個元素的顏色之類的信息則只會重繪該元素;而如果是增刪節點或調整節點位置則會引起其兄弟節點也一并重繪。
減少重繪并不是說不要重繪,而是要注意重繪范圍:
以改變一個<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文件引入要放在頭部,因為這是HTML渲染必備元素。
?
為了避免阻塞加載,應把腳本放到文檔的末尾,而CSS是需要放在頭部的!
<head> <link rel="stylesheet" href="common.css"> ...... <script src="example.js"></script> </body>
深層級嵌套的節點在初始化構建時往往需要更多的內存占用,并且在遍歷節點時也會更慢些,這與瀏覽器構建DOM文檔的機制有關。瀏覽器會把整個HTML文檔的結構存儲為DOM“樹”結構。當文檔節點的嵌套層次越深,構建的DOM樹層次也會越深。
如下代碼,完全能夠去掉
或其中一個標簽。<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文檔大小還可以采取下面幾種方法:
圖像合并其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS 的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。
一個頁面要用到多個圖標,完全可以將多個圖標合并成一個圖,然后只需要發一次圖片請求,通過css定位分割圖標即可。
使用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是一串字符串,他可以代表一個圖片的所有信息,也就是可以通過
(S表示一串base64碼)來顯示圖片,這種方式不需要再向服務器發送請求,完全由瀏覽器解析成圖片。
目前高級瀏覽器都支持此功能,但要注意兩點:
如果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的形式分部分返回給頁面,這樣能告訴用戶我正在工作,顯示一部分內容比白屏等很長時間要好得多。在Java Web技術中,實現Flush非常簡單,只要調用 HttpServletResponse.getWriter輸出流的flush方法,就可以將已經完成加載的內容寫回給客戶端。
這種方式只適用于返回數據特別多、請求時間特別長的情況,常規數據還是用正常的實時全部返回最佳。這種實現方式實際會增加瀏覽器渲染時間和用戶整體等待時間,但從用戶體驗上會更加優秀。
所謂的CDN,就是一種內容分發網絡,它采用智能路由和流量管理技術,及時發現能夠給訪問者提供最快響應的加速節點,并將訪問者的請求導向到該加速節點,由該加速節點提供內容服務。
通俗點說,你在成都(瀏覽器)購買了北京賣家(服務器)的產品,北京賣家通過快遞(CDN服務)寄送包裹,從北京到成都可以走路、坐汽車、火車或飛機,而采用CND的快遞會選擇飛機直達,因為這種寄送方式最快。
當然使用CDN有兩個注意事項:
瀏覽器緩存帶來的性能提升已經眾人皆知了,而很多人卻并不知道瀏覽器的緩存過期時間、緩存刪除、什么頁面可以緩存等,都可以由我們程序員來控制,只要您熟悉HTTP協議,就可以輕松的控制瀏覽器。
所謂的動靜分離,就是將Web應用程序中靜態和動態的內容分別放在不同的Web服務器上,有針對性的處理動態和靜態內容,從而達到性能的提升。我們知道如果一個HTML有多個域名請求數據文件會提高
Tomcat服務器在處理靜態和并發問題上比較弱,所以事先動靜分離的方式一般會用Apache+Tomcat、Nginx+Tomcat等。
以Apache+Tomcat為例,其運行機理是:頁面請求首先給Apache,然后Apache分析請求信息是靜態還是動態,靜態則本機處理,動態則交給Tomcat做處理。
這其實是負載均衡的雛形,這樣的實現不用讓開發人員做任何特殊開發,一個
交給服務器即可,至于這個文件是從Apache還是從Tomcat取得,開發人員完全無需關注。
持久連接(Keep-Alive)也叫做長連接,它是一種TCP的連接方式,連接會被瀏覽器和服務器所緩存,在下次連接同一服務器時,緩存的連接被重新使用。HTTP無狀態性表示了它不屬于長連接,但HTTP/1.1提供了對長連接的支持(不過這必須依賴瀏覽器和服務器雙方均支持長連接功能才行),最常見的HTTP長連接例子是“斷點下載”。
瀏覽器在請求的頭部添加 Connection:Keep-Alive,以此告訴服務器“我支持長連接,你支持的話就和我建立長連接吧”,而倘若服務器的確支持長連接,那么就在響應頭部添加“Connection:Keep-Alive”,從而告訴瀏覽器“我的確也支持,那我們建立長連接吧”。服務器還可以通過Keep-Alive:timeout=..., max=...的頭部告訴瀏覽器長連接失效時間。
配置長連接通常是要服務器支持設置,有測試數據顯示,使用長連接和不使用長連接的性能對比,對于Tomcat配置的maxKeepAliveRequests為50來說,效率竟然提升了將近5倍。
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(); } …… }
如果你覺得本篇還不錯,請點贊關注!
文字由黑碼教主創作,配圖源于網絡,版權歸原作者所有,如有侵權聯系刪除!
你有更好的網站性能優化方案嗎?
歡迎留言分享。
擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
有關在頁面渲染方面的性能優化。這里提幾點需要考慮的。
在HTML中直接縮放圖片會導致頁面內容的重排重繪,此時可能會使用頁面中的其他操作產生卡頓,因此要盡量減少在頁面中直接進行圖片縮放。
CSS表達式或CSS濾鏡的解析渲染速度是比較慢的。在有其他解決方案的情況下應該盡量避免使用。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。