国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

<link>標(biāo)簽的幾個用法，幫助提高頁面性能

tracymac7 / 2785人閱讀

摘要：最常見的用法，是用來鏈接一個外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。可以幫助我們提高頁面的性能。

寫在前面 
本文首發(fā)于公眾號：符合預(yù)期的CoyPan

HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見的用法，是用來鏈接一個外部的樣式表，比如：

link標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。

link標(biāo)簽的使用

來看一下link標(biāo)簽除了鏈接外部樣式表之外的一些使用場景。

DNS Prefetch

DNS預(yù)解析。

這個大多數(shù)人都知道，用法也很簡單：



DNS解析，簡單來說就是把域名轉(zhuǎn)化為ip地址。我們在網(wǎng)頁里使用域名請求其他資源的時候，都會先被轉(zhuǎn)化為ip地址，再發(fā)起鏈接。dns-prefeth使得轉(zhuǎn)化工作提前進(jìn)行了，縮短了請求資源的耗時。


什么時候使用呢？當(dāng)我們頁面中使用了其他域名的資源時，比如我們的靜態(tài)資源都放在cdn上，那么我們可以對cdn的域名進(jìn)行預(yù)解析。瀏覽器的支持情況也不錯。




Preconnect


預(yù)鏈接。


使用方法如下：






我們訪問一個站點(diǎn)時，簡單來說，都會經(jīng)過以下的步驟：



DNS解析


TCP握手


如果為Https站點(diǎn)，會進(jìn)行TLS握手



使用preconnect后，瀏覽器會針對特定的域名，提前初始化鏈接(執(zhí)行上述三個步驟)，節(jié)省了我們訪問第三方資源的耗時。需要注意的是，我們一定要確保preconnect的站點(diǎn)是網(wǎng)頁必需的，否則會浪費(fèi)瀏覽器、網(wǎng)絡(luò)資源。


瀏覽器的支持情況也不錯：




Prefetch


預(yù)拉取。


使用方法如下：






link標(biāo)簽里的as參數(shù)可以有以下取值：


audio: 音頻文件
video: 視頻文件  
Track: 網(wǎng)絡(luò)視頻文本軌道 
script: javascript文件
style: css樣式文件
font: 字體文件   
image: 圖片   
fetch: XHR、Fetch請求
worker: Web workers
embed: 多媒體請求 
object:  多媒體請求
document: 網(wǎng)頁

預(yù)拉取用于標(biāo)識從當(dāng)前網(wǎng)站跳轉(zhuǎn)到下一個網(wǎng)站可能需要的資源，以及本網(wǎng)站應(yīng)該獲取的資源。這樣可以在將來瀏覽器請求資源時提供更快的響應(yīng)。


如果正確使用了預(yù)拉取，那么用戶在從當(dāng)前頁面前往下一個頁面時，可以很快得到響應(yīng)。但是如果錯誤地使用了預(yù)拉取，那么瀏覽器就會下載額外不需要的資源，影響頁面性能，并且造成網(wǎng)絡(luò)資源浪費(fèi)。


這里需要注意的是，使用了prefetch，資源僅僅被提前下載，下載后不會有任何操作，比如解析資源。




Prerender


預(yù)渲染。




prerender比prefetch更進(jìn)一步。不僅僅會下載對應(yīng)的資源，還會對資源進(jìn)行解析。解析過程中，如果需要其他的資源，可能會直接下載這些資源。這樣，用戶在從當(dāng)前頁面跳轉(zhuǎn)到目標(biāo)頁面時，瀏覽器可以更快的響應(yīng)。


瀏覽器的支持情況如下：



Resource Hints

上面的四種用法，其實(shí)就是：Resource Hints。


Resource Hints ，翻譯過來是【資源提示】。w3c的概括為：


This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.
此規(guī)范定義HTML鏈接元素（）的DNS預(yù)取、預(yù)連接、預(yù)取和預(yù)渲染關(guān)系。這些原語使開發(fā)人員和生成或傳遞資源的服務(wù)器能夠幫助用戶代理決定應(yīng)該連接到哪個源，以及應(yīng)該獲取哪些資源，并進(jìn)行預(yù)處理以提高頁面性能。




更多詳細(xì)內(nèi)容，可以在w3c的草案中查看：https://www.w3.org/TR/resourc...

Resource Hints使用方法

除了上面介紹的使用link標(biāo)簽的使用方法，還可以直接通過http header的方式使用。例如可以使用下面的header:


Link: ; rel=dns-prefetch
Link: ; rel=preconnect
Link: ; rel=prerender;
Link: ; rel=prefetch; as=image;


還可以在javascript使用：


var hint = document.createElement("link");
hint.rel = "prefetch";
hint.as = "document";
hint.href = "/article/part3.html";
document.head.appendChild(hint);

Resource Hints總結(jié)

上文介紹了DNS Prefetch，Preconnect， Prefetch，Prerender。這四種hint的功能逐漸遞進(jìn)：



Dns Prefetch進(jìn)行DNS預(yù)查詢。


Preconnect進(jìn)行預(yù)鏈接。在一些重定向技術(shù)中，Preconnect可以讓瀏覽器和最終目標(biāo)源更早建立連接。


Prefetch進(jìn)行預(yù)下載。比如說，我們可以根據(jù)用戶行為猜測其下一步操作，然后動態(tài)預(yù)獲取所需資源，并且不用擔(dān)心該資源被解析(執(zhí)行)而影響頁面當(dāng)前功能。


