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

資訊專欄INFORMATION COLUMN

前端面試中經(jīng)常問(wèn)到的問(wèn)題：如何提高網(wǎng)站性能 總結(jié)

wudengzan / 1800人閱讀

摘要：在某些情況下，延遲能減少一秒鐘。在某些瀏覽器中這個(gè)預(yù)讀取的行為將會(huì)與頁(yè)面實(shí)際內(nèi)容并行發(fā)生而不是串行。在某些圖片較多的頁(yè)面中，在發(fā)起圖片加載請(qǐng)求之前預(yù)先把域名解析好將會(huì)有至少的圖片加載速度提升。

1. 使用dns預(yù)解析

DNS 請(qǐng)求需要的帶寬非常小，但是延遲卻有點(diǎn)高，這點(diǎn)在手機(jī)網(wǎng)絡(luò)上特別明顯。預(yù)讀取 DNS 能讓延遲明顯減少一些，例如用戶點(diǎn)擊鏈接時(shí)。在某些情況下，延遲能減少一秒鐘。 
在某些瀏覽器中這個(gè)預(yù)讀取的行為將會(huì)與頁(yè)面實(shí)際內(nèi)容并行發(fā)生（而不是串行）。正因如此，某些高延遲的域名的解析過(guò)程才不會(huì)卡住資源的加載。
這樣可以極大的加速（尤其是移動(dòng)網(wǎng)絡(luò)環(huán)境下）頁(yè)面的加載。在某些圖片較多的頁(yè)面中，在發(fā)起圖片加載請(qǐng)求之前預(yù)先把域名解析好將會(huì)有至少 5%的圖片加載速度提升。
你可以通過(guò)在服務(wù)器端發(fā)送 X-DNS-Prefetch-Control 報(bào)頭，或是在文檔中使用值為 http-equiv 的 標(biāo)簽：

打開(kāi)和關(guān)閉 DNS 預(yù)讀取

在高級(jí)瀏覽器中a標(biāo)簽是默認(rèn)打開(kāi)預(yù)解析的，但是在https協(xié)議中是默認(rèn)關(guān)閉的，此句話是強(qiáng)制打開(kāi)a img script等 標(biāo)簽的預(yù)解析

link標(biāo)簽的dns預(yù)解析

您可以通過(guò)將 content 的參數(shù)設(shè)置為“on”來(lái)改變?cè)O(shè)置。

強(qiáng)制查詢特定主機(jī)名

你可以通過(guò)使用 rel 屬性值為 link type 中的 dns-prefetch 的  標(biāo)簽來(lái)對(duì)特定域名進(jìn)行預(yù)讀取：


在這個(gè)例子中，F(xiàn)irefox將預(yù)解析域名"www.spreadfirefox.com"。
而且， 元素也可以使用不完整的 URL 的主機(jī)名來(lái)標(biāo)記預(yù)解析，但這些主機(jī)名前必需要有雙斜線：






強(qiáng)制對(duì)域名進(jìn)行預(yù)讀取在有的情況下很有用, 比如,
在網(wǎng)站的主頁(yè)上，強(qiáng)制在整個(gè)網(wǎng)站上頻繁引用的域名的預(yù)解析，即使它們不在主頁(yè)本身上使用。即使主頁(yè)的性能可能不受影響，這將提高整體站點(diǎn)性能


2.資源壓縮合并，減少HTTP請(qǐng)求


通過(guò)webpack,grunt等打包工具，對(duì)于js，css文件進(jìn)行打包成單個(gè)的js以及css，使用gzip進(jìn)行代碼壓縮，從而減少請(qǐng)求文件的大小以及數(shù)量，每個(gè)js，css文件的加載都要發(fā)送一次http請(qǐng)求，所以通過(guò)合并js，css文件從而減少http請(qǐng)求次數(shù)。


3.瀏覽器緩存


1.強(qiáng)緩存


Expire（絕對(duì)時(shí)間，下發(fā)的服務(wù)器時(shí)間，有可能客戶端和服務(wù)端時(shí)間不一致。Expire：Thu,21 Jan 2017 23:39:02
  GMT）；


//在前端標(biāo)簽中設(shè)置
  

//在后端設(shè)置
response.setDateHeader("Expires",date.getTime()+20000); //Expires:過(guò)時(shí)期限值 
response.setDateHeader("Expires", 0);//不允許瀏覽器端或緩存服務(wù)器緩存當(dāng)前頁(yè)面信息。


Cache-Control（相對(duì)時(shí)間，按照客戶端時(shí)間，3600秒內(nèi)使用緩存。Cache-Control:max-age=3600）


//在前端標(biāo)簽中設(shè)置


//在后端設(shè)置
response.addHeader( "Cache-Control", "no-cache" );//瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁(yè)面信息



    在http響應(yīng)頭中，如果兩個(gè)時(shí)間都有，以Cache-Control為準(zhǔn)


2.協(xié)商緩存（問(wèn)一下服務(wù)器）


Last-Modified（服務(wù)器下發(fā)的響應(yīng)頭中加，Last-Modified:Thu,21 Jan 2017 23:39:02 GMT）
If-Modified-Since，（http請(qǐng)求頭中加，時(shí)間和Last-Modified下發(fā)的一致，缺點(diǎn)：文件沒(méi)變但時(shí)間過(guò)期，會(huì)再次加載


//在后端設(shè)置
response.setDateHeader("Last-Modified",date.getTime()); //Last-Modified:頁(yè)面的最后生成時(shí)間 



Etag （哈希值，服務(wù)器下發(fā)的響應(yīng)頭中加，文件沒(méi)改變可繼續(xù)使用緩存） If-None-Match（http請(qǐng)求頭中加，時(shí)間和Etag下發(fā)的一致）


