前端性能优化总结

   性能优化对于前端开发很是重要，不仅表现在平常的开发中，而且在面试中也是经常被问起的问题。

所以总结一下性能优化的常用方式。

1.减少dom操作

 修改和访问DOM元素会造成页面的重绘和回流，循环对DOM操作更是罪恶的行为，因为对dom的操作是高昂的。

在这里做个比喻：如果将javascript比作一座收费的岛，那么将dom比作轮船，每进入一次岛便要收一次费，想想，如果页面中不停的对dom进行操作，那么这样的代价是很高昂的。

html页面显示过程：

•解析HTML，并生成一棵dom树
•解析各种样式并结合dom树生成一棵渲染树
•对渲染树的各个节点计算布局信息，比如box的位置与尺寸等
•根据渲染树并利用浏览器的UI层进行绘制流程。

   其中，第三步，对渲染树的各个结点计算布局信息为时间占用较大的一部分，而在这一步中，包含了布局，设计空间，布局，设计空间操作   ，是对渲染树中对象的大小、尺寸进行计算，在默认情况下，浏览器的布局为lazy模式，也就是说，并非每次我们对DOM进行修改时都会布局   ，而是将这些修改存储在一个队列中，在一定的情况下统一提交队列 ，进而实现布局操作。

所以，避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：

