當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【web前端优化】前端无优化，庸人自扰之！

發(fā)布時間：2023/12/13 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了【web前端优化】前端无优化，庸人自扰之！小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

我發(fā)現(xiàn)一個人厲害不只是他厲害，他的名字也一定要跟著厲害才行，比如我刀狂劍癡葉小釵了，若是老夫叫做刀狂劍癡葉小草，估計(jì)就缺少氣勢了！！！

又如百世經(jīng)綸一頁書，如果叫做百世經(jīng)綸一本書估計(jì)也不會是絕代高手了！說了我給標(biāo)題取了個很霸氣的名字：

“前端無優(yōu)化，庸人自擾之”，其實(shí)我也不知道他是什么意思了，好了，啰嗦結(jié)束進(jìn)入正題。

最近遇到一個有意思的東西，是關(guān)于考試題相關(guān)的東東，其實(shí)就是我有很多試題，需要生成試卷讓人來做了（真實(shí)應(yīng)用有點(diǎn)不同），但是他卻讓我想起了我的初戀！

我原來花了一年時間做的考試系統(tǒng)，所以有了這篇文章。

PS：本人前端水平很水，在此就是大言不慚罷了，甚至想引出真正的高手解決問題，各位看到我的“優(yōu)化”權(quán)當(dāng)笑話看吧

在線考試系統(tǒng)

有圖有真相

圖太長給刪了。。。

當(dāng)年我還很純潔

那一年是我在大學(xué)的一年，那一年我還以為蒼老師只是老師，那一年我不會把波多野結(jié)衣當(dāng)做林志玲，那一年我還是處男。。。。

于是那一年天真的我做出了以上頁面，并且承受住了學(xué)院400人的C語言期末考試。但是如今我們來看看頁面，來看看我的純潔吧：

因?yàn)橛袔啄甑臅r間了，我已經(jīng)忘了當(dāng)年開發(fā).net項(xiàng)目的歲月了，但是我隱約記得，我的這個界面使用gridview搞出來的，里面還好像有很多嵌套。。

