前端性能优化--笔记

一）Make fewer HTTP requests

减小HTTP请求次数。合并图片、CSS、JS，改进首次访问用户等待时间。 

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。经过减小页面中的元素能够减小HTTP请求的次数。这是提升网页速度的关键步骤。 

这里有几条减小HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是经过把全部的脚本放到一个文件中来减小HTTP请求的方法，如能够简单地把全部的CSS文件都放入一个样式表中。当脚本或者样式表在不一样页面中使用时须要作不一样的修改，这可能会相对麻烦点，但即使如此也要把这个方法做为改善页面性能的重要一步。

CSS Sprites是减小图像请求的有效方法。把全部的背景图像都放到一个图片文件中，而后经过CSS的background-image和background-position属性来显示图片的不一样部分；

图片地图是把多张图片整合到一张图片中。虽然文件的整体大小不会改变，可是能够减小HTTP请求次数。图片地图只有在图片的全部组成部分在页面中是紧挨在一块儿的时候才能使用，如导航栏。肯定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具备可读性，所以不推荐这种方法；

内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增长页面的大小。把内联图像放到样式表（可缓存）中能够减小HTTP请求同时又避免增长页面文件的大小。可是内联图像如今尚未获得主流浏览器的支持。

减小页面的HTTP请求次数是你首先要作的一步。这是改进首次访问用户等待时间的最重要的方法。HTTP请求在无缓存状况下占去了40%到60%的响应时间。

二）Use a CDN

减小DNS查找次数。使用CDN，就近缓存==>智能路由==>负载均衡==>WSA全站动态加速 

CDN的全称是Content Delivery Network，即内容分发网络。其目的是经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可 以就近取得所需的内容，解决Internet网络拥挤的情况，提升用户访问网站的响应速度。从技术上全面解决因为网络带宽小、用户访问量大、网点分布不均 等缘由所形成的用户访问网站响应速度慢的问题。

域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系同样。当你在浏览器地址栏中输入www.dudo.org时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程一样也是须要时间的。通常状况下返回给定域名对应的IP地址会花费20到120毫秒的时间。并且在这个过程当中浏览器什么都不会作直到DNS查找完毕。

缓存DNS查找能够改善页面性能。这种缓存须要一个特定的缓存服务器，这种服务器通常属于用户的ISP提供商或者本地局域网控制，可是它一样会在用户使用的计算机上产生缓存。DNS信息会保留在操做系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操做系统之外的本身的缓存。因为浏览器有本身的缓存记录，所以在一次请求中它不会受到操做系统的影响。

Internet Explorer默认状况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改成了1小时）。

当客户端中的DNS缓存都为空时（浏览器和操做系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减小主机名的数量能够减小DNS查找次数。

减小主机名的数量还能够减小页面中并行下载的数量。减小DNS查找次数能够节省响应时间，可是减小并行下载却会增长响应时间。个人指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减小DNS查找次数和保持较高程度并行下载二者之间的权衡了。

三）Avoid empty src or href

避免空的src和href。
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL做为它们的属性值，从而把页面的内容加载进来做为它们的值。

四）Add an Expires headers

为文件头指定Expires 
使内容具备缓存性。避免了接下来的页面访问中没必要要的HTTP请求。 

设置过时的HTTP Header.设置Expires Header能够将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
五）Compress components with Gzip  

使用gzip压缩内容。
压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。

对咱们的页面内容进行Gzip格式的压缩，Gzip格式是一种很广泛的压缩技术，几乎全部的浏览器都有解压Gzip格式的能力，并且它能够压缩的比例很是 大，通常压缩率为85%，就是说服务器端100K的页面能够压缩到25K左右的Gzip格式的数据发给客户端，客户端收到Gzip格式的数据后自动解压缩后显示页面。

网络传输中的HTTP请求和应答时间能够经过前端机制获得显著改善。的确，终端用户的带宽、互联网提供者、与对等交换点的靠近程度等都不是网站开发者所能决定的。可是还有其余因素影响着响应时间。经过减少HTTP响应的大小能够节省HTTP响应时间。
从HTTP/1.1开始，web客户端都默认支持HTTP请求中有Accept-Encoding文件头的压缩格式：
Accept-Encoding: gzip, deflate
若是web服务器在请求的文件头中检测到上面的代码，就会以客户端列出的方式压缩响应内容。Web服务器把压缩方式经过响应文件头中的Content-Encoding来返回给浏览器。
Content-Encoding: gzip
Gzip是目前最流行也是最有效的压缩方式。这是由GNU项目开发并经过RFC 1952来标准化的。另外仅有的一个压缩格式是deflate，可是它的使用范围有限效果也稍稍逊色。
Gzip大概能够减小70%的响应规模。目前大约有90%经过浏览器传输的互联网交换支持gzip格式。若是你使用的是Apache，gzip模块配置和你的版本有关：Apache 1.3使用mod_zip，而Apache 2.x使用moflate。
浏览器和代理都会存在这样的问题：浏览器指望收到的和实际接收到的内容会存在不匹配的现象。幸亏，这种特殊状况随着旧式浏览器使用量的减小在减小。Apache模块会经过自动添加适当的Vary响应文件头来避免这种情况的出现。
服务器根据文件类型来选择须要进行gzip压缩的文件，可是这过于限制了可压缩的文件。大多数web服务器会压缩HTML文档。对脚本和样式表进行压缩一样也是值得作的事情，可是不少web服务器都没有这个功能。实际上，压缩任何一个文本类型的响应，包括XML和JSON，都值得的。图像和PDF文件因为已经压缩过了因此不能再进行gzip压缩。若是试图gizp压缩这些文件的话不但会浪费CPU资源还会增长文件的大小。
Gzip压缩全部可能的文件类型是减小文件体积增长用户体验的简单方法。

六）Put CSS at top

把CSS放到顶部

Put CSS at the top 把CSS外部连接放到页面的顶部。其实这个原则咱们通常都遵照的，若是把CSS外部连接做为逻辑的一部分出如今页面头部如下，我我的以为这个自己就 是个错误。
七）Put JS at  bottom

把JS放到底部 
防止js加载对以后资源形成阻塞。

把Javascript脚本尽可能放到页面底部加载。 一开始为觉得Javascript脚本尽可能放到页面底部加载，是指全部的JS脚本都要放到底部，后来才发现，并不 彻底是这样，这里所指的脚本是指那些在加载过程当中要执行的脚本，因此通常的处理办法仍是页面头部引入JS连接，页面底部执行JS脚本程序。为何要这么作 呢？呵呵，其实很简单，为了实现最大的下载并行，页面加载初期作的事，最好只有下载，HTML的下载，CSS的下载,JS的下载，等下载完成后再去实现页 面渲染，JS脚本运行。
八）Avoid CSS expressions

避免使用CSS表达式 

避免CSS表达式 其实在CSS中运行表达式和页面加载中运行大量的JS脚本差很少，或许还更慢，并且还不兼容，虽然可使咱们在页面逻辑简单很多，可是咱们彻底能够抛弃之。

九）Make JS and CSS external

将CSS和JS放到外部文件中 
目的是缓存，但有时候为了减小请求，也会直接写到页面里，需根据PV和IP的比例权衡。
十）Reduce DNS lookups

尽量少的DNS查找。

权衡DNS查找次数 
减小主机名能够节省响应时间。但同时，须要注意，减小主机会减小页面中并行下载的数量。 
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。因此新浪会搞N个二级域名来放图片。 

十一）Minify JS and CSS

精简CSS和JS 

对Javascript 代码进行压缩。压缩工具，yuicompressor，雅虎美国开发的JAVA 压缩包yuicompressor.jar。压缩的至关完美，不只把代码间的空格换行给去除掉了，并且对变量名，北部方法名都进行的简化，无心中实现了混 淆脚本的做用。
十二）Avoid URL redirects

避免重定向。

避免跳转 
同域：注意避免反斜杠 “/” 的跳转； 
跨域：使用Alias或者mod_rewirte创建CNAME（保存域名与域名之间关系的DNS记录）

十三）Remove duplicate JS and CSS

scripts 去除重复的脚本。

删除重复的JS和CSS 
重复调用脚本，除了增长额外的HTTP请求外，屡次运算也会浪费时间。在IE和Firefox中无论脚本是否可缓存，它们都存在重复运算JavaScript的问题。 

十四）Configure entity ETags

这个好像是服务器端配置的问题。

