<em id="l4gxk"><noframes id="l4gxk">

<em id="l4gxk"></em>
      
      

         手機(jī)版 微信公眾號 新浪微博 友情鏈接
        當(dāng)前位置: 網(wǎng)站首頁 > 建站設(shè)計(jì) > 設(shè)計(jì)文章 > 文章 當(dāng)前位置: 設(shè)計(jì)文章 > 文章

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

        時(shí)間:2013-11-13    點(diǎn)擊: 次    來源:網(wǎng)絡(luò)    作者:佚名 - 小 + 大

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

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

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

        瀏覽器請求加載前過程
         

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

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

        第二步、查詢DNS

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

        DNS緩存

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

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

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

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

        第三步、建立連接

        優(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個(gè))

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

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

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

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

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

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

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

         

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

          圖片地圖   Ctrip首頁例子 

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

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

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

        搜索引擎不友好、 

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

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

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

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

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

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

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

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

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

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

        規(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,因?yàn)槲覀兡壳按蟛糠諮s和Css都做了Gzip和緩存技術(shù),可以充分利用。

        第九步、處理元素

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

         第十步、渲染元素

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

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

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

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

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

        (默認(rèn)情況下,IE是2個(gè)而FF是8個(gè))

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

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

         必須為0 

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

        影響瀏覽器渲染時(shí)間

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

        盡量使用GIF和PNG

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

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

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

        大型的項(xiàng)目在前端 JS 方面有幾個(gè)需要達(dá)成的目標(biāo): 

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

        上一篇:Godaddy主機(jī)快速安裝Zen Cart程序建立網(wǎng)站教程

        下一篇:謹(jǐn)防網(wǎng)絡(luò)支付常見七大騙局

         推薦閱讀
      1. Copyright © 2009—2025 ,www.julong-ads.com,All Rights Reserved. |  黔ICP備2023009491號-1  |  貴公網(wǎng)安備52010302003427號
      2. 關(guān)于本站  |  網(wǎng)站聲明  |  網(wǎng)站導(dǎo)航  |  留言交流  |  友情鏈接  |  祝福頻道  |  微信公眾號  |  新浪微博  |  我的大學(xué)  |  我的高中  |  簡歷2009
      3. 版權(quán)聲明:凡注明本站原創(chuàng)文章、作品,未經(jīng)本人許可,任何人或機(jī)構(gòu)不得以任何形式對本站內(nèi)容進(jìn)行復(fù)制作商業(yè)用途.
      4. 本站部分文章、資源來自互聯(lián)網(wǎng),版權(quán)歸原作者及網(wǎng)站所有,如果侵犯了您的權(quán)利,請及時(shí)致信告知我站.
      5. 地址:中國·貴州·貴陽  郵編:550018   微信公眾號:WEBZZQ  郵箱:admin@zouzhiqiang.com
      6. QQ:470870191 歡迎各位站長加入個(gè)人網(wǎng)站交流討論QQ群: 15410235
      7. 訪問統(tǒng)計(jì):
      8. 伊人久久精品无码av一区| 精品熟女少妇AV免费久久| 国产一级持黄大片99久久| 2021少妇久久久久久久久久| 国产农村妇女毛片精品久久| 久久无码高潮喷水| 热久久这里只有精品| 中文字幕无码久久精品青草| 精品久久777| 亚洲精品无码久久久久去q| 久久99精品国产99久久| 日产精品久久久久久久| 国产精品久久久久久久久久免费| 亚洲色欲久久久久综合网| 99麻豆久久久国产精品免费| 久久久午夜精品| 一级做a爱片久久毛片| 99久久夜色精品国产网站| 久久99精品久久久久久水蜜桃| 精品久久久久久亚洲精品| 久久精品国产男包| 久久艹国产| 999久久久免费国产精品播放| 蜜臀av性久久久久蜜臀aⅴ| 久久99精品九九九久久婷婷| 91久久香蕉国产熟女线看| 无码人妻久久一区二区三区免费| 亚洲欧洲久久久精品| 久久夜色撩人精品国产| 久久一区二区免费播放| 国产精品无码久久综合网| 韩国三级中文字幕hd久久精品| 国产精品视频久久| 久久国产精品99精品国产987| www久久久天天com| 精品国产VA久久久久久久冰| 久久精品中文闷骚内射| 97久久超碰成人精品网站| 久久精品成人免费网站| 久久最近最新中文字幕大全| 国产99久久久久久免费看|