前端性能优化实践

网页内容

• 减少http请求次数

• 减少DNS查询次数

• 避免页面跳转

• 缓存Ajax

• 延迟加载

• 提前加载

• 减少DOM元素数量

• 根据域名划分内容

• 减少iframe数量

• 避免404

服务器

• 使用CDN

• 添加Expires 或 Cache-Control报文头

• Gzip压缩传输文件

• 配置ETages

• 今早flush输出

• 使用GET Ajax请求

• 避免空得图片src

Cookie

•  减少Cookie大小

• 页面内容使用cookie域名

CSS

• 将样式表置顶

• 避免CSS表达式

• 用< link>代替@import

• 避免使用Filters

JavaScript

• 将脚本置地

• 使用外表Javascript和css文件

• 精简Javascript和CSS

• 去除重复脚本

• 减少DOM访问

• 使用智能实践处理

图片 

• 优化图像优化CSS Sprite不要再HTML中缩放图片使用小且可缓存的favicon.ico

移动端客户端

•  保持单个内容小雨25KB

• 打包组件成符合文档

    

网页内容

减少http请求次数

80%的响应时间花在下载网页内容（images stylesheets JavaScript flash 等）。减少请求次数是缩短响应时间的关键！ 可愿意通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧：

1 捆绑文件：现在很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表捆绑成一个文件，以减少文件的下载次数。

2 CSS Sprites： 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。

3 Image Maps： 也是将多幅图拼在一起日安后通过坐标来显示导航。

4 InLine images：通过编码的字符串将图片内嵌到网页文本中：

 background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;

减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain,那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器一段时间，所以DNS查询一般是对首次访问响应速度有所影响。

避免页面跳转

当客户端收到服务器的跳转回复时，客户端再次根据恢复中的location制定的地址再次发送请求。

当客户端收到这中回复的时候，用户只能等待客户端再次发送请求，有的网站甚至会一直跳n次..在合格时候用户看不到任何页面内容。

缓存Ajax

Ajax可以帮助我们一步下载页面内容，但是有些内容即使是异步的，用户还是在等待它的返回结果才能继续操作。所以我们尽量应用一下规则提高ajax的响应速度。

添加Expires或Cache-Control报文头使回复可以被客户端缓存
压缩回复内容
减少DNS查询
精简JavaScript
避免跳转
配置Etags

延迟加载

JavaScript是典型的可以延时加载内容。开发页面时确保网页在没有javascript的时候也可以基本工作，然后通过延时加载脚本来完成一些高级的功能。

提前加载

与延时加载目的相反，提前加载是为了提前加载接下来网页中访问的资源。当前页面加载完成后，马上去加载一些其他功能。例如：google会在页面加载成功之后去下载所有结果中会用到的images sprite。

减少DOM元素的数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。通过一条命令就可以算出。

document.getElementByTagName('*').length

根据域名划分内容

浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以让浏览器增大并行下载链接，但是要注意控制域名使用2-4个之间，不然dns查询也是个问题。

一般网站规划静态资源放在类似static.example.com,动态内容放在www.example.com上。这样做有一个好处在静态的域名上避免使用cookie。后面cookie的规则介绍。

减少ifrane数量

使用iframe要注意理解iframe的优缺点

优点：
可以用来加载速度较慢的内容，例如广告。
安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
脚本可以并行下载

缺点：
即使iframe内容时空也消耗加载时间
会阻止页面加载
没有语义

避免404

404我们都不陌生，代表服务器没有找到资源，我们要特别注意404情况，不要再我们提供的网页资源上，客户端发送一个请求但是服务器缺返回一个无用的结果，时间浪费掉了。

更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容（404）客户端还会将其当成JavaScript去解析。

服务器

使用CDN

再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过CDN来提升。CDN的全称是Content Delivery Network，即内容分发网络。CDN通过不熟在不同地区的服务器来提高客户的下载速度。如果你的网站上又大量的静态内容，世界各地的用户都在访问，那CDN事必不可少的。事实上大多数互互联网中的巨头们都有自己的CDN。

添加Expires或Cache-Control报文头

这条规则分为俩个内容，

对于静态内容添加Expires，将静态内容设为永不过期，或者很长时间以后。在IIS中设置Expires可以看here.

对于动态内容应用合适的Cache-Control，让浏览器根据不同条件发送请求。

Gzip压缩传说文件

Gzip通常可以减少70%网页内容大小，包括脚本  样式表  图片等文件。Gzip比deflate更高效， 主流服务器都有响应的压缩支持模块。值得质疑的是pdf文件可以需要压缩类型中提出，因为pdf文件本身已经要锁，Gzip对其效果不大，而且会浪费cpu资源。

