中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

深圳網(wǎng)站制作網(wǎng)頁加載前端性能思路

2013-11-03    分類: 網(wǎng)站制作

成都網(wǎng)站制作網(wǎng)頁加載前端性能思路
前端性能優(yōu)化23條
Web應(yīng)用的性能優(yōu)化思路
網(wǎng)頁加載效果實現(xiàn)

前端性能優(yōu)化23條
1. 減少HTTP請求次數(shù)

盡量合并圖片、CSS、JS。比如加載一個頁面,如果有5個css文件的話,那么會發(fā)出5次http請求,這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而如果把這個5個文件合成一個的話,就只需要發(fā)出一次http請求,節(jié)省網(wǎng)絡(luò)請求時間,加快頁面的加載。
2. 使用CDN

網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā),圖片亦然。
3. 避免空的src和href

當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時候,瀏覽器渲染的時候會把當(dāng)前頁面的URL作為它們的屬性值,從而把頁面的內(nèi)容加載進(jìn)來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires

ExiPRes是用來設(shè)置文件的過期時間的,一般對css、js、圖片資源有效。 他可以使內(nèi)容具有緩存性,這樣下回再訪問同樣的資源時就通過瀏覽器緩存區(qū)讀取,不需要再發(fā)出http請求。


5. 使用gzip壓縮內(nèi)容

gzip能夠壓縮任何一個文本類型的響應(yīng),包括html,xml,json。大大縮小請求返回的數(shù)據(jù)量。
6. 把CSS放到頂部

網(wǎng)頁上的資源加載時從上網(wǎng)下順序加載的,所以css放在頁面的頂部能夠優(yōu)先渲染頁面,讓用戶感覺頁面加載很快。
7. 把JS放到底部

加載js時會對后續(xù)的資源造成阻塞,必須得等js加載完才去加載后續(xù)的文件 ,所以就把js放在頁面底部最后加載。
8. 避免使用CSS表達(dá)式

舉個css表達(dá)式的例子
font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");1

這個表達(dá)式會持續(xù)的在頁面上計算樣式,影響頁面的性能。并且css表達(dá)式只被IE支持。


9. 將CSS和JS放到外部文件中

目的是緩存文件,可以參考原則4。 但有時候為了減少請求,也會直接寫到頁面里,需根據(jù)PV和IP的比例權(quán)衡。
10. 權(quán)衡DNS查找次數(shù)

減少主機(jī)名可以節(jié)省響應(yīng)時間。但同時,需要注意,減少主機(jī)會減少頁面中并行下載的數(shù)量。IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當(dāng)在一個頁面顯示多張圖片時,IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。

11精簡CSS和JS

這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件,把空格回車全部去掉,減少文件的大小。現(xiàn)在的壓縮工具有很多,基本主流的前端構(gòu)建工具都能進(jìn)行css和js文件的壓縮,如grunt,glup等。

深圳網(wǎng)站制作網(wǎng)頁加載前端性能思路

四川網(wǎng)站優(yōu)化排名公司

12. 避免跳轉(zhuǎn)

有種現(xiàn)象會比較坑爹,看起來沒什么差別,其實多次了一次頁面跳轉(zhuǎn)。比如當(dāng)URL本該有斜杠(/)卻被忽略掉時。例如,當(dāng)我們要訪問 http:// baidu.com 時,實際上返回的是一個包含301代碼的跳轉(zhuǎn),它指向的是 http:// baidu.com/ (注意末尾的斜杠)。在nginx服務(wù)器可以使用rewrite;Apache服務(wù)器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。 另一種是不用域名之間的跳轉(zhuǎn), 比如訪問 http:// baidu.com/bbs 跳轉(zhuǎn)到 http:// bbs.baidu.com/ 。那么可以通過使用Alias或者mod_rewirte建立CNAME(保存一個域名和另外一個域名之間關(guān)系的DNS記錄)來替代。
13. 刪除重復(fù)的JS和CSS

重復(fù)調(diào)用腳本,除了增加額外的HTTP請求外,多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存,它們都存在重復(fù)運算javaScript的問題。
14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來服務(wù)器上的一致。比last-modified date更具有彈性,例如某個文件在1秒內(nèi)修改了10次,Etag可以綜合Inode(文件的索引節(jié)點(inode)數(shù)),MTime(修改時間)和Size來精準(zhǔn)的進(jìn)行判斷,避開UNIX記錄MTime只能精確到秒的問題。 服務(wù)器集群使用,可取后兩個參數(shù)。使用ETags減少Web應(yīng)用帶寬和負(fù)載
15. 可緩存的Ajax

