盗墓笔记小说下载,完美世界有声小说,完美世界小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

HTML5可見(jiàn)性API以及頁(yè)面預(yù)渲染

不管是桌面還是Web，減少UI延遲一直是增強(qiáng)用戶體驗(yàn)的關(guān)鍵。對(duì)于原生應(yīng)用來(lái)說(shuō)，減少延遲的最佳辦法就是解耦UI和控制線程，以避免耗時(shí)任務(wù)造成UI阻塞，而對(duì)于Web，情況有點(diǎn)不同：因?yàn)槲覀兊腏avascript運(yùn)行時(shí)都是單線程的，我們沒(méi)法借助額外的線程來(lái)降低延遲，而不得不依賴事件驅(qū)動(dòng)的編程模型，甚至更糟，即使運(yùn)算是在本地進(jìn)行的，同服務(wù)器的一次交互也可以很輕易的就消耗掉幾百毫秒。

創(chuàng)新互聯(lián)建站是一家專業(yè)從事網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)建站依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

沒(méi)什么好吃驚的，過(guò)去幾年我們發(fā)明了無(wú)數(shù)的Javascript UI框架，全都是異步的，全部把精力放在如何降低交互延遲。理論上，這些點(diǎn)子都不錯(cuò)，但是在實(shí)際應(yīng)用中，他們都有各自的副作用，比如這些#!，我想大家一定都寫(xiě)過(guò)這種快速消耗客戶端CPU及電池壽命的setTimeout代碼。

實(shí)際上，因?yàn)闉g覽器的虛擬機(jī)是一個(gè)共享資源，我們都不可避免的要遭遇這樣的問(wèn)題：如果所有應(yīng)用都融洽相處，那么大家都可以得到最佳體驗(yàn)，但是我們并沒(méi)有足夠的動(dòng)力去這么做。并且問(wèn)題是，直到最近我們甚至都沒(méi)有一個(gè)針對(duì)這個(gè)問(wèn)題的工具!頁(yè)面可見(jiàn)性API是第一個(gè)針對(duì)這個(gè)問(wèn)題的HTML5提案，再加上瀏覽器的預(yù)渲染功能也試圖幫助我們減少Web應(yīng)用的網(wǎng)絡(luò)延遲——下面就讓我們來(lái)一探究竟吧!

瀏覽器預(yù)讀取 vs 預(yù)渲染

渲染一個(gè)頁(yè)面除了頁(yè)面本身的HTML內(nèi)容，往往還需要獲取幾十個(gè)額外的資源，如果你看看你的瀏覽器的debug控制臺(tái)，就會(huì)發(fā)現(xiàn)一個(gè)頁(yè)面花10幾秒完成渲染是司空見(jiàn)慣的事情，幸運(yùn)的是，瀏覽器已經(jīng)為我們提供了一些手段來(lái)讓讀取更加快速——并行下載，高度優(yōu)化的渲染引擎，以及對(duì)于Javascript執(zhí)行速度永無(wú)停歇的優(yōu)化，但不管怎么說(shuō)，這些都還不足以擊敗“原生體驗(yàn)”。

另外，服務(wù)器也可以幫到我們：像SPDY這樣的新協(xié)議就致力于減少抓取多個(gè)資源的網(wǎng)絡(luò)延遲，并且甚至還可以讓服務(wù)端自動(dòng)推送相關(guān)的頁(yè)面資源。但是讓我們想想如果你知道用戶下一步要點(diǎn)擊什么頁(yè)面，我們是不是可以做點(diǎn)什么?Firefox 3.5就提供了一個(gè)預(yù)讀取API讓我們可以通知瀏覽器預(yù)先抓取后續(xù)請(qǐng)求可能會(huì)用到的資源：

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  Link: ; rel=prefetch

預(yù)讀取是一個(gè)很簡(jiǎn)單的優(yōu)化，但是它需要你明確的指定每一個(gè)單獨(dú)的資源，而不是簡(jiǎn)單的列出下一個(gè)可能的被訪問(wèn)的URL，所以很難在用戶體驗(yàn)上帶來(lái)大的改善。

