前端工程師-高級WEB網(wǎng)站前端開發(fā)測試指南

1、WEB性能測試工具主要分為三種，一種是測試頁面資源加載速度的，一種是測試頁面加載完畢后頁面呈現(xiàn)、JS操作速度的，還有一種是總體上對頁面進行評價分析，下面分別對這些工具進行介紹，如果誰有更好的工具也請一起分享下。AD： HYPERLINK / t _blank Firebug:Firebug 是firefox中最為經(jīng)典的開發(fā)工具，可以監(jiān)控請求頭，響應頭，顯示資源加載瀑布圖： HYPERLINK / t _blank HttpWatch :httpwatch 功能類似firebug，可以監(jiān)控請求頭，響應頭，顯示資源加載瀑布圖。但是httpwatch還能顯示GZIP壓縮信息，DNS查詢，TCP鏈接信

2、息，個人在監(jiān)控http請求比較喜歡使用httpwatch，httpwatch包含IE和firefox插件。不過httpwatch專業(yè)版本是收費的，免費版本有些功能限制。 HYPERLINK /ajax/en/ t _blank DynaTraces Ajax Edition：dynaTrace 是本人常使用的1個免費工具，該工具不但可以檢測資源加載瀑布圖，而且還能監(jiān)控頁面呈現(xiàn)時間，CPU花銷，JS分析和執(zhí)行時間，CSS解析時間的等。 HYPERLINK /intl/zh-CN/webtoolkit/speedtracer/get-started.html t _blank Speed Trac

3、er:speed trace 是google chrome的1個插件，speed trace的優(yōu)勢點是用于監(jiān)控JS的解析執(zhí)行時間，還可以監(jiān)控頁面的重繪、回流，這個還是很強的(dynaTrace也能有這個功能)。注：安裝這個插件，需要安裝 Google Chrome Developer Channel 版本，但是這個鏈接的地址在國內(nèi)好像打不開，如果打不開，請大家直接到這個地址去下載：/chrome/eula.html?extra=devchannel HYPERLINK /intl/zh/speed/speed/ t _blank Page Speed :Page speed 是基于firebu

4、g的1個工具，主要可以對頁面進行評分，總分100分，而且會顯示對各項的改進意見，Page Speed也能檢測到JS的解析時間。 HYPERLINK /yslow/ t _blank yslow :yslow跟pge speed一樣是基于 firefoxfirebug的插件，功能與page speed類似，對各種影響網(wǎng)站性能的因素進行評分，yslow是yahoo的工具，本人也一直在使用，推薦一下。 HYPERLINK / t _blank webpagetest :webpagetest 是1個在線進行性能測試的網(wǎng)站，在該網(wǎng)站輸入你的url，就會生成1個url加載的時間瀑布圖，對所有加載的資源(

5、css,js,image等等)列出優(yōu)化的清單，也是非常好用的工具。附錄資料：不需要的可以自行刪除WEB服務器控件在ASP.NET中，Web Form能容納的對象主要是Server Control（服務器端控件）?？丶蟹掌鞫说?，因為這些控件都是服務器端來處理的。Server Control會在初始化的時候自動生成適合瀏覽器的HTML代碼。這樣在編寫ASP.NET程序的時候，就不必考慮瀏覽器的兼容性問題！ 服務器端控件的執(zhí)行過程是：先在服務器執(zhí)行，根據(jù)執(zhí)行結果生成html元素，然后發(fā)回給客戶端瀏覽器。Web 服務器控件位于以 System.Web.UI.Webcontrols 命名的空間中，并