//響應(yīng)消息頭
Etag:"a030f020ac7c01:1e9f" 



關(guān)于下面這些HTTP請(qǐng)求頭部字段以及相關(guān)的http知識(shí)，可以去閱讀 《圖解http》一書(shū)，對(duì)此有詳細(xì)的文字跟圖解



Expire


Cache-Control


Last-Modified


If-Modified-Since


If-Modified-Since


If-None-Match



4.異步加載


異步加載的方式：


1.動(dòng)態(tài)腳本加載（動(dòng)態(tài)創(chuàng)建節(jié)點(diǎn)：document.createElement("/script/")，用js創(chuàng)建一個(gè)標(biāo)簽，再加到文檔中）；
2.defer（在script標(biāo)簽中加上此屬性）；
3.async（在script標(biāo)簽中加上此屬性）。 
異步加載的區(qū)別：
1.defer是在HTML 解析完 之后才會(huì)執(zhí)行，defer屬性規(guī)定是否對(duì)腳本執(zhí)行進(jìn)行延遲，直到頁(yè)面加載為止,如果是多個(gè)，按照加載的順序依次執(zhí)行 ；
2.async是在加載完之后 立即執(zhí)行 ，async屬性規(guī)定一旦腳本可用，則會(huì)異步執(zhí)行,如果是多個(gè)，執(zhí)行順序和加載順序無(wú)關(guān)。
這里來(lái)一張defer跟async，還是用圖解比較明了






此圖告訴我們以下幾個(gè)要點(diǎn)：
defer 和 async 在網(wǎng)絡(luò)讀取（下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
它倆的差別在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的 關(guān)于
defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點(diǎn)要善加利用 async
則是一個(gè)亂序執(zhí)行的主，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行 仔細(xì)想想，async
對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的，最典型的例子：Google
Analytics


           
               
                                           
                       
                 

            
                     
             
               

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

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

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    前端面試中經(jīng)常問(wèn)到的問(wèn)題：如何提高網(wǎng)站性能 總結(jié)
    
                                                     
    摘要：在某些情況下，延遲能減少一秒鐘。在某些瀏覽器中這個(gè)預(yù)讀取的行為將會(huì)與頁(yè)面實(shí)際內(nèi)容并行發(fā)生而不是串行。在某些圖片較多的頁(yè)面中，在發(fā)起圖片加載請(qǐng)求之前預(yù)先把域名解析好將會(huì)有至少的圖片加載速度提升。

1. 使用dns預(yù)解析
DNS 請(qǐng)求需要的帶寬非常小，但是延遲卻有點(diǎn)高，這點(diǎn)在手機(jī)網(wǎng)絡(luò)上特別明顯。預(yù)讀取 DNS 能讓延遲明顯減少一些，例如用戶點(diǎn)擊鏈接時(shí)。在某些情況下，延遲能減少一秒鐘。 在某...
    
                                                   
                          
    
                                
    
                                    Jingbin_
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    前端面試中經(jīng)常問(wèn)到的問(wèn)題：如何提高網(wǎng)站性能 總結(jié)
    
                                                     
    摘要：在某些情況下，延遲能減少一秒鐘。在某些瀏覽器中這個(gè)預(yù)讀取的行為將會(huì)與頁(yè)面實(shí)際內(nèi)容并行發(fā)生而不是串行。在某些圖片較多的頁(yè)面中，在發(fā)起圖片加載請(qǐng)求之前預(yù)先把域名解析好將會(huì)有至少的圖片加載速度提升。

1. 使用dns預(yù)解析
DNS 請(qǐng)求需要的帶寬非常小，但是延遲卻有點(diǎn)高，這點(diǎn)在手機(jī)網(wǎng)絡(luò)上特別明顯。預(yù)讀取 DNS 能讓延遲明顯減少一些，例如用戶點(diǎn)擊鏈接時(shí)。在某些情況下，延遲能減少一秒鐘。 在某...
    
                                                   
                          
    
                                
    
                                    MorePainMoreGain
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Javascript 面試中經(jīng)常被問(wèn)到的三個(gè)問(wèn)題！
    
                                                     
    摘要：相反，在討論時(shí)，面試中通常會(huì)提到三件事。而認(rèn)為最后一個(gè)參賽者說(shuō)了算，只要還能吃的，就重新設(shè)定新的定時(shí)器。試想，如果用戶的操作十分頻繁他每次都不等設(shè)置的時(shí)間結(jié)束就進(jìn)行下一次操作，于是每次都為該用戶重新生成定時(shí)器，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。本文不是討論最新的 JavaScript 庫(kù)、常見(jiàn)的開(kāi)發(fā)實(shí)踐或任何新的 ES6 函數(shù)。相反，在討論 JavaScript 時(shí)，面試中通常會(huì)提到三件事。我自己...
    
                                                   
                          
    
                                
    
                                    chnmagnus
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    PHP面試總結(jié)
    
                                                     
    摘要：而在面試過(guò)程中，也是經(jīng)常會(huì)遇到的，所以，無(wú)論是面試準(zhǔn)備還是日常開(kāi)發(fā)，我們都應(yīng)該關(guān)注這方面的東西。二分法的基本做法是確定要查找的區(qū)間。區(qū)間內(nèi)選取二分點(diǎn)。根據(jù)二分點(diǎn)的值，綜合左右區(qū)間情況以及求解的目的，舍去一半無(wú)用的區(qū)間。

showImg(https://images.pexels.com/photos/935977/pexels-photo-935977.jpeg);
前言
面試是你進(jìn)入...
    
                                                   
                          
    
                                
    
                                    alin
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<