iT邦幫忙

DAY 20
1

30 天學會 Web 前端效能優化系列 第 20

[30 天學會 Web 前端效能優化] 20. 瀏覽器 Pre-loader 的功用

  • 分享至 

  • xImage
  •  

各位還記得前面我們有提到 HTML Parser 遇到 Javascript 就會停下來先等待把 Javascript 抓下來並且執行過後,在繼續進行 DOM 的建構嗎?

以下面的 HTML Document 為例,那麼假設今天遇到一段 external JS ,其下面又有一個 external JS ,瀏覽器必須要把第一個抓完、執行完後才 dispatch request 去抓第二個 JS 嗎?

  <link href="layout.css" rel="stylesheet" type="text/css" />
  <script src="scripta.js" />
  <script src="scriptb.js" />


  <p>Hello this is a test page.</p>

過去瀏覽器遇到這樣的狀況的確會停下來等第一個抓完、執行完才抓第二個,但現在的瀏覽器已經針對這個嚴重的 performance issue 進行了一項改進,增加了 Pre-loader 這個東西。當瀏覽器碰到 external JS 的時候依然會停下建構 DOM 的動作,但在 dispatch 一個 request 抓當前的 JS 之後,Pre-loader 就會掃描這一段 external JS 之下的 HTML ,看看有沒有什麼資源是可以先發送 request 事先取得的,諸如圖片、JS 等等,因此現在這個問題已經得到解決了。

詳細資訊可以參閱這篇文章:http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/


上一篇
[30 天學會 Web 前端效能優化] 19. CSS 會阻擋 Javascript 的執行
下一篇
[30 天學會 Web 前端效能優化] 21. 什麼是 Critical rendering path ?
系列文
30 天學會 Web 前端效能優化30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言