6、集成在 ASP.NET 的基本類庫中，人們習慣稱為 Web 控件。像 HTML 服務器控件一樣，Web 服務器控件也 是被創(chuàng)建于服務器上并且需要 runat=server 屬性來工作。然而，Web 服務器控件不是必 須要映射到已存在的 HTML 元素，它們可以表現(xiàn)為更復雜的元素。2.1 WEB 服務器控件的格式Web 服務器控件有兩種具體格式。(1) 所有屬性均定義在一對尖括號“”內(nèi)，并以“asp:”作為前綴標志，以“/”作 為結束標志。其格式形式為：注意：屬性之間要空格分開。(2) 除了 Text 屬性外，其他屬性均定義在一對尖括號內(nèi)，并以“asp:control_name” 作為前綴標志，

7、以“”作為結束標志，Text 屬性放在尖括號和結束標志 的中間。其格式形式為： text 注意：control_name為控件名。示例： 2.2 服務器控件的類型ASP.NET提供了兩種不同類型的服務器控件：HTML服務器控件和Web服務器控件。這兩種類型的控件大不相同，在使用ASP.NET時，就會看出重 點是Web服務器控件。這并不是說，HTML服務器控件沒有用，它們提供了許多功能，其中一些功能Web服務器控件也沒有。2.3 用服務器控件建立頁面使用服務器控件構建ASP.NET頁面有兩種方式。可以可視化地把控件拖放到設計界面上，操縱該控件的行為。也可以直接通過輸入代碼來處理服務器控件。2.3

8、.1 在設計界面上使用服務器控件高級編程)Visual Studio 2005允許可視化地把控件拖放到設計界面上，可視化地創(chuàng)建ASP.NET頁面。要獲得這個可視化的設計選項，可以在查看ASP.NET頁面時，單擊 IDE底部的Design選項卡。在這個視圖中，可以把光標放在希望控件出現(xiàn)的地方，再在Visual Studio的Toolbox窗口中雙擊需要的控件。在頁面的Design視圖中，可以突出顯示一個控件，該控件的屬性就會顯示在Properties窗口中。例如，在圖4-1中，在設計面板上選擇Button控件，其屬性就顯示在右下角的Properties窗口中。圖 4-1在這個窗口中修改屬性，就會

9、改變突出顯示的控件的外觀或行為。所有的控件都繼承了一個特定的基類(WebControl)，所以還可以同時突出顯示多個控件，一次改變這些控件的基本屬性。在選擇控件時，需要按住Ctrl鍵。2.3.2 在Source界面使用服務器控件與Design視圖一樣，頁面的Source視圖也允許把控件從Toolbox拖放到代碼頁面上。例如，把一個TextBox控件拖放到代碼頁面上，與把它拖放到設計界面上的效果相同：也可以在Source視圖中突出顯示一個控件，或把光標放在該控件的代碼語句上，Properties窗口就會顯示該控件的屬性?，F(xiàn)在就可以直接應用Visual Studio的Properties窗口中的屬

10、性了，這些屬性會動態(tài)添加到控件的代碼中。2.3.3 處理服務器控件的事件例如，窗體上按鈕的一個常見事件是Button_Click，如程序清單所示。處理按鈕單擊事件protected void Button1_Click(object sender，EventArgs e) / Code actions here程序清單中的事件僅在終端用戶單擊了窗體上的按鈕時才觸發(fā)，該窗體具有Button1_Click的OnClick屬性值。所以事件處理程序不僅存在于ASP.NET頁面的服務器端代碼上，還使 用相關的ASP.NET頁面標記中的服務器控件的OnClick屬性關聯(lián)起來，如下面的代碼所示：如何觸發(fā)服務

11、器控件的這些事件？有兩種方式。第 一種方式是在Design視圖中打開ASP.NET頁面，雙擊要創(chuàng)建服務器端事件的控件。例如，雙擊Design視圖中的Button服務器控件，無論代 碼是在后臺編碼文件中，還是內(nèi)置代碼，都會在服務器端代碼中創(chuàng)建Button1_Click事件的結構。這會為該服務器控件最常用的事件創(chuàng)建一個處理程序 框架。如前所述，注意Button控件有非常多的事件，雙擊該控件并不能得到這些事件。為了訪問這些事件，應打開包含服務器端代碼的頁面，從IDE頂部的第一個下拉列表中選擇該控件，再在第二個下拉列表中 選擇該控件需要的事件。下圖顯示了事件下拉列表。例如，處理Button控件的Pre

