`
jgsj
  • 浏览: 960640 次
文章分类
社区版块
存档分类
最新评论

web应用优化策略-前端

 
阅读更多

1.尽量减少HTTP请求的个数

如一个客户请求访问某个jsp文件,该jsp中引用了一些2个外部的javascript文件,1个css文件,3个图片文件,那么这个jsp页面要被完整的解析成HTML所要与web服务器进行的请求数目为7=1 jsp + 2 javascript + 1 css + 3图片!可以通过firefox或chrome提供的控制台工具查看


可以看出,请求这些js,css或图片都是需要时间的,因为http协议本身的特点,约定了一个请求必须先打开链接,再发送请求消息,返回响应结果(jsp,css,image...),最后关闭链接,而打开关闭链接本身也是需要花费开销的,所以应尽量减少没有必须要的请求

解决方案:

设计更简单的页面包含较少的js和图片,css

将多个图片合并成一个,通过css背景便宜的方式来展示

合并css,js文件

2.使用CDN技术--让静态文件更靠近用户

CDN是个么东东?看百科解释-http://baike.baidu.com/view/21895.htm,举个简单的例子,就是把静态文件发布在各个地方的服务器上,这个用户在访问的时候就可以根据用户的访问地不同来去离用户最近的服务器上抓数据(如网通的用户去网通cdn服务器上取,移动的用户去移动的cdn)

3.添加Expires头Cache-Control

合理设置这个参数值,让内容做一定的客户端缓存,这样可以减少内容的网络传输,如下图所示,返回状态码304表示本地cache的内容没有过期,服务器只是返回客户端一个状态码,实际文件的内容(js,css)都是直接取自客户端(浏览器缓存)


4.gzip压缩

我们在写一些css样式或js文件的时候,为了提高代码的可读性都会在里面进行代码的缩进,注释,这个在开发的时候是个好事情,但是一旦程序发布运行起来,这些注释空格是没有意义的,而且这些注释空格本身会占用一定的字节数,上图中的'Size'这一列,gzip就是用来解决这个问题的,在发布前把css,js进行gzip压缩处理,去除不必要的东西,从而减少文件的大小,不要以为减少了几k或几B没什么意义,要知道,一旦你的网络流量大起来,想淘宝,每天几亿次的访问,每次访问减少1k的网络流量,那么每天节省下来的流量是多少呢??呵呵

5.将CSS文件放在页面的上方<head>中

想IE或Firefox这些浏览器,在样式表传输完毕之前不会做任何渲染

6.将javascript脚本放到页面的底部

脚本可以在任何时间执行,因此没有必要让页面等待js文件加载完毕后再去渲染,放在底部可以去除对页面下载的阻塞

7.避免在css中使用Expression

只有IE允许将js存在与css中

8.将js和css独立与外部的文件中

有助于缓存,应不过期策略,可以与其他页面共享文件,缺点就是会增加HTTP请求个数

9.移除重复的脚本引用

10.减少DNS查顺

我们在浏览器中输入一个htttp://www.baidu.com的时候,浏览器会去DNS服务器解析baidu.com所对应的IP地址,而这个解释是需要时间的一般是20-120ms,DNS会被缓存,ISP会负责维护

11.缓存Ajax请求

当有两个完全相同的ajax请求时,浏览器会缓存上一次的内容(IE),第二次请求的时候就直接取了本地缓存中的内容而不再去服务器上抓取

12.考虑将动态内容和静态内容分离开

这个和上面提到的cdn有些重复,意思就是动态内容放在app Server上,静态内容放在另外一组服务器上,而且两组服务器最好不要使用同一个域名下,为什么,因为发送http请求的时候,会把cookie附加在http头信息后面提交

使用不同域名还带来的一个好处就是提高了浏览器在下载web组件的并发数。我们在打开一个页面的时候,浏览器会先下载页面本身即html,然后分析这些html元素,逐步下载一系列的组件,但是浏览器下载这些组件受到最大并发数的限制,也就是同一时间最多只能下载一定量的组件不同浏览器有不同的规则

浏览器 HTTP/1.1 HTTP/1.0
IE 6,7 2 4
IE 8 6 6
Firefox2 2 8
Firefox3 6 6
Safari3,4 4 4
Chrome 1,2 6 --

浏览器最大并发数限制有个前提就是对同一个域名下下载的组件才有效,也就是说,浏览器会为每个域名维护独立的下载队列。因此浏览器的并行下载量增大了,下载速度也随即提高

分享到:
评论

相关推荐

    Web应用前端性能优化浅析

    对于不断发展的Web应用,性能优化如同逆水行舟,不进则退。...本文侧重通过对前端性能的分析,为Web站点前端性能优化提供了理论依据和一般的优化策略,并讲述了一些用于B/S系统前端性能优化的常见规则和有效方法。

    WEB应用前端优化技术与手段策略

    前端优化技术方法有很多,比如页面加载、缓存、图片压缩、减少HTTP请求、JavaScript 优化、CSS、搜索引擎优化、网站运营优化等等

    Web应用前端技术的探索与实践

    Web应用前端技术的探索与实践 1 1 前端开发那些事 1 2 怎样提高前端的质量和工作效率? 1 附件(关于2011年工作的一点浅见) 3 3 探讨一些技术问题 4 3.1 Frameset和iframe 4 3.2 Frameset和Div两种方式的对比 5 ...

    高效前端:Web高效编程与优化实践_机械工业出版社; 第1版 (2018年1月1日) 完整版-未加密

    第一类,偏向实践,围绕HTML、CSS、JavaScript等传统前端技术,以及PWA等新兴前端技术,讲解如何进行HTML优化、CSS优化、JavaScript优化、页面优化等,以此帮助前端工程师们提升高效编程和应用优化的能力。...

    前端性能优化——移动端浏览器优化策略

    摘要:前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,...

    应用服务器中间件技术要求.doc

    即当硬件平台或操作系统不是 " " "同一产品时,Web应用服务器必须支持异构Cluster技术" " "。 " " "支持动态增加服务器。在原业务系统不停机的情况下," " "必须支持动态增加服务器,扩展系统性能。而性能的扩" " ...

    基于SSM的图书管理系统.zip

    基于SSM(Spring、Spring MVC、MyBatis)的图书管理系统是一个功能丰富且易于扩展的Web应用程序,用于管理图书馆的书籍信息。...通过引入先进的技术和优化策略,可以实现高效、稳定的运行,满足各种业务需求。

    JavaEE求职简历-姓名-JAVA开发工程师.docx

    2.熟悉Java Web应用开发,熟悉listener、EL、JSTL、Filter等常用技术; 3.熟悉Spring MVC、Spring Boot、Spring Data、Spring Security的使用,了解Spring的Ioc与Aop思想; 4.拥有基于Spring整合常用框架并进行项目...

    基于深度学习的光伏发电功率预测系统源码(含前端+后端)+项目说明.zip

    随着光伏发电网规模的扩大和应用的普及,对于光伏发电的并网需求持续增大,但是光伏发电所具有的波动性和间歇性的特性势必会对并网系统的稳定性产生一定的影响。诸如太阳辐射强度、空气湿度、气压、环境温度等因素是...

    Java计算机毕业设计-基于ssm框架开发的SSM游戏论坛平台-毕设源代码+说明文档.rar

    基于SSM框架开发的SSM游戏论坛平台是一个功能完善、技术先进的Java Web应用程序,旨在提供一个便捷、高效的游戏社区交流环境。该平台采用Spring、SpringMVC和MyBatis三大框架进行整合开发,确保了系统的稳定性、可...

    python项目基于大数据的电影市场预测分析(django).zip

    该系统对于电影行业专业人士来说是一个非常有价值的工具,因为它可以帮助他们在电影上映前评估潜在的市场表现,从而更好地制定营销策略、调整发行计划或优化投资决策。通过大数据分析提供的深入见解,电影市场的预测...

    md格式编写的良心教程 Python 100天从新手到大师 共100个完整源文件 含课程源代码.rar

    Day21-30\21-30.Web前端概述.md Day31-35\31-35.玩转Linux操作系统.md Day36-40\36-38.关系型数据库MySQL.md Day36-40\39-40.NoSQL入门.md Day41-55\41.Django快速上手.md Day41-55\42.深入模型.md Day41-55\43.静态...

    python项目基于旅游网站的数据分析及可视化系统(flask)wlw 该这个了.zip

    基于旅游网站的数据分析及可视化系统是一个使用Python和Flask框架开发的Web应用程序,旨在对旅游网站的数据进行深入分析并提供动态的可视化展示。 主要特性和功能可能包括: 1. **数据收集与整合**:从旅游网站...

    常见网络安全设备简介.pptx

    常见应用安全产品——web应用防火墙(WAF) 路由器 核心交换机 接入交换机 接入交换机 接入交换机 Web应用服务器群 WAF Web应用防火墙串联透明部署在Web服务器的前端,在物理层面是Web服务器的前端多了一台硬件设备...

    开涛高可用高并发-亿级流量核心技术

    19 应用数据静态化架构高性能单页Web应用 377 19.1 整体架构 378 19.1.1 CMS系统 379 19.1.2 前端展示系统 380 19.1.3 控制系统 380 19.2 数据和模板动态化 381 19.3 多版本机制 381 19.4 异常问题 382 20 使用...

    ASP.NET开发实战1200例(第2卷).pdf.part4

    主要包括网站开发常备技术、前端技术应用开发、操作Office软件(Word/Excel)、ADO.NET数据库操作技术、LINQ技术、XML文件、水晶报表、Web Service服务、网站性能优化与安全策略、程序开发设计模式与架构、网站设计...

    ASP.NET开发实战1200例(第2卷).pdf.part2

    主要包括网站开发常备技术、前端技术应用开发、操作Office软件(Word/Excel)、ADO.NET数据库操作技术、LINQ技术、XML文件、水晶报表、Web Service服务、网站性能优化与安全策略、程序开发设计模式与架构、网站设计...

    ASP.NET开发实战1200例(第2卷).part4

    主要包括网站开发常备技术、前端技术应用开发、操作Office软件(Word/Excel)、ADO.NET数据库操作技术、LINQ技术、XML文件、水晶报表、Web Service服务、网站性能优化与安全策略、程序开发设计模式与架构、网站设计...

    ASP.NET开发实战1200例(第2卷).pdf.part3

    主要包括网站开发常备技术、前端技术应用开发、操作Office软件(Word/Excel)、ADO.NET数据库操作技术、LINQ技术、XML文件、水晶报表、Web Service服务、网站性能优化与安全策略、程序开发设计模式与架构、网站设计...

Global site tag (gtag.js) - Google Analytics