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

相关文章
|
3月前
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
4月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
6月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
2月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
3月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
88 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
424 4
|
6月前
|
前端开发 安全 UED
2024年前端性能优化新策略
2024年前端性能优化策略涵盖代码分割与环境变量管理。代码分割通过动态导入和按需加载CSS减少初始加载时间;环境变量管理则确保敏感信息安全,简化多环境配置。结合最新工具和技术,可大幅提升Web应用性能与用户体验。
|
5月前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
6月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
102 6

热门文章

最新文章