<,html>">

国产三级黄色在线网址_日韩欧美成人影院_国产精品国产名人在线_“黄片在线免费看”_51免费午夜啪啪_金瓶梅在线3D456影院_欧美色 亚洲色 偷拍_免费国产精品黄片_黄色三级电影在线播放_国产人妖视频一区二区精品

北京網(wǎng)站制作|北京網(wǎng)站制作公司|北京網(wǎng)站設(shè)計|北京網(wǎng)站設(shè)計公司-龍禧網(wǎng)絡(luò)專注網(wǎng)站建設(shè)19年,服務(wù)客戶超5000家!

業(yè)務(wù)咨詢:158-0164-8880

大型網(wǎng)站建設(shè):前端性能優(yōu)化和規(guī)范

發(fā)布時間:2013-10-30    瀏覽:

  

Web性能涉及的范圍太廣,但一般web開發(fā)者在程序上線以后很多都曾遇到過性能的問題。普遍表現(xiàn)為頁面速度開始急劇變慢,正常訪問時間變的很長,或則干脆給你拋出異常錯誤頁面。這里會涉及到很多可能發(fā)生的情況,舉例幾個最主要發(fā)生的情況:

 * 數(shù)據(jù)庫連接超過最大限制,一般表現(xiàn)為程序的連接池滿,拒絕了與數(shù)據(jù)庫的連接。
 * 數(shù)據(jù)庫死鎖
 * Web Server 超過最大連接數(shù)(一般在虛擬主機上才會限制)
 * 內(nèi)存泄漏
 * Http連接數(shù)太多,即訪問量超過了機器和軟件設(shè)計正常所能提供的服務(wù) 
 
而今天分享的主要是比較偏向前端

瀏覽器請求和響應(yīng)的過程

瀏覽器請求加載前過程
 

第一步、瀏覽器預(yù)處理

查詢Cache:讀取Cache 或者發(fā)送304請求

\

第二步、查詢DNS

優(yōu)化規(guī)則--減少DNS查找

DNS緩存

瀏覽器DNS緩存 計算機DNS緩存 服務(wù)器DNS緩存(TTL)

使用Keep-Alive特性 
減少DNS查找

當客戶端的DNS緩存為空時,DNS查找的數(shù)量與Web頁面中唯一主機名的數(shù)量相等。減少唯一主機名的數(shù)量就可以減少DNS查找的數(shù)量。

較少的域名來減少DNS查找(2-4個主機)

第三步、建立連接

優(yōu)化規(guī)則-- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)

美國十大Internet網(wǎng)站和CDN服務(wù)提供商

頁面靜態(tài)化,取決于發(fā)布系統(tǒng)

Ctrip使用的China-Cache和網(wǎng)宿

優(yōu)化規(guī)則--用域名劃分頁面內(nèi)容 

按頁面內(nèi)容劃分域名,在合適的資源服務(wù)器上存放文件

第四步、發(fā)送請求

優(yōu)化規(guī)則-- 減少HTTP請求

 HTTP請求30-40,合并文件,圖片地圖,內(nèi)聯(lián)圖像

a)js文件(不超過7個)

1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js)
2.數(shù)據(jù)文件js(1-2個)
3.頻道公用js(1個)和頁面私有js(1-2個)

不含ga.js、uiscript.asp和外鏈其他網(wǎng)站的js

b) css文件不超過4個,各頻道首頁和全站首頁不超過3個。

c) 目前無法解決的是allyes廣告的請求數(shù)。


• 大量的廣告和產(chǎn)品圖片可能會造成,圖片請求數(shù)很大,可能造成總請求數(shù)指標吃緊,

    這個只能從設(shè)計上搞定,需要權(quán)衡

• 目前老頁面可能css和js文件請求數(shù)可能會超標

 

優(yōu)化規(guī)則- – 優(yōu)化CSS Spirite

  圖片地圖   Ctrip首頁例子 

優(yōu)化規(guī)則– 避免404錯誤

避免內(nèi)部無效的鏈接
 

規(guī)則優(yōu)化 –不要使用frameset,少使用iframe

搜索引擎不友好、 

即時內(nèi)容為空,加載也需要時間、會阻止頁面加載

禁止使用iframe引入外部資源,不包括allyes廣告,不包括about:blank的空頁面。
 

第五步、等待響應(yīng)

優(yōu)化規(guī)則 --避免重定向

在重定向完畢并且HTML下載完畢之前,是沒有任何東西顯示給用戶的
\
涉及服務(wù)器負載、數(shù)據(jù)查詢、服務(wù)器端緩存等
 

第七步、接收數(shù)據(jù)

優(yōu)化規(guī)則 -- 壓縮組件

HTML文檔、腳本和樣式表、XML和JSON的文本響應(yīng) 壓縮如何工作
壓縮通常能將響應(yīng)的數(shù)據(jù)量減少將近70%

優(yōu)化規(guī)則 -- 精簡Javascript和Css

從代碼中移除不必要的字符以減少其大小,減少加載時間。

規(guī)則規(guī)則– 盡量縮減頁面大小

頁面必須小于150K(不含圖片)
a) 靜態(tài)文件是否gzip
b) 圖片是否壓縮優(yōu)化過

第八步、讀取Cache

優(yōu)化規(guī)則-- 添加Expire或Cache-Control

應(yīng)用于不經(jīng)常變化的組件,包括腳本、樣式表、Flash組件、圖片
Expires和Cache-Control

規(guī)則規(guī)則 -- 使用外部的Js和Css文件

盡可能使用外部Js和Css,因為我們目前大部分Js和Css都做了Gzip和緩存技術(shù),可以充分利用。

第九步、處理元素

不要對image和pdf等二進制文件進行g(shù)zip壓縮

 第十步、渲染元素

優(yōu)化規(guī)則 -- 將樣式表放在頂部

 界面原型頁面必須將樣式表置于頁面頂部,開發(fā)人員如無特殊原因也必須將樣式表置于頂部。 

以往多數(shù)是因為masterpage原因無法將所有樣式表置頂,在改版修改masterpage時,盡可能按照此原則進行設(shè)計。 

優(yōu)化規(guī)則 – 建議將腳本放在底部

 一般瀏覽器可以允許并行下載,取決于主機個數(shù)、帶寬等

(默認情況下,IE是2個而FF是8個)

下載腳本時并行下載實際上是被禁用的。
 

優(yōu)化規(guī)則-- 移除重復(fù)腳本

 必須為0 

優(yōu)化規(guī)則 -- 避免CSS表達式

影響瀏覽器渲染時間

優(yōu)化規(guī)則 – 優(yōu)化圖像

盡量使用GIF和PNG

盡量使用png/gif格式的圖片,png的圖片優(yōu)先,但是必須注意如要兼容IE6,則png使用一定要注意透明問題。

圖片在上次前一定要先用工具壓縮優(yōu)化(png、jpg)

 Javascript開發(fā)規(guī)范

大型的項目在前端 JS 方面有幾個需要達成的目標: 

  1. 代碼邏輯分層
  2. 避免全局變量
  3. 便于多人協(xié)作開發(fā)
  4. 各部分代碼模塊化,可以按需加載
  5. 保持全局變量的清潔
  6. 可進行單元測試

新聞推薦

熱度排行

北京龍禧科技發(fā)展有限公司 電話:158 0164 8880 早8:00—晚22:00(周一至周日) 在線咨詢
在線咨詢 電話咨詢