1. 合并脚本文件
包括脚本,样式和图片,可以有选择的把一些Js和css可以合并成一个文件,一些图片可以使用css sprites技术.这样做的原因是什么?做过web开发的人都知道,js和css基本是不变的,是静态文件,图片亦然.那么不变的文件如果适当的合并在一起,会有什么效果呢?请求的次数从多次变成了一次.这样http请求的次数就减少了.当时合并之后,文件体积变大了,会影响速度吗?答:肯定会啊,不过这里是需要权衡的,比如我100份静态文件,合并成10份还是合并成1份这就得看你得具体情况了.
2. 指定Expires或者Cache-Control,
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
动态页面,在代码中添加cache-control,表示多少时间之后过期,如:
response.setHeader("Cache-Control", "max-age=3600");
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号
这一点是大多数人都忽略得,之前很多人在坛子上发布自己得小系统,还有demo,ahuaxuan跑过去一看,my god,一堆又一堆得js,css,既没有恰当得合并,也没有设置过期时间.每次刷新页面都要重新下载这一堆又一堆的js,css.http请求那叫一个多啊.无谓了流量就这样产生了.
这一点在企业应用的系统中也时有发生.比如我们使用extjs作为前端的技术,400多k啊,每打开一个页面都导入,下载这个js,够无聊的.那么童子们可能就要问了,静态文件为啥不用apache,lighttpd等呢,答,用了又怎么样,不设expire或者max-age不是一样要下载,最好的方法是写一个filter,再filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),那么就设置一个max-age,这样就ok,太简单了,几行代码就可以搞定.快哉.
3. 缓存Ajax请求
缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(ie)限制(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo,先不管其真假,我们从另外一个方面来考虑一下为什么最好使用get方式,讲一个ahuaxuan经历过的事情,之前有一个项目的ajax请求使用了post方式,后来发现经常出错,而且抛出了squid的错误,因为我们的网站使用了squid,问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,那么squid的一个特性是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反http协议中的语义),把ajax请求改成get方式之后,一切恢复如常.
4. 移除重复的js
重复的js导入也有可能导致ie重新加载该脚本.没啥好说的,照做.
5. 避免重定向
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。这时候会返回一个301的状态码,然后浏览器重新发起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您可要小心了,因为普通的重定向其实是server在response header中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.
小节,ahuaxuan把减少http请求次数分为了以上5个小点,每个小点之后附加一些实例,大家可以根据这些点来判断自己的项目是否可以有优化的地方.
使用cdn
让内容更靠近用户,这有啥好说呢,原理很简单,就是根据用户浏览器所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的机器.一般的cdn服务商是通过开发自己的dns server来达到这个目的的.不过这个是通常情况哦,技术实力比较高,或者场景比较特殊的公司会开发自己的cdn.当然不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件,等等等等)
减小返回数据的体积
1. 使用gzip压缩返回数据
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩一下之后只有50k-100k,那么网络的流量就立刻下来了,压缩的代价是服务器端要压缩文件,需要消耗cpu,浏览器需要解压文件,也需要消耗cpu,不过对于现代这么nb的pc,来说,浏览器解压一下数据带来的cpu消耗简直不值一提.所以您就压吧.不过压的时候要小心哦,有的浏览器在特定场景下会出去一些小bug,导致页面不正常.比如ie6在跨域的时候可能会有些小麻烦,把这部分数据的gzip去掉就可以了.
2. 最小化js文件和css文件
压缩js可以使用JSMin或者YUI Compressor,后者同时可以压缩css,这个也没啥好说的,照做吧.
3. 将css和js独立成外部文件
其实这一点也可以看成是区分不变数据和变化数据.很多人喜欢在页面商写很多很多的js和css,这些数据其实都是不会变化的数据,也就是说这些数据也是可以缓存在浏览器上的,通过把它们独立成外部文件,可以把这些数据缓存起来.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端,减少了网络带宽的开销.
优化Cookie
1. 减小cookie体积
能不放就别放吧,为啥呀,cookie就象钥匙串,只有出门和回家得时候才用,但是一整天你都要带在身上,麻烦不.
2. 合理设置Cookie域
由于二级域名可以拿到一级域名得cookie,那么如果,而二级域名之间确不能相互共享cookie,所以合理得设置cookie得域名也可以避免无必要得带宽浪费和响应速度得增加.
3. 设置合理的cookie过期时间
该过期就过期,不要让不必要的数据一直带在身上走来走去.
4. 使用域分离
为图片或者其他静态资源文件使用子域或者建立新的独立域名(申请新的域名),避免无必要的cookie传输,当然也是要在有必要得情况下,图片类网站肯定有必要,javaeye上得图片并没有使用域分离,所以我们得cookie其实会带到坛子得图片服务器上去,每次请求图片都是如此(不过还好,坛子里没有什么图片,所以这方面的浪费不大).
小结,其实cookie上得问题,单词请求看上去也不是什么大问题,好像是无所谓得事情,就那么几十个byte,至于吗,不过大家都听说过水滴石穿,绳锯木断的故事.所以该做的,我们还是要做,正所谓,勿以善小而不为,勿以恶小而为之.
优化浏览器加载
1. 将css放在页面顶部加载
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清 楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档<head />内加载你的样式表。
2. 将js放在页面底部加载
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
Js放在底部加载其实并不影响浏览器展示页面,除非用户会在js加载完成之前就调用某个js方法,比如说页面刚展现到一半,但是恰好这一半里有一部分是调用了还未下载的js,这个时候就会出问题了,如果童子们遇到这种情况,可以把这部分js先加载.
分享到：
相关推荐
1. **SVG（Scalable Vector Graphics）**：B/S前端自定义流程图通常采用SVG作为图形绘制的基础，因为SVG是一种基于XML的矢量图像格式，支持动态生成和修改，可以提供高质量的图形渲染，并且可以在任何分辨率下保持...
"非常牛X的B/S框架页面"标题表明这是一个高质量、功能强大的B/S架构的前端框架，用于构建高效、易用的网页界面。 描述中提到"效果不错"，这可能意味着该框架在用户体验、性能优化、响应式设计等方面表现出色，能够...
6. **前端优化**： - 压缩合并资源：通过CSS/JS压缩合并，减少HTTP请求次数。 - 使用CDN加速静态资源加载。 - 异步加载：非首屏内容可以延迟加载，提高页面加载速度。 - 优化图片：使用WebP等高效格式，或通过懒...
B/S结构的员工信息管理系统主要由前端界面、后端服务器和数据库三部分构成。前端界面是用户与系统交互的窗口，通常使用HTML、CSS和JavaScript等技术实现，提供友好的用户体验；后端服务器负责业务逻辑处理和数据操作...
### 基于B/S的资料管理系统设计论文 本文旨在探讨一种基于浏览器/服务器（B/S）架构的资料管理系统的设计与实现。随着信息技术的发展和网络技术的进步，B/S架构因其易于部署、维护成本低等优势，在各类信息系统开发...
### 基于B/S架构的图书查询系统 #### 一、系统概述 在数字化转型的大背景下，基于浏览器/服务器（Browser/Server，简称B/S）模式的应用系统因其易部署、易维护等特性受到了广泛的关注与应用。本系统旨在通过Java ...
"基于B/S的C#预览pdf,excel,word等文件源码"就是一个这样的解决方案，它允许用户在浏览器中直接查看这些类型的文档，提升了用户体验，同时也减少了服务器的负担，因为文件并未实际下载到用户的设备上。 这个系统的...
【标题】：“毕业设计 基于B/S架构 购物网站的设计与实现”揭示了一个典型的软件工程项目，它涉及到构建一个Web应用程序，用于在线购物。B/S（Browser/Server，浏览器/服务器）架构是一种广泛应用的网络应用模式，...
这些项目涵盖了B/S（浏览器/服务器）和C/S（客户端/服务器）架构，展示了一系列不同的应用场景，旨在帮助开发者理解和学习.NET开发技术。 1. **博客引擎**：这是一个B/S架构的应用程序，用于创建和管理个人或集体的...
【B/S网盘系统】是一种基于浏览器/服务器...综上所述，B/S网盘系统是一个综合了前端技术、后端开发、数据库管理、安全性、性能优化等多个IT领域的复杂系统，旨在为用户提供便捷、安全的在线文件存储和管理服务。
【基于B/S模式图书馆管理系统】是一种采用Browser/Server（浏览器/服务器）架构的图书信息管理解决方案，它将传统的客户端应用程序转换为通过Web浏览器进行访问和操作。这种模式大大简化了用户的使用过程，只需要一...
【标题】：“jsp开发租房网b/s有详细解释”指的是使用Java Server Pages（JSP）技术来构建一个基于Browser/Server（B/S）架构的在线租房平台。在B/S架构中，用户通过浏览器进行交互，服务器负责处理业务逻辑和数据...
6. **性能优化**：对于大量卡片数据的处理，需要注意前端性能优化，避免DOM操作过于频繁导致页面卡顿。 在提供的压缩包文件中，"RFhelp.chm"可能是一个关于RFID技术的帮助文件，包含了RFID工作原理、读卡器操作等...
例如，企业级应用可能会采用B/S架构来处理数据展示和简单交互，而对复杂计算和数据处理则采用C/S架构，通过Web服务的方式与B/S前端进行交互。 总之，C/S和B/S各有千秋，选择合适的架构模式需要根据实际的业务需求和...
本系统采用B/S架构，前端使用ASP.NET结合HTML、CSS等技术实现用户界面，后端通过SQL Server数据库存储数据。系统主要分为三个部分：前台用户界面、后台管理界面和数据库。 ##### 3. 关键功能模块 - **用户模块**：...
在构建B/S（Browser/Server）系统时，创建漂亮的页面是至关重要的，因为用户界面是系统与用户交互的首要窗口。本系统显然注重了用户体验，采用了HTML（HyperText Markup Language）来构建页面，并且利用了frame技术...
总的来说，"b/s后台管理框架页面"这一主题涵盖了前端开发、后端接口设计、用户体验优化等多个领域，对于想要提升Web应用开发能力的IT从业者来说，是一个重要的学习方向。通过深入理解和实践，不仅可以提升项目效率，...
【标题】：“Domino B/S 开发：BBS 数据库详解” 在IT行业中，Lotus Domino作为一款强大的企业级应用平台，广泛应用于构建基于浏览器（Browser/Server，B/S）架构的应用系统。其中，BBS（Bulletin Board System，...
3. **前端技术**：在B/S模式下，前端负责用户界面的展示和交互。可能使用的前端技术包括HTML、CSS和JavaScript，可能还涉及到前端框架如Bootstrap、Vue.js或React.js，用于提升用户体验和页面动态性。 4. **后端...
在B/S架构下，系统通常采用HTML、CSS和JavaScript等Web技术构建前端界面。HTML定义网页结构，CSS负责样式设计，JavaScript则用于实现交互效果和业务逻辑。此外，可能还会使用AJAX技术提高用户体验，实现页面无刷新的...