大型網站建設：前端性能優(yōu)化和規(guī)范

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

為邛崍等地區(qū)用戶提供了全套網頁設計制作服務，及邛崍網站建設行業(yè)解決方案。主營業(yè)務為網站設計制作、成都網站建設、邛崍網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

* 數據庫連接超過大限制，一般表現為程序的連接池滿，拒絕了與數據庫的連接。
* 數據庫死鎖
* Web Server 超過大連接數（一般在虛擬主機上才會限制）
* 內存泄漏
* Http連接數太多，即訪問量超過了機器和軟件設計正常所能提供的服務

而今天分享的主要是比較偏向前端

瀏覽器請求和響應的過程

第一步、瀏覽器預處理

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

第二步、查詢DNS

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

DNS緩存

瀏覽器DNS緩存計算機DNS緩存服務器DNS緩存（TTL）

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

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

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

第三步、建立連接

優(yōu)化規(guī)則-- 使用內容分發(fā)網絡

美國十大Internet網站和CDN服務提供商

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

Ctrip使用的China-Cache和網宿

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

按頁面內容劃分域名，在合適的資源服務器上存放文件

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

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

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

a)js文件（不超過7個）

1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js)

2.數據文件js（1-2個）

3.頻道公用js(1個）和頁面私有js（1-2個）

不含ga.js、uiscript.asp和外鏈其他網站的js

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

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

• 大量的廣告和產品圖片可能會造成，圖片請求數很大，可能造成總請求數指標吃緊，

這個只能從設計上搞定，需要權衡

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

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

圖片地圖 Ctrip首頁例子

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

避免內部無效的鏈接

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

搜索引擎不友好、

即時內容為空，加載也需要時間、會阻止頁面加載

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

第五步、等待響應

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

在重定向完畢并且HTML下載完畢之前，是沒有任何東西顯示給用戶的

涉及服務器負載、數據查詢、服務器端緩存等

第七步、接收數據

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

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

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

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

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

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

第八步、讀取Cache

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

應用于不經常變化的組件，包括腳本、樣式表、Flash組件、圖片
Expires和Cache-Control

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

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

第九步、處理元素

不要對image和pdf等二進制文件進行gzip壓縮

第十步、渲染元素

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

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

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

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

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

（默認情況下，IE是2個而FF是8個）

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

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

必須為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 方面有幾個需要達成的目標：

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

新聞標題：大型網站建設：前端性能優(yōu)化和規(guī)范
文章鏈接：http://jinyejixie.com/article28/scsscp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、靜態(tài)網站、響應式網站、微信小程序、移動網站建設、營銷型網站建設

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区