12、Render事件，而不是其Click事件。該事件的處理程序會 放在服務器端代碼中。第二種方式是在Visual Studio的Properties窗口中為服務器控件創(chuàng)建服務器端的事件。這種方式只能用于頁面的Design視圖。在Design視圖中，突出顯示要 處理的服務器控件，該控件的屬性和一個圖標菜單就會出現(xiàn)在Properties窗口中。其中一個圖標是事件圖標，用一個閃電圖形表示，如圖所示。單擊事件圖標會打開該控件的可用事件列表。雙擊其中一個事件，就會在服務器端代碼中創(chuàng)建該事件的結構。有了事件的結構后，就可以編寫觸發(fā)事件時希望發(fā)生的特定操作了。2.4 控件的常見屬性ASP.NET 2.0的許多服

13、務器控件都派生于WebControl類，擁有公共屬性，并不是所有的服務器控件都派生于WebControl類中。例如，Literal、 PlaceHolder、Repeater和XML服務器控件就不是派生于WebControl基類，而是派生于Control類。HTML服務器控件也沒有派生于WebControl基類，因為它們主要用于設置HTML元素的屬性。表4-2列出了服務器控件都有的公共屬性。屬 性說 明AccessKey允許賦予與Alt鍵相關的一個字符，這樣終端用戶就可以使用鍵盤上的快捷鍵激活控件了。例如，給Button 控件的AccessKey屬性賦予K。這樣，終端用戶就不需要單擊ASP.N

14、ET頁面上的按鈕(使用鼠標控制的指針)，而可以按下Alt+K Attributes允許為Web服務器控件定義公共屬性未定義的額外屬性BackColor控制ASP.NET頁面上控件的背景色BorderColor給服務器控件的邊框設置顏色BorderWidth給組成控件邊框的線設置線寬值。把一個數(shù)字設置為該值，就是把該數(shù)字設置為邊框的寬度像素值。如果BorderColor屬性沒有與BorderWidth屬性設置一起使用，默認的邊框顏色就是黑色BorderStyle允許指定服務器控件邊框的設計樣式。邊框默認創(chuàng)建為直線，但可以給邊框使用許多不同的樣式。BorderStyle屬性的其他值有Dotted、

15、Dashed、Solid、Double、Groove、Ridge、Inset和OutsetCssClass給控件指定定制的層疊樣式表(Cascading Style Sheet，CSS)類文件Enabled把這個屬性的值設置為False，就關閉了控件的功能。Enabled屬性默認設置為True (續(xù)表) 屬 性說 明EnableTheming允許為所選的服務器控件打開主題功能。其默認值是True。這是.NET Framework 2.0中的一個新屬性Font設置控件中所有文本的字體ForeColor設置控件中所有文本的顏色Height設置控件的高度SkinID給控件應用主題時設置要使用的ski

16、n。這是.NET Framework 2.0中的一個新屬性Style允許把CSS樣式應用于控件TabIndex設置控件在ASP.NET 頁面中的tab位置。這個屬性與頁面上的其他控件一起使用ToolTip設置當鼠標停留在控件上一小段時間時，出現(xiàn)在瀏覽器的一個黃色框中的文本，它可以用于提供更多的指示給終端用戶Width設置控件的寬度許多服務器控件都有這些公共屬性。在.NET Framework 2.0中，WebControl類的新屬性有EnableTheming和SkinID。2.5 控件的種類控件可以分為：文本輸入和文本控制的控件傳輸或定位控制的控件選擇控件容器控件2.5.1 標簽、文本框文本