異步請求同樣的造成用戶等待,所以使用ajax請求時,要主動告訴瀏覽器如果該請求有緩存就去請求緩存內(nèi)容。如下代碼片段, cache:true就是顯式的要求如果當(dāng)前請求有緩存的話,直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){}, error : function(){} })1234567
16. 使用GET來完成AJAX請求

當(dāng)使用xmlhttpRequest時,瀏覽器中的POST方法是一個“兩步走”的過程:首先發(fā)送文件頭,然后才發(fā)送數(shù)據(jù)。因此使用GET獲取數(shù)據(jù)時更加有意義。
17. 減少DOM元素數(shù)量

這是一門大學(xué)問,這里可以引申出一堆優(yōu)化的細(xì)節(jié)。想要具體研究的可以看后面推薦書籍。總之大原則減少DOM數(shù)量,就會減少瀏覽器的解析負(fù)擔(dān)。
18. 避免404

比如外鏈的css、js文件出現(xiàn)問題返回404時,會破壞瀏覽器的并行加載。

19. 減少Cookie的大小

Cookie里面別塞那么多東西,因為每個請求都得帶著他跑。
20. 使用無cookie的域

比如CSS、js、圖片等,客戶端請求靜態(tài)文件的時候,減少了 Cookie 的反復(fù)傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在于瀏覽器加載圖片時它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。在每一個元素(不僅僅是圖片)它都會運算一次,增加了內(nèi)存開支,因此它的問題是多方面的。 完全避免使用AlphaImageLoader的方法就是使用PNG8格式來代替,這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader,請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片

比如你需要的圖片尺寸是50* 50,那就不用用一張500*500的大尺寸圖片,影響加載(說到這里可能有朋友會說了,后臺上傳的圖片我也沒辦法控制他上傳的尺寸啊,這里只是說的最開始做靜態(tài)頁面的時候的一些注意事項,至于后面怎么去操作,那就看網(wǎng)編怎么辦了,盡可能把自己能做的做到就行了)
23. 縮小favicon.ico并緩存

以上是Yslow的23個優(yōu)化原則,基本可以涵蓋現(xiàn)在前端大部分的性能優(yōu)化原則了,很多更加geek和精細(xì)優(yōu)化方法都是從這些原則里面延伸出來的。

前端優(yōu)化是條漫長的路,不是說一天兩天就能全部做完的。我們可以參考上面的準(zhǔn)則去把我們目前能做的都給優(yōu)化了,剩下的更加小的一些細(xì)節(jié)點不用太過著急,畢竟也是要考慮優(yōu)化性價比的。比如為了減小一個文件幾個字節(jié)花上個把月根本不值得。這些優(yōu)化的東西都可以在我們的工作中慢慢去通過積累,去通過google解決。

深圳網(wǎng)站制作網(wǎng)頁加載前端性能思路


網(wǎng)頁加載效果實現(xiàn)
<style>
/*opacity是設(shè)置遮罩透明度的,可以自己調(diào)節(jié)*/
#loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#f8f8f8;opacity:1;z-index:15000;}
#loading img{position:absolute;top:46%;left:46%;width:150px;height:150px;margin-top:-15px;margin-left:-15px;}
</style>

<div id="loading">
<img alt="" src="__PUBLIC__/img/timg.gif"><br>
</div>
<script>
document.onreadystatechange = completeLoading;

//加載狀態(tài)為complete時移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
$("#loading").hide();
}


Web應(yīng)用的性能優(yōu)化思路
一個Web應(yīng)用,不管是何種語言開發(fā),粗略的結(jié)構(gòu)無非是三層:

1. 頁面模板

可以是jsp、asp、php等頁面技術(shù),根據(jù)數(shù)據(jù)生成最終的HTML頁面,性能關(guān)鍵指標(biāo)只有一個,頁面的渲染速度。綜合各種頁面技術(shù)而言,渲染速度相差不會太大,10倍以內(nèi)。

2. 業(yè)務(wù)邏輯