而預(yù)渲染就可以很好的解決這個(gè)問(wèn)題：同預(yù)讀取相比，預(yù)渲染不需要指定單個(gè)資源，取而代之，瀏覽器會(huì)抓取下一個(gè)請(qǐng)求的整個(gè)頁(yè)面并進(jìn)行預(yù)渲染，并且直到你點(diǎn)擊那個(gè)鏈接，這個(gè)頁(yè)面都是不可見(jiàn)的，大約1個(gè)月前，Webkit已經(jīng)增加了對(duì)預(yù)渲染的支持，并且Google也已經(jīng)發(fā)布了Instant Pages的原型(視頻需翻墻)：

預(yù)渲染的利與弊

就目前來(lái)看，預(yù)渲染API還存在很大的限制：整個(gè)瀏覽器只能預(yù)渲染一個(gè)頁(yè)面，并且每個(gè)tab只能向預(yù)渲染隊(duì)列中加入一個(gè)頁(yè)面，并且，預(yù)加載整個(gè)頁(yè)面也會(huì)增加服務(wù)器和客戶端的負(fù)擔(dān)，因此你需要確定你真的需要它，舉個(gè)例子，對(duì)于Google Web搜索來(lái)說(shuō)，它的搜索結(jié)果頁(yè)就可以用到預(yù)渲染，因?yàn)樗麄兛梢苑浅４_信你有很大的概率會(huì)點(diǎn)擊排名第一的搜索結(jié)果。

另外，因?yàn)槲覀儸F(xiàn)在是預(yù)先渲染整個(gè)頁(yè)面(HTML,CSS以及JS)，這也會(huì)對(duì)頁(yè)面上的交互性內(nèi)容造成影響，如果你的頁(yè)面對(duì)預(yù)渲染一無(wú)所知，預(yù)先加載的頁(yè)面可能會(huì)白白的浪費(fèi)我們的CPU，比如向廣告服務(wù)器發(fā)送請(qǐng)求輪換廣告頁(yè)面，而用戶實(shí)際上根本就看不到這些廣告，為了解決這個(gè)問(wèn)題，Webkit也增加了頁(yè)面可見(jiàn)性API：

 
 
 
 
  
  
  
  function handleVisibilityChange(){    
  
  
    if(document.webkitHidden){    
  
  
      pausePageJavascript();    
  
  
    }else{    
  
  
      startPageJavascript();    
  
  
    }}    
  
  
     
  
  
  document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);

webkitHidden屬性告訴我們當(dāng)前頁(yè)面的狀態(tài)，這就解決了可見(jiàn)性的問(wèn)題，并且webkitvisibilitychange事件還為我們提供了另外一個(gè)可能：客戶端可以很簡(jiǎn)單的通過(guò)這個(gè)事件判斷當(dāng)前頁(yè)面所在tab是否在后臺(tái)運(yùn)行，這有什么用呢?想象你的程序如果需要定期輪詢服務(wù)器去獲取更新，有了可見(jiàn)性API，當(dāng)你的頁(yè)面進(jìn)入后臺(tái)運(yùn)行時(shí)，你就可以很容易的暫?；蚴墙档投〞r(shí)器的觸發(fā)頻率，從而節(jié)省客戶端和服務(wù)器的資源。

最小化網(wǎng)絡(luò)延遲

預(yù)讀取以及可見(jiàn)性API都還在開(kāi)發(fā)中，但我們還是很高興看到有越來(lái)越多的客戶端工具來(lái)幫助web開(kāi)發(fā)者降低網(wǎng)絡(luò)延遲帶來(lái)的影響，有了這些API，我們就不需要再依賴異步Javascript，如果你有一個(gè)多頁(yè)面的表單，你就可以在webkit中預(yù)先渲染下一頁(yè)的表單，讓客戶端可以得到實(shí)時(shí)響應(yīng)。

盡管像Chrome這樣的瀏覽器已經(jīng)對(duì)后臺(tái)運(yùn)行的Tab做了CPU降權(quán)處理，但有個(gè)客戶端API可以判斷程序是在前臺(tái)還是后臺(tái)運(yùn)行總是會(huì)有好處，讓我們期待Firefox，Opera以及IE也盡快增加這個(gè)功能吧!

原文：http://heikezhi.com/2011/07/06/html5-visibility-api-page-pre-rendering/

本文名稱：HTML5可見(jiàn)性API以及頁(yè)面預(yù)渲染
標(biāo)題鏈接：http://m.fisionsoft.com.cn/article/cdgcpis.html

新聞中心

其他資訊