17、控件主要包括兩種類型，分別為Label和TextBox,其中Label控件一般是用來顯示或提醒用戶的控件，而TextBox一般是用來接受用戶輸入的控件。2.5.2 Button、ImageButton、LinkButton、HyperLink控件 Button控件默認情況下，Button控件外觀與HTML控件中的提交按鈕相似，都是灰色的。單擊按鈕時，會提交包含按鈕的窗體，并引發(fā)Click事件。ImageButton控件ImageButton服務器控件使用定制圖像作為窗體的按鈕，實現(xiàn)Button的按鈕功能。ImageButton控件的構件代碼所示：ImageButton控件與Button控件最大

18、的區(qū)別是，ImageButton的OnClick事件有不同的構造，如下程序所示：protected void ImageButton1_Click(object sender, ImageClickEventArgs e) this.Label1.Text = 點擊的x坐標為 + e.X + 縱坐標為 + e.Y; 該構造代碼使用ImageClickEventArge對象，而不是Button控件通常使用的System.EventArgs對象。可以使用這個對象的e.X和e.Y坐標確定終端用戶單擊了圖像的什么位置。LinkButtonLinkButton控件的外觀與HyperLink控件相同，但功

19、能與Button控件相同。Button的重要屬性與事件：CausesValidation屬性如果Web頁面上有多個按鈕，對于不要求觸發(fā)驗證的按鈕，設置CausesValidation設置為False。CommandName屬性設置按鈕的命令名稱，通過命令參數(shù)傳遞給按鈕的Command事件。 Command事件單擊按鈕時發(fā)生，該事件通常用于一個Command事件響應函數(shù)處理多個按鈕的Command事件，在事件函數(shù)中通過判定由事件參數(shù)傳入的CommandName判定哪一個按鈕被點擊示例代碼： 代碼：protected void Command(object sender, CommandEvent

20、Args e) switch (e.CommandName) case insert: this.Label1.Text = 我收到第一個按鈕的命令; break; case delete: this.Label1.Text = 我收到第二個按鈕的命令; break; default: this.Label1 .Text = 誰發(fā)的命令不知道.; break; 使用客戶端JavaScriptButton的OnClientClick屬性可以用來使用JavaScript處理客戶端單擊事件示例：下面頁面包含按鈕客戶端單擊事件，調(diào)用javaScirpt函數(shù)AlertHello()。和一個服務器端單擊事

21、件，它們在單擊按鈕時觸發(fā)。首先打開Java Script警告對話框（如圖所示），終端用戶單擊OK之后，頁面再提交服務器觸發(fā)服務器端事件。如下程序清單所示 function hello() alert(客戶端單擊事件,確認一下);運行結果：HperLink控件HperLink控件可以使一個ASP.NET頁面鏈接到另一個頁面，該控件還可以將文本或圖像顯示為鏈接。表列出此控件所有的常用屬性。HperLink控件主要用于定位到其他網(wǎng)頁，并不公開任何事件。Webforms上的控制權轉移的步驟如下所示：新建一個Visual C# ASP.NET應用程序并將其命名為Example2。將默認Web窗體重命名為

22、“ControlTransferDemo.aspx”。 通過向Web窗體添加兩個標簽、兩個按鈕和一個超鏈接，設計此Web窗體的界面，如圖所示，表列出一要為這些控件設置的種種屬性。表ControlTransferDemo的屬性控件屬性值LabelIDlblHdrLabelIDlblStatusButtonIDbtnTenNewsButtonText網(wǎng)球新聞ImageButtonIDimgBtnSoccerImageButtonimageUrlHyperLinkIDlnkTargetHyperLinkText板球新聞HyperLinkNavigateUrlhttp:/www.CricketNHyp