1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Student_Exam_Ajax_Paper.aspx.cs" 2 Inherits="Student_Student_Exam_Ajax_Paper" %> 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head id="Head1" runat="server"> 7 <title>考試界面</title> 8 <%--曾沿用--%> 9 <link href="../css/style.css" type="text/css" rel="stylesheet" /> 10 <%--曾沿用--%> 11 <link href="css/public.css" rel="stylesheet" type="text/css" /> 12 <link href="css/master.css" rel="stylesheet" type="text/css" /> 13 <style type="text/css"> 14 body 15 { 16 padding-bottom: 70px; 17 background: #e2f1ff url(http://exam.51edu.com/images/pagebodybg.jpg) 0 0 repeat-x; 18 } 19 .wlArea880 20 { 21 margin: 5px 0px 0px; 22 border: 1px solid #ecc9c9; 23 width: 300px; 24 height: 20px; 25 font-size: 12px; 26 line-height: 18px; 27 background-color: #fff0f0; 28 color: #333; 29 } 30 </style> 31 32 <script type="text/javascript"> 33 34 35 var xmlhttprequest_yas //XMLHttp對象 36 37 38 39 var m=<%=lbRemainTime.Text %>; 40 if(m==90) 41 { 42 m=m+1; 43 } 44 var TimeNum=m*60; 45 var timeStr; 46 47 48 function createXmlHttpRequest() 49 { 50 //IE7,FireFox and others; 51 if(window.XMLHttpRequest) 52 { 53 xmlhttprequest_yas=new XMLHttpRequest(); 54 } 55 else if(window.ActiveXObject)//IE其它的版本 56 { 57 xmlhttprequest_yas=new ActiveXObject("Microsoft.XMLHTTP"); 58 } 59 else 60 { 61 alert("Your browser cannt support XMLHttpRequest!") 62 } 63 } 64 65 function autoputin() //自動提交發(fā)送Ajax請求，完成的業(yè)務(wù)邏輯為，將當(dāng)前剩余時間，與當(dāng)前考試時間讀入，并將考試狀態(tài)讀出。 66 { 67 var remaintime=m; //獲得剩余時間 68 var RequestURL="AjaxServer.aspx?remaintime="+remaintime+"&examid="+<%=lbExamID.Text %>+""; 69 70 createXmlHttpRequest(); 71 if(xmlhttprequest_yas) 72 { 73 74 xmlhttprequest_yas.onreadystatechange=callBack; 75 xmlhttprequest_yas.open("GET",RequestURL,true) ; 76 xmlhttprequest_yas.send(null); 77 // xmlhttprequest_yas=null; 78 } 79 } 80 81 82 function callBack() 83 { 84 if(xmlhttprequest_yas.readyState==4) 85 { 86 87 88 89 //xml中讀出狀態(tài) 90 var stateNodes=xmlhttprequest_yas.responseXML.documentElement.getElementsByTagName("state"); 91 var state ; 92 state=stateNodes[0].text; 93 94 //var o= document.getElementById("wlqq"); 95 // getreturn =state; 96 // o.value=getreturn ; 97 98 // if(state==0) 99 // { 100 // alert("你已經(jīng)斷線，請盡快同管理員聯(lián)系"); 101 // } 102 103 if(state ==3) 104 { 105 document.getElementById("btOk").click(); 106 } 107 108 } 109 } 110 111 112 113 var timeShowId="timeshow"; //設(shè)置時間顯示層ID 114 115 116 117 function ChangeTime(){ 118 TimeNum--; 119 if(TimeNum > 0){ 120 var mn=TimeNum/60; 121 if(m-mn==1) 122 { 123 var now=new Date(); 124 m--; 125 126 autoputin(); 127 } 128 129 timeStr=setTimeout("ChangeTime()",1000); 130 } 131 else{ 132 m=0; 133 autoputin(); 134 document.getElementById("btOk").click(); 135 } 136 var mmm,sss; 137 mmm=Math.floor(TimeNum/60) 138 sss=TimeNum%60 139 if(mmm<10) 140 mmm="0"+mmm; 141 if(sss<10) 142 sss="0"+sss; 143 144 document.getElementById(timeShowId).innerHTML= mmm+"分"+sss+"秒"; 145 146 } 147 148 </script> 149 150 <script type="text/javascript" charset="UTF-8"> 151 152 var xmlhttprequest_wl //XMLHttp對象 153 154 155 function createXmlHttpRequestForProblem() 156 { 157 158 //IE7,FireFox and others; 159 if(window.XMLHttpRequest) 160 { 161 162 xmlhttprequest_wl=new XMLHttpRequest(); 163 } 164 else if(window.ActiveXObject)//IE其它的版本 165 { 166 xmlhttprequest_wl=new ActiveXObject("Microsoft.XMLHTTP"); 167 } 168 else 169 { 170 alert("Your browser cannt support XMLHttpRequest!") 171 } 172 } 173 174 175 function putinanwer(answer , id) //自動提交發(fā)送Ajax請求，完成的業(yè)務(wù)邏輯為，將當(dāng)前剩余時間，與當(dāng)前考試時間讀入，并將考試狀態(tài)讀出。 176 { 177 178 var RequestURL="AjaxServerPutIn.aspx?id="+id+"&answer="+escape(answer)+"&rand="+new Date().getTime().toString(36)+""; 179 180 createXmlHttpRequestForProblem(); 181 if(xmlhttprequest_wl) 182 { 183 184 185 xmlhttprequest_wl.onreadystatechange=callBackAnswer; 186 xmlhttprequest_wl.open("GET",RequestURL,true) ; 187 xmlhttprequest_wl.setRequestHeader("Content-Type", "utf-8"); 188 xmlhttprequest_wl.send(null); 189 190 } 191 192 } 193 194 195 196 function callBackAnswer() 197 { 198 if(xmlhttprequest_wl.readyState==4) 199 { 200 201 // var o= document.getElementById("wlqq"); 202 var getreturns=xmlhttprequest_wl.responseXML.documentElement.getElementsByTagName("getreturn"); 203 var getreturn ; 204 getreturn =getreturns[0].text; 205 // o.value=getreturn ; 206 if(getreturn==0) 207 { 208 alert("你已經(jīng)斷線，請盡快同監(jiān)考老師聯(lián)系,或者重新登錄考試！"); 209 window.close(); 210 } 211 212 //alert(xmlhttprequest_wl.responseText); 213 214 //alert("你已經(jīng)斷線，請盡快同管理員聯(lián)系"); 215 216 } 217 218 219 } 220 221 222 </script> 223 224 <script language="JavaScript"> 225  258 259 260  272 273 </script> 274 275 <script type="text/javascript"> 276 277 　//更改字體大小 278 　　var status0=''; 279 　　var curfontsize=12; 280 　　var curlineheight=20; 281 　　var count=1; 282 　　function fontZoomA(){ 283 　　 if(curfontsize>8){ 284 　　 document.getElementById('fontzoom').style.fontSize=(--curfontsize)+'px'; 285 　　 document.getElementById('fontzoom').style.lineHeight=(--curlineheight)+'px'; 286 　　 } 287 　　} 288 　　function fontZoomB(){ 289 　　 if(curfontsize<100){ 290 　　 document.getElementById('fontzoom').style.fontSize=(++curfontsize)+'px'; 291 　　 document.getElementById('fontzoom').style.lineHeight=(++curlineheight)+'px'; 292 　　 } 293 　　} 294 </script> 295 296 </head> 297 <body onload="ChangeTime()"> 298  299 <div id="paperBox" runat="server"> 300 <div id="paperBoxTop"> 301 <div class="pagelogo"> 302 <img src="images/pagelogo.jpg" width="168" height="79" border="0" /> 303 </div> 304 <div class="paperBoxtext"> 305 <span>歡迎您， 306 <%=lbStudentName.Text %> 307 </span> 308 </div> 309 </div> 310  311 <div id="paperCont"> 312 <form id="paperForm" runat="server"> 313 <h2 class="box_title"> 314 <asp:Label ID="lbName" runat="server" Text="Label"></asp:Label> 315 <asp:Label ID="lbStateTime" runat="server" Text="Label" Visible="false"></asp:Label> 316 <%--測試Ajax傳輸問題 317 318 319 <input type="text" id="wlqq" value="111" style=" width:400px;" /> 320 --%> 321 322 <br /> 323 </h2> 324 <div class="box_sttg"> 325 <span>所屬課程： 326 <asp:Label ID="lbCourse" runat="server" Text="Label"></asp:Label> 327 </span><span>試卷性質(zhì)： 328 <asp:Label ID="lbFlag" runat="server" Text="Label"></asp:Label></span> <span>難度系數(shù)： 329 <asp:Label ID="lbGrade" runat="server" Text="Label"></asp:Label>【0為隨機(jī)難度】 330 </span> 331 </div> 332 <div class="box_sttg"> 333 <table width="100%"> 334 <tr> 335 <td> 336 <span> 337 <asp:Label ID="lbTime" runat="server" Text="1" Visible="false"></asp:Label></span> <span>總分： 338 <asp:Label ID="lbScore" runat="server" Text="Label"></asp:Label> 339 </span> 340 341 【字體：<a href="javascript:fontZoomB();" target="_self">↑大</a> <a href="javascript:fontZoomA();" target="_self">↓小</a>】 342 </td> 343 </tr> 344 </table> 345 </div> 346 <div class="pagerref"> 347 <table cellpadding="0" cellspacing="0" width="400px" align="center"> 348 <tr> 349 <td align="right" valign="top"> 350 剩余時間： 351 </td> 352 <td align="left" valign="top" style="color: Red;"> 353 <asp:Label ID="lbRemainTime" runat="server" Visible="false"></asp:Label> 354 <asp:Label ID="timeshow" runat="server"></asp:Label> 355 </td> 356 </tr> 357 </table> 358 <input type="hidden" id="answerQuestionNum" name="answerQuestionNum" /> 359 </div> 360 <div class="coda-slider-wrapper"> 361 <div class="coda-slider preload" id="coda-slider-1"> 362  363 <table cellpadding="0px" cellspacing="0px" width="100%" class="text" id="fontzoom" > 364 <tr> 365 <td align="left" valign="top"> 366 <br /> 367 <table cellpadding="0px" cellspacing="0px" width="100%"> 368 <tr> 369 <td align="left" valign="top"> 370 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="90%" 371 BorderStyle="None" GridLines="None" OnRowDataBound="GridView1_RowDataBound"> 372 <Columns> 373 <asp:TemplateField HeaderText="基礎(chǔ)型選擇題"> 374 <HeaderStyle HorizontalAlign="Center" /> 375 <HeaderTemplate> 376 <table cellpadding="0px" cellspacing="0px" width="100%"> 377 <tr> 378 <td width="10%"> 379 </td> 380 <td width="90%" align="left" style="font-size: 14px; font-weight: bold; color: Black;"> 381 基礎(chǔ)型選擇題 382 </td> 383 </tr> 384 </table> 385 </HeaderTemplate> 386 <ItemTemplate> 387 <br /> 388 <table cellpadding="0px" cellspacing="0px" width="100%"> 389 <tr> 390 <td align="right" valign="top" width="50px"> 391 <span style="font-size: 14px; font-weight: bold; color: Black;"> 392 <%# Container.DataItemIndex+1%>.    </span> 393 </td> 394 <td align="left" valign="top" width="650px" > 395 <%# Eval("ProblemName")%> 396 </td> 397 <td align="right" valign="top" width="150px"> 398 【分值：<%# Eval("ProblemScore")%>分】 399 <%-- 400 <%# lbSingleScore.Text = "【分值："+Eval("ProblemScore")+"分】 "%> 401 --%> 402 </td> 403 </tr> 404 <tr> 405 <td> 406 </td> 407 <td align="left" valign="top" colspan="2"> 408 <div> 409 <asp:Label ID="lbID" runat="server" Text='<%# Eval("ExamDetailID")%>' Visible="false"></asp:Label> 410 <asp:Label ID="lbStudentAnswer" runat="server" Text='<%# Eval("StudentAnswer")%>' 411 Visible="false"></asp:Label> 412 <asp:RadioButtonList ID="radioSingleBasic" runat="server" Width="300px" RepeatDirection="Horizontal"> 413 <asp:ListItem Value="A" Text="A" onclick='putinanwer("A", this.value)'></asp:ListItem> 414 <asp:ListItem Value="B" Text="B" onclick='putinanwer("B", this.value)'></asp:ListItem> 415 <asp:ListItem Value="C" Text="C" onclick='putinanwer("C", this.value)'></asp:ListItem> 416 <asp:ListItem Value="D" Text="D" onclick='putinanwer("D", this.value)'></asp:ListItem> 417 </asp:RadioButtonList> 418 </div> 419 <div runat="server" id="div1" visible="false" style="border-bottom: 1px dashed red; 420 border-left: 1px dashed red; border-right: 1px dashed red; border-top: 1px dashed red;"> 421 <table cellpadding="0px" cellspacing="0px" width="100%"> 422 <tr> 423 <td align="right" valign="top" width="10%"> 424 <span style="color: Red;">正確答案：</span> 425 </td> 426 <td align="left" valign="top" width="90%"> 427 <%# Eval("ProblemAnswer")%> 428 </td> 429 </tr> 430 <tr> 431 <td align="right" valign="top" width="10%"> 432 <span style="color: Red;">試卷性質(zhì)：</span> 433 </td> 434 <td align="left" valign="top" width="90%"> 435 <%# Eval("FlagDes")%>.   .   <span style="color: Red;">所屬章節(jié)：</span><%# Eval("CourseName")%>.   436 .   <span style="color: Red;">試題難度：</span><%# Eval("GradeName")%>.   437 .   438 </td> 439 </tr> 440 <tr> 441 <td align="right" valign="top" width="10%"> 442 <span style="color: Red;">【解析】：</span> 443 </td> 444 <td align="left" valign="top" width="90%"> 445 <%# Eval("ProblemDes")%> 446 </td> 447 </tr> 448 </table> 449 </div> 450 </td> 451 </tr> 452 </table> 453 </ItemTemplate> 454 </asp:TemplateField> 455 </Columns> 456 </asp:GridView> 457 </td> 458 </tr> 459 </table> 460 </td> 461 </tr> 462 <tr> 463 <td align="left" valign="top"> 464 <br /> 465 <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" Width="90%" 466 BorderStyle="None" GridLines="None" OnRowDataBound="GridView2_RowDataBound"> 467 <Columns> 468 <asp:TemplateField HeaderText="綜合型選擇題"> 469 <HeaderStyle HorizontalAlign="Center" /> 470 <HeaderTemplate> 471 <table cellpadding="0px" cellspacing="0px" width="100%"> 472 <tr> 473 <td width="10%"> 474 </td> 475 <td width="90%" align="left" style="font-size: 14px; font-weight: bold; color: Black;"> 476 綜合型選擇題 477 </td> 478 </tr> 479 </table> 480 </HeaderTemplate> 481 <ItemTemplate> 482 <br /> 483 <table cellpadding="0px" cellspacing="0px" width="100%"> 484 <tr> 485 <td align="right" valign="top" width="50px"> 486 <span style="font-size: 14px; font-weight: bold; color: Black;"> 487 <%# Container.DataItemIndex+1%>.    </span> 488 </td> 489 <td align="left" valign="top" width="700px"> 490 <%# Eval("ProblemName")%> 491 </td> 492 <td align="left" valign="top" width="100px"> 493 【分值：<%# Eval("ProblemScore")%>分】 494 <%-- 495 <%# lbSingleScore.Text = "【分值："+Eval("ProblemScore")+"分】 "%> 496 --%> 497 </td> 498 </tr> 499 <tr> 500 <td> 501 </td> 502 <td align="left" valign="top" colspan="2"> 503 <div> 504 <asp:Label ID="lbID" runat="server" Text='<%# Eval("ExamDetailID")%>' Visible="false"></asp:Label> 505 <asp:Label ID="lbStudentAnswer" runat="server" Text='<%# Eval("StudentAnswer")%>' 506 Visible="false"></asp:Label> 507 <asp:RadioButtonList ID="radioSingle" runat="server" Width="300px" RepeatDirection="Horizontal"> 508 <asp:ListItem Value="A" Text="A" onclick='putinanwer("A", this.value)'></asp:ListItem> 509 <asp:ListItem Value="B" Text="B" onclick='putinanwer("B", this.value)'></asp:ListItem> 510 <asp:ListItem Value="C" Text="C" onclick='putinanwer("C", this.value)'></asp:ListItem> 511 <asp:ListItem Value="D" Text="D" onclick='putinanwer("D", this.value)'></asp:ListItem> 512 </asp:RadioButtonList> 513 </div> 514 <div runat="server" id="div1" visible="false" style="border-bottom: 1px dashed red; 515 border-left: 1px dashed red; border-right: 1px dashed red; border-top: 1px dashed red;"> 516 <table cellpadding="0px" cellspacing="0px" width="100%"> 517 <tr> 518 <td align="right" valign="top" width="10%"> 519 <span style="color: Red;">正確答案：</span> 520 </td> 521 <td align="left" valign="top" width="90%"> 522 <%# Eval("ProblemAnswer")%> 523 </td> 524 </tr> 525 <tr> 526 <td align="right" valign="top" width="10%"> 527 <span style="color: Red;">試卷性質(zhì)：</span> 528 </td> 529 <td align="left" valign="top" width="90%"> 530 <%# Eval("FlagDes")%>.   .   <span style="color: Red;">所屬章節(jié)：</span><%# Eval("CourseName")%>.   531 .   <span style="color: Red;">試題難度：</span><%# Eval("GradeName")%>.   532 .   533 </td> 534 </tr> 535 <tr> 536 <td align="right" valign="top" width="10%"> 537 <span style="color: Red;">【解析】：</span> 538 </td> 539 <td align="left" valign="top" width="90%"> 540 <%# Eval("ProblemDes")%> 541 </td> 542 </tr> 543 </table> 544 </div> 545 </td> 546 </tr> 547 </table> 548 </ItemTemplate> 549 </asp:TemplateField> 550 </Columns> 551 </asp:GridView> 552 </td> 553 </tr> 554 <tr> 555 <td align="left" valign="top"> 556 <br /> 557 <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False" Width="90%" 558 BorderStyle="None" GridLines="None" OnRowDataBound="GridView3_RowDataBound"> 559 <Columns> 560 <asp:TemplateField HeaderText="填空題"> 561 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Bottom" /> 562 <HeaderTemplate> 563 <table cellpadding="0px" cellspacing="0px" width="100%"> 564 <tr> 565 <td width="10%"> 566 </td> 567 <td width="90%" align="left" style="font-size: 14px; font-weight: bold; color: Black;"> 568 填空題 569 </td> 570 </tr> 571 </table> 572 </HeaderTemplate> 573 <ItemTemplate> 574 <br /> 575 <table cellpadding="0px" cellspacing="0px" width="100%"> 576 <tr> 577 <td align="right" valign="top" width="50px"> 578 <span style="font-size: 14px; font-weight: bold; color: Black;"> 579 <%# Container.DataItemIndex+1%> 580 .   </span> 581 </td> 582 <td align="left" valign="top" width="700px"> 583 <%# Eval("ProblemName")%> 584 </td> 585 <td align="left" valign="top" width="100px"> 586 【分值：<%# Eval("ProblemScore")%>分】 587 </td> 588 </tr> 589 <tr> 590 <td> 591 </td> 592 <td align="left" valign="top" colspan="2"> 593 <div> 594 <input type="text" id="txtFills" onchange='putinanwer(this.value,<%# Eval("ExamDetailID")%>)' 595 style="width: 300px;" class="wlArea880" value='<%# Eval("StudentAnswer")%>' /> 596 <br /> 597 <asp:TextBox ID="txtFill" runat="server" Width="300px" CssClass="wlArea880" Visible="false" 598 ToolTip='<%# Eval("ExamDetailID")%>'></asp:TextBox> 599 <asp:Label ID="lbID" runat="server" Text='<%# Eval("ExamDetailID")%>' Visible="false"></asp:Label> 600 <asp:Label ID="lbStudentAnswer" runat="server" Text='<%# Eval("StudentAnswer")%>' 601 Visible="false"></asp:Label> 602 </div> 603 <div runat="server" id="div4" visible="false" style="border-bottom: 1px dashed red; 604 border-left: 1px dashed red; border-right: 1px dashed red; border-top: 1px dashed red;"> 605 <table cellpadding="0px" cellspacing="0px" width="100%"> 606 <tr> 607 <td align="right" valign="top" width="10%"> 608 <span style="color: Red;">正確答案：</span> 609 </td> 610 <td align="left" valign="top" width="90%"> 611 <%# Eval("ProblemAnswer")%> 612 </td> 613 </tr> 614 <tr> 615 <td align="right" valign="top" width="10%"> 616 <span style="color: Red;">試卷性質(zhì)：</span> 617 </td> 618 <td align="left" valign="top" width="90%"> 619 <%# Eval("FlagDes")%>.   .   <span style="color: Red;">所屬章節(jié)：</span><%# Eval("CourseName")%>.   620 .   <span style="color: Red;">試題難度：</span><%# Eval("GradeName")%>.   621 .   622 </td> 623 </tr> 624 <tr> 625 <td align="right" valign="top" width="10%"> 626 <span style="color: Red;">【解析】：</span> 627 </td> 628 <td align="left" valign="top" width="90%"> 629 <%# Eval("ProblemDes")%> 630 </td> 631 </tr> 632 </table> 633 </div> 634 </td> 635 </tr> 636 </table> 637 </ItemTemplate> 638 </asp:TemplateField> 639 </Columns> 640 </asp:GridView> 641 </td> 642 </tr> 643 <tr> 644 <td align="left" valign="top"> 645 </td> 646 </tr> 647 </table> 648 <asp:Label ID="lbPaperID" runat="server" Text="Label" Visible="false"></asp:Label> 649 <asp:Label ID="lbStudentID" runat="server" Text="Label" Visible="false"></asp:Label> 650 <asp:Label ID="lbNum" runat="server" Text="Label" Visible="false"></asp:Label> 651 <asp:Label ID="lbExamID" runat="server" Text="Label" Visible="false"></asp:Label> 652 <asp:Label ID="lbStudentName" runat="server" Text="Label" Visible="false"></asp:Label> 653 <%-- <asp:Label ID="lbSingleScore" runat="server" ></asp:Label>--%> 654 <div class="pagescoll"> 655 <asp:Button ID="btOk" runat="server" OnClick="btOk_Click" Text="全部完成,交卷" CssClass="btnOrgBig" 656 UseSubmitBehavior="False" /> 657 </div> 658  659 </div> 660 </div> 661 </form> 662  663 </div> 664 </div> 665 <div id="smallLay" class="hidden"> 666 <div class="laybottom"> 667 </div> 668 </div> 669  670 </body> 671 </html> 當(dāng)年純潔的代碼

