您現在的位置: 网站首頁 / 網站建設 / 正文

Web性能優化-爲什麽要提升web性能?如何提高web性能?

作者: admin 发布: 2015-6-23 18:29:58 分类: 網站建設 閱讀: 次 查看評論

  爲什麽要提升web性能?

  Web性能黃金准則:只有10%~20%的最終用戶響應時間花在了下載html文檔上,其余的80%~90%時間花在了下載頁面組件上。

  web性能對于用戶體驗有及其重要的影響,根據著名的`2-5-8`原則:

  当用户在2秒以内得到响应,会感觉系统的响应非常快 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受 当用户在8秒之后都没有得到响应,会感觉系统糟透了,甚至系统已经挂掉;要么打开竞争对手的网站,要么重新发起第二次请求。

  凡事都需要研究,通过科学的研究我们就可以找到事物的发展规律。这里要感谢雅虎的工程师总结的14条前端优化法则,使得我们可以站在巨人的肩膀上。《高性能網站建設》这本书中的14条优化原则,总结起来主要是以下个方面的优化:

  1.   減少HTTP請求

  2.   頁面內部優化

  3.   啓用緩存

  4.   減少下載量

  5.   網絡連接上的優化

  爲什麽減少HTTP請求可以提高Web性能?

  要回答這個問題,我們就要了解當浏覽器向服務器發送一個http請求知道獲取數據都經曆哪些過程:

  开启一个链接(tcp/ip的三次握手过程) -> 发送请求 -> 等待(网络延迟跟服务器的处理时间) -> 下载数据

  我们看一下百度首頁中的http请求在各阶段耗费的时间,上面不同的颜色代表下图中的不同阶段

  Web性能优化 网站优化 性能优化

  可以看到除了圖片之外,其余大部分http請求的事件花在了建立連接與等待階段。

  http协议建立在TIC/IP协议之上,在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。 简单来说三次握手就是一个身份确认的过程:

  (第一次握手:主机A发送位码为syn=1,随机产生seq number=1234567的数据包到服务器,主机B由SYN=1知道,A要求建立联机;)

  晴兒:你是潇哥哥嗎,我是晴兒

  (第二次握手:主机B收到请求后要确认联机信息,向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包)

  潇劍:這貨是誰,一箫一劍走江湖,下一句是什麽?

  (第三次握手:主机A收到后检查ack number是否正确,即第一次发送的seq number+1,以及位码ack是否为1,若正确,主机A会再发送ack number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则连接建立成功。)

  晴兒:這首詩。。。你真的是潇哥哥,一蕭一劍走江湖,千古情愁酒一回。。。

  潇劍:晴兒,你真的是晴兒。。。。

  (啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。)

  言归正传,这个过程也是需要消耗时间的,在百度首頁找到一个极端的例子:

  Web性能优化 网站优化 性能优化

  而等待的時間通常也大于內容下載的時間,這裏同樣找到一個極端例子:

  Web性能优化 网站优化 性能优化

  由此我們可以得出結論:一個http請求絕大多數的時間消耗在了建立連接跟等待的時間,優化的方法是減少http請求。

  如何提高web性能?

  1、減少HTTP請求

  一般來說要減少http請求通常從兩個方面下手:減少圖片的請求、減少腳本文件與樣式表的請求

  图片的减少通常有两种方式:css sprites、内联图片、IconFont。

  CSS Sprites:将多张图片合并成一幅单独的图片,使用css的background-position属性,将html元素的背景图片放到sprites 图片中的期望位置上。使用这项技术的附加优点是他降低了下载量,合并后的图片比分离的图片和更小,因为它降低了图片自身的开销(颜色表、格式信息等等)。实际项目中css sprites是一项体力活,因为开发过程中需要对这张大图进行维护(添加、减少图片),张鑫旭同学的文章中有介绍如何管理sprites图片可以作为参考(这里)。如果需要在页面中为背景、链接、导航栏提供大量的图片,css sprites绝对是一种优秀的解决方案(干净的标签、较少的图片、较短的响应时间)。

  內聯圖片:通過使用data:URL模式可以再頁面中包含圖片而無需任何額外的請求。缺點就是IE8以下的浏覽器不支持這種方式,而IE8在數據大小上有限制,只能支持23kb以內的數據。對于較小的圖片來說可以直接內聯到web頁面中,但對于大圖片內聯到頁面裏會導致頁面變大,聰明的做法是使用css,將內聯的圖片作爲背景使用,並放到外部樣式表中,這意味著數據可以緩存在樣式表內部。使用外部樣式表雖然增加了一個http請求,但樣式可以被浏覽器緩存,得到額外的收獲。另外一點需要注意:base64是有損壓縮。

  Web性能优化 网站优化 性能优化

  IconFont:圖標字體,這是近年來新流行的一種以字體代替圖片的技術。它可以適應任何分辨率而不會出現圖片模糊問題,與圖片相比它具有更小的容量,更高的靈活性(像字體一樣可以設置圖標大小、顔色、透明度、hover狀態、反轉等),IE8以上的浏覽器都支持該技術。在使用IconFont之前,你首先要確定你選則的字體庫是否是收費。詳細內容可以參考這篇文章:圖標字體化淺談

  减少脚本与样式表的请求主要原则就是合并。在实际开发中我们遵循模块化的原则将代码分散到许多小文件中,按照软件开发的原则这是完全正确的,但对于上线页面来说,每一个文件都会产生一个http请求,严重影响性能。和css sprites一样,将这些小文件合并到一个文件中,可以减少http请求的数量并缩短最终用户响应时间。在合并过程中我们还需要使用工具精简(移除不必要的字符以减小文件大小缩减下载时间)和混淆(除了移除不必要字符外,还会改写源代码,比如函数和变量名使用更短的标量名)Javascript代码。对于采用AMD或CMD进行模块化开发的同学,在合并过程中通常会将依赖的其他模块打包到一个文件中,而模板html通常以字符串的方式内联到Javascript文件中。目前最常用的前端构建工具就是glup,这里有一篇初步应用的文章:前端 | gulp 打包 require.js 模块依赖

  2、頁面內部優化

  關于頁面內部優化主要方向:樣式表放在頂部、腳本文件放在底部、避免css表達式、把腳本的樣式表放在外部、移除重複腳本

  關心性能的工程師都希望頁面能否盡快的展現在用戶面前,對于頁面中很多內容的頁面我們都希望內容能夠逐步加載,爲用戶提供可視化回饋。而將樣式表放在底部會導致浏覽器阻止內容逐步呈現。爲避免當頁面變化時重繪頁面元素,浏覽器會阻塞頁面呈現,直到樣式表解析完畢(詳細內容可以查看我的這篇博客)。所以如果將樣式表放在頂部並不會減少資源的加載時間,它減少的是頁面的呈現時間。小米主頁曾經犯過這樣的錯誤:

  Web性能优化 网站优化 性能优化

  將樣式表放在底部會阻塞頁面的逐步呈現,而將script文件放在頁面頂部同樣會阻塞頁面的逐步呈現。script元素會阻塞後續內容的解析,因爲script中可以同過document.write來更改頁面。解決的辦法就是將script標簽放在頁面底部。這樣既可以讓內容逐步呈現,也可以提高下載的並行度。如果我們確定不需要document.write那可以爲script標簽加上asyn屬性(Ie中要加上defer)提高並行下載度。

  CSS表達式是ie支持的可以用來動態更改css屬性的一種方式,我們不需要了解太多,她的書寫方式如下,一旦在産品中發現expression關鍵字就要徹底消滅。

  Web性能优化 网站优化 性能优化

  使用外部腳本和樣式這一條,我想凡是有點經驗的工程師都會這麽幹。

  移除重複腳本:這條說的主要是避免在頁面中多次加入同一份Javascript代碼,如果我們的開發中有依賴管理的方式比如AMD、CMD,基本不會出現這種情況。

  3、啓用緩存

  關于緩存的使用這裏介紹兩套方案:expires/If-Modified-Since、Cache-Control/Etag;前者是HTTP1.0中的緩存方案,後者是HTTP1.1中緩存方案,若http頭部中同時出現二者,後者的優先級更高。

  If-modified-since的方式通常被称为条件Get。浏览器缓存中保存了一个文件的副本,但需要向服务器询问此副本是否可用。If-Modified-Since是浏览器将最后修改时间发送给服务器,服务器相应头中Last-Modified进行对比;若If-Modified-Since <= Last-Modified 则浏览器读取本地副本。此时响应状态为304 Not Modified, 并不在发送响应体。

  Web性能优化 网站优化 性能优化

  Web性能优化 网站优化 性能优化

  Expries:雖然使用條件GET和304響應能夠節省時間,但浏覽器跟服務器端仍然要發送一次請求進行確認。通過明確設置副本的過期時間可以避免條件GET。當浏覽器發現響應頭中的expires時,會將過期時間和文件一起保存到緩存中去。在過期之前一直從緩存中讀取。expires頭使用一個特定的時間來指定緩存的有效期,他要求浏覽器與服務器時間完全一致。而且一旦過期,服務器端配置中需要重新設頂一個過期時間。

  Web性能优化 网站优化 性能优化

  ETag(實體標簽):是服務器用于檢查浏覽器緩存有效性的一種機制。ETag在HTTP1.1中引入,ETag是唯一標識了一個組件的一個特定版本的字符串。唯一的格式約束是這個字符串必須使用雙引號。如果浏覽器要驗證一個組件是否有效他會使用If-None-Match將etag字符串傳送給服務器。如果ETag是匹配的,服務器端會返回304.(如果實體數據需要根據User-Agent或Accept-Language來改變時,ETag提供了更高的靈活性)。對于使用服務器集群的網站來說,從一台服務器到另一台服務器,ETag通常是無法匹配的。這是ETag的問題。而且即便同時使用If-Modified-Since和If-None-Match也並不能達到預期效果。解決方法總是有的:自定義Etag格式

  Web性能优化 网站优化 性能优化

  Cache-Control:HTTP1.1引入了來代替Expires,它使用max-age指令來指定副本被緩存多久,該指令以秒爲單位定義了一個更新窗,組件從被請求開始到現在的秒數小于設定值,則一直使用副本。避免了一次http請求。相比Expries,Cache-Control指令提供了更細粒度的控制。詳細內容請看大額同學的文章:透過浏覽器看HTTP緩存

  4、減少下載量

  減少下載量最有效的方式就是开启gzip压缩,gzip是GNU开发的一种免费格式。压缩组件通过减小http响应的大小来加快响应速度。HTTP1.1通过使用Accept-Encoding来标识支持的压缩,如果服务器看到这个标识,会使用请求头中的一种方式来压缩响应。并通过Content-Encoding来通知web客户端。很多网站会压缩html文件,实际上包括xml跟json在内的任何文本都可以压缩,但图片和pdf不应该压缩。根据经验通常可以对大于1kb或2kb的文件进行压缩。压缩通常能将响应的数据量减少70%。压缩的成本在于:服务器需要耗费额外的cpu进行压缩,客户端需要解压缩。所以需要在cpu的消耗和数据块的大小之间进行取舍。

  5、優化網絡連接

  網絡連接的優化主要有三個規則:使用CDN加速、減少DNS查找、避免重定向

  CDN:CDN是地理上分布的web server的集合,用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。 这缩短了资源的传输响应时间,有效提高web性能。

  DNS用于映射主机名和IP地址,一般一次解析需要20~120毫秒。浏览器会首先根据页面的主机名进行域名解析,在有ISP返回结果之前页面不会加载任何内容,所以减少DNS查找可以有效降低等待时间。为达到更高的性能,DNS解析通常被多级别地缓存,如由ISP或局域网维护的caching server,本地机器操作系统的缓存(如windows上的DNS Client Service),浏览器。IE的缺省DNS缓存时间为30分钟,Firefox的缺省缓冲时间是1分钟。 我们能做的是尽量减少一个页面的主机名,但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究,最好将主机名控制在2-4个内。

  重定向:將一個URL重新路由到另一個URL。重定向功能是通過301和302這兩個HTTP狀態碼完成的,如:

  HTTP/1.1 301 Moved Permanently

  Location: http://example.com/newuri

  Content-Type: text/html

  浏览器自动重定向请求到Location指定的URL上,重定向的主要问题是降低了用户体验。 种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/,导致自动产生结尾斜线的原因是,浏览器在进行get请求是必须指定一些路径;如果没有路径它就会简单的使用文档根。(主机缺少结尾斜线是不会发生重定向:http://www.baidu.com)缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。以下图片是豆瓣的一个url请求:

  Web性能优化 网站优化 性能优化

  雅虎的14條優化規則在很長的一段時間裏發揮著重要作用,隨著技術的發展,單單這十四條原則已經不能夠滿足前端性能優化。【cnblogs】

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: WEB標准  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表