23、erLinkTarget_blank將以下代碼（粗體）添加到Button和ImagButton控件的Click事件。編譯和運行該示例。2.5.3 選擇控件有時候，可能需要從選項中選擇一個或多個選項，在這種情況下，通過使用ASP.NET中的選擇控件來進行選擇。通過使用Web控件，可以向窗體添加4種主要類型的選擇控件。CheckBox:為用戶提供一種方法在true/fals、yes/no或on/off 選項之間切換。RadioButton:用于只從選項列表中選擇一個選項。DropDownList:允許用戶從預定義列表中選擇一項。ListBox:允許用戶從預定義列表中選擇一項或多項。接下來對每個控件

24、做具體敘述。CheckBox控件有多個選項且用戶可以選擇多個選項時，則使用CheckBox控件。RadioButton控件有多個選項且用戶只能選擇一個選項時，則使用RadioButton控件, DropDownList控件表示允許用戶從下拉列表中選擇一項的控件。ListBox控件ListBox允許用戶從預定義列表中選擇一項或多項。與DropDownList控件不同之處在于ListBox控件可以一次顯示多項，并根據(jù)需要允許用戶選擇多頁，而DropDownList只能顯示一個，并且用戶只能選擇一個。以下是演示這些控件的示例的步驟。（1）新建一個VisualC# ASP.NET應用程序并將其命名為E

25、xample3。（2）將Webform重命名為“SelectionControlsDemo.aspx”（3）通過向Web窗體添加7個標簽、兩個文本框、兩個單選按鈕、5個復選框、1個下拉列表、1個列表框和1個按鈕，設計如圖所示的Web窗機界面。（4）下表列出了要為這些控件設置的各種屬性控件 屬性值 LabelID lblNameLabelText姓名LabelID lblGenderLabelText性別LabelID lblAgeLabelText年齡LabelID lblSalLabelText薪水范圍 LabelID lblHobbyLabelText愛好 LabelID lblOwner

26、shipLabelText所有權LabelID lblInfoTextBoxIDtxtNameTextBoxIDtxtAgeRadioButtonIDradGenderMRadioButtonText男RadioButtonGroupNameChooserRadioButtonIDradGenderFRadioButtonText女RadioButtonGroupNameChooserCheckBoxIDchkMusicCheckBoxText音樂CheckBoxIDchkNetSurfingCheckBoxText網(wǎng)上沖浪CheckBoxIDchkReadingCheckBoxText閱讀C

27、heckBoxIDchkGamesCheckBoxText游戲CheckBoxIDchkOthersCheckBoxText其他DropDownListIDcboSalRangeListBoxIDlstOwnershipButtonIDbtnSubmitButtonText完成private string strGender=; private string strSalRange=; private string strHobbies=;private string strOwnership=; private void Page_Load(object sender, System.Eve

28、ntArgs e)if(!IsPostBack)cboSalRange.Items.Add(小于 $10000);cboSalRange.Items.Add($10000 至 $20000);cboSalRange.Items.Add($20001 至 $40000);cboSalRange.Items.Add($40001 至 $60000);cboSalRange.Items.Add($60001 至 $80000);lstOwnership.Items.Add(公寓住宅);lstOwnership.Items.Add(土地);lstOwnership.Items.Add(有價證券);pr

29、ivate void btnSubmit_Click(object sender, System.EventArgs e)lblInfo.Text=lblInfo.Text + 姓名： + txtName.Text + ;lblInfo.Text=lblInfo.Text + 性別： + strGender + ;lblInfo.Text=lblInfo.Text + 年齡： + txtAge.Text + ;lblInfo.Text=lblInfo.Text + 薪水范圍： + strSalRange + ;lblInfo.Text=lblInfo.Text + 愛好： + strHobbi

