搜尋
首頁web前端html教學了解html頁面的渲染流程以學習前端的效能最佳化(續)_HTML/Xhtml_網頁製作

昨天晚上寫了一篇關於瀏覽器的渲染過程的隨筆,但只是通過一小段代碼解釋了一下,並沒有通過瀏覽器測試,說服力不夠,而且還有很多不完善的地方,今天在瀏覽器中測試了一下,並把測驗的結果分享給大家,測試過程可能有點亂,希望大家能理解。

測試瀏覽器:Chrome v24.0.1312.52 m,Firefox v18.0,Opera v12.12。

在WebKit核心中,網頁在顯示的時候會有一個解析器(Parser)去解析html文檔,然後去產生渲染樹(Render Tree),最後渲染出頁面。這是在一個線程中進行的,所以兩者不會同時進行。

我分為了以下兩種情況,並分別在不同的瀏覽器中進行測試。

樣式檔案在head裡,其他的連個腳本檔案一個在body的開始部分,一個在body的底部。樣式檔案在body的開始部分,腳本檔案的位置和上面的一樣。

測試的結果是這樣的,在chrome中,樣式檔案的位置會影響到圖片的下載時間,而在另外兩個瀏覽器中這兩種情況沒有區別。下面是詳細的測試過程。

測試一:樣式檔案在head裡,其他的連個腳本檔案一個在body的開始部分,一個在body的底部。

測試的程式碼:

複製程式碼
程式碼如下:


程式碼如下:





測試頁




Hi, there!





Hi, again!

了解html頁面的渲染流程以學習前端的效能最佳化(續)_HTML/Xhtml_網頁製作
 Engels
了解html頁面的渲染流程以學習前端的效能最佳化(續)_HTML/Xhtml_網頁製作


1、在Chrome中的測試情況

我在瀏覽器中開啟頁面後,迅速將網頁截了一張圖,如下所示(點擊可以查看大圖,下同):

從上圖可以看出,test.htm 文件已經載入完成,頁面上還沒有顯示任何東西,example.css處於pending狀態,但是,位於最底部的last.js卻載入完成了。這說明chrome進行了預先加載,提前下載,放在了瀏覽器的快取裡了。雖然last.js已經載入完成,但還沒有被執行,因為他前面的樣式檔案會阻塞腳本的執行。

接下來,當example.css載入完成後,Hi there!顯示在了螢幕上,瀏覽器的截圖如下所示

透過網路請求可以看出,example.css已經載入完成,other.js處於pending狀態,但此時script標籤底下的三張圖片已經下載下來了,這是由瀏覽器的預先載入的功能所致。但由於瀏覽器的渲染被other.js腳本阻塞住,所以,這三張圖片連同它上面的「Hi again」都不會顯示出來。另外,此時last.js中的程式碼還沒有執行。

接下來,當other.js載入完成之後,瀏覽器就會建立出渲染樹,顯示出“Hi again”,並顯示出圖片。由於last.js先前已經下載,所以last.js會立刻執行。整個渲染過程完成。如下圖:

 

由此看出,Chrome會預先載入body中的腳本資源(樣式檔案沒有測試),由JavaScript腳本動態載入的JS不會影響圖片檔案的下載,但是會影響它下面圖片的渲染。

 

2、Firefox中的測試結果

    在Firefox瀏覽中開啟頁面後快速截圖,如下所示:

和在Chrome中有很明顯的不同,"Hi there!",已經顯示在了頁面上,但是背景色是白色,說明此時樣式文件還沒有下載下來。而在Chrome中是不會顯示的,要等到樣式檔載入完成。

接下來,當整個頁面載入完成之後,截圖如下所示:

從請求的瀑布流中可以看出,和Chrome類似,瀏覽器對last.js進行了預加載,和Chrome中不同的是,火狐沒有對圖片進行預加載,而是等到other .js載入完成之後再進行的載入。

火狐中,樣式文件並沒有影響文檔的渲染(最典型的現象就是,網頁一開始顯示的很亂,沒有樣式,當樣式文件下載下來之後就顯示正常了),在body中,由JavaScript動態載入的JS檔案會阻塞它後面的圖片的下載。

3、在Opera瀏覽器

經過在Opera中測試,發現Opera瀏覽器比較“守規矩”,所有的資源都是按順序加載的,並沒有出現所謂的預先加載,下面是一張總的效果圖:

Opera中,樣式檔案會阻塞頁面的渲染,這和Chrome類似,但是,有Opera的請求瀑布流可以看出,頁面中的所有的資源都是按部就班的加載的,other.js提前於last .js載入。沒有預加載。

測試二、樣式檔案在body的開始部分,腳本檔案的位置和測試一的一樣。

<br><div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode91'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode91">
<br><br> <br> <br>     <title>测试页面</title>
<br> <br> <br>     <link rel="stylesheet" type="text/css" href="example.aspx?sleep=3">
<br>     <div>
<br>         Hi, there!</div>
<br> <br>     <script type="text/javascript"><br />         document.write("<script src='other.aspx?sleep=5'>" + "ipt>");<br />     </script><br> <br>     <div>
<br>         Hi, again!</div>
<br>     <img src="/static/imghwm/default1.png" data-src="images/marx.jpg" class="lazy" alt="了解html頁面的渲染流程以學習前端的效能最佳化(續)_HTML/Xhtml_網頁製作"><br>     <img src="/static/imghwm/default1.png" data-src="images/engels.jpg" class="lazy" alt="Engels"><br>     <img src="/static/imghwm/default1.png" data-src="images/了解html頁面的渲染流程以學習前端的效能最佳化(續)_HTML/Xhtml_網頁製作.jpg" class="lazy" alt="了解html頁面的渲染流程以學習前端的效能最佳化(續)_HTML/Xhtml_網頁製作"><br> <br>     <script src="last.aspx" type="text/javascript"></script><br> <br> <br> <br>
</div><br>经过测试,发现在火狐和Opera中,结果和测试一的一样,而在Chrome中稍微有些不同,在测试一中,图片要等到head中样式文件加载完之后才会下载,但是测试二中会和样式文件并行下载,如下图:

總結

預先載入確實是存在的,但是在Opera中沒有發現;Chrome的圖片可以和body中的樣式檔案並行下載,但是不能和head中樣式檔案並行下載。腳本的執行要在它前面的樣式檔案載入完之後。 Chrome和Opera中,未載入完的資源會阻塞它後面元素的渲染,而火狐不會。測試結果可能和瀏覽器版本有關。

看完這些,大家是不是覺得有些亂了,我想盡可能的表達明白,但是限於我水平有限,只能做到這了,不妥之處希望大家指出,大家也可以親自做一下試驗看看。

(完)^_^

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
深入了解content-visibility属性,聊聊怎么用它优化渲染性能深入了解content-visibility属性,聊聊怎么用它优化渲染性能Jul 18, 2022 am 11:19 AM

本篇文章带大家了解一下CSS content-visibility属性,聊聊使用该属性怎么优化渲染性能,希望对大家有所帮助!

如何通过取消MySQL自动提交来提高性能如何通过取消MySQL自动提交来提高性能May 11, 2023 am 08:15 AM

MySQL是一种流行的关系型数据库管理系统,旨在提供高效、可靠、灵活的数据存储和处理方案。然而,MySQL在自动提交事务方面存在一些缺点,这可能会降低其性能。在这篇文章中,我们将介绍如何通过取消MySQL自动提交来提高其性能。一、什么是MySQL自动提交?MySQL自动提交是指对于任何一条SQL语句,默认情况下都会自动开启一个事务,并在执行完该语句后立即提交

如何通过MySQL对DISTINCT优化来提高性能如何通过MySQL对DISTINCT优化来提高性能May 11, 2023 am 08:12 AM

MySQL是目前应用广泛的关系型数据库之一。在大数据量存储与查询中,优化数据库性能是至关重要的。其中,DISTINCT是常用的去重查询操作符。本文将介绍如何通过MySQL对DISTINCT优化来提高数据库查询性能。一、DISTINCT的原理及缺点DISTINCT关键字用于从查询结果中去除重复行。在大量数据的情况下,查询中可能存在多个重复值,导致输出数据冗余,

通过使用MySQL查询缓存提高性能通过使用MySQL查询缓存提高性能May 11, 2023 am 08:31 AM

随着数据量的增加和访问量的增加,数据库的性能问题已经成为很多网站的瓶颈。在许多情况下,数据库查询是网站中最耗费资源的操作之一。MySQL作为一种开源的关系型数据库管理系统,已经成为许多网站的首选数据库。在MySQL中,查询缓存是一种可以显著提高查询性能的缓存机制。本文将介绍MySQL查询缓存的工作原理,并提供一些实用建议,可以帮助您更好地使用MySQL查询缓

如何使用MySQL的慢查询日志来优化性能如何使用MySQL的慢查询日志来优化性能May 11, 2023 am 09:00 AM

随着数据量的增加和应用的复杂性,数据库的性能成为了一个越来越重要的问题。MySQL作为一款流行的关系型数据库管理系统,在优化性能方面也提供了许多工具和方法。其中,使用慢查询日志对MySQL进行性能优化是一种非常实用的方法。本文将介绍如何使用MySQL的慢查询日志来优化性能。一、什么是慢查询日志慢查询日志是MySQL中的一种日志记录机制,它会记录执行时间超过某

如何通过MySQL的程序缓存来优化性能如何通过MySQL的程序缓存来优化性能May 11, 2023 am 09:40 AM

MySQL是目前最流行的关系型数据库管理系统之一,被广泛应用于各种Web应用和企业级系统中。然而,随着应用规模的不断增大,数据库性能问题也成为了开发人员和系统管理员必须面对的挑战。其中,数据库查询是性能问题中的重点,因为它们通常是系统瓶颈所在。为了解决查询性能问题,MySQL提供了许多优化技巧和工具。其中一个重要的工具就是程序缓存(querycache),

如何通过MySQL的锁机制来提高性能如何通过MySQL的锁机制来提高性能May 10, 2023 pm 11:21 PM

在MySQL数据库中,锁机制是至关重要的,它可以帮助控制并发访问的数据的数量和方式。通过正确的锁定策略和优化,可以提高MySQL的性能和可靠性。在本文中,我将详细介绍MySQL的锁机制并提供一些提高性能的技巧和建议。MySQL中的锁类型MySQL提供了多种锁类型,这些锁类型的主要目的是使数据的访问变得更加安全和有效。这些锁类型主要分为以下几类:表锁(Tabl

如何通过MySQL对UNION优化来提高性能如何通过MySQL对UNION优化来提高性能May 11, 2023 pm 05:40 PM

在许多数据库应用程序中,我们都会面临需要整合来自多个数据源的数据的情况。MySQL的UNION语句就是一种用来解决这种情况的方式,它允许我们将两个或多个SELECT语句的结果集合并为一个。虽然这是一个非常方便的功能,但如果不加以优化,UNION语句也可能对系统产生性能问题。本文将探讨如何通过MySQL对UNION优化来提高性能。使用UNIONALL在使用U

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境