網(wǎng)站大提速之一瀏覽器渲染速度優(yōu)化
2019-03-19 來源：luzhou6.com
前言：
要實(shí)現(xiàn)網(wǎng)站的大提速，必須在各個(gè)環(huán)節(jié)進(jìn)行精確的設(shè)置和安排。網(wǎng)站一旦打開速度變慢，往常，站長(zhǎng)們第一時(shí)間肯定會(huì)認(rèn)為“服務(wù)器慢”，其實(shí)看完本章后，你會(huì)發(fā)現(xiàn)或許結(jié)果并不完全是這樣。影響網(wǎng)站速度的因素千差萬別，服務(wù)器僅是其中一小部分因素而已。
有一種常見的情況，同樣的服務(wù)器，網(wǎng)站與網(wǎng)站之間的打開速度也千差萬別，這就和網(wǎng)站的制作工藝有相當(dāng)大的關(guān)系；本節(jié)重點(diǎn)講一下網(wǎng)站制作工藝優(yōu)化。
我們可以大致將影響網(wǎng)絡(luò)速度的因素分為五個(gè)來進(jìn)行分別優(yōu)化：
一、服務(wù)器硬件配置和設(shè)置；
二、服務(wù)器的線路及帶寬；
三、用戶電腦的配置和設(shè)置；
四、用戶的線路及帶寬；
五、網(wǎng)站制作工藝。
我們看到，影響網(wǎng)速的因素大概是這五個(gè)部分，而往往很多時(shí)候，服務(wù)器、用戶的電腦配置和線路屬性是無法選擇的，所以我們這篇文章不細(xì)談帶寬和服務(wù)器硬件方面的問題。重點(diǎn)談一下通過網(wǎng)站制作工藝的優(yōu)化來達(dá)到網(wǎng)站極限提速的方法和思路，這其中是很多站長(zhǎng)平時(shí)完全忽略的。
當(dāng)然，程序設(shè)計(jì)不當(dāng)也會(huì)造成網(wǎng)頁速度變慢。但是程序設(shè)計(jì)的種類和運(yùn)行環(huán)境千差萬別，造成的原因也十分復(fù)雜，本章也無法一一敘述。我的網(wǎng)站瀘州網(wǎng)采用的DZ X2作為網(wǎng)站引擎，由于程序設(shè)計(jì)時(shí)設(shè)計(jì)者也沒有充分考慮到瀏覽器的渲染，所以仍然不完全符合下面的優(yōu)化項(xiàng)目。但如果你采用的是HTML靜態(tài)生成的CMS，比如DEDECMS等，就可以完全參照下面的優(yōu)化項(xiàng)目來實(shí)施。
一 瀏覽器的渲染速度優(yōu)化：
首先要說的是，瀏覽器的渲染很多無法通過直觀的試驗(yàn)來證明，只能推斷和觀察結(jié)果來糾正和解決，所以，我總結(jié)的方法，未必全部符合實(shí)際原理。
我們學(xué)習(xí)CSS，一開始只講究實(shí)現(xiàn)結(jié)果，從未注意過CSS的渲染過程，這就造成了很多不必要的渲染浪費(fèi)。在沒有任何程序影響下的頁面，如果出現(xiàn)網(wǎng)站打開卡、打開后機(jī)器變慢、打開過程中顯示了內(nèi)容卻又變白屏再讀一遍、點(diǎn)擊不順暢、上下左右拖動(dòng)花屏，重渲染的主要原因。
1.CSS，一定要寫在<head ></head >之間，讓瀏覽器先緩存到所有CSS，也便于瀏覽器讀取HTML結(jié)構(gòu)時(shí)可以順利渲染，如果在<body ></body >之間出現(xiàn)了CSS樣式定義，瀏覽器會(huì)重新渲染一遍網(wǎng)頁。影響到網(wǎng)頁打開速度;
至于是<body >內(nèi)出現(xiàn)了重定義樣式才重新渲染，還是一旦出現(xiàn)樣式定義就重新渲染，目前我也沒有辦法證實(shí)。但應(yīng)盡量避免這種情況。
2．當(dāng)頁面文檔中大量出現(xiàn)需要展開、收起的樹形結(jié)構(gòu)（樹形目錄）的時(shí)候，最容易出現(xiàn)CSS渲染問題。我們所說的展開、收起，其實(shí)是網(wǎng)頁元素的顯示和隱藏，由于某些瀏覽器設(shè)計(jì)缺陷，展開一個(gè)隱藏的元素，實(shí)際上消耗很大，原因可能是display:none并沒有真正隱藏元素，很可能即使是隱藏層，但該元素屬性仍然需要逐一渲染。
這種情況，一般多見于樹形目錄過多過于復(fù)雜的時(shí)候出現(xiàn)，點(diǎn)擊一次半天不展開，機(jī)器出現(xiàn)緩慢。
3．和同上的情況一樣，border:0這種屬性，仍然會(huì)渲染邊框樣式。所以正確的寫法應(yīng)該是：border:none，避免無意義的渲染；
4．JS也可能會(huì)造成重渲染，所以我們應(yīng)盡量整合JS，并將所有JS放置到頁末之前。如果我沒記錯(cuò)，即使JS在頁頭，現(xiàn)代瀏覽器大多都會(huì)默認(rèn)最后加載JS；
5．所有圖片必須指定高寬屬性，否則瀏覽器也會(huì)重新渲染網(wǎng)頁。試想，瀏覽器在不知道圖片高寬的情況下，瀏覽器無法為圖片在頁面上預(yù)留具體位置，而此時(shí)HTML和CSS樣式也在同時(shí)下載。瀏覽器顯然無法有效組織顯示結(jié)果，只有當(dāng)圖片完全下載后才能確定圖片的高寬，勢(shì)必造成瀏覽器的重新渲染；
6．背景圖過小也會(huì)造成渲染困難。我們?cè)O(shè)想一下，將一個(gè)1px高寬的背景圖作為背景填充滿整個(gè)屏幕，需要進(jìn)行多少次計(jì)算處理。所以，我們以前學(xué)的“圖片盡量小”，其實(shí)是有誤區(qū)存在的；
7．盡量少用幀數(shù)過多過快的FLASH，GIF動(dòng)畫來裝飾網(wǎng)頁。這對(duì)網(wǎng)頁打開速度幾乎是致命的；
8．少用濾鏡，濾鏡會(huì)占用更多的機(jī)器資源，也可能存在很多兼容性問題。應(yīng)謹(jǐn)慎使用；
9．盡量少用TABLE結(jié)構(gòu)來布局。因?yàn)橛肍W\PS可以很方便的直接導(dǎo)出一個(gè)網(wǎng)頁文件，所以老式網(wǎng)站都是采用TABLE布局。TABLE有一個(gè)廣受詬病的問題：之后要遇到才會(huì)完整顯示內(nèi)容。如果表格中內(nèi)容過多，網(wǎng)頁會(huì)半天不顯示。這也是TABLE布局被淘汰的原因之一；
10．CSS子選擇符。CSS子選擇符會(huì)造成一次瀏覽器的篩選和定位計(jì)算，所以很多文章上都不推薦使用子選擇符定位樣式。能用.div 的，就盡量不要用.nav ul li a .div 這樣的寫法。
關(guān)于瀏覽器的渲染優(yōu)化，目前我所了解到的就這些。下一章將會(huì)為大家服務(wù)器減壓的幾種主要方法：包括圖片格式介紹及應(yīng)用和壓縮方法；Css sprite的實(shí)際應(yīng)用；服務(wù)器GZIP設(shè)置；減少服務(wù)器請(qǐng)求數(shù)的幾種介紹。
希望廣告高手指正、補(bǔ)充！
發(fā)表請(qǐng)保留：http://www.luzhou6.com 瀘州網(wǎng)夜上原創(chuàng)。
標(biāo)簽： 網(wǎng)站訪問速度 瀏覽器速度優(yōu)化 網(wǎng)站代碼優(yōu)化
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