30、es + ;lblInfo.Text=lblInfo.Text + 所有權： + strOwnership ;private void radGenderM_CheckedChanged(object sender, System.EventArgs e)strGender=男;private void radGenderF_CheckedChanged(object sender, System.EventArgs e)strGender=女;private void cboSalRange_SelectedIndexChanged(object sender, System.EventAr

31、gs e)strSalRange= cboSalRange.SelectedItem.Text;private void chkMusic_CheckedChanged(object sender, System.EventArgs e)if(strHobbies=)strHobbies=strHobbies + chkMusic.Text;elsestrHobbies=strHobbies + , + chkMusic.Text;private void chkNetSurfing_CheckedChanged(object sender, System.EventArgs e)if(str

32、Hobbies=)strHobbies=strHobbies + chkNetSurfing.Text;elsestrHobbies=strHobbies + , + chkNetSurfing.Text;private void chkReading_CheckedChanged(object sender, System.EventArgs e)if(strHobbies=)strHobbies=strHobbies + chkReading.Text;elsestrHobbies=strHobbies + , + chkReading.Text;private void chkGames

33、_CheckedChanged(object sender, System.EventArgs e)if(strHobbies=)strHobbies=strHobbies + chkGames.Text;elsestrHobbies=strHobbies + , + chkGames.Text;private void chkOthers_CheckedChanged(object sender, System.EventArgs e)if(strHobbies=)strHobbies=strHobbies + chkOthers.Text;elsestrHobbies=strHobbies

34、 + , + chkOthers.Text;private void lstOwnership_SelectedIndexChanged(object sender, System.EventArgs e)if(strOwnership=)strOwnership=strOwnership + lstOwnership.SelectedValue;elsestrOwnership=strOwnership + , + lstOwnership.SelectedValue;2.5.4 Panel和PlaceHolder控件ASP.NET中有兩種類型的容器控件，分別為Panel和 PlaceHol

35、der控件。Panel控件Panel Web服務器控件提供一個位于Web窗體頁的容器控件，該控件可用作靜態(tài)文本和其他控件的父級。Panel控件適用于以下情況。團體行為：將一組控件放置在一個面板，然后對該面板進行操縱，則可以將這組控件作為一個單元進行管理。例如，設置面板的的Visible屬性，可能隱藏或顯示面板中的一組屬性。在運行時創(chuàng)建控件：Panel控件為在運行時創(chuàng)建的控件提供了一個方便的容器。外觀：Panel控件支持外觀屬性（如BackColor和BorderWidth），設置這些外觀屬性可以為頁面本區(qū)創(chuàng)建一個獨特的外觀。注意：對如RadioButton等控件進行了分組時，無需使用Panel

36、控件。PlaceHoler控件用作存儲運行時添加到網(wǎng)頁上的Web服務器控件的容器。PlaceHolder控件不生成任何可見的輸出結果，只是用作網(wǎng)頁上其他控件的容器。PlaceHolder控件的Control.Controls集合可以用于添加或刪除PlaceHolder控件中的控件。屬性：最常用屬性是用于添加/刪除此容器控件的子控件的Controls屬性。事件：所有事件都繼承自WebControl類。通常不處理此控件的事件，子控件的的特定事件按照控件的方式進行處理。以下是使用PlaceHolder的示例新建一個Visual C# ASP.NET應用程序，并將其命名為Example4。將Webfo

37、rm命名為”ContainerControlsDemo.aspx”。通過添加Panel控件和PlaceHolder控件，設計如圖所示的Web窗體界面，表列出了要為控件設置的各種屬性。控件屬性值PanelIDpnlAddPlacHolderIDphControlsTextBoxIDtxtNameRadioButtonListIDItemsRepeatDirectionrdlSex男，女，默認男被選中Horizontal(水平)TextBoxIDtxtNumberCheckBoxListIDItemsRepeatDirection定義全局變量。將以下代碼添加到Page_Load 事件。privat

38、e int nNumber;private void Page_Load(object sender, System.EventArgs e)if (!Page.IsPostBack )nNumber=0;（6）將下列代碼輸入btnAdd_Clickprivate void btnAdd_Click(object sender, System.EventArgs e)Panel pnPerson=new Panel() ;Table tbTemp=new Table();switch(nNumber % 3)case 1:pnPerson.BackColor=Color.Red;break;case 2:pnPerson.BackColor=Color.Green