我還記得當(dāng)年我很神奇的組織了許多學(xué)生在實(shí)驗(yàn)室?guī)臀覝y試，生怕考試過程中出現(xiàn)問題，甚至在期末考試前一周仍然這是問題那是問題，最后終于承受住了各種壓力寫下了我大學(xué)光輝的一頁，甚至現(xiàn)在想起來我還是很自豪的呢。

PS：本來想運(yùn)行起來，截圖說明問題的，無奈確實(shí)找不到數(shù)據(jù)庫了，而且這個給改來改去也不知道改成什么樣了，所以只有作罷

雖然無圖，但是我這里還是可以說說原來系統(tǒng)存在的一些問題：

① 使用了很多.net服務(wù)器空間，光是頁面就有36K（還沒有算生成后的大小呢。。。）

② 請看當(dāng)時數(shù)據(jù)庫中存的數(shù)據(jù)：

我也是絕技沒有想到我當(dāng)時會這樣存儲題目的（用的fck直接由word上將題目考進(jìn)來的）

③ 我們來看看我們一共有多少題呢？

PS：乖乖，這家伙居然還有這么多題呢。。。

結(jié)果

不知道從什么時間開始，不知道是什么原因，系統(tǒng)變得很卡！！！然后呢，然后我就大四了，也就沒有管這個系統(tǒng)了，而且還靠著這個系統(tǒng)忽悠了幾個offer呢！

