第一章 打开网站慢现状分析

在公司访问部署在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,要在效果和大小之间做出平衡。

第三章 程序的优化

第四章 数据库的优化

附录A 页面请求分析

从输入URL到页面呈现需要下面5个步骤

1. 输入URL地址或者点击URL的一个链接

 2. 浏览器根据URL地址,结合DNS,解析出URL对应的IP地址

 3. 发送HTTP请求

 4. 开始连接请求的服务器并且请求相关的内容

 5. 浏览器解析从服务器端返回的内容,并且把页面显现出来

上面基本上就是一个页面从请求到实现的基本过程,下面我们将剖析这个过程。

当输入URL之后,浏览器就要知道这个URL对应的IP是什么,只有知道了IP地址,浏览器才能准备的把请求发送到指定的服务器的具体IP和端口号上面。浏览器的DNS解析器负责把URL解析为正确的IP地址。这个解析的工作是要花时间的,而且这个解析的时间段内,浏览器不是能从服务器那里下载到任何的东西的。浏览器和操纵系统提供了DNS解析缓存支持。

当获得了IP地址之后,那么浏览器就向服务器发送HTTP的请求,过程如下:

1.浏览器通过发送一个TCP的包,要求服务器打开连接

2.服务器也通过发送一个包来应答客户端的浏览器,告诉浏览器连接开了。

3.浏览器发送一个HTTP的GET请求,这个请求包含了很多的东西了,例如我们常见的cookie和其他的head头信息。

这样,一个请求就算是发过去了。

请求发送去之后,之后就是服务器的事情了,服务器端的程序把最后的结果发送到客户端。

其实首先到达浏览器的就是html的那些文档,所谓的html的文档,就是纯粹的html代码,不包含什么图片,脚本,CSS等的。也就是页面的html结构。因为此时返回的只是页面的html结构。这个html文档的发送到浏览器的时间是很短的,一般是占整个响应时间的10%左右。

这样之后,那么页面的基本的骨架就在浏览器中了,下一步就是浏览器解析页面的过程,也就是一步步从上到下的解析html的骨架了。

如果此时在html文档中,遇到了img标签,那么浏览器就会发送HTTP请求到这个img响应的URL地址去获取图片,然后呈现出来。如果在html文档中有很多的图片,flash,那么浏览器就会一个个的请求,然后呈现,如果每个图片都要请求,那么就要进行之前说的那些步骤:解析url,打开tcp连接等等。打开连接也是要消耗资源的,就像我们在进行数据库访问一样,我们也是尽可能的少开数据库连接,多用连接池中的连接。道理一样,tcp连接也是可以重用的。http1.1提出了持久连接(persistent connection)的概念,也就是说同一条 HTTP 连接,可以同时处理多个请求,减少tcp连接。

当页面的html骨架载入了之后,浏览器就开始解析页面中标签,从上到下开始解析。

首先是head标签的解析,如果发现在head中有要引用的JS脚本,那么浏览器此时就开始请求脚本,此时整个页面的解析过程就停了下来,一直到JS请求完毕。之后页面接着向下解析,如解析body标签,如果在body中有img标签,那么浏览器就会请求img的src对应的资源,如果有多个img标签,那么浏览器就一个个的解析,解析不会像JS那样等待的,会并发的下载。

Web性能优化方案的更多相关文章

  1. (转)Web性能优化方案

    第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...

  2. 移动WEB 性能优化方案

    最近一项 研究表明,80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间. 这不奇怪,因为64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二 ...

  3. Redmine性能优化方案

    近来公司redmine服务器表现很糟糕,在16核,64GRAM的机器上,压测结果竟然只有每秒5~7个请求,部分页面一个都出不来. 以下是我对Redmine性能优化方案: redmine服务器性能问题排 ...

  4. DedeCMS数据负载性能优化方案简单几招让你提速N倍

    前文介绍了DedeCMS栏目列表页实现完美分页的方法,避免了大部分重复栏目标题对搜索引擎的影响,对SEO更有利.今天,分享一下DedeCMS数据负载性能优化的方法. 接触织梦也有三年多时间了,对它可谓 ...

  5. web性能优化之--合理使用http缓存和localStorage做资源缓存

    一.前言 开始先扯点别的: 估计很多前端er的同学应该遇到过:在旧项目中添加新的功能模块.或者修改一些静态文件时候,当代码部署到线上之后,需求方验收OK,此时你送了一口气,当你准备开始得意于自己的ma ...

  6. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  7. Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  8. Web 性能优化: 图片优化让网站大小减少 62%

    摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

  9. Web性能优化 高并发网站解决 单例 已看1

    Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG ...

随机推荐

  1. 基于KVM建立虚拟机的步骤及总结说明

    1.前言 目前正在涉足云计算IaaS工作,虚拟化是IaaS的重要部分,因此这段时间对各个虚拟机化技术和工具进行研究,研究的目的不仅仅是为了会使用这个工具,而是通过研究了解技术的实现机制和原理,即知其然 ...

  2. Dijkstra算法模拟讲解

    dijkstra算法,是一个求单源最短路径算法 其算法的特点为: 层层逼进,有点类似宽度搜索的感觉 其需要的数据结构为:                  int map[N][N] 所有点之间的权表 ...

  3. BZOJ 1177 [Apio2009]Oil(递推)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1177 [题目大意] 给出一个矩阵,从中选出3个k*k且不相交的矩阵,使得其总和最大 [ ...

  4. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  5. java的访问控制(包、访问修饰符、修饰符)

    一.     java的类包 编写好一个源程序后,首先要执行javac命令进行编译源文件,并生成与源文件同名后缀为“.class”的字节码文件(类文件),该类文件与源文件默认在同一个目录中.该类文件是 ...

  6. 通过浏览器直接打开Android应用程序

    需求 通过手机浏览器直接打开Android应用程序.假设本地已经安装了指定Android应用,就直接打开它:假设没有安装,则直接下载该应用的安装文件(也能够跳转到下载页面). 实现效果 假设手机上已经 ...

  7. flexbox 伸缩布局盒

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由 伸缩容器 和 伸缩项目 组成.通过设置元素的 display 属性为   ...

  8. hdu 2519 新生晚会 排列组合

    通过阶段性计算减少一次性的大值计算 #include <stdio.h> int main() { int t, a, b, i; __int64 c; scanf("%d&qu ...

  9. Img垂直居中

    IMG垂直居中问题 2011-02-22 10:51:00|  分类: CSS |  标签:垂直居中  div  align  img  vertical  |举报|字号 订阅    转载来自:htt ...

  10. Exponentiation

    Description Problems involving the computation of exact values of very large magnitude and precision ...