成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

網(wǎng)頁(yè)優(yōu)化相關(guān)筆記一

codecook / 2739人閱讀

摘要：優(yōu)化條法則減少請(qǐng)求次數(shù)是性能優(yōu)化的起點(diǎn)?？偽募笮∽兓淮螅珳p少了請(qǐng)求次數(shù)從而加快了頁(yè)面顯示速度。使用內(nèi)容分發(fā)網(wǎng)絡(luò)可以通過(guò)服務(wù)提供商增加緩存相關(guān)壓縮頁(yè)面元素通過(guò)壓縮響應(yīng)內(nèi)容可減少頁(yè)面響應(yīng)時(shí)間?；煜亲钚』谠创a的備選方式。

Yahoo WEB優(yōu)化14條法則

減少HTTP請(qǐng)求次數(shù)是性能優(yōu)化的起點(diǎn)。這最提高首次訪問(wèn)的效率起到很重要的作用。

減少HTTP請(qǐng)求次數(shù)

Image maps組合多個(gè)圖片到一張圖片中?？偽募笮∽兓淮螅珳p少了HTTP請(qǐng)求次數(shù)從而加快了頁(yè)面顯示速度。該方式只適合圖片連續(xù)的情況；同時(shí)坐標(biāo)的定義是煩人又容易出錯(cuò)的工作。

CSS Sprites是更好的方法。它可以組合頁(yè)面中的圖片到單個(gè)文件中，并使用CSS的background-image和background-position屬性來(lái)現(xiàn)實(shí)所需的部分圖片。

Inline images使用data: URL scheme來(lái)在頁(yè)面中內(nèi)嵌圖片。這將增大HTML文件的大小。組合inline images到你的（緩存）樣式表是既能較少HTTP請(qǐng)求，又能避免加大HTML文件大小的方法。

優(yōu)點(diǎn)： 　?、? 減少資源請(qǐng)求鏈接數(shù)。 　
缺點(diǎn)： 　?、? 不會(huì)被瀏覽器緩存起來(lái)； 　　②. 移動(dòng)端性能比http URI scheme低。

　　　　　　　　　　　　　　　　　　　　　　　　　
　可通過(guò)在css文件的background-image樣式規(guī)則使用Data URI Scheme，使其隨css文件一同被瀏覽器緩存起來(lái)。

Combined files通過(guò)組合多個(gè)腳本文件到單一文件來(lái)減少HTTP請(qǐng)求次數(shù)。樣式表也可采用類(lèi)似方法處理。這個(gè)方法雖然簡(jiǎn)單，但沒(méi)有得到大規(guī)模的使用。10大美國(guó)網(wǎng)站每頁(yè)平均有7個(gè)腳本文件和2個(gè)樣式表。當(dāng)頁(yè)面之間腳本和樣式表變化很大時(shí)，該方式將遇到很大的挑戰(zhàn)，但如果做到的話，將能加快響應(yīng)時(shí)間。

使用CDN(Content Delivery Network, 內(nèi)容分發(fā)網(wǎng)絡(luò))

可以通過(guò) CDN服務(wù)提供商增加Expires Header緩存相關(guān)

壓縮頁(yè)面元素

通過(guò)壓縮HTTP響應(yīng)內(nèi)容可減少頁(yè)面響應(yīng)時(shí)間。從HTTP/1.1開(kāi)始，web客戶(hù)端在HTTP請(qǐng)求中通過(guò)Accept-Encoding頭來(lái)表明支持的壓縮類(lèi)型

把樣式表放在頭上

我們發(fā)現(xiàn)把樣式表移到HEAD部分可以提高界面加載速度，因此這使得頁(yè)面元素可以順序顯示。

把腳本文件放在底部

與樣式文件一樣，我們需要注意腳本文件的位置。我們需盡量把它們放在頁(yè)面的底部，這樣一方面能順序顯示，另方面可達(dá)到最大的并行下載。
在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用document.write方法來(lái)插入頁(yè)面內(nèi)容。同時(shí)可能還存在域的問(wèn)題。不過(guò)在很多情況下，還是有一些方法的。
一個(gè)備選方法是使用延遲腳本（deferred script）。DEFER屬性表明腳本未包含document.write，指示瀏覽器刻繼續(xù)顯示。不幸的是，F(xiàn)irefox不支持DEFER屬性。在IE中，腳本可能被延遲執(zhí)行，但不一定得到需要的長(zhǎng)時(shí)間延遲。不過(guò)從另外角度來(lái)說(shuō)，如果腳本能被延遲執(zhí)行，那它就可以被放在底部了。

避免CSS表達(dá)式

一種減少CSS表達(dá)式執(zhí)行次數(shù)的方法是一次性表達(dá)式，即當(dāng)?shù)谝淮螆?zhí)行時(shí)就以明確的數(shù)值代替表達(dá)式。如果必須動(dòng)態(tài)設(shè)置的話，可使用事件處理函數(shù)代替。如果您必須使用CSS表達(dá)式的話，請(qǐng)記住它們可能被執(zhí)行上千次，從而影響頁(yè)面性能。

把JavaScript和CSS放到外部文件中

