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

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

網(wǎng)站定制開(kāi)發(fā)中如何提高網(wǎng)站頁(yè)面加載速度

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

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


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


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


    接下來(lái)帶您了解如何來(lái)提高頁(yè)面的加載速度。



    一、減少HTTP請(qǐng)求


    上面說(shuō)到80%~90%時(shí)間花在了下載頁(yè)面中的所有組件進(jìn)行的HTTP請(qǐng)求上。因此,改善響應(yīng)時(shí)間最簡(jiǎn)單的途徑就是減少HTTP請(qǐng)求的數(shù)量。




    二、使用CDN


    如果應(yīng)用程序web服務(wù)器離用戶更近,那么一個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短。另一方面,如果組件web服務(wù)器離用戶更近,則多個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短。


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




    三、添加Expires頭


    頁(yè)面的初次訪問(wèn)者會(huì)進(jìn)行很多HTTP請(qǐng)求,但是通過(guò)使用一個(gè)長(zhǎng)久的Expires頭,可以使這些組件被緩存,下次訪問(wèn)的時(shí)候,就可以減少不必要的HTPP請(qǐng)求,從而提高加載速度。




    四、壓縮組件


    從HTTP1.1開(kāi)始,Web客戶端可以通過(guò)HTTP請(qǐng)求中的Accept-Encoding頭來(lái)表示對(duì)壓縮的支持


    Accept-Encoding: gzip,deflate


    如果Web服務(wù)器看到請(qǐng)求中有這個(gè)頭,就會(huì)使用客戶端列出來(lái)的方法中的一種來(lái)進(jìn)行壓縮。Web服務(wù)器通過(guò)響應(yīng)中的Content-Encoding來(lái)通知 Web客戶端。


    Content-Encoding: gzip


    代理緩存


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


    解決辦法:在web服務(wù)器的響應(yīng)中添加vary頭Web服務(wù)器可以告訴代理根據(jù)一個(gè)或多個(gè)請(qǐng)求頭來(lái)改變緩存的響應(yīng)。因?yàn)閴嚎s的決定是基于Accept-Encoding請(qǐng)求頭的,因此需要在vary響應(yīng)頭中包含Accept-Encoding。


    vary: Accept-Encoding




    五、將樣式表放在頭部


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


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


    將樣式表放在文檔底部會(huì)阻止瀏覽器中的內(nèi)容逐步出現(xiàn)。為了避免當(dāng)樣式變化時(shí)重繪頁(yè)面元素,瀏覽器會(huì)阻塞內(nèi)容逐步呈現(xiàn),造成“白屏”。這源自瀏覽器的行為:如果樣式表仍在加載,構(gòu)建呈現(xiàn)樹(shù)就是一種浪費(fèi),因?yàn)樗袠邮奖砑虞d解析完畢之前務(wù)虛會(huì)之任何東西。




    六、將腳本放在底部


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


    js的下載和執(zhí)行會(huì)阻塞Dom樹(shù)的構(gòu)建(嚴(yán)謹(jǐn)?shù)卣f(shuō)是中斷了Dom樹(shù)的更新),所以script標(biāo)簽放在首屏范圍內(nèi)的HTML代碼段里會(huì)截?cái)嗍灼恋膬?nèi)容。


    下載腳本時(shí)并行下載是被禁用的——即使使用了不同的主機(jī)名,也不會(huì)啟用其他的下載。因?yàn)槟_本可能修改頁(yè)面內(nèi)容,因此瀏覽器會(huì)等待;另外,也是為了保證腳本能夠按照正確的順序執(zhí)行,因?yàn)楹竺娴哪_本可能與前面的腳本存在依賴關(guān)系,不按照順序執(zhí)行可能會(huì)產(chǎn)生錯(cuò)誤。




    七、避免CSS表達(dá)式


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




    八、使用外部的JavaScript和CSS


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




    九、減少DNS查找


    當(dāng)我們?cè)跒g覽器的地址欄輸入網(wǎng)址(譬如: http://www.uoqphhl.cn/) ,然后回車,回車這一瞬間到看到頁(yè)面到底發(fā)生了什么呢?


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




    十、精簡(jiǎn)JavaScript


    精簡(jiǎn)


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


    混淆


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




    十一、避免重定向


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




    十二、刪除重復(fù)腳本


    在團(tuán)隊(duì)開(kāi)發(fā)一個(gè)項(xiàng)目時(shí),由于不同開(kāi)發(fā)者之間都可能會(huì)向頁(yè)面中添加頁(yè)面或組件,因此可能相同的腳本會(huì)被添加多次。


    重復(fù)的腳本會(huì)造成不必要的HTTP請(qǐng)求(如果沒(méi)有緩存該腳本的話),并且執(zhí)行多余的JavaScript浪費(fèi)時(shí)間,還有可能造成錯(cuò)誤。



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

    在線咨詢

    微信咨詢

    電話咨詢

    24小時(shí)電話
    18540043080

    聯(lián)系我們

    返回頂部