搜尋
首頁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 09:00 AM

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

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

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

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

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

如何通过优化PHP与MySQL的通信来提高性能如何通过优化PHP与MySQL的通信来提高性能May 11, 2023 am 10:33 AM

随着互联网的不断发展,越来越多的网站和应用程序采用了PHP和MySQL技术来支持其后台服务。尽管这些技术已经被证明是可靠的,但是在高并发访问的情况下,PHP和MySQL通信不免会出现一些性能问题。为了提高系统的响应速度和稳定性,优化PHP和MySQL的通信成为了必不可少的一环。以下是一些建议,希望可以通过优化PHP和MySQL的通信来提高性能。使用防缓存技术

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

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

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.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

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

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

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

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器