(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
(4).改变DOM，包括添加，修改，删除DOM,改变DOM的样式类等都是会引起浏览器渲染，因此应该减少对其不必要的操作。
(5).减少iframe, iframe需要消耗大量的时间，并阻塞下载，应该少用。
(6).样式放在head中，脚本放在关闭标签之前, 样式放在head中，可以加快渲染，脚本放在关闭标签之前可以加快下载速度，不免阻塞下载。
(7).创建事件监听,现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听.

2.在部署项目前，对代码，图片进行压缩

     代码压缩（也称代码最小化）是一个从源代码中消除所有不必要的字符的过程，包括删除所有不必要的空格字符、新行字符、评论等。     代码压缩不影响源代码的功能，却提高加载时间（和web应用程序的性能），因为，要下载的文件的大小减少了。

(1).YUI Compressor
　　Yahoo出品！YUI Compressor是一个用Java编写，帮你最小化JavaScript文件的命令行工具。很安全，而且比其他的工具的压缩比率更高。不仅如此，YUI Compressor也可以压缩CSS文件。
　　
(2).Google Closure Compiler
Google Closure Compiler是一个让JavaScript下载、运行得更快的工具。用机器语言代替源语言，让你可以在JavaScript中编译更好的JavaScript。你可以使用它解析JavaScript，分析、删除无用代码，重写和压缩剩余代码等等。它也可以检查语法、变量引用和类型,并对常见的JavaScript错误做出提示。

(3).JSMin
JSMin可以从JavaScript文件中删除评论和不必要的空格，它通常可以减少一半大小，使下载速度更快。它还鼓励更富有表现力的编程风格。

(4).Packer
Packer是一个比较流行的JavaScript压缩工具，可以自动创建压缩版的代码。你只需要粘贴然后点击”Pack”按钮。它可以实现高压缩，用JavaScript运行时增加高级的动态压缩。

(5).Dojo ShrinkSafe
ShrinkSafe也是比较常用的JavaScript代码压缩工具。根据你的编程风格，它可以减少脚本的大小的三分之一或更多。最重要的是，ShrinkSafe永远不会改变公共变量或API，也就是说，你可以把压缩版本的JavaScript放入你的页面但不改变使用它的代码。

 图片压缩工具在网上一般都能搜到，在部署代码前将图片进行压缩也是提高加载时间的好方法。 

3.优化js代码结构，减少冗余代码

(1).把不重要的JS放在页面最底部
这是最简单，也是效果最好的优化方法，把不重要的JS通通放到页面的最下面body的上面，实现异步加载，也就是等网页都加载完了，最后在加载这些不重要的JS，这样就不影响网页速度了。
(2).合并JS文件
合并JS，也就是减少HTTP请求，少给服务器请求一次就加快一点速度，而合并两个原本独立的JS就需要点技术了，告诉大家一个最简单的方法：
不管三七二十一，先把A文件直接粘贴到B文件中，合并后删除网页中的A文件，如果网页运行正常，就OK；如果一些特效失效，那就还原，换C文件合并。总会有两个不冲突的JS文件的。

如此做便会大幅降低js请求次数，有效减少页面渲染被阻塞的情况，提升页面加载速度。
(3).将js代码压缩
因为空行等问题，有时候使用这类工具会使JS功能失效，而最简单的办法是用Dreamweaver，把压缩后的JS放入DW中，DW会自动提示你那里有误，把错误的地方另起一行，或还原回去即可。

4.减少http请求，合理设置http缓存

(1).图片地图（Image Maps）
图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
以导航栏为例，当点击图标的时候将打开一个新的窗口，如果导航栏是以五个图片来显示的，那么，我们可以通过使用五个分开的图片，然后让每个图片对应一个超链接。

然而这样无疑就产生了5个Http请求，我们的目标是要减少HTTP请求，这里图片地图就可以派上用场了，通过将五个图片合并为一张图片，然后以位置信息定位超链接，这样就把HTTP请求减少为一个了，又可以保证设计的完整性和功能的齐全性，实现代码如下：

<img usemap="#map1" border=0 src=""><map name="map1">    <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">    <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">    <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">    <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">    <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help"></map>

(2).CSS Sprites（CSS精灵）
图片是增加HTTP请求的最大可能者，把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。

这种方法把CSS写到HMTL文件里，而不采用外部调用，与Div+CSS中「表现与内容分离、把CSS都立出来」相悖，缺点就是不利于SEO；当然，从整体上减少HTTP请求、提高页面载入速度，是有利于SEO的。

这里重点提一下backgroud-position属性。backgroud-position:x y; x和y可以写负值也可以写正值，我们可以想象图片的左上方为(0,0)，以(0,0)坐标向右是为负数的x轴，以(0,0)坐标向下是为负数的y轴。正值的情况则以图片左下方为(0,0)，向右是为正数的x轴，向上是为正数的y轴。

通常情况下，前端切图得到的是一张张小图标，要将其合并为一张图，可以使用专门的工具，例如CSS Sprite Generator，这个工具不仅可以合并图片，同时还可以生成图片的css样式。

与图片地图做一个对比：图片地图是依赖于html实现，CSS精灵依赖于CSS实现，CSS精灵的实现方式更为灵活。

(3).合并脚本和CSS文件
合并脚本和CSS文件，可以减少了HTTP请求。有的人喜欢把CSS分成结构清晰的几个部分，比如base.css、header.css、mianbody.css、 footer.css这样对页面的维护和修改是比较方便的，但是对加快服务器响应时间就存在问题了。

(4).少用location.reload()
　　使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器。
　　建议使用location.href=”当前页url” 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。

(5).动态页面静态化
　　动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
　　用户访问动态页面需要与数据库服务器进行数据交换。

5.使用内容分发cdn加速

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

6.静态资源缓存

静态资源缓存是WEB服务器优化的一种手段，基本原理如下：

(1).客户端浏览器请求服务器一个服务(该服务含有图片，js等静态资源)，通常会对于每一个网页中的独立图片或js文件发送一个http请求.

(2).WEB服务器对于每个资源HTTP请求进行解析，并生成一个资源修改时间的唯一值（可以是etag或last_modified参数），放入服务器端map，key为资源url，value为资源修改时间。最后将此资源修改时间的唯一值包含在http头上返回，因为是首次请求，所以会将所有内容放在http body中一并返回给客户浏览器端.

(3).客户浏览器接收服服务器响应，并将服务器返回的资源修改时间作为key放入浏览器客户端，value为http body中的实际资源内容

(4).客户浏览器再次请求静态资源时，会将资源修改时间一并发送给服务器

(5).服务端会从最新的map中取出该资源url对应的修改时间，如果值晚于客户端请求的资源修改时间，这时会返回最新的已经修改过的资源给客户端。否则返回304 not modifed

7.图片延迟加载（用户懒加载）

本人博客中有讲到用户懒加载的方法：
http://blog.csdn.net/pedrojuliet/article/details/53418993