網頁前端優化:優化瀏覽器頁面渲染
|
2019-06-28 15:28 |
0
如何盡可能縮短頁面在瀏覽器上的渲染時間，文章從以下幾個方面著手:
一，寫成高效率的css樣式編碼
首先，找出瀏覽器解析html代碼的過程:構建一個dom樹，頁面上顯示的所有元素都將被創建到該樹中。每當一個新的元素被添加到dom樹中時，瀏覽器將通過css引擎搜索css樣式表，以找到與該元素匹配的樣式規則，并將它們應用于該元素。css引擎尋找樣式表，并從右到左匹配每個規則。
在理解了這個過程之后，我們可以看到我們可以從兩個方面優化css代碼:1。定義的css樣式規則越少越好，所以從css文件中快速刪除不必要的樣式定義；2.為每個規則優化選擇器的編寫方法，并嘗試讓css引擎一目了然地知道這個規則是否需要應用于當前元素，這樣引擎就可以避免不必要的迂回。
二，防止應用css樣式關系式
Css表達式只能在ie瀏覽器下工作。微軟不建議在ie8之后使用CSS表達式，因為這會嚴重影響頁面性能:無論觸發什么事件，如窗口大小調整事件、鼠標移動等，都會隨時重新計算CSS表達式。
三，把css樣式文檔放到網頁頁面頂端
把外聯或內聯樣式表放到body一部分會危害網頁頁面3D渲染的速率，由于電腦瀏覽器只能在全部樣式表免費下載進行后才會再次下載網頁別的內容。此外，內嵌樣式表(放置在<style>中的樣式可能會導致頁面重新呈現或顯示隱藏頁面中的某些元素。建議不要使用內嵌樣式表。
四，特定網頁頁面照片的規格
指定頁面圖片的大小應符合圖片的實際大小(不要通過指定大小來縮放圖片)，這樣可以避免大小變化引起的頁面結構效果的變化，從而有利于加快頁面渲染速度。
五，網頁頁面頭頂部標出文本文檔編號
html語言文本文檔要以包括文本文檔編號信息內容的數據流方法在互聯網間傳送。頁面的編碼信息通常在超文本傳輸協議響應的標題信息中或者在文檔中的超文本標記中表示。客戶端瀏覽器只有在確定頁面代碼后才能正確呈現頁面，所以在繪制頁面或執行任何javascript代碼之前，大多數瀏覽器(ie6、ie7和ie8除外)都會緩沖某個字節的數據來查找編碼信息，并且預緩沖的字節數在不同的瀏覽器之間是不同的。如果瀏覽器在接收到設定數量的預緩沖數據后沒有找到頁面的編碼信息，它將根據每個瀏覽器指定的默認編碼開始渲染頁面。如果此時再次獲得頁面的編碼信息，并且該信息與當前使用的編碼不一致，則必須重新呈現整個頁面，并且在某些情況下，甚至可能需要重新獲得數據。因此，對于大小大于1KB的頁面(1KB是根據每個瀏覽器中的測試結果預先緩沖的最大數據量)，應盡早標記編碼信息。
最佳化建議:
a，盡可能在http報頭信息中標明頁碼(這需要在服務器端設定)。像火狐瀏覽器一樣，如果編碼信息是在超文本傳輸協議報頭信息中獲得的，那么預緩沖的數據會更少，以減少不必要的數據緩沖時間；
b、在html的<head>部分標明代碼信息
c,要習慣性給文本文檔特定編號；
d、分配給頁面的代碼應符合頁面的實際代碼；如果您在網頁標題信息和網頁標簽中都指定了編碼，請確保編碼信息是一致的。
