前端工程师-高级WEB网站前端开发测试指南

1、WEB性能测试工具主要分为三种，一种是测试页面资源加载速度的，一种是测试页面加载完毕后页面呈现、JS操作速度的，还有一种是总体上对页面进行评价分析，下面分别对这些工具进行介绍，如果谁有更好的工具也请一起分享下。AD： HYPERLINK / t _blank Firebug:Firebug 是firefox中最为经典的开发工具，可以监控请求头，响应头，显示资源加载瀑布图： HYPERLINK / t _blank HttpWatch :httpwatch 功能类似firebug，可以监控请求头，响应头，显示资源加载瀑布图。但是httpwatch还能显示GZIP压缩信息，DNS查询，TCP链接信

2、息，个人在监控http请求比较喜欢使用httpwatch，httpwatch包含IE和firefox插件。不过httpwatch专业版本是收费的，免费版本有些功能限制。 HYPERLINK /ajax/en/ t _blank DynaTraces Ajax Edition：dynaTrace 是本人常使用的1个免费工具，该工具不但可以检测资源加载瀑布图，而且还能监控页面呈现时间，CPU花销，JS分析和执行时间，CSS解析时间的等。 HYPERLINK /intl/zh-CN/webtoolkit/speedtracer/get-started.html t _blank Speed Trac

3、er:speed trace 是google chrome的1个插件，speed trace的优势点是用于监控JS的解析执行时间，还可以监控页面的重绘、回流，这个还是很强的(dynaTrace也能有这个功能)。注：安装这个插件，需要安装 Google Chrome Developer Channel 版本，但是这个链接的地址在国内好像打不开，如果打不开，请大家直接到这个地址去下载：/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类似，对各种影响网站性能的因素进行评分，yslow是yahoo的工具，本人也一直在使用，推荐一下。 HYPERLINK / t _blank webpagetest :webpagetest 是1个在线进行性能测试的网站，在该网站输入你的url，就会生成1个url加载的时间瀑布图，对所有加载的资源(

5、css,js,image等等)列出优化的清单，也是非常好用的工具。附录资料：不需要的可以自行删除WEB服务器控件在ASP.NET中，Web Form能容纳的对象主要是Server Control（服务器端控件）。控件叫服务器端的，因为这些控件都是服务器端来处理的。Server Control会在初始化的时候自动生成适合浏览器的HTML代码。这样在编写ASP.NET程序的时候，就不必考虑浏览器的兼容性问题！ 服务器端控件的执行过程是：先在服务器执行，根据执行结果生成html元素，然后发回给客户端浏览器。Web 服务器控件位于以 System.Web.UI.Webcontrols 命名的空间中，并

6、集成在 ASP.NET 的基本类库中，人们习惯称为 Web 控件。像 HTML 服务器控件一样，Web 服务器控件也 是被创建于服务器上并且需要 runat=server 属性来工作。然而，Web 服务器控件不是必 须要映射到已存在的 HTML 元素，它们可以表现为更复杂的元素。2.1 WEB 服务器控件的格式Web 服务器控件有两种具体格式。(1) 所有属性均定义在一对尖括号“”内，并以“asp:”作为前缀标志，以“/”作 为结束标志。其格式形式为：注意：属性之间要空格分开。(2) 除了 Text 属性外，其他属性均定义在一对尖括号内，并以“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允许可视化地把控件拖放到设计界面上，可视化地创建ASP.NET页面。要获得这个可视化的设计选项，可以在查看ASP.NET页面时，单击 IDE底部的Design选项卡。在这个视图中，可以把光标放在希望控件出现的地方，再在Visual Studio的Toolbox窗口中双击需要的控件。在页面的Design视图中，可以突出显示一个控件，该控件的属性就会显示在Properties窗口中。例如，在图4-1中，在设计面板上选择Button控件，其属性就显示在右下角的Properties窗口中。图 4-1在这个窗口中修改属性，就会

9、改变突出显示的控件的外观或行为。所有的控件都继承了一个特定的基类(WebControl)，所以还可以同时突出显示多个控件，一次改变这些控件的基本属性。在选择控件时，需要按住Ctrl键。2.3.2 在Source界面使用服务器控件与Design视图一样，页面的Source视图也允许把控件从Toolbox拖放到代码页面上。例如，把一个TextBox控件拖放到代码页面上，与把它拖放到设计界面上的效果相同：也可以在Source视图中突出显示一个控件，或把光标放在该控件的代码语句上，Properties窗口就会显示该控件的属性。现在就可以直接应用Visual Studio的Properties窗口中的属

10、性了，这些属性会动态添加到控件的代码中。2.3.3 处理服务器控件的事件例如，窗体上按钮的一个常见事件是Button_Click，如程序清单所示。处理按钮单击事件protected void Button1_Click(object sender，EventArgs e) / Code actions here程序清单中的事件仅在终端用户单击了窗体上的按钮时才触发，该窗体具有Button1_Click的OnClick属性值。所以事件处理程序不仅存在于ASP.NET页面的服务器端代码上，还使 用相关的ASP.NET页面标记中的服务器控件的OnClick属性关联起来，如下面的代码所示：如何触发服务

