【web前端优化】前端无优化,庸人自扰之!

  1. 云栖社区>
  2. 博客>
  3. 正文

【web前端优化】前端无优化,庸人自扰之!

范大脚脚 2017-12-07 21:40:00 浏览1036
展开阅读全文
前言

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

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

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

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

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

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,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
范大脚脚
+ 关注