用于根據(jù)業(yè)務(wù)需要將數(shù)據(jù)庫中的數(shù)據(jù)讀取到內(nèi)存中,以便通過頁面模板渲染成HTML頁面。這里面可能還包括緩存、連接池等技術(shù)。

3. 數(shù)據(jù)庫

就是數(shù)據(jù)庫,負(fù)責(zé)執(zhí)行SQL查詢并返回查詢結(jié)果。

我們假設(shè)用戶訪問一個頁面,也就是請求一個URL地址,然后得到內(nèi)容,所需要的時間是3秒鐘。其中大部分時間可能用在網(wǎng)絡(luò)傳輸上,而真正頁面執(zhí)行并生成HTML內(nèi)容所需的時間是很小的,這里假設(shè)需要100毫秒。

相當(dāng)于用戶花了兩秒多鐘在傳輸數(shù)據(jù)上,這部分時間如果能縮減,可以大大提升訪問的速度,但是這部分一般也難以提升了,因為取決于用戶本身的網(wǎng)絡(luò)情況,服務(wù)器的網(wǎng)絡(luò)情況以及中間整個路由的情況。對于一個網(wǎng)站來說,能做的就是盡可能的提升服務(wù)器的帶寬,或者使用CDN來減少中間路由環(huán)節(jié),很不幸的是,這個成本很高。

好吧,前面提到的更多是非技術(shù)因素,假設(shè)你已經(jīng)耗費巨資解決了這個問題,然后突然發(fā)現(xiàn)網(wǎng)絡(luò)太快了,可是服務(wù)器頂不住了,生成一個頁面居然要100毫秒,才幾十個并發(fā)用戶就差點要把服務(wù)器搞崩潰了。

于是來到了本文的重點部分——找出應(yīng)用的性能瓶頸。

前面我們提到的結(jié)構(gòu)中的三層:頁面模板,業(yè)務(wù)邏輯和數(shù)據(jù)庫,根據(jù)經(jīng)驗值,在這100毫秒中,三個部分占用的時間差不多為:頁面模板(5%)、業(yè)務(wù)邏輯+數(shù)據(jù)庫(95%)。

幾個準(zhǔn)則:

1. 沒必要去優(yōu)化頁面模板,這都是一些很成熟的技術(shù),就算你好不容易提升了10%的性能,這10%在整個頁面的執(zhí)行過程中只占了0.5%的比例,微乎其微,等于是前面例子中的4車道變8車道的傻瓜,我們不要去充當(dāng)傻瓜。

2. 一般瓶頸所在以及相應(yīng)處理辦法
數(shù)據(jù)庫連接:使用連接池來減少連接次數(shù)重復(fù)的數(shù)據(jù)庫查詢:使用緩存來避免重復(fù)的數(shù)據(jù)庫查詢慢查詢:使用索引來提升查詢速度,使用連接查詢替換子查詢等

簡簡單單的三條,里面卻包含了很深的功夫,特別是在數(shù)據(jù)庫查詢優(yōu)化上。

你必須在充分解決了這些應(yīng)用程序所屬的性能瓶頸之后,再去考慮系統(tǒng)級別的優(yōu)化。

瀘州網(wǎng)站建設(shè)

一些常用系統(tǒng)級別優(yōu)化包括:

1. 靜態(tài)文件和動態(tài)頁面分開處理 2. 應(yīng)用服務(wù)器的集群 3. 數(shù)據(jù)庫的集群

不要本末倒置,一個性能很差的應(yīng)用程序,你就算集群了100個節(jié)點,也不會有什么效果。

所以Web網(wǎng)站優(yōu)化三部曲:應(yīng)用程序優(yōu)化、

文章名稱:深圳網(wǎng)站制作網(wǎng)頁加載前端性能思路
文章位置:http://m.rwnh.cn/news20/19420.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司
沂源县| 大关县| 临澧县| 揭东县| 永新县| 阿图什市| 南京市| 榕江县| 青海省| 康平县| 陵川县| 双桥区| 乌拉特中旗| 彝良县| 溧阳市| 莱阳市| 竹溪县| 卫辉市| 开原市| 北碚区| 乐东| 商河县| 河东区| 诸城市| 汝城县| 海盐县| 交口县| 天气| 霞浦县| 盐山县| 防城港市| 景东| 张家川| 广饶县| 明星| 无极县| 瑞丽市| 印江| 建湖县| 满城县| 蒲江县|