11、器控件的这些事件？有两种方式。第 一种方式是在Design视图中打开ASP.NET页面，双击要创建服务器端事件的控件。例如，双击Design视图中的Button服务器控件，无论代 码是在后台编码文件中，还是内置代码，都会在服务器端代码中创建Button1_Click事件的结构。这会为该服务器控件最常用的事件创建一个处理程序 框架。如前所述，注意Button控件有非常多的事件，双击该控件并不能得到这些事件。为了访问这些事件，应打开包含服务器端代码的页面，从IDE顶部的第一个下拉列表中选择该控件，再在第二个下拉列表中 选择该控件需要的事件。下图显示了事件下拉列表。例如，处理Button控件的Pre

12、Render事件，而不是其Click事件。该事件的处理程序会 放在服务器端代码中。第二种方式是在Visual Studio的Properties窗口中为服务器控件创建服务器端的事件。这种方式只能用于页面的Design视图。在Design视图中，突出显示要 处理的服务器控件，该控件的属性和一个图标菜单就会出现在Properties窗口中。其中一个图标是事件图标，用一个闪电图形表示，如图所示。单击事件图标会打开该控件的可用事件列表。双击其中一个事件，就会在服务器端代码中创建该事件的结构。有了事件的结构后，就可以编写触发事件时希望发生的特定操作了。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给组成控件边框的线设置线宽值。把一个数字设置为该值，就是把该数字设置为边框的宽度像素值。如果BorderColor属性没有与BorderWidth属性设置一起使用，默认的边框颜色就是黑色BorderStyle允许指定服务器控件边框的设计样式。边框默认创建为直线，但可以给边框使用许多不同的样式。BorderStyle属性的其他值有Dotted、

15、Dashed、Solid、Double、Groove、Ridge、Inset和OutsetCssClass给控件指定定制的层叠样式表(Cascading Style Sheet，CSS)类文件Enabled把这个属性的值设置为False，就关闭了控件的功能。Enabled属性默认设置为True (续表) 属 性说 明EnableTheming允许为所选的服务器控件打开主题功能。其默认值是True。这是.NET Framework 2.0中的一个新属性Font设置控件中所有文本的字体ForeColor设置控件中所有文本的颜色Height设置控件的高度SkinID给控件应用主题时设置要使用的ski

16、n。这是.NET Framework 2.0中的一个新属性Style允许把CSS样式应用于控件TabIndex设置控件在ASP.NET 页面中的tab位置。这个属性与页面上的其他控件一起使用ToolTip设置当鼠标停留在控件上一小段时间时，出现在浏览器的一个黄色框中的文本，它可以用于提供更多的指示给终端用户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控件中的提交按钮相似，都是灰色的。单击按钮时，会提交包含按钮的窗体，并引发Click事件。ImageButton控件ImageButton服务器控件使用定制图像作为窗体的按钮，实现Button的按钮功能。ImageButton控件的构件代码所示：ImageButton控件与Button控件最大

18、的区别是，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页面上有多个按钮，对于不要求触发验证的按钮，设置CausesValidation设置为False。CommandName属性设置按钮的命令名称，通过命令参数传递给按钮的Command事件。 Command事件单击按钮时发生，该事件通常用于一个Command事件响应函数处理多个按钮的Command事件，在事件函数中通过判定由事件参数传入的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 = 谁发的命令不知道.; break; 使用客户端JavaScriptButton的OnClientClick属性可以用来使用JavaScript处理客户端单击事件示例：下面页面包含按钮客户端单击事件，调用javaScirpt函数AlertHello()。和一个服务器端单击事

21、件，它们在单击按钮时触发。首先打开Java Script警告对话框（如图所示），终端用户单击OK之后，页面再提交服务器触发服务器端事件。如下程序清单所示 function hello() alert(客户端单击事件,确认一下);运行结果：HperLink控件HperLink控件可以使一个ASP.NET页面链接到另一个页面，该控件还可以将文本或图像显示为链接。表列出此控件所有的常用属性。HperLink控件主要用于定位到其他网页，并不公开任何事件。Webforms上的控制权转移的步骤如下所示：新建一个Visual C# ASP.NET应用程序并将其命名为Example2。将默认Web窗体重命名为

22、“ControlTransferDemo.aspx”。 通过向Web窗体添加两个标签、两个按钮和一个超链接，设计此Web窗体的界面，如图所示，表列出一要为这些控件设置的种种属性。表ControlTransferDemo的属性控件属性值LabelIDlblHdrLabelIDlblStatusButtonIDbtnTenNewsButtonText网球新闻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控件可以一次显示多项，并根据需要允许用户选择多页，而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网上冲浪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窗体页的容器控件，该控件可用作静态文本和其他控件的父级。Panel控件适用于以下情况。团体行为：将一组控件放置在一个面板，然后对该面板进行操纵，则可以将这组控件作为一个单元进行管理。例如，设置面板的的Visible属性，可能隐藏或显示面板中的一组属性。在运行时创建控件：Panel控件为在运行时创建的控件提供了一个方便的容器。外观：Panel控件支持外观属性（如BackColor和BorderWidth），设置这些外观属性可以为页面本区创建一个独特的外观。注意：对如RadioButton等控件进行了分组时，无需使用Panel

36、控件。PlaceHoler控件用作存储运行时添加到网页上的Web服务器控件的容器。PlaceHolder控件不生成任何可见的输出结果，只是用作网页上其他控件的容器。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