波多野结衣中文字幕免费视频,四川少妇单挑三个黑人,国产精品手机免费,H无码精品动漫在线观看免费下载

品牌互聯(lián)網(wǎng)化服務 專注于網(wǎng)站建設與SEO優(yōu)化的合理結合
咨詢:18540043080
2021-10-13

網(wǎng)站開發(fā)中如何提高網(wǎng)站頁面加載速度

類型:網(wǎng)站開發(fā)
  • 閱讀量:3221
  • 來源:聚藝科技

    在同樣的網(wǎng)絡環(huán)境下,兩個同樣能滿足你的需求的網(wǎng)站,一個“Duang”的一下就加載出來了,一個糾結了半天才出來,你會選擇哪個?研究表明:用戶最滿意的打開網(wǎng)頁時間是2-5秒,如果等待超過10秒,99%的用戶會關閉這個網(wǎng)頁。也許這樣講,各位還不會有太多感觸,接下來我列舉一組數(shù)據(jù):Google網(wǎng)站訪問速度每慢400ms就導致用戶搜索請 求下降0.59%;Amazon每增加100ms網(wǎng)站延遲將導致收入下降1%;雅虎如果有400ms延遲會導致流量下降5-9%。網(wǎng)站的加載速度嚴重影響了用戶體驗,也決定了這個網(wǎng)站的生死存亡。


    可能有人會說:網(wǎng)站的性能是后端工程師的事情,與前端并無多大關系。事實上,只有10%~20%的最終用戶響應時間是用在從Web服務器獲取HTML文檔并傳送到瀏覽器的,那剩余的時間去哪兒了?


    只有10%~20%的最終用戶響應時間花在了下載HTML文檔上。其余的80%~90%時間花在了下載頁面中的所有組件上。


    接下來帶您了解如何來提高頁面的加載速度。




    一、減少HTTP請求


    上面說到80%~90%時間花在了下載頁面中的所有組件進行的HTTP請求上。因此,改善響應時間最簡單的途徑就是減少HTTP請求的數(shù)量。




    二、使用CDN


    如果應用程序web服務器離用戶更近,那么一個HTTP請求的響應時間將縮短。另一方面,如果組件web服務器離用戶更近,則多個HTTP請求的響應時間將縮短。


    CDN(內容發(fā)布網(wǎng)絡)是一組分布在多個不同地理位置的Web服務器,用于更加有效地向用戶發(fā)布內容。在優(yōu)化性能時,向特定用戶發(fā)布內容的服務器的選擇基于對網(wǎng)絡慕課擁堵的測量。例如,CDN可能選擇網(wǎng)絡階躍數(shù)最小的服務器,或者具有最短響應時間的服務器。




    三、添加Expires頭


    頁面的初次訪問者會進行很多HTTP請求,但是通過使用一個長久的Expires頭,可以使這些組件被緩存,下次訪問的時候,就可以減少不必要的HTPP請求,從而提高加載速度。




    四、壓縮組件


    從HTTP1.1開始,Web客戶端可以通過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持


    Accept-Encoding: gzip,deflate


    如果Web服務器看到請求中有這個頭,就會使用客戶端列出來的方法中的一種來進行壓縮。Web服務器通過響應中的Content-Encoding來通知 Web客戶端。


    Content-Encoding: gzip


    代理緩存


    當瀏覽器通過代理來發(fā)送請求時,情況會不一樣。假設針對某個URL發(fā)送到代理的第一個請求來自于一個不支持gzip的瀏覽器。這是代理的第一個請求,緩存為空。代理將請求轉發(fā)給服務器。此時響應是未壓縮的,代理緩存同時發(fā)送給瀏覽器。現(xiàn)在,假設到達代理的請求是同一個url,來自于一個支持gzip的瀏覽器。代理會使用緩存中未壓縮的內容進行響應,從而失去了壓縮的機會。相反,如果第一個瀏覽器支持gzip,第二個不支持,你們代理緩存中的壓縮版本將會提供給后續(xù)的瀏覽器,而不管它們是否支持gzip。


    解決辦法:在web服務器的響應中添加vary頭Web服務器可以告訴代理根據(jù)一個或多個請求頭來改變緩存的響應。因為壓縮的決定是基于Accept-Encoding請求頭的,因此需要在vary響應頭中包含Accept-Encoding。


    vary: Accept-Encoding




    五、將樣式表放在頭部


    首先說明一下,將樣式表放在頭部對于實際頁面加載的時間并不能造成太大影響,但是這會減少頁面首屏出現(xiàn)的時間,使頁面內容逐步呈現(xiàn),改善用戶體驗,防止“白屏”。


    我們總是希望頁面能夠盡快顯示內容,為用戶提供可視化的回饋,這對網(wǎng)速慢的用戶來說是很重要的。


    將樣式表放在文檔底部會阻止瀏覽器中的內容逐步出現(xiàn)。為了避免當樣式變化時重繪頁面元素,瀏覽器會阻塞內容逐步呈現(xiàn),造成“白屏”。這源自瀏覽器的行為:如果樣式表仍在加載,構建呈現(xiàn)樹就是一種浪費,因為所有樣式表加載解析完畢之前務虛會之任何東西。




    六、將腳本放在底部


    更樣式表相同,腳本放在底部對于實際頁面加載的時間并不能造成太大影響,但是這會減少頁面首屏出現(xiàn)的時間,使頁面內容逐步呈現(xiàn)。


    js的下載和執(zhí)行會阻塞Dom樹的構建(嚴謹?shù)卣f是中斷了Dom樹的更新),所以script標簽放在首屏范圍內的HTML代碼段里會截斷首屏的內容。


    下載腳本時并行下載是被禁用的——即使使用了不同的主機名,也不會啟用其他的下載。因為腳本可能修改頁面內容,因此瀏覽器會等待;另外,也是為了保證腳本能夠按照正確的順序執(zhí)行,因為后面的腳本可能與前面的腳本存在依賴關系,不按照順序執(zhí)行可能會產(chǎn)生錯誤。




    七、避免CSS表達式


    CSS表達式是動態(tài)設置CSS屬性的一種強大并且危險的方式,它受到了IE5以及之后版本、IE8之前版本的支持。




    八、使用外部的JavaScript和CSS


    內聯(lián)腳本或者樣式可以減少HTTP請求,按理來說可以提高頁面加載的速度。然而在實際情況中,當腳本或者樣式是從外部引入的文件,瀏覽器就有可能緩存它們,從而在以后加載的時候能夠直接使用緩存,而HTML文檔的大小減小,從而提高加載速度。




    九、減少DNS查找


    當我們在瀏覽器的地址欄輸入網(wǎng)址(譬如: www.linux178.com) ,然后回車,回車這一瞬間到看到頁面到底發(fā)生了什么呢?


    域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請求 --> 服務器響應http請求,瀏覽器得到html代碼 --> 瀏覽器解析html代碼,并請求html代碼中的資源(如js、css、圖片等) --> 瀏覽器對頁面進行渲染呈現(xiàn)給用戶




    十、精簡JavaScript


    精簡


    精簡就是從代碼中移除不必要的字符以減少文件大小,降低加載的時間。代碼精簡的時候會移除不必要的空白字符(空格,換行、制表符),這樣整個文件的大小就變小了。


    混淆


    混淆是應用在源代碼上的另外一種方式,它會移除注釋和空白符,同時它還會改寫代碼。在混淆的時候,函數(shù)和變量名將會被轉換成更短的字符串,這時代碼會更加精煉同時難以閱讀。通常這樣做是為了增加對代碼進行反向工程的難度,這也同時提高了性能。




    十一、避免重定向


    什么是重定向?重定向用于將用戶從一個URL重新路由到另一個URL。




    十二、刪除重復腳本


    在團隊開發(fā)一個項目時,由于不同開發(fā)者之間都可能會向頁面中添加頁面或組件,因此可能相同的腳本會被添加多次。


    重復的腳本會造成不必要的HTTP請求(如果沒有緩存該腳本的話),并且執(zhí)行多余的JavaScript浪費時間,還有可能造成錯誤。



    來源聲明:本文章系聚藝科技編輯原創(chuàng)或采編整理,如需轉載請注明來自聚藝科技。以上內容部分(包含圖片、文字)來源于網(wǎng)絡,出于傳遞更多信息之目的。如有標注錯誤或侵權,請作者持權屬證明與本網(wǎng)聯(lián)系,我們將及時更正、刪除,謝謝。
    標簽:
    沈陽聚藝網(wǎng)絡提供沈陽網(wǎng)站建設,沈陽網(wǎng)站制作,沈陽網(wǎng)絡營銷,沈陽網(wǎng)絡推廣,沈陽網(wǎng)站優(yōu)化,沈陽小程序開發(fā),沈陽托管運維等多種服務! Copyright © 2030 沈陽市聚藝網(wǎng)絡科技技術有限公司. All Rights Reserved 備案號:遼ICP備19003083號-1

    在線咨詢

    微信咨詢

    電話咨詢

    24小時電話
    18540043080

    聯(lián)系我們

    返回頂部