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

相关文章
|
7天前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
22天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
37 3
|
8天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
12天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
17 3
|
19天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
21天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
39 6
|
23天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
56 7
|
22天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
33 2
|
23天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
24 3
|
23天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
36 2
下一篇
无影云桌面