去年今日此門中

現(xiàn)在回過頭來看，整個系統(tǒng)的優(yōu)化似乎心里都有譜了，除卻數(shù)據(jù)庫的東西，我們來看看前端的優(yōu)化吧，首先我從數(shù)據(jù)庫中選擇100到單選題出來：

PS：當(dāng)然還是使用gridview啦！！！哇哈哈

哎，當(dāng)年的題導(dǎo)入的怎一個丑字了得！現(xiàn)在讓我們來處理一番：

第一步去掉多余的東西，只留下題目即可！但是：

真正到看到題目我突然明白了當(dāng)年為什么會這么做，因?yàn)樗怯懈袷降摹！！?/p>

引出問題，萬能的json

其實(shí)之前扯這么多東西都沒什么意義的，原因就是在工作中遇到的，我這里沒膽子寫出來，所以就東扯西扯的搞了這么久，其實(shí)就是為了數(shù)據(jù)源！！！

真實(shí)的場景是這樣的：

我有100道題，已經(jīng)存于數(shù)據(jù)庫中，而且每個用戶讀取不會改變，后端同事問我如何請求？

我想了下，首先得到了這一個結(jié)論：

后端同事將100道題目形成json格式的數(shù)據(jù)，我直接將json格式保存在js中，頁面加載時候就引用了

