DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> 網站大提速之一浏覽器渲染速度優化
網站大提速之一浏覽器渲染速度優化
編輯:SEO優化集錦     

前言:

要實現網站的大提速,必須在各個環節進行精確的設置和安排。網站一旦打開速度變慢,往常,站長們第一時間肯定會認為“服務器慢”,其實看完本章後,你會發現或許結果並不完全是這樣。影響網站速度的因素千差萬別,服務器僅是其中一小部分因素而已。

有一種常見的情況,同樣的服務器,網站與網站之間的打開速度也千差萬別,這就和網站的制作工藝有相當大的關系;本節重點講一下網站制作工藝優化。

我們可以大致將影響網絡速度的因素分為五個來進行分別優化:

一、服務器硬件配置和設置;

二、服務器的線路及帶寬;

三、用戶電腦的配置和設置;

四、用戶的線路及帶寬;

五、網站制作工藝。

我們看到,影響網速的因素大概是這五個部分,而往往很多時候,服務器、用戶的電腦配置和線路屬性是無法選擇的,所以我們這篇文章不細談帶寬和服務器硬件方面的問題。重點談一下通過網站制作工藝的優化來達到網站極限提速的方法和思路,這其中是很多站長平時完全忽略的。

當然,程序設計不當也會造成網頁速度變慢。但是程序設計的種類和運行環境千差萬別,造成的原因也十分復雜,本章也無法一一敘述。我的網站泸州網采用的DZ X2作為網站引擎,由於程序設計時設計者也沒有充分考慮到浏覽器的渲染,所以仍然不完全符合下面的優化項目。但如果你采用的是HTML靜態生成的CMS,比如DEDECMS等,就可以完全參照下面的優化項目來實施。

一 浏覽器的渲染速度優化:

首先要說的是,浏覽器的渲染很多無法通過直觀的試驗來證明,只能推斷和觀察結果來糾正和解決,所以,我總結的方法,未必全部符合實際原理。

我們學習CSS,一開始只講究實現結果,從未注意過CSS的渲染過程,這就造成了很多不必要的渲染浪費。在沒有任何程序影響下的頁面,如果出現網站打開卡、打開後機器變慢、打開過程中顯示了內容卻又變白屏再讀一遍、點擊不順暢、上下左右拖動花屏,重渲染的主要原因。

1.CSS,一定要寫在<head ></head >之間,讓浏覽器先緩存到所有CSS,也便於浏覽器讀取HTML結構時可以順利渲染,如果在<body ></body >之間出現了CSS樣式定義,浏覽器會重新渲染一遍網頁。影響到網頁打開速度;

至於是<body >內出現了重定義樣式才重新渲染,還是一旦出現樣式定義就重新渲染,目前我也沒有辦法證實。但應盡量避免這種情況。

2.當頁面文檔中大量出現需要展開、收起的樹形結構(樹形目錄)的時候,最容易出現CSS渲染問題。我們所說的展開、收起,其實是網頁元素的顯示和隱藏,由於某些浏覽器設計缺陷,展開一個隱藏的元素,實際上消耗很大,原因可能是display:none並沒有真正隱藏元素,很可能即使是隱藏層,但該元素屬性仍然需要逐一渲染。

這種情況,一般多見於樹形目錄過多過於復雜的時候出現,點擊一次半天不展開,機器出現緩慢。

3.和同上的情況一樣,border:0這種屬性,仍然會渲染邊框樣式。所以正確的寫法應該是:border:none,避免無意義的渲染;

4.JS也可能會造成重渲染,所以我們應盡量整合JS,並將所有JS放置到頁末之前。如果我沒記錯,即使JS在頁頭,現代浏覽器大多都會默認最後加載JS;

5.所有圖片必須指定高寬屬性,否則浏覽器也會重新渲染網頁。試想,浏覽器在不知道圖片高寬的情況下,浏覽器無法為圖片在頁面上預留具體位置,而此時HTML和CSS樣式也在同時下載。浏覽器顯然無法有效組織顯示結果,只有當圖片完全下載後才能確定圖片的高寬,勢必造成浏覽器的重新渲染;

6.背景圖過小也會造成渲染困難。我們設想一下,將一個1px高寬的背景圖作為背景填充滿整個屏幕,需要進行多少次計算處理。所以,我們以前學的“圖片盡量小”,其實是有誤區存在的;

7.盡量少用幀數過多過快的FLASH,GIF動畫來裝飾網頁。這對網頁打開速度幾乎是致命的;

8.少用濾鏡,濾鏡會占用更多的機器資源,也可能存在很多兼容性問題。應謹慎使用;

9.盡量少用TABLE結構來布局。因為用FW\PS可以很方便的直接導出一個網頁文件,所以老式網站都是采用TABLE布局。TABLE有一個廣受诟病的問題:之後要遇到才會完整顯示內容。如果表格中內容過多,網頁會半天不顯示。這也是TABLE布局被淘汰的原因之一;

10.CSS子選擇符。CSS子選擇符會造成一次浏覽器的篩選和定位計算,所以很多文章上都不推薦使用子選擇符定位樣式。能用.div 的,就盡量不要用.nav ul li a .div 這樣的寫法。

關於浏覽器的渲染優化,目前我所了解到的就這些。下一章將會為大家服務器減壓的幾種主要方法:包括圖片格式介紹及應用和壓縮方法;Css sprite的實際應用;服務器GZIP設置;減少服務器請求數的幾種介紹。

希望廣告高手指正、補充!

發表請保留:http://www.luzhou6.com 泸州網夜上原創。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved