web 新能优化

网上的东西太多了都是搜来的东西 留着自己看吧!

摘自 :http://www.cnblogs.com/50614090/archive/2011/08/19/2145620.html

打开网站慢现状分析

在公司访问部署在IDC机房的VIP网站时会感觉很慢。是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上。

可以跟踪一下我们的登录页面,如下图所示

从上图我们可以分析知道,HTML文档只占了总响应时间的20%,其它80%响应时间用来下载JS、CSS、图片等组件。所以WEB前端有很大的优化空间,我们将从WEB的前端优化、后端优化两方面综合考虑给出WEB的性能优化方案。

WEB前台的优化规则

一、尽量减少 HTTP 请求

有几种常见的方法能切实减少 HTTP 请求:

1、 合并脚本跟样式文件,如可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个。

2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

二、使用浏览器缓存

在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。

根据服务器端的响应header,一个文件对浏览器而言,有几级不同的缓存状态。

1、服务器端告诉浏览器不要缓存此文件,每次都到服务器上更新文件。

2、服务器端没有给浏览器任何指示。

3、在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据。

4、服务器强制要求浏览器缓存文件,并设置了过期时间。在缓存未到期之前,浏览器将直接使用本地缓存文件,不会与服务器端产生任何通信。

我们要做的是尽量强制浏览器到第四种状态,特别是对于JS、CSS、图片等变动较少的文件。

三、使用压缩组件

IE和Firefox浏览器都支持客户端GZIP,传输之前,先使用GZIP压缩再传输给客户端,客户端接收之后由浏览器解压,这样虽然稍微占用了一些服务器和客户端的CPU,但是换来的是更高的带宽利用率。对于纯文本来讲,压缩率是相当可观的。如果每个用户节约50%的带宽,那么租用来的那点带宽就可以服务多一倍的客户,并且缩短了数据的传输时间。

四、图片、JS的预载入

预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象,然后将需要载入的图像的 URL 作为参数传入。

function preLoadImg(url) {

var img = new Image();

img.src = url;

}

可以在登录页面预载入JS和图片

五、将脚本放在底部

脚本放在顶部带来的问题,

1、  使用脚本时,对于位于脚本以下的内容,逐步呈现将被阻塞

2、  在下载脚本时会阻塞并行下载放在底部可能会出现JS错误问题,当脚本没加载进来,用户就触发脚本事件。

要综合考虑情况。

六、将样式文件放在页面顶部

如果样式表任在加载,构建呈现树就是一种浪费,样式文件放在页面底部可能会出现两种情况:

1、  白屏

2、  无样式内容的闪烁

七、使用外部的JS和CSS将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。

八、切分组件到多个域主要的目的是提高页面组件并行下载能力。但不要跨太多域名,建议采用2个子域名。

九、精简JS

可以做到两个级别

1、精简:从代码中移除不必要的字符以减少其大小,

2、混淆:在精简的同时,还会改写代码,函数、变量名被转换成更短的字符串

可以使用ShrinkSafe来精简JS  http://shrinksafe.dojotoolkit.org/

十、精简CSS

从代码中移除不必要的字符以减少其大小,

可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /

十一、       精简图片、Flash

对大图片、Flash,要在效果和大小之间做出平衡。

时间: 2024-10-15 22:32:37

web 新能优化的相关文章

web前端性能优化 (share)

本文转自:http://www.cnblogs.com/50614090/archive/2011/08/19/2145620.html 一. WEB前台的优化规则 一.尽量减少 HTTP 请求 有几种常见的方法能切实减少 HTTP 请求: 1. 合并脚本跟样式文件,如可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个. 2. CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片. 二.使用浏览器缓存 在用户浏览网站的不同页面时

【Web】Yslow优化法则(四)启用Gzip压缩

目前世界上主要有来自四个不同机构的四种的Web浏览器内核.每一家机构都推出了至少一种使用自己的内核的浏览器产品. 这四家机构分别是Microsoft.Mozilla.Apple和Opera SAS,提供的内核则分别叫做Trident.Gecko.WebKit和Presto,推出的主打浏览器则分别叫做Internet Explorer.Firefox.Safari和Opera. 人们常常也用主打浏览器的名字来代替内核的名字,特别是对不开源的Trident和Presto,几乎人人都称之为"IE内核&

小型Web页打包优化(下)

之前我们推送了一篇小型Web项目打包优化文章,(链接),我们使用了一段时间, 在这过程中我们也一直在思考, 怎么能把结构做的更好.于是我们改造了一版, 把可以改进的地方和可能会出现的问题, 在这一版中进行了优化.小伙伴们, 有没有迫不及待? 那好, 我们废话少说, 进入正题^_^ 一.背景 之前, 转转App端内有些Hybrid页面和一些端外的落地页, 一般是单个的一两个小页面, 不是所谓的大型的前端应用, 比较零散, 交互也比较简单.如果用vue或react, 有点杀鸡焉用宰牛刀的意思, 没有

企业级Web Nginx 服务优化(1)

企业级Web Nginx 服务优化 总结配置文件: nginx.conf httpd.conf httpd-vhosts httpd-mpm.conf my.cnf php.ini php-fpm.conf 1.1nginx.conf 配置文件基本参数优化 1.1.1 隐藏nginx header 内版本号信息 一些特定的系统及服务漏洞一般都和热定的软件及版本号有关,我们应尽量隐藏服务器的敏感信息(软件名称及版本等信息),这样黑客无法猜到有漏洞的服务是否是对应服务的版本,从而确保web服务器最大

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将

RDIFramework.NETV2.9版本 Web新增至14套皮肤风格+三套界面组合(共42套皮肤组合)

RDIFramework.NETV2.9版本 Web新增至14套皮肤风格+三套界面组合(共42套皮肤组合) 客户的心声是最重要的,RDIFramework.NET V2.9版本不仅对WinForm版做了大的调整,Web版也彻彻底底的底翻上的优化了一篇,不仅增加了很多的新功能.新特色,用户最期望的界面风格也进行了海量增加.全新改变.这次算对得起观众了!下面我们就展示下Web版本中的皮肤界面风格吧-! RDIFramework.NET ━ .NET快速信息化系统开发框架钜献 V2.9 版本震撼发布

【Web】Yslow优化法则(三)添加缓存控制首部

添加Expires和Cache-control头部 Expires和Cache-control实际上是HTTP中的缓存控制头部,它主要影响客户端的请求行为和服务器端的响应. 本文的许多内容来自<HTTP权威指南>,如有任何问题,欢迎指出. 一.缓存的基本概念 这里的缓存,单指web的缓存.当web请求抵达缓存时,如果本地有缓存的副本且缓存未过期,那么就可以从本地读取数据或文档,这样便可以: 1.        减少冗余的数据传输,一定程度上减少服务器的流量和压力. 2.        缓解了网

WEB前端性能优化小结

1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时

阿里巴巴 web前端性能优化进阶路

Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及大名鼎鼎的优化大师Steve Souders.本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结.希望对正在从事这个领域研究的前端同学能有所帮助. 简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段