我當(dāng)時的思考點(diǎn)就是，反正題目是不變的，所以我就將它靜態(tài)化得了，完了又遇到了一個問題：

因?yàn)轫撁嫔弦淮沃伙@示10道題，點(diǎn)擊下一頁再顯示下一道題，于是問題出來了： 1 我將所有題目一次生成，點(diǎn)擊下一頁控制隱藏顯示即可 2 我只生成10道題，點(diǎn)擊下一頁再生成10道題

我當(dāng)時在這兩種方案徘徊了好久，地球人都知道方案一簡單一點(diǎn)，而且迫于項(xiàng)目時間，我當(dāng)時就直接運(yùn)用了第一種方案！！！

對于這個各位大哥可以說下自己的想法，請一定說出來喲！

無心插柳，去你的json

我當(dāng)時做著做著，突然發(fā)現(xiàn)另外一件事情：

1 我會將數(shù)據(jù)庫中的數(shù)據(jù)變?yōu)閖son格式時因?yàn)槲蚁霚p少服務(wù)器以及數(shù)據(jù)庫的壓力

2 因?yàn)閿?shù)據(jù)是不變的，所以我可以這樣做

于是我傻傻的意識到一件事情：

1 我將不變的json數(shù)據(jù)生成了不變的題目，而且每次我都會使用js生成相同的HTML！！！！

