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

相关文章
|
9天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
10天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
11天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
2天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
3天前
|
缓存 负载均衡 数据库
优化后端性能:提升Web应用响应速度的关键策略
在当今数字化时代,Web应用的性能对于用户体验至关重要。本文探讨了如何通过优化后端架构和技术手段,提升Web应用的响应速度。从数据库优化、缓存机制到异步处理等多个方面进行了深入分析,并提出了一系列实用的优化策略,以帮助开发者更好地应对日益增长的用户访问量和复杂的业务需求。
9 1
|
4天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
4天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
12 3
|
4天前
|
机器学习/深度学习 前端开发 算法
使用机器学习优化前端用户体验
在当今高度竞争的互联网市场中,用户体验是至关重要的。本文将探讨如何利用机器学习技术来优化前端用户体验,从而提高用户满意度和留存率。我们将介绍如何利用机器学习算法分析用户行为数据,优化网站性能和内容推荐,以及如何实时调整界面设计和交互方式,从而实现个性化、智能化的用户体验。
|
6天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
8天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度:7个实用技巧
在当今互联网时代,网页加载速度对用户体验至关重要。本文将介绍7个实用的技巧,帮助前端开发者优化网页加载速度,提升用户体验。从压缩资源到异步加载,从图片优化到缓存策略,这些技巧将帮助你在前端开发中取得更好的效果。