整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web 性能優化:使用 CSS font-display 控制字體加載和替換

          作者 | 張旭乾

          事跟我說他用jQuery取不到頁面上隱藏元素input的值,他的html頁面大概內容如下。

          <!DOCTYPE html>
          <html lang="zh">
           
          <head>
          	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
          	<title>淺談Html頁面內容執行順序</title>
          	<script type="text/javascript">
          		var userId = $('#hiddenUserId').val();
          		var contextPath = $('#hiddenContextPath').val();
          		var userName = $('#hiddenUserName').val();
          	</script>
          </head>
           
          <body>
          	<input type="hidden" id="hiddenUserId" value="101" />
          	<input type="hidden" id="hiddenContextPath" value="/web" />
          	<input type="hidden" id="hiddenUserName" value="小明" />
          </body>
           
          </html>

          頁面中的JS腳本在head中,JS腳本要讀取的input在body中。瀏覽器對html頁面內容的加載是順序加載,也就是在html頁面中前面先加載,因此當加載到JS腳本時,input還沒有加載到瀏覽器中。JS是一種解釋性的腳本,也是從上而下順序執行,由于這段JS代碼是立即執行的,所以當JS在執行的時候,讀取不到input的值。

          最直接的修改方法是把JS放到網頁的最下面執行。

          <!DOCTYPE html>
          <html lang="zh">
           
          <head>
          	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
          	<title>淺談Html頁面內容執行順序</title>	
          </head>
           
          <body>
          	<input type="hidden" id="hiddenUserId" value="101" />
          	<input type="hidden" id="hiddenContextPath" value="/web" />
          	<input type="hidden" id="hiddenUserName" value="小明" />
          	
          	<script type="text/javascript">
          		var userId = $('#hiddenUserId').val();
          		var contextPath = $('#hiddenContextPath').val();
          		var userName = $('#hiddenUserName').val();
          	</script>
          </body>
           
          </html>

          把JS放到網頁的最下面,這樣在JS執行的時候,網頁內容都已經加載完畢。把JS放在網頁的最下面方法并不是最好的解決方法,大部分情況JS并不是總能放在網頁的最下面。這時可以用window的onload事件,onload事件在整個頁面都加載完成后才觸發,可以把JS腳本放在onload里面執行。不同瀏覽器onload事件添加方式也不一樣。

          IE下事件:

          window.attachEvent('onload', function(){
          			var userId = $('#hiddenUserId').val();
          			var contextPath = $('#hiddenContextPath').val();
          			var userName = $('#hiddenUserName').val();
          		});

          Chrome/Firefox等DOM標準事件:

          window.addEventListener('load', function(){
          			var userId = $('#hiddenUserId').val();
          			var contextPath = $('#hiddenContextPath').val();
          			var userName = $('#hiddenUserName').val();
          		});

          由于不同瀏覽器的事件添加方式不一樣,jQuery為我們提供了通用的初始化方法,該方法在頁面加載完成時觸發。

          $(function(){
          			var userId = $('#hiddenUserId').val();
          			var contextPath = $('#hiddenContextPath').val();
          			var userName = $('#hiddenUserName').val();
          		});

          上面方法本質就是添加onload監聽事件。

          最終修改后的頁面

          能大家都知道,js執行會阻塞DOM樹的解析和渲染,那么css加載會阻塞DOM樹的解析和渲染嗎?接下來,我就來對css加載對DOM樹的解析和渲染的影響做一個測試。

          為了完成本次測試,先來科普一下,如何利用chrome來設置下載速度

          . 打開chrome控制臺(按下F12),可以看到下圖,重點在我畫紅圈的地方

          點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項

          . 點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項

          這樣,我們對資源的下載速度上限就會被限制成20kb/s,好,那接下來就進入我們的正題

          . 這樣,我們對資源的下載速度上限就會被限制成20kb/s,好,那接下來就進入我們的正題

          css加載會阻塞DOM樹的解析渲染嗎?

          用代碼說話:

          <!DOCTYPE html>
          <html lang="en">
           <head>
           <title>css阻塞</title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <style>
           h1 {
           color: red !important
           }
           </style>
           <script>
           function h () {
           console.log(document.querySelectorAll('h1'))
           }
           setTimeout(h, 0)
           </script>
           <link  rel="stylesheet">
           </head>
           <body>
           <h1>這是紅色的</h1>
           </body>
          </html>
          

          假設: css加載會阻塞DOM樹解析和渲染

          假設結果: 在bootstrap.css還沒加載完之前,下面的內容不會被解析渲染,那么我們一開始看到的應該是白屏,h1不會顯示出來。并且此時console.log的結果應該是一個空數組。

          實際結果:如下圖

          css會阻塞DOM樹解析?

          由上圖我們可以看到,當css還沒加載完成的時候,h1并沒有顯示,但是此時控制臺輸出如下

          可以得知,此時DOM樹至少已經解析完成到了h1那里,而此時css還沒加載完成,也就說明,css并不會阻塞DOM樹的解析。

          css加載會阻塞DOM樹渲染?

          由上圖,我們也可以看到,當css還沒加載出來的時候,頁面顯示白屏,直到css加載完成之后,紅色字體才顯示出來,也就是說,下面的內容雖然解析了,但是并沒有被渲染出來。所以,css加載會阻塞DOM樹渲染。

          個人對這種機制的評價

          其實我覺得,這可能也是瀏覽器的一種優化機制。因為你加載css的時候,可能會修改下面DOM節點的樣式,如果css加載不阻塞DOM樹渲染的話,那么當css加載完之后,DOM樹可能又得重新重繪或者回流了,這就造成了一些沒有必要的損耗。所以我干脆就先把DOM樹的結構先解析完,把可以做的工作做完,然后等你css加載完之后,在根據最終的樣式來渲染DOM樹,這種做法性能方面確實會比較好一點。

          css加載會阻塞js運行嗎?

          由上面的推論,我們可以得出,css加載不會阻塞DOM樹解析,但是會阻塞DOM樹渲染。那么,css加載會不會阻塞js執行呢?

          同樣,通過代碼來驗證.

          <!DOCTYPE html>
          <html lang="en">
           <head>
           <title>css阻塞</title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <script>
           console.log('before css')
           var startDate = new Date()
           </script>
           <link  rel="stylesheet">
           </head>
           <body>
           <h1>這是紅色的</h1>
           <script>
           var endDate = new Date()
           console.log('after css')
           console.log('經過了' + (endDate -startDate) + 'ms')
           </script>
           </body>
          </html>
          

          假設: css加載會阻塞后面的js運行

          預期結果: 在link后面的js代碼,應該要在css加載完成后才會運行

          實際結果:

          由上圖我們可以看出,位于css加載語句前的那個js代碼先執行了,但是位于css加載語句后面的代碼遲遲沒有執行,直到css加載完成后,它才執行。這也就說明了,css加載會阻塞后面的js語句的執行。詳細結果看下圖(css加載用了5600+ms):

          結論

          由上所述,我們可以得出以下結論:

          1. css加載不會阻塞DOM樹的解析
          2. css加載會阻塞DOM樹的渲染
          3. css加載會阻塞后面js語句的執行、

          因此,為了避免讓用戶看到長時間的白屏時間,我們應該盡可能的提高css加載速度,比如可以使用以下幾種方法:

          1. 使用CDN(因為CDN會根據你的網絡狀況,替你挑選最近的一個具有緩存內容的節點為你提供資源,因此可以減少加載時間)
          2. 對css進行壓縮(可以用很多打包工具,比如webpack,gulp等,也可以通過開啟gzip壓縮)
          3. 合理的使用緩存(設置cache-control,expires,以及E-tag都是不錯的,不過要注意一個問題,就是文件更新后,你要避免緩存而帶來的影響。其中一個解決防范是在文件名字后面加一個版本號)
          4. 減少http請求數,將多個css文件合并,或者是干脆直接寫成內聯樣式(內聯樣式的一個缺點就是不能緩存)

          原理解析

          那么為什么會出現上面的現象呢?我們從瀏覽器的渲染過程來解析下。

          不用瀏覽器使用的內核不同,所以他們的渲染過程也是不一樣的。目前主要有兩個:

          webkit渲染過程

          Gecko渲染過程

          從上面兩個流程圖我們可以看出來,瀏覽器渲染的流程如下:

          1. HTML解析文件,生成DOM Tree,解析CSS文件生成CSSOM Tree
          2. 將Dom Tree和CSSOM Tree結合,生成Render Tree(渲染樹)
          3. 根據Render Tree渲染繪制,將像素渲染到屏幕上。

          從流程我們可以看出來

          1. DOM解析和CSS解析是兩個并行的進程,所以這也解釋了為什么CSS加載不會阻塞DOM的解析。
          2. 然而,由于Render Tree是依賴于DOM Tree和CSSOM Tree的,所以他必須等待到CSSOM Tree構建完成,也就是CSS資源加載完成(或者CSS資源加載失敗)后,才能開始渲染。因此,CSS加載是會阻塞Dom的渲染的。
          3. 由于js可能會操作之前的Dom節點和css樣式,因此瀏覽器會維持html中css和js的順序。因此,樣式表會在后面的js執行前先加載執行完畢。所以css會阻塞后面js的執行。

          DOMContentLoaded

          對于瀏覽器來說,頁面加載主要有兩個事件,一個是DOMContentLoaded,另一個是onLoad。而onLoad沒什么好說的,就是等待頁面的所有資源都加載完成才會觸發,這些資源包括css、js、圖片視頻等。

          而DOMContentLoaded,顧名思義,就是當頁面的內容解析完成后,則觸發該事件。那么,正如我們上面討論過的,css會阻塞Dom渲染和js執行,而js會阻塞Dom解析。那么我們可以做出這樣的假設

          1. 當頁面只存在css,或者js都在css前面,那么DomContentLoaded不需要等到css加載完畢。
          2. 當頁面里同時存在css和js,并且js在css后面的時候,DomContentLoaded必須等到css和js都加載完畢才觸發。

          我們先對第一種情況做測試:

          <!DOCTYPE html>
          <html lang="en">
           <head>
           <title>css阻塞</title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <script>
           document.addEventListener('DOMContentLoaded', function() {
           console.log('DOMContentLoaded');
           })
           </script>
           <link  rel="stylesheet">
           </head>
           <body>
           </body>
          </html>
          

          實驗結果如下圖:

          從動圖我們可以看出來,css還未加載完,就已經觸發了DOMContentLoaded事件了。因為css后面沒有任何js代碼。

          接下來我們對第二種情況做測試,很簡單,就在css后面加一行代碼就行了

          <!DOCTYPE html>
          <html lang="en">
           <head>
           <title>css阻塞</title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <script>
           document.addEventListener('DOMContentLoaded', function() {
           console.log('DOMContentLoaded');
           })
           </script>
           <link  rel="stylesheet">
           <script>
           console.log('到我了沒');
           </script>
           </head>
           <body>
           </body>
          </html>
          

          實驗結果如下圖:

          我們可以看到,只有在css加載完成后,才會觸發DOMContentLoaded事件。因此,我們可以得出結論:

          1. 如果頁面中同時存在css和js,并且存在js在css后面,則DOMContentLoaded事件會在css加載完后才執行。
          2. 其他情況下,DOMContentLoaded都不會等待css加載,并且DOMContentLoaded事件也不會等待圖片、視頻等其他資源加載。

          以上,就是所有內容。歡迎關注我們的專欄,接收最新最有趣的前端內容。

          本文由云+社區發表。作者:嘿嘿嘿


          主站蜘蛛池模板: 亚洲国产美国国产综合一区二区 | 国产一区风间由美在线观看| 成人精品一区久久久久| jazzjazz国产精品一区二区| 久久精品无码一区二区无码| 激情综合丝袜美女一区二区| 激情亚洲一区国产精品| 精品伦精品一区二区三区视频 | 一区一区三区产品乱码| 亚洲免费一区二区| 国模精品一区二区三区视频| 无码国产精品一区二区免费式芒果 | 狠狠色婷婷久久一区二区| 免费无码一区二区三区蜜桃大| 国产精品一区二区av| 午夜视频一区二区三区| 精品无码一区二区三区电影| 国产在线一区二区三区| 久久AAAA片一区二区| 日韩精品一区二区三区不卡| 成人毛片一区二区| 中文字幕av一区| 无码人妻一区二区三区在线视频 | 亚洲国产AV无码一区二区三区| 国产精品特级毛片一区二区三区| 久久免费视频一区| 一区二区三区91| 无码欧精品亚洲日韩一区夜夜嗨| 亚洲色无码专区一区| 日韩最新视频一区二区三| 91精品国产一区二区三区左线| 久久亚洲一区二区| 日本欧洲视频一区| 国产精品视频一区二区噜噜| 狠狠色婷婷久久一区二区| 国产免费一区二区视频| 国产亚洲福利精品一区| 无码人妻精品一区二区三| 国产一区二区在线看| 无码人妻久久一区二区三区| 色窝窝无码一区二区三区|