瀏覽器渲染速度優化

時間 2019-11-12

標籤瀏覽器渲染速度優化欄目瀏覽器简体版

原文原文鏈接

前言：瀏覽器

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

有一種常見的狀況，一樣的服務器，網站與網站之間的打開速度也千差萬別，這就和網站的製做工藝有至關大的關係；本節重點講一下網站製做工藝優化。服務器

咱們能夠大體將影響網絡速度的因素分爲五個來進行分別優化：網絡

1、服務器硬件配置和設置；佈局

2、服務器的線路及帶寬；學習

3、用戶電腦的配置和設置；優化

4、用戶的線路及帶寬；動畫

5、網站製做工藝。網站

咱們看到，影響網速的因素大概是這五個部分，而每每不少時候，服務器、用戶的電腦配置和線路屬性是沒法選擇的，因此咱們這篇文章不細談帶寬和服務器硬件方面的問題。重點談一下經過網站製做工藝的優化來達到網站極限提速的方法和思路，這其中是不少站長平時徹底忽略的。設計

固然，程序設計不當也會形成網頁速度變慢。可是程序設計的種類和運行環境千差萬別，形成的緣由也十分複雜，本章也沒法一一敘述。個人網站瀘州網採用的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設置；減小服務器請求數的幾種介紹。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。