資訊專欄INFORMATION COLUMN
摘要：優(yōu)化條法則減少請求次數(shù)是性能優(yōu)化的起點?？偽募笮∽兓淮?，但減少了請求次數(shù)從而加快了頁面顯示速度。使用內(nèi)容分發(fā)網(wǎng)絡可以通過服務提供商增加緩存相關壓縮頁面元素通過壓縮響應內(nèi)容可減少頁面響應時間?；煜亲钚』谠创a的備選方式。
Yahoo WEB優(yōu)化14條法則
減少HTTP請求次數(shù)是性能優(yōu)化的起點。這最提高首次訪問的效率起到很重要的作用。
減少HTTP請求次數(shù)Image maps組合多個圖片到一張圖片中。總文件大小變化不大，但減少了HTTP請求次數(shù)從而加快了頁面顯示速度。該方式只適合圖片連續(xù)的情況；同時坐標的定義是煩人又容易出錯的工作。
CSS Sprites是更好的方法。它可以組合頁面中的圖片到單個文件中，并使用CSS的background-image和background-position屬性來現(xiàn)實所需的部分圖片。
Inline images使用data: URL scheme來在頁面中內(nèi)嵌圖片。這將增大HTML文件的大小。組合inline images到你的（緩存）樣式表是既能較少HTTP請求，又能避免加大HTML文件大小的方法。
優(yōu)點： ①. 減少資源請求鏈接數(shù)。
缺點： ?、? 不會被瀏覽器緩存起來； ?、? 移動端性能比http URI scheme低。
可通過在css文件的background-image樣式規(guī)則使用Data URI Scheme，使其隨css文件一同被瀏覽器緩存起來。
Combined files通過組合多個腳本文件到單一文件來減少HTTP請求次數(shù)。樣式表也可采用類似方法處理。這個方法雖然簡單，但沒有得到大規(guī)模的使用。10大美國網(wǎng)站每頁平均有7個腳本文件和2個樣式表。當頁面之間腳本和樣式表變化很大時，該方式將遇到很大的挑戰(zhàn)，但如果做到的話，將能加快響應時間。
使用CDN(Content Delivery Network, 內(nèi)容分發(fā)網(wǎng)絡)可以通過 CDN服務提供商增加Expires Header緩存相關
壓縮頁面元素通過壓縮HTTP響應內(nèi)容可減少頁面響應時間。從HTTP/1.1開始，web客戶端在HTTP請求中通過Accept-Encoding頭來表明支持的壓縮類型
把樣式表放在頭上我們發(fā)現(xiàn)把樣式表移到HEAD部分可以提高界面加載速度，因此這使得頁面元素可以順序顯示。
把腳本文件放在底部與樣式文件一樣，我們需要注意腳本文件的位置。我們需盡量把它們放在頁面的底部，這樣一方面能順序顯示，另方面可達到最大的并行下載。
在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用document.write方法來插入頁面內(nèi)容。同時可能還存在域的問題。不過在很多情況下，還是有一些方法的。
一個備選方法是使用延遲腳本（deferred script）。DEFER屬性表明腳本未包含document.write，指示瀏覽器刻繼續(xù)顯示。不幸的是，F(xiàn)irefox不支持DEFER屬性。在IE中，腳本可能被延遲執(zhí)行，但不一定得到需要的長時間延遲。不過從另外角度來說，如果腳本能被延遲執(zhí)行，那它就可以被放在底部了。
一種減少CSS表達式執(zhí)行次數(shù)的方法是一次性表達式，即當?shù)谝淮螆?zhí)行時就以明確的數(shù)值代替表達式。如果必須動態(tài)設置的話，可使用事件處理函數(shù)代替。如果您必須使用CSS表達式的話，請記住它們可能被執(zhí)行上千次，從而影響頁面性能。
把JavaScript和CSS放到外部文件中在現(xiàn)實世界中，使用外部文件會加快頁面顯示速度，因為外部文件會被瀏覽器緩存。如果內(nèi)置JavaScript和CSS在頁面中雖然會減少HTTP請求次數(shù)，但增大了頁面的大小。另外一方面，使用外部文件，會被瀏覽器緩存，則頁面大小會減小，同時又不增加HTTP請求次數(shù)。
因此，一般來說，外部文件是更可行的方式。唯一的例外是內(nèi)嵌方式對主頁更有效，如Yahoo!和My Yahoo!都使用內(nèi)嵌方式。一般來說，在一個session中，主頁訪問此時較少，因此內(nèi)嵌方式可以取得更快的用戶響應時間。
減少主機名可減少DNS查詢的次數(shù)，但可能造成并行下載數(shù)的減少。避免DNS查詢可減少響應時間，而減少并行下載數(shù)可能增加響應時間。一個可行的折中是把內(nèi)容分布到至少2個，最多4個不同的主機名上。
最小化JavaScript代碼最小化JavaScript代碼指在JS代碼中刪除不必要的字符，從而降低下載時間。兩個流行的工具是#JSMin 和YUI Compressor。
混淆是最小化于源碼的備選方式。象最小化一樣，它通過刪除注釋和空格來減少源碼大小，同時它還可以對代碼進行混淆處理。作為混淆的一部分，函數(shù)名和變量名被替換成短的字符串，這使得代碼更緊湊，同時也更難讀，使得難于被反向工程。Dojo Compressor (ShrinkSafe)是最常見的混淆工具。
重定向功能是通過301和302這兩個HTTP狀態(tài)碼完成的，如：
HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是降低了用戶體驗。
刪除重復的腳本文件在一個頁面中包含重復的JS腳本文件會影響性能，即它會建立不必要的HTTP請求和額外的JS執(zhí)行。
配置ETags不是很懂，留個坑
緩存Ajax提高Ajax的性能最重要的方式是使得其response可緩存
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/79297.html
摘要：標題標簽會將其中的文本加粗加黑顯示，并從到依次減弱。換行標簽換行符?？稍跇撕瀮?nèi)使用。規(guī)定表頭單元格可橫跨的行數(shù)。HTML的概念 概念： HTML 是用來描述網(wǎng)頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup t...
摘要：最近熬了很多個夜晚踩坑無數(shù)終于寫出了用驅動的主題只需體驗三分鐘，你就會跟我一樣，愛上這款主題已經(jīng)發(fā)布到請客官享用介紹的原主題是的數(shù)高達的有個它在靜態(tài)博客網(wǎng)站中的應用處處可見在這里首先感謝原作者然而它的定位是僅支持等現(xiàn)代瀏覽器。 最近熬了很多個夜晚, 踩坑無數(shù), 終于寫出了用VuePress驅動的主題. 只需體驗三分鐘，你就會跟我一樣，愛上這款主題. vuepress-theme-ind...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
摘要：寫在前面開發(fā)中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認識平臺下的圖像壓縮和優(yōu)化。所以，它是你圖像壓縮和優(yōu)化的首選，盡可能的去使用吧。 寫在前面 Android開發(fā)中的圖像壓縮是一個很重要的部分。而這篇文章會讓我們從另外一個角度來認識Android平臺下的圖像壓縮和優(yōu)化。 這篇文章更適合和設計師一起來看，所以，如果你和你的設計師是好基友的話，不妨叫上他，倒兩杯咖...
閱讀 2754·2021-10-13 09:39
閱讀 3649·2021-09-30 09:52
閱讀 885·2021-09-26 09:55
閱讀 2860·2019-08-30 13:19
閱讀 1972·2019-08-26 10:42
閱讀 3264·2019-08-26 10:17
閱讀 624·2019-08-23 14:52
閱讀 3727·2019-08-23 14:39