配置ETags 
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具备弹性，例如某个文件在1秒内修改了10次，Etag能够综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减小Web应用带宽和负载。

 

Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内容”，包括图片、脚本、样式表等）。增长ETag为实体的验证提供了一个比使用“last-modified date（上次编辑时间）”更加灵活的机制。Etag是一个识别内容版本号的惟一字符串。惟一的格式限制就是它必须包含在双引号内。原始服务器经过含有ETag文件头的响应指定页面内容的ETag。
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
稍后，若是浏览器要验证一个文件，它会使用If-None-Match文件头来把ETag传回给原始服务器。在这个例子中，若是ETag匹配，就会返回一个304状态码，这就节省了12195字节的响应。 GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
ETag的问题在于，它是根据能够辨别网站所在的服务器的具备惟一性的属性来生成的。当浏览器从一台服务器上得到页面内容后到另一台服务器上进行验证时ETag就会不匹配，这种状况对于使用服务器组和处理请求的网站来讲是很是常见的。默认状况下，Apache和IIS都会把数据嵌入ETag中，这会显著减小多服务器间的文件验证冲突。
Apache 1.3和2.x中的ETag格式为inode-size-timestamp。即便某个文件在不一样的服务器上会处于相同的目录下，文件大小、权限、时间戳等都彻底相同，可是在不一样服务器上他们的内码也是不一样的。
IIS 5.0和IIS 6.0处理ETag的机制类似。IIS中的ETag格式为Filetimestamp:ChangeNumber。用ChangeNumber来跟踪IIS配置的改变。网站所用的不一样IIS服务器间ChangeNumber也不相同。 不一样的服务器上的Apache和IIS即便对于彻底相同的内容产生的ETag在也不相同，用户并不会接收到一个小而快的304响应；相反他们会接收一个正常的200响应并下载所有内容。若是你的网站只放在一台服务器上，就不会存在这个问题。可是若是你的网站是架设在多个服务器上，而且使用Apache和IIS产生默认的ETag配置，你的用户得到页面就会相对慢一点，服务器会传输更多的内容，占用更多的带宽，代理也不会有效地缓存你的网站内容。即便你的内容拥有Expires文件头，不管用户何时点击“刷新”或者“重载”按钮都会发送相应的GET请求。
若是你没有使用ETag提供的灵活的验证模式，那么干脆把全部的ETag都去掉会更好。Last-Modified文件头验证是基于内容的时间戳的。去掉ETag文件头会减小响应和下次请求中文件的大小。微软的这篇支持文稿讲述了如何去掉ETag。在Apache中，只须要在配置文件中简单添加下面一行代码就能够了：
FileETag none

 

十五）make AJAX cacheable

(AJAX 缓存)。

可缓存的AJAX 
“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

十六）Use GET for AJEX requests

 使用GET来完成AJAX请求 
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，而后才发送数据。所以使用GET获取数据时更加有意义。

十七）Reduce the number of DOM elements

减小DOM元素数量 。

 

一个复杂的页面意味着须要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。好比当你增长一个事件句柄时在500和5000个DOM元素中循环效果确定是不同的。
大量的DOM元素的存在乎味着页面中有能够不用移除内容只须要替换元素标签就能够精简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div>元素呢？也许会存在一个适合或者在语意是更贴切的标签能够供你使用。
YUI CSS utilities能够给你的布局带来巨大帮助：grids.css能够帮你实现总体布局，font.css和reset.css能够帮助你移除浏览器默认格式。它提供了一个从新审视你页面中标签的机会，好比只有在语意上有意义时才使用<div>，而不是由于它具备换行效果才使用它。
DOM元素数量很容易计算出来，只须要在Firebug的控制台内输入：
document.getElementsByTagName('*').length
那么多少个DOM元素算是多呢？这能够对照有很好标记使用的相似页面。好比Yahoo!主页是一个内容很是多的页面，可是它只使用了700个元素（HTML标签）。

 

十八）Avoid HTTP 404(Not  Found )error

 避免404 。
有些站点把404错误响应页面改成“你是否是要找***”，这虽然改进了用户体验可是一样也会浪费服务器资源（如数据库等）。最糟糕的状况是指向外部 JavaScript的连接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分看成JavaScript代码来执行。 

 

HTTP请求时间消耗是很大的，所以使用HTTP请求来得到一个没有用处的响应（例如404没有找到页面）是彻底没有必要的，它只会下降用户体验而不会有一点好处。

 

十九）Reduce cookie size

减小Cookie的大小 

二十）Use cookie-free domains

使用无cookie的域 
好比图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减小了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

二一）Avoid AlphaImageLoader filter

不要使用滤镜 
png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg 

二二）Do not scale images in HTML

不要在HTML中缩放图片 

二三）Make favicon small and cacheable

 

 缩小favicon.ico并缓存