配置ETages

虽然标题叫做配置Etages，但是这里如果你要根据情况进行一些判断。首先Etag简单来说是通过一个文件版本表示服务器可以轻松判断该请求的内容是否有更新，如果没有就恢复304（not modified），从而避免下载整个文件。

尽早flush输出

网页后台程序中我们知道有个方法叫：Response.Flush(),一般我们调用它都是程序末尾，但注意这个方法可以被调用多次目的是可以将现有的缓存中得恢复内容发给客户端，让客户端‘有活干’。

那么在什么时候发送好呢？一般情况下我们可以在对于需要加载比较多外部脚本或者样式时提前抵用一次，客户端收到了关于脚本或其他外部资源的链接一颗并行先发请求去下载，服务器把接下来的后续处理结果发给客户端。

使用GET Ajax请求

路蓝旗子实现XMLHttpRequest POST的时候分两部，先发header，然后再发送数据，而GET却可以用一个TPC报文完成请求。另外GET从语义上来讲是服务器取数据，而POST则是向服务器发送数据，所以是我们使用Ajax请求时数据的时候尽量通过GET完成

避免空的图片src

空的图片src仍然会是浏览器发送请求到服务器，这样完全是浪费资源，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种请求造成的伤害不容忽略。

浏览器如此实现也是根据RFC 3986 – Uniform Resource Identifiers标准，空的src被定义为当前页面。

Cookie

减少Cookie大小

Cookie被用来做认证或个性化设置，其信息被包含在http报文头，对于cookie我们要注意以下几点，来提高响应速度：

去除没有必要的cookie，若果网页不需要cookie就完全禁掉
将cookie的大小减小到最小
注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
设置合适的过期时间，比较长的过期时间可以提高相应速度

网页内容使用无cookie域名

大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，就可以得到这些proxy的缓存支持。

也有一些网站需要在二级域名上应用cookie，所有子域名都汇集成，这种情况下一般会在购买一个专门的域名来存放cookie-free的静态资源。

CSS

将样式表（CSS）放在网页HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用等待在一个白屏上，而是可以先看已经下载的内容。

避免CSS表达式

CSS表达式可以动态的设置CSS属性，在ie5-ie8中支持，其他浏览器中表达式会被忽略。

background-color：expression(new Date()).getHours()%2 "#b8d4ff" : '#f08aoo'

CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成性能损耗。

用link代替@import

避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

避免使用Filters

AlphaImageLoad也是IE5.5 – IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

JavaScript

将脚本置底

HTTP/1.1 specification简易浏览器对同一个hostname不要超过俩个并行下载连接。所以当你从domain下载图片的时候可以提高并行下载链接数量。但是当脚本下载的时候，即使来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载之后一次解析和执行。

因此对脚本提速我们可以考虑一下方式

把脚本置底，这样可以让网页渲染所需要的呢荣尽快家在显示给用户。
现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。
HTML5中新佳乐async关键字，可以让脚本异步执行。

使用外部JavaScript和CSS文件

使用外部JavaScript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求之间重用。

同事将JavaScript和CSS从inline变为external也减小了网页内容大小。

使用外部JavaScript和CSS文件的决定因素在于外部文件的重用率。用户只会访问一次的页面，inline的JavaScript和CSS相对来说可以提高效率。

精简JavaScript和CSS

将JavaScript和CSS中得空格和注释全去掉。

去除重复脚本

重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。

减少DOM访问

通过Javascript访问DOM元素没有我们想象的快，元素多得网页尤其慢。

缓存已访问过的元素
offine跟新节点然后再加回DOM Tree
 避免通过javascript修复layout

使用智能事件处理

比如一个div中10个按钮都需要时间句柄，那么我们可以将时间放在div上，在时间冒泡过程中补货该时间然后判断时间来源。

优化图片

尝试吧gif转成png 一般情况这条命令可以简单安全的把gif转成PNGconvert image.gif image.png

在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）

在所有的JPEG图片上运行jpegtran。

优化

Spirite中水平排列图片，垂直排列会增加文件大小；

Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；

不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100&times;100的图片为1万像素，1000&times;1000就是100万像素。

不要在HTML中缩放图片

不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。

使用小而且可缓存的favicon.ico

网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标

存在
文件尽量小，最好小于1k
设置一个长的过期时间

移动客户端

保持单个内容小于25kb

这限制是因为ipone，他智能缓存小于25k，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工作要用上了。

打包组建成符合文档

把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组建。当你使用这条规则时，首先要确定用户代理是否支持（iPhone不支持）。

转载于:https://my.oschina.net/felumanman/blog/266096