在現(xiàn)實(shí)世界中，使用外部文件會(huì)加快頁(yè)面顯示速度，因?yàn)橥獠课募?huì)被瀏覽器緩存。如果內(nèi)置JavaScript和CSS在頁(yè)面中雖然會(huì)減少HTTP請(qǐng)求次數(shù)，但增大了頁(yè)面的大小。另外一方面，使用外部文件，會(huì)被瀏覽器緩存，則頁(yè)面大小會(huì)減小，同時(shí)又不增加HTTP請(qǐng)求次數(shù)。
因此，一般來(lái)說(shuō)，外部文件是更可行的方式。唯一的例外是內(nèi)嵌方式對(duì)主頁(yè)更有效，如Yahoo!和My Yahoo!都使用內(nèi)嵌方式。一般來(lái)說(shuō)，在一個(gè)session中，主頁(yè)訪問(wèn)此時(shí)較少，因此內(nèi)嵌方式可以取得更快的用戶(hù)響應(yīng)時(shí)間。

減少DNS查詢(xún)次數(shù)

減少主機(jī)名可減少DNS查詢(xún)的次數(shù)，但可能造成并行下載數(shù)的減少。避免DNS查詢(xún)可減少響應(yīng)時(shí)間，而減少并行下載數(shù)可能增加響應(yīng)時(shí)間。一個(gè)可行的折中是把內(nèi)容分布到至少2個(gè)，最多4個(gè)不同的主機(jī)名上。

最小化JavaScript代碼

最小化JavaScript代碼指在JS代碼中刪除不必要的字符，從而降低下載時(shí)間。兩個(gè)流行的工具是#JSMin 和YUI Compressor。
混淆是最小化于源碼的備選方式。象最小化一樣，它通過(guò)刪除注釋和空格來(lái)減少源碼大小，同時(shí)它還可以對(duì)代碼進(jìn)行混淆處理。作為混淆的一部分，函數(shù)名和變量名被替換成短的字符串，這使得代碼更緊湊，同時(shí)也更難讀，使得難于被反向工程。Dojo Compressor (ShrinkSafe)是最常見(jiàn)的混淆工具。

避免重定向

重定向功能是通過(guò)301和302這兩個(gè)HTTP狀態(tài)碼完成的，如：

  HTTP/1.1 301 Moved Permanently
  Location: http://example.com/newuri
  Content-Type: text/html

瀏覽器自動(dòng)重定向請(qǐng)求到Location指定的URL上，重定向的主要問(wèn)題是降低了用戶(hù)體驗(yàn)。

刪除重復(fù)的腳本文件

在一個(gè)頁(yè)面中包含重復(fù)的JS腳本文件會(huì)影響性能，即它會(huì)建立不必要的HTTP請(qǐng)求和額外的JS執(zhí)行。

配置ETags

不是很懂，留個(gè)坑

緩存Ajax

提高Ajax的性能最重要的方式是使得其response可緩存

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

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

相關(guān)文章

  • 學(xué)習(xí)筆記—HTML基礎(chǔ)標(biāo)簽

    摘要：標(biāo)題標(biāo)簽會(huì)將其中的文本加粗加黑顯示，并從到依次減弱。換行標(biāo)簽換行符?？稍跇?biāo)簽內(nèi)使用。規(guī)定表頭單元格可橫跨的行數(shù)。HTML的概念 概念： 　　HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。 HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language) 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup t...

    CastlePeaK 評(píng)論0 收藏0

  • 我的這套VuePress主題你熟悉吧

    摘要：最近熬了很多個(gè)夜晚踩坑無(wú)數(shù)終于寫(xiě)出了用驅(qū)動(dòng)的主題只需體驗(yàn)三分鐘，你就會(huì)跟我一樣，愛(ài)上這款主題已經(jīng)發(fā)布到請(qǐng)客官享用介紹的原主題是的數(shù)高達(dá)的有個(gè)它在靜態(tài)博客網(wǎng)站中的應(yīng)用處處可見(jiàn)在這里首先感謝原作者然而它的定位是僅支持等現(xiàn)代瀏覽器。 最近熬了很多個(gè)夜晚, 踩坑無(wú)數(shù), 終于寫(xiě)出了用VuePress驅(qū)動(dòng)的主題. 只需體驗(yàn)三分鐘，你就會(huì)跟我一樣，愛(ài)上這款主題. vuepress-theme-ind...

    Jeffrrey 評(píng)論0 收藏0

  • 前端優(yōu)化 - 收藏集 - 掘金

    摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點(diǎn)長(zhǎng)，我想先聊一聊閱讀的方式，我希望你閱讀的時(shí)候，能夠把我當(dāng)作你的競(jìng)爭(zhēng)對(duì)手，你的夢(mèng)想是超越我。 如何提升頁(yè)面渲染效率 - 前端 - 掘金Web頁(yè)面的性能 我們每天都會(huì)瀏覽很多的Web頁(yè)面，使用很多基于Web的應(yīng)用。這些站點(diǎn)看起來(lái)既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶(hù)端...

    VincentFF 評(píng)論0 收藏0

  • Google I/O 2016 筆記之圖像壓縮

    摘要：寫(xiě)在前面開(kāi)發(fā)中的圖像壓縮是一個(gè)很重要的部分。而這篇文章會(huì)讓我們從另外一個(gè)角度來(lái)認(rèn)識(shí)平臺(tái)下的圖像壓縮和優(yōu)化。所以，它是你圖像壓縮和優(yōu)化的首選，盡可能的去使用吧。 寫(xiě)在前面 Android開(kāi)發(fā)中的圖像壓縮是一個(gè)很重要的部分。而這篇文章會(huì)讓我們從另外一個(gè)角度來(lái)認(rèn)識(shí)Android平臺(tái)下的圖像壓縮和優(yōu)化。 這篇文章更適合和設(shè)計(jì)師一起來(lái)看，所以，如果你和你的設(shè)計(jì)師是好基友的話，不妨叫上他，倒兩杯咖...

    BWrong 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<