于是我感覺我真是弱爆了！！！

我為什么不直接將json生成的html保存為頁面片呢？？？

考試系統(tǒng)與頁面片

當(dāng)年，我為了防止學(xué)生作弊，會隨機(jī)生成100套試卷，而學(xué)生進(jìn)入時隨機(jī)選擇一套來做，所以作弊的情況可以杜絕，那么我們進(jìn)入今天的思考階段：

在人數(shù)比較多的情況下，生成試卷會不停的訪問服務(wù)器，不停的讀取數(shù)據(jù)庫，在剛剛開始考試的時間點(diǎn)，對我們來說是個噩夢！但是，經(jīng)過最近發(fā)生的事情，我覺得我們是不是可以這樣做：1 每個人都會做100道題 2 每個人做的題來源于數(shù)據(jù)庫 3 所以我們要讀取數(shù)據(jù)庫。。。。但是，我們是不是可以這樣做呢？提前生成試卷，并且學(xué)生考試時候，根本不訪問數(shù)據(jù)庫，直接由服務(wù)器拖頁面：我們生成試卷時候，設(shè)置一個隨機(jī)數(shù)生成100套不同的頁面片學(xué)生進(jìn)入考試時候，根據(jù)隨機(jī)是直接引入htm頁面片生成試卷

如此一來我們考試時候的性能是否會有所優(yōu)化呢，原來能承受400人同時考試的系統(tǒng)可否變?yōu)?00人呢？我不知道，也許我永遠(yuǎn)都不會知道了！！！

光說不練假把式

說了那么多也沒有意思，我們今天就來干一下吧，實(shí)現(xiàn)我們兒時的夢想：

PS： 100道題太多，我們搞10道就是了吧。。。。

然后我們將這100道題保存為變化p_1-p_10的頁面片，用戶進(jìn)來時候隨機(jī)引入即可，我這里就暫時不寫了。。。。。

結(jié)語

在寫之前，我還以為能寫一篇好文章呢，寫著寫著就找不著北了，哎就這樣吧。。。。?

轉(zhuǎn)載于:https://www.cnblogs.com/yexiaochai/archive/2013/05/24/3097744.html

總結(jié)

以上是生活随笔為你收集整理的【web前端优化】前端无优化，庸人自扰之！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： tracepath 路由跟踪命令
下一篇：判断浏览器是否为IE内核的最简单的方法