Prerender不僅僅提前下載資源，還會提前直接解析(執(zhí)行)資源。如果我們對下一個頁面進(jìn)行Prerender，用戶在打開下一個頁面時，就會感覺很流暢了。



需要注意的是，瀏覽器對于Resource Hints的實(shí)現(xiàn)并不是想象中的那樣簡單直接。Resource Hints只是一些『提示』，瀏覽器可以采用我們的提示，但是具體怎么實(shí)現(xiàn)還是由瀏覽器自己來決定的。比如，如果當(dāng)前CPU壓力大，網(wǎng)絡(luò)阻塞時，你使用了Prefetch，那么瀏覽器可能僅僅會只對dns進(jìn)行預(yù)解析，并不會下載資源。

寫在后面

本文介紹了link標(biāo)簽的四種使用方法，最終引出了Resource Hints的概念。Resource Hints可以幫助我們提高頁面的性能。但是這只是理論上的，真正的收益還需要在實(shí)際業(yè)務(wù)中去探索、驗(yàn)證。


符合預(yù)期。




           
               
                                           
                       
                 
            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104371.html

               

                      
               
              
              

                
相關(guān)文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    &lt;link&gt;標(biāo)簽的幾個用法，幫助提高頁面性能
    
                                                     
    摘要：最常見的用法，是用來鏈接一個外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。可以幫助我們提高頁面的性能。

寫在前面
本文首發(fā)于公眾號：符合預(yù)期的CoyPan
HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見的用法，是用來鏈接一個外部的樣式表，比如：

link標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。
link標(biāo)簽的使用
來看一下link標(biāo)簽除了鏈接外...
    
                                                   
                          
    
                                
    
                                    Airy
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    &lt;head&gt;標(biāo)簽中的奧秘
    
                                                     
    摘要：作為一名前端開發(fā)，我竟一直不知道標(biāo)簽中的秘密。告訴瀏覽器使用最新的引擎渲染網(wǎng)頁，而則告訴瀏覽器激活谷歌瀏覽器內(nèi)嵌框架，是推出的一款免費(fèi)的專用插件。這一機(jī)制使得資源可以更早的被加載并可用，更不易阻塞頁面的初步渲染，進(jìn)而提升性能。

作為一名前端開發(fā)，我竟一直不知道標(biāo)簽中的秘密。
有幸接觸到這個知識點(diǎn)，覺得不能自己獨(dú)享這份喜悅，特此分享給大家。
舉幾個例子：
京東金融的部分剖析
showIm...
    
                                                   
                          
    
                                
    
                                    Thanatos
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                            
                        
      
                                                
    
                          
    Vue編程三部曲之模型樹優(yōu)化實(shí)戰(zhàn)代碼
    
                                                     
    　　實(shí)踐是所有展示最好的方法，因此我覺得可以不必十分細(xì)致的，但我們的展示卻是整體的流程、輸入和輸出。現(xiàn)在我們就看看Vue 的指令、內(nèi)置組件等。也就是第二篇，模型樹優(yōu)化。　　分析了 Vue 編譯三部曲的第一步，「如何將 template 編譯成 AST ?」上一篇已經(jīng)介紹，但我們還是來總結(jié)回顧下，parse 的目的是將開發(fā)者寫的 template 模板字符串轉(zhuǎn)換成抽象語法樹 AST ，AST 就這里...
    
                                                   
                          
    
                                
    
                                    3403771864
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                            
                        
      
                                                
    
                          
    教你20行python代碼實(shí)現(xiàn)編輯永久免費(fèi)pdf工具
    
                                                     
    　　小編寫這篇文章的主要目的，主要是給大家介紹一下關(guān)于python代碼實(shí)現(xiàn)pdf編輯免費(fèi)pdf工具相關(guān)知識的解答。　　PDF是在日常生活中使用范圍還是比較的廣泛的，很多的文檔都是PDF格式。格式穩(wěn)定是他的一個優(yōu)勢，使得我們在打印、分享、傳輸過程中能夠最優(yōu)的保持原有色彩和格式。　　PDF各種各樣的的版本是比較的多的，它在格式的穩(wěn)定性方面雖然具有很大優(yōu)勢。但是，在可編輯性方面卻為使用者引入了另外一個困...
    
                                                   
                          
    
                                
    
                                    89542767
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                            
                        
      
                                                
    
                          
    對象存儲 性能數(shù)據(jù)與分析 US3
    
                                                     
    摘要：缺陷雖然目前確實(shí)能給基于存儲的大數(shù)據(jù)方案帶來進(jìn)一步性能提高，但目前的設(shè)計(jì)還是有不少缺陷，主要在體現(xiàn)在幾個方面單點(diǎn)架構(gòu)使得可靠性降低。性能數(shù)據(jù)與分析本篇目錄測試環(huán)境測試數(shù)據(jù)us3vmds基于Go語言開發(fā)，自帶了Go的profile功能，通過以下命令，可以在指定地址開啟Go的運(yùn)行時性能分析HTTP服務(wù)：? bin ? us3vmds pprof --open 127.0.0.1 8081
? ...
    
                                                   
                          
    
                                
    
                                    ernest.wang
                                    
                                    評論0 
                                    收藏140 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           
           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    







<