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

前言

我发现一个人厉害不只是他厉害，他的名字也一定要跟着厉害才行，比如我刀狂剑痴叶小钗了，若是老夫叫做刀狂剑痴叶小草，估计就缺少气势了！！！

又如百世经纶一页书，如果叫做百世经纶一本书估计也不会是绝代高手了！说了我给标题取了个很霸气的名字：

“前端无优化，庸人自扰之”，其实我也不知道他是什么意思了，好了，啰嗦结束进入正题。

最近遇到一个有意思的东西，是关于考试题相关的东东，其实就是我有很多试题，需要生成试卷让人来做了（真实应用有点不同），但是他却让我想起了我的初恋！

我原来花了一年时间做的考试系统，所以有了这篇文章。

PS：本人前端水平很水，在此就是大言不惭罢了，甚至想引出真正的高手解决问题，各位看到我的“优化”权当笑话看吧

在线考试系统

有图有真相

图太长给删了。。。

当年我还很纯洁

那一年是我在大学的一年，那一年我还以为苍老师只是老师，那一年我不会把波多野结衣当做林志玲，那一年我还是处男。。。。

于是那一年天真的我做出了以上页面，并且承受住了学院400人的C语言期末考试。但是如今我们来看看页面，来看看我的纯洁吧：

因为有几年的时间了，我已经忘了当年开发.net项目的岁月了，但是我隐约记得，我的这个界面使用gridview搞出来的，里面还好像有很多嵌套。。

 当年纯洁的代码

我还记得当年我很神奇的组织了许多学生在实验室帮我测试，生怕考试过程中出现问题，甚至在期末考试前一周仍然这是问题那是问题，最后终于承受住了各种压力写下了我大学光辉的一页，甚至现在想起来我还是很自豪的呢。

PS：本来想运行起来，截图说明问题的，无奈确实找不到数据库了，而且这个给改来改去也不知道改成什么样了，所以只有作罢

虽然无图，但是我这里还是可以说说原来系统存在的一些问题：

① 使用了很多.net服务器空间，光是页面就有36K（还没有算生成后的大小呢。。。）

② 请看当时数据库中存的数据：

我也是绝技没有想到我当时会这样存储题目的（用的fck直接由word上将题目考进来的）

③ 我们来看看我们一共有多少题呢？

PS：乖乖，这家伙居然还有这么多题呢。。。

结果

不知道从什么时间开始，不知道是什么原因，系统变得很卡！！！然后呢，然后我就大四了，也就没有管这个系统了，而且还靠着这个系统忽悠了几个offer呢！

去年今日此门中

现在回过头来看，整个系统的优化似乎心里都有谱了，除却数据库的东西，我们来看看前端的优化吧，首先我从数据库中选择100到单选题出来：

PS：当然还是使用gridview啦！！！哇哈哈

哎，当年的题导入的怎一个丑字了得！现在让我们来处理一番：

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

真正到看到题目我突然明白了当年为什么会这么做，因为他是有格式的。。。

引出问题，万能的json

其实之前扯这么多东西都没什么意义的，原因就是在工作中遇到的，我这里没胆子写出来，所以就东扯西扯的搞了这么久，其实就是为了数据源！！！

真实的场景是这样的：

我有100道题，已经存于数据库中，而且每个用户读取不会改变，后端同事问我如何请求？

我想了下，首先得到了这一个结论：

后端同事将100道题目形成json格式的数据，我直接将json格式保存在js中，页面加载时候就引用了

我当时的思考点就是，反正题目是不变的，所以我就将它静态化得了，完了又遇到了一个问题：

因为页面上一次只显示10道题，点击下一页再显示下一道题，于是问题出来了：

1 我将所有题目一次生成，点击下一页控制隐藏显示即可

2 我只生成10道题，点击下一页再生成10道题

我当时在这两种方案徘徊了好久，地球人都知道方案一简单一点，而且迫于项目时间，我当时就直接运用了第一种方案！！！

对于这个各位大哥可以说下自己的想法，请一定说出来哟！

无心插柳，去你的json

我当时做着做着，突然发现另外一件事情：

1 我会将数据库中的数据变为json格式时因为我想减少服务器以及数据库的压力

2 因为数据是不变的，所以我可以这样做

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

1 我将不变的json数据生成了不变的题目，而且每次我都会使用js生成相同的HTML！！！！

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

我为什么不直接将json生成的html保存为页面片呢？？？

考试系统与页面片

当年，我为了防止学生作弊，会随机生成100套试卷，而学生进入时随机选择一套来做，所以作弊的情况可以杜绝，那么我们进入今天的思考阶段：

复制代码

在人数比较多的情况下，生成试卷会不停的访问服务器，不停的读取数据库，在刚刚开始考试的时间点，对我们来说是个噩梦！

但是，经过最近发生的事情，我觉得我们是不是可以这样做：

1 每个人都会做100道题

2 每个人做的题来源于数据库

3 所以我们要读取数据库

。。。。

但是，我们是不是可以这样做呢？提前生成试卷，并且学生考试时候，根本不访问数据库，直接由服务器拖页面：

我们生成试卷时候，设置一个随机数生成100套不同的页面片

学生进入考试时候，根据随机是直接引入htm页面片生成试卷

复制代码

如此一来我们考试时候的性能是否会有所优化呢，原来能承受400人同时考试的系统可否变为800人呢？我不知道，也许我永远都不会知道了！！！

光说不练假把式

说了那么多也没有意思，我们今天就来干一下吧，实现我们儿时的梦想：

PS： 100道题太多，我们搞10道就是了吧。。。。

然后我们将这100道题保存为变化p_1-p_10的页面片，用户进来时候随机引入即可，我这里就暂时不写了。。。。。

结语

在写之前，我还以为能写一篇好文章呢，写着写着就找不着北了，哎就这样

本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/archive/2013/05/24/3097744.